messing with status reads

src/CreateTable.vue

@@ -5,21 +5,24 @@ import { useRouter } from 'vue-router'
 import InputText from 'primevue/inputtext'
 import Button from 'primevue/button'
 import Card from 'primevue/card'
-import Dropdown from 'primevue/dropdown';
+import Dropdown from 'primevue/dropdown'
 
 const router = useRouter()
-const table_name = ref("Default Table Name")
-const table_link = ref("default_table_link")
+const table_name = ref('Default Table Name')
+const table_link = ref('default_table_link')
 const version = ref(12)
 
-const availableVersion = ref([
-  11, 12
-]);
+const availableVersion = ref([11, 12])
 
 function saveTable() {
-  axios.post('/api/tables', { "table_name": table_name.value, "table_link": table_link.value, "version": version.value }).then(() => router.push({ name: "home" }))
+  axios
+    .post('/api/tables', {
+      table_name: table_name.value,
+      table_link: table_link.value,
+      version: version.value,
+    })
+    .then(() => router.push({ name: 'home' }))
 }
-
 </script>
 
 <style>
@@ -49,5 +52,4 @@ function saveTable() {
       <Button class="button-box" label="Clear" />
     </template>
   </Card>
-
 </template>

src/TableEditor.vue

@@ -6,7 +6,15 @@
       </template>
       <template #subtitle>
         Status:
-        <Chip :class="table.active ? 'active' : 'inactive'" :label="table.active ? 'active' : 'inactive'" />
+        <Chip
+          :class="table.active ? 'active' : 'inactive'"
+          :label="table.active ? 'active' : 'inactive'"
+        />
+      </template>
+      <template #content>
+        <div>Table Status: {{tableStatus.active}}</div>
+        <div>World: {{tableStatus.world}}</div>
+        <div>Users: {{tableStatus.users}}</div>
       </template>
       <template #footer>
         <Button class="button-box" label="Start" />
@@ -19,8 +27,20 @@
       <template #title> Edit Details </template>
       <template #content>
         <div class="flex flex-column">
-          <InputText class="button-box" name="tableName" type="text" placeholder="Table Name" v-model="tableName" />
-          <InputText class="button-box" name="tableLink" type="text" placeholder="Table Link" v-model="tableLink" />
+          <InputText
+            class="button-box"
+            name="tableName"
+            type="text"
+            placeholder="Table Name"
+            v-model="tableName"
+          />
+          <InputText
+            class="button-box"
+            name="tableLink"
+            type="text"
+            placeholder="Table Link"
+            v-model="tableLink"
+          />
         </div>
       </template>
       <template #footer>
@@ -68,22 +88,34 @@ const table = reactive({
   active: 0,
   version: 0,
 })
+const tableStatus = reactive({
+  active: false,
+  world: "",
+  users: 0
+})
+
 
 const tableName = ref()
 const tableLink = ref()
 
 onMounted(() => {
-
-  if (Number(route.params.id) == 0) {
-  } else {
-    axios.get(`/api/tables/${route.params.id}`).then((resp) => {
+  axios
+    .get(`/api/tables/${route.params.id}`)
+    .then((resp) => {
       table.table_name = resp.data.table_name
       table.table_link = resp.data.table_link
       table.active = resp.data.active
       tableName.value = resp.data.table_name
       tableLink.value = resp.data.table_link
+      console.log(table)
+      return axios.get(`/${table.table_link}/api/status`)
+    })
+    .then((resp) => {
+      tableStatus.active = resp.data.active
+      tableStatus.world = resp.data.world
+      tableStatus.users = resp.data.users
+      console.log(resp)
     })
-  }
 })
 
 watch(

src/TableManager.vue

@@ -22,26 +22,23 @@ onMounted(() => {
 })
 
 async function loadTables(): Promise<void> {
-  return axios.get('/api/tables/all')
+  return axios
+    .get('/api/tables/all')
     .then((resp) => (allTables.value = resp.data))
     .then(() => axios.get('/api/tables/active'))
     .then((resp) => (activeTables.value = resp.data))
 }
 
 function startTable(tableId: number) {
-  axios.post(`/api/tables/${tableId}:start`, { "hard": "False" })
-    .then(() => loadTables())
+  axios.post(`/api/tables/${tableId}:start`, { hard: 'False' }).then(() => loadTables())
 }
 
 function stopTable(tableId: number) {
-  axios.post(`/api/tables/${tableId}:stop`)
-    .then(() => loadTables())
+  axios.post(`/api/tables/${tableId}:stop`).then(() => loadTables())
 }
 
 function deleteTable(tableId: number) {
-  axios
-    .delete(`/api/tables/${tableId}`)
-    .then(() => loadTables())
+  axios.delete(`/api/tables/${tableId}`).then(() => loadTables())
 }
 
 function buildButtonModel(table: any) {
@@ -56,8 +53,8 @@ function buildButtonModel(table: any) {
     {
       label: 'Hard Start',
       command: () => {
-        axios.post(`/api/tables/${table.id}:start`, { "hard": "True" }).then(() => loadTables())
-      }
+        axios.post(`/api/tables/${table.id}:start`, { hard: 'True' }).then(() => loadTables())
+      },
     },
     { separator: true },
     {
@@ -66,13 +63,14 @@ function buildButtonModel(table: any) {
         confirm.require({
           header: `Delete ${table.table_name}?`,
           message: "This will delete the table and all of it's data",
-          accept: () => { deleteTable(table.id) },
+          accept: () => {
+            deleteTable(table.id)
+          },
         })
       },
     },
   ]
 }
-
 </script>
 
 <style>
@@ -157,15 +155,18 @@ function buildButtonModel(table: any) {
           <template #body="slotProps">
             <div class="flex flex-row">
               <span class="flex"></span>
-              <SplitButton label="Start" @click="startTable(slotProps.data.id)"
-                :model="buildButtonModel(slotProps.data)" />
+              <SplitButton
+                label="Start"
+                @click="startTable(slotProps.data.id)"
+                :model="buildButtonModel(slotProps.data)"
+              />
             </div>
           </template>
         </Column>
       </DataTable>
       <div class="button-box flex justify-content-end">
         <router-link to="/new">
-          <Button label="New Table"" />
+          <Button label="New Table" />
         </router-link>
       </div>
     </template>

src/main.ts

@@ -12,7 +12,7 @@ import ConfirmationService from 'primevue/confirmationservice'
 const routes = [
   { name: 'home', path: '/', component: TableManager },
   { name: 'edit', path: '/edit/:id', component: TableEditor },
-  { name: 'new', path: '/new', component: CreateTable }
+  { name: 'new', path: '/new', component: CreateTable },
 ]
 
 const router = createRouter({