From 433344e401a9c51ae03ee125b29b1b6c1468d3f2 Mon Sep 17 00:00:00 2001
From: m1k1o <sedivy.miro@gmail.com>
Date: Mon, 8 Mar 2021 20:20:14 +0100
Subject: [PATCH] add room list.

---
 client/src/components/RoomsList.vue | 38 +++++++++++++++++++++++++----
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/client/src/components/RoomsList.vue b/client/src/components/RoomsList.vue
index 0ad1f29..316d4b5 100644
--- a/client/src/components/RoomsList.vue
+++ b/client/src/components/RoomsList.vue
@@ -1,11 +1,39 @@
 <template>
-  <div>
-    RoomsList
-  </div>
+  <v-data-table
+    :headers="headers"
+    :items="rooms"
+    class="elevation-1"
+  >
+    <template v-slot:[`item.url`]="{ item }">
+      <a :href="item.url"> Link </a>
+    </template>
+    <template v-slot:[`item.running`]="{ item }">
+      <v-chip color="green" dark small v-if="item.running">yes</v-chip>
+      <v-chip color="red" dark small v-else>no</v-chip>
+    </template>
+    <template v-slot:[`item.created`]="{ item }">
+      {{ item.created | timeago }}
+    </template>
+  </v-data-table>
 </template>
 
 <script lang="ts">
-import { Vue } from 'vue-property-decorator'
+import { Vue, Component } from 'vue-property-decorator'
 
-export default class RoomsList extends Vue {}
+@Component
+export default class RoomsList extends Vue {
+  private headers = [
+    { text: 'Name', value: 'name' },
+    { text: 'Link', value: 'url' },
+    { text: 'Max connections', value: 'max_connections' },
+    { text: 'Image', value: 'image' },
+    { text: 'Running', value: 'running' },
+    { text: 'Status', value: 'status' },
+    { text: 'Created', value: 'created' },
+  ]
+
+  get rooms() {
+    return this.$store.state.rooms
+  }
+}
 </script>