added room action button.

client/src/components/RoomActionBtn.vue

@@ -0,0 +1,95 @@
+<template>
+  <v-btn v-if="tmpl" @click="Action" :color="tmpl.color" :disabled="disabled" :loading="loading" icon><v-icon>{{ tmpl.icon }}</v-icon></v-btn>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+@Component
+export default class RoomActionBtn extends Vue {
+  @Prop(String) readonly action: string | undefined
+  @Prop(String) readonly roomId: string | undefined
+  @Prop(Boolean) readonly disabled: boolean | undefined
+
+  private loading = false
+
+  // eslint-disable-next-line
+  get tmpl(): any | undefined {
+    switch (this.action) {
+      case 'start':
+        return {
+          dispatch: 'ROOMS_START',
+          msg: 'Room started!',
+          color: 'green',
+          icon: 'mdi-play-circle-outline',
+        }
+      case 'stop':
+        return {
+          dispatch: 'ROOMS_STOP',
+          msg: 'Room stopped!',
+          color: 'warning',
+          icon: 'mdi-stop-circle-outline',
+        }
+      case 'restart':
+        return {
+          dispatch: 'ROOMS_RESTART',
+          msg: 'Room restarted!',
+          color: 'blue',
+          icon: 'mdi-refresh',
+        }
+      case 'remove':
+        return {
+          dispatch: 'ROOMS_REMOVE',
+          msg: 'Room removed!',
+          color: 'red',
+          icon: 'mdi-trash-can-outline',
+        }
+    }
+
+    return undefined
+  }
+
+  async Action() {
+    if (!this.tmpl) return
+
+    if (this.action === 'remove') {
+      const { value } = await this.$swal({
+        title: "Remove room",
+        text: "Do you really want to remove this room?",
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonText: "Yes",
+        cancelButtonText: "No",
+      })
+
+      if (!value) return
+    }
+
+    this.loading = true
+  
+    try {
+      await this.$store.dispatch(this.tmpl.dispatch, this.roomId)
+      this.$swal({
+        title: this.tmpl.msg,
+        icon: 'success',
+      })
+    } catch(e) {
+      if (e.response) {
+        this.$swal({
+          title: 'Server error',
+          text: e.response.data,
+          icon: 'error',
+        })
+      } else {
+        this.$swal({
+          title: 'Network error',
+          text: String(e),
+          icon: 'error',
+        })
+      }
+    } finally {
+      this.loading = false
+    }
+  }
+}
+</script>

client/src/components/RoomsList.vue

@@ -8,56 +8,56 @@
     hide-default-footer
   >
     <template v-slot:[`item.url`]="{ item }">
-      <a :href="item.url"> Link </a>
+      <v-btn :disabled="!item.running" :href="item.url" target="_blank" small> <v-icon small>mdi-open-in-new</v-icon></v-btn>
     </template>
     <template v-slot:[`item.max_connections`]="{ item }">
       <span v-if="item.max_connections">{{ item.max_connections }}</span>
       <i v-else>--not-specified--</i>
     </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 v-slot:[`item.status`]="{ item }">
+      <v-chip :color="item.running ? 'green' : 'red'" dark small> {{ item.status }} </v-chip>
     </template>
     <template v-slot:[`item.created`]="{ item }">
       {{ item.created | timeago }}
     </template>
     <template v-slot:[`item.actions`]="{ item }">
-      <v-btn @click="() => RoomStart(item.id)" class="mb-3" color="green" icon :disabled="item.running"><v-icon>mdi-play-circle-outline</v-icon></v-btn>
-      <v-btn @click="() => RoomStop(item.id)" class="mb-3" color="warning" icon :disabled="!item.running"><v-icon>mdi-stop-circle-outline</v-icon></v-btn>
-      <v-btn @click="() => RoomRestart(item.id)" class="mb-3" color="blue" icon :disabled="!item.running"><v-icon>mdi-refresh</v-icon></v-btn>
+      <RoomActionBtn action="start" :roomId="item.id" :disabled="item.running" />
+      <RoomActionBtn action="stop" :roomId="item.id" :disabled="!item.running" />
+      <RoomActionBtn action="restart" :roomId="item.id" :disabled="!item.running" />
     </template>
     <template v-slot:[`item.destroy`]="{ item }">
-      <v-btn @click="() => RoomRemove(item.id)" class="mb-3" color="red" icon :loading="deleteLoading"><v-icon>mdi-trash-can-outline</v-icon></v-btn>
+      <RoomActionBtn action="remove" :roomId="item.id" :disabled="!item.running" />
     </template>
   </v-data-table>
 </template>
 
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator'
+import RoomActionBtn from '@/components/RoomActionBtn.vue'
 
-@Component
+@Component({
+  components: {
+    RoomActionBtn,
+  }
+})
 export default class RoomsList extends Vue {
   @Prop(Boolean) readonly loading: boolean = false
 
-  private deleteLoading = false
   private headers = [
+    { text: 'Address', value: 'url' },
     { 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' },
     {
       text: 'Actions',
       value: 'actions',
-      align: 'end',
       sortable: false,
     },
     {
       text: 'Destroy',
       value: 'destroy',
-      align: 'end',
       sortable: false,
     },
   ]
@@ -65,87 +65,5 @@ export default class RoomsList extends Vue {
   get rooms() {
     return this.$store.state.rooms
   }
-
-  async RoomStart(roomId: string) {
-    try {
-      await this.$store.dispatch('ROOMS_START', roomId)
-      await this.$swal({
-        title: 'Room started!',
-        icon: 'success',
-      })
-    } catch(e) {
-      this.handeErrors(e)
-    }
-  }
-
-  async RoomStop(roomId: string) {
-    try {
-      await this.$store.dispatch('ROOMS_STOP', roomId)
-      await this.$swal({
-        title: 'Room stopped!',
-        icon: 'success',
-      })
-    } catch(e) {
-      this.handeErrors(e)
-    }
-  }
-
-  async RoomRestart(roomId: string) {
-    try {
-      await this.$store.dispatch('ROOMS_RESTART', roomId)
-      await this.$swal({
-        title: 'Room restarted!',
-        icon: 'success',
-      })
-    } catch(e) {
-      this.handeErrors(e)
-    }
-  }
-
-  async RoomRemove(roomId: string) {
-    const { value } = await this.$swal({
-      title: "Remove room",
-      text: "Do you really want to remove this room?",
-      icon: 'warning',
-      showCancelButton: true,
-      confirmButtonText: "Yes",
-      cancelButtonText: "No",
-    })
-
-    if (!value) {
-      return
-    }
-
-    this.deleteLoading = true
-
-    try {
-      await this.$store.dispatch('ROOMS_REMOVE', roomId)
-      await this.$swal({
-        title: 'Room removed!',
-        icon: 'success',
-      })
-    } catch(e) {
-      this.handeErrors(e)
-    } finally {
-      this.deleteLoading = false
-    }
-  }
-
-  // eslint-disable-next-line
-  handeErrors(e: any) {
-    if (e.response) {
-      this.$swal({
-        title: 'Server error',
-        text: e.response.data,
-        icon: 'error',
-      })
-    } else {
-      this.$swal({
-        title: 'Network error',
-        text: String(e),
-        icon: 'error',
-      })
-    }
-  }
 }
 </script>