Update some silly ts stuff. move things into 'use' whatevers.

src/TableEditor.vue

@@ -112,6 +112,18 @@ import Chip from 'primevue/chip'
 import Dropdown from 'primevue/dropdown'
 import Toolbar from 'primevue/toolbar'
 
+import {
+  GameTable,
+  useSelectedTable,
+  startTable,
+  hardStartTable,
+  stopTable,
+  updateTable,
+  deleteTable,
+} from './game_tables'
+
+import type { Ref } from 'vue'
+
 const hostname = ref()
 const route = useRoute()
 
@@ -122,6 +134,8 @@ const table = reactive({
   version: 0,
 })
 
+const activeTable: Ref<Table>
+
 const foundryStatus = reactive({
   running: false,
   active: false,

src/TableList.vue

@@ -1,3 +1,48 @@
+<template>
+  <ConfirmDialog></ConfirmDialog>
+
+  <DataTable class="Tables" :value="props.gameTables">
+    <Column field="table_name" header="Table Name" />
+
+    <Column field="version" header="Ver"></Column>
+
+    <Column field="table_link" header="Table Link">
+      <template #body="slotProps">
+        <a
+          v-if="slotProps.data.active"
+          :href="'http://' + slotProps.data.table_link + '.' + hostname"
+        >
+          http://{{ slotProps.data.table_link }}.{{ hostname }}/
+        </a>
+        <div v-if="!slotProps.data.active">
+          http://{{ slotProps.data.table_link }}.{{ hostname }}/
+        </div>
+      </template>
+    </Column>
+
+    <Column header="Actions" v-if="showClose">
+      <template #body="slotProps">
+        <Button label="Close" @click="stopTable(slotProps.data)" />
+      </template>
+    </Column>
+
+    <Column header="Actions" v-if="props.showFullActions">
+      <template #body="slotProps">
+        <div class="flex flex-row">
+          <span class="flex"></span>
+          <SplitButton
+            label="Start"
+            @click="startTable(slotProps.data)"
+            :model="buildButtonModel(slotProps.data)"
+          />
+        </div>
+      </template>
+    </Column>
+  </DataTable>
+</template>
+
+<style></style>
+
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
@@ -66,44 +111,3 @@ function buildButtonModel(table: any) {
   ]
 }
 </script>
-
-<style>
-</style>
-
-<template>
-  <ConfirmDialog></ConfirmDialog>
-
-  <DataTable class="Tables" :value="props.gameTables">
-    <Column field="table_name" header="Table Name" />
-
-    <Column field="table_link" header="Table Link">
-      <template #body="slotProps">
-        <a v-if="slotProps.data.active" :href="'/' + slotProps.data.table_link">
-          http://{{ hostname }}/{{ slotProps.data.table_link }}
-        </a>
-        <div v-if="!slotProps.data.active">
-          http://{{ hostname }}/{{ slotProps.data.table_link }}
-        </div>
-      </template>
-    </Column>
-
-    <Column header="Actions" v-if="showClose">
-      <template #body="slotProps">
-        <Button label="Close" @click="stopTable(slotProps.data)" />
-      </template>
-    </Column>
-
-    <Column header="Actions" v-if="props.showFullActions">
-      <template #body="slotProps">
-        <div class="flex flex-row">
-          <span class="flex"></span>
-          <SplitButton
-            label="Start"
-            @click="startTable(slotProps.data)"
-            :model="buildButtonModel(slotProps.data)"
-          />
-        </div>
-      </template>
-    </Column>
-  </DataTable>
-</template>

src/TableManager.vue

@@ -1,10 +1,6 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
-import {
+import { GameTable, useActiveTables, useAllTables } from './game_tables'
-  GameTable,
-  useActiveTables,
-  useAllTables,
-} from './game_tables'
 
 import TableList from './TableList.vue'
 import Button from 'primevue/button'
@@ -49,7 +45,6 @@ const activeTables = useActiveTables()
 </style>
 
 <template>
-
   <Card class="ActiveTables">
     <template #title>
       <h2>Active Tables</h2>

src/game_tables.ts

@@ -7,34 +7,64 @@ export interface GameTable {
   table_name: string
   table_link: string
   active: boolean
+  version: number
+  user_id: number
 }
 
-const $activeTables: Ref<Array<GameTable>> = ref([])
+let selectedTableId: number = 0
-const $allTables: Ref<Array<GameTable>> = ref([])
+let $selectedTable: Ref<GameTable> | undefined
+let $activeTables: Ref<Array<GameTable>> | undefined
+let $allTables: Ref<Array<GameTable>> | undefined
 
 export function useActiveTables(): Ref<Array<GameTeable>> {
+  if (!$activeTables) $activeTables = ref([])
   loadActiveTables()
   return $activeTables
 }
 
 export function useAllTables(): Ref<Array<GameTable>> {
+  if (!$allTables) $allTables = ref([])
   loadAllTables()
   return $allTables
 }
 
+export function useSelectedTable(): Ref<GameTable> {
+  if (!$selectedTable)
+    $selectedTable = ref({
+      id: 0,
+      table_name: 'None',
+      table_link: 'None',
+      active: false,
+      version: 0,
+      user_id: 0,
+    })
+  return $selectdTable
+}
+
 export function loadActiveTables(): void {
-  axios.get('/api/tables/active').then((resp) => ($activeTables.value = resp.data))
+  if ($activeTables)
+    axios.get('/api/tables/active').then((resp) => ($activeTables.value = resp.data))
 }
 
 export function loadAllTables(): void {
-  axios.get('/api/tables/all').then((resp) => ($allTables.value = resp.data))
+  if ($allTables) axios.get('/api/tables/all').then((resp) => ($allTables.value = resp.data))
 }
 
-export function startTable(gameTable: GameTable) {
+export function loadSelectedTable(tableId: number): void {
+  if ($selectedTable) {
+    let id = tableId || $selectedTable.id
+    return axios
+      .get(`/api/tables/${id}`)
+      .then((resp) => ($selectedTable.value = resp.data))
+  }
+}
+
+export function startTable(gameTable: GameTable): void {
   axios
     .post(`/api/tables/${gameTable.id}:start`, { hard: 'False' })
     .then(() => loadAllTables())
     .then(() => loadActiveTables())
+    .then(() => loadSelectedTable())
 }
 
 export function hardStartTable(gameTable: GameTable): void {
@@ -42,18 +72,37 @@ export function hardStartTable(gameTable: GameTable): void {
     .post(`/api/tables/${gameTable.id}:start`, { hard: 'True' })
     .then(() => loadAllTables())
     .then(() => loadActiveTables())
+    .then(() => loadSelectedTable())
 }
 
-export function stopTable(gameTable: GameTable) {
+export function stopTable(gameTable: GameTable): void {
   axios
     .post(`/api/tables/${gameTable.id}:stop`)
     .then(() => loadAllTables())
     .then(() => loadActiveTables())
+    .then(() => loadSelectedTable())
 }
 
-export function deleteTable(gameTable: GameTable) {
+export function createTable(): Promise<number> {
+  axios.post().then((resp) => resp.data.id)
+}
+
+export function updateTable(tableId: number, updatedTable: GameTable): void {
+  axios
+    .post(`/api/tables/${tableId}`, {
+      table_name: updatedTable.table_name,
+      table_link: updatedTable.table_link,
+      version: updatedTable.version,
+    })
+    .then(() => loadAllTables())
+    .then(() => loadActiveTables())
+    .then(() => loadSelectedTable())
+}
+
+export function deleteTable(gameTable: GameTable): void {
   axios
     .delete(`/api/tables/${gameTable.id}`)
     .then(() => loadAllTables())
     .then(() => loadActiveTables())
+    .then(() => loadSelectedTable())
 }