Fix up the toolbar. Fix up the edit page.

src/Router.vue

@@ -1,5 +1,11 @@
 <template>
   <Toolbar>
+    <template #start>
+      <Button label="Home" as="a" href="/" />
+    </template>
+    <template #center>
+      <a :href="tableLink()"> {{ tableLink() }} </a>
+    </template>
     <template #end>
       <Button :label="displayUsername()" @click="visible = true" />
     </template>
@@ -17,11 +23,27 @@ import Dialog from 'primevue/dialog'
 import Login from './Login.vue'
 
 import { useUserData } from './user'
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
+import { useSelectedTable } from './game_tables.ts'
 
 const userRef = useUserData()
-
+const selectedTableRef = useSelectedTable()
 const visible = ref(false)
+const linkVisible = ref(false)
+const hostname = ref()
+
+onMounted(() => {
+  hostname.value = location.host
+})
+
+function tableLink() {
+  if (selectedTableRef.value.table_link == "None") {
+    linkVisible.value = false
+    return ""
+  }
+  linkVisible.value = true
+  return 'http://' + selectedTableRef.value.table_link + '.' + hostname.value
+}
 
 function displayUsername(): string {
   const authenticated = userRef.value.authenticated

src/TableEditor.vue

@@ -1,22 +1,5 @@
 <template>
-  <Toolbar>
+  <div class="flex flex-row">
-    <template #start>
-      <Button as="a" href="/">Back</Button>
-    </template>
-    <template #center>
-      <a :href="'/' + table.table_link"> http://{{ hostname }}/{{ table.table_link }} </a>
-    </template>
-  </Toolbar>
-  {{
-    isTableInactive()
-      ? 'inactive'
-      : isTableLoading()
-        ? 'loading'
-        : isTableReady()
-          ? 'ready'
-          : 'what'
-  }}
-  <Form v-slot="$form" class="flex flex-row">
     <Card class="detailCard flex">
       <template #title>
         {{ table.table_name }}
@@ -24,10 +7,7 @@
       <template #subtitle>
         <div>
           Status:
-          <Chip
+          <Chip :class="table.active ? 'active' : 'inactive'" :label="table.active ? 'active' : 'inactive'" />
-            :class="table.active ? 'active' : 'inactive'"
-            :label="table.active ? 'active' : 'inactive'"
-          />
         </div>
       </template>
       <template #content>
@@ -44,33 +24,23 @@
       </template>
     </Card>
 
+    <Form :key="forceReset" ref="edit-form" :initialValues="activeTable" @submit="save">
       <Card class="detailCard flex">
         <template #title> Edit Details </template>
         <template #content>
           <div class="flex flex-column">
-          <InputText
+            <InputText class="button-box" name="table_name" type="text" placeholder="Table Name" />
-            class="button-box"
+            <InputText class="button-box" name="table_link" type="text" placeholder="Table Link" />
-            name="tableName"
+            <Dropdown class="button-box" name="version" :options="availableVersion"></Dropdown>
-            type="text"
-            placeholder="Table Name"
-            v-model="tableName"
-          />
-          <InputText
-            class="button-box"
-            name="tableLink"
-            type="text"
-            placeholder="Table Link"
-            v-model="tableLink"
-          />
-          <Dropdown class="button-box" v-model="version" :options="availableVersion"></Dropdown>
           </div>
         </template>
         <template #footer>
-        <Button class="button-box" label="Save" @click="save()" />
+          <Button class="button-box" type="submit" label="Save" />
-        <Button class="button-box" label="Clear" />
+          <Button class="button-box" type="reset" label="Clear" />
         </template>
       </Card>
     </Form>
+  </div>
 </template>
 
 <style>
@@ -92,8 +62,7 @@
   margin: 5px;
 }
 
-.active-foundry-stats {
+.active-foundry-stats {}
-}
 
 .inactive-foundry-stats {
   display: none;
@@ -102,7 +71,7 @@
 
 <script setup lang="ts">
 import axios from 'axios'
-import { reactive, ref, watch, onMounted, onUnmounted } from 'vue'
+import { reactive, ref, useTemplateRef, onMounted, watch, onUnmounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { Form } from '@primevue/forms'
 import InputText from 'primevue/inputtext'
@@ -112,20 +81,24 @@ import Chip from 'primevue/chip'
 import Dropdown from 'primevue/dropdown'
 import Toolbar from 'primevue/toolbar'
 
+import type { FormInstance } from '@primevue/forms'
+
 import {
-  GameTable,
   useSelectedTable,
-  startTable,
+  loadSelectedTable,
+  //  startTable,
   hardStartTable,
-  stopTable,
+  //  stopTable,
   updateTable,
-  deleteTable,
+  //  deleteTable,
 } from './game_tables'
 
+import type { GameTable } from './game_tables'
 import type { Ref } from 'vue'
 
 const hostname = ref()
 const route = useRoute()
+const editForm = useTemplateRef('edit-form')
 
 const table = reactive({
   table_name: 'default',
@@ -134,7 +107,8 @@ const table = reactive({
   version: 0,
 })
 
-const activeTable: Ref<Table>
+const activeTable: Ref<GameTable> = useSelectedTable()
+const forceReset = ref(0)
 
 const foundryStatus = reactive({
   running: false,
@@ -149,12 +123,8 @@ const currentUser = ref({
   is_admin: 'False',
 })
 
-const version = ref(12)
 const availableVersion = ref([11, 12])
 
-const tableName = ref()
-const tableLink = ref()
-
 var interval: number
 
 onMounted(() => {
@@ -164,6 +134,7 @@ onMounted(() => {
   }, 2000)
 
   loadTable()
+  loadSelectedTable(+route.params.id!)
 
   axios.get('/api/auth/user').then((resp) => (currentUser.value = resp.data))
 
@@ -175,26 +146,11 @@ onUnmounted(() => {
   clearInterval(interval)
 })
 
-watch(
-  () => route.params.id,
-  (newValue) => {
-    console.log(newValue)
-    axios.get(`/api/tables/${newValue}`).then((resp) => {
-      table.table_name = resp.data.table_name
-      table.table_link = resp.data.table_link
-      table.active = resp.data.active
-      console.log('tick')
-    })
-  },
-)
-
 function readTable() {
   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
   })
 }
 
@@ -215,6 +171,9 @@ function readFoundryStatus() {
     })
   }
 }
+watch(activeTable, () => {
+  forceReset.value++
+})
 
 function loadTable() {
   axios
@@ -223,8 +182,6 @@ function loadTable() {
       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
       return axios.get(`/${table.table_link}/api/status`)
     })
     .then((resp) => {
@@ -234,11 +191,15 @@ function loadTable() {
     })
 }
 
-function save() {
+function save(form: any) {
-  axios.post(`/api/tables/${route.params.id}`, {
+  console.log(form)
-    table_name: tableName.value,
+  updateTable(activeTable.value.id, {
-    table_link: tableLink.value,
+    id: activeTable.value.id,
-    version: version.value,
+    table_name: form.values.table_name,
+    table_link: form.values.table_link,
+    active: activeTable.value.active,
+    version: form.values.version,
+    user_id: activeTable.value.user_id
   })
 }
 

src/TableList.vue

@@ -8,10 +8,7 @@
 
     <Column field="table_link" header="Table Link">
       <template #body="slotProps">
-        <a
+        <a v-if="slotProps.data.active" :href="'http://' + slotProps.data.table_link + '.' + hostname">
-          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">
@@ -30,11 +27,7 @@
       <template #body="slotProps">
         <div class="flex flex-row">
           <span class="flex"></span>
-          <SplitButton
+          <SplitButton label="Start" @click="startTable(slotProps.data)" :model="buildButtonModel(slotProps.data)" />
-            label="Start"
-            @click="startTable(slotProps.data)"
-            :model="buildButtonModel(slotProps.data)"
-          />
         </div>
       </template>
     </Column>
@@ -47,19 +40,14 @@
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
-import axios from 'axios'
 import Button from 'primevue/button'
 import DataTable from 'primevue/datatable'
 import Column from 'primevue/column'
-import Card from 'primevue/card'
 import SplitButton from 'primevue/splitbutton'
 import ConfirmDialog from 'primevue/confirmdialog'
 import { useConfirm } from 'primevue/useconfirm'
 
 import {
-  GameTable,
-  useActiveTables,
-  useAllTables,
   startTable,
   hardStartTable,
   stopTable,

src/TableManager.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router'
+import { useActiveTables, useAllTables } from './game_tables'
-import { GameTable, useActiveTables, useAllTables } from './game_tables'
 
 import TableList from './TableList.vue'
 import Button from 'primevue/button'
 import Card from 'primevue/card'
 
-const router = useRouter()
 const allTables = useAllTables()
 const activeTables = useActiveTables()
 </script>

src/game_tables.ts

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { ref, computed, onMounted } from 'vue'
+import { ref } from 'vue'
 import type { Ref } from 'vue'
 
 export interface GameTable {
@@ -11,12 +11,11 @@ export interface GameTable {
   user_id: number
 }
 
-let selectedTableId: number = 0
 let $selectedTable: Ref<GameTable> | undefined
 let $activeTables: Ref<Array<GameTable>> | undefined
 let $allTables: Ref<Array<GameTable>> | undefined
 
-export function useActiveTables(): Ref<Array<GameTeable>> {
+export function useActiveTables(): Ref<Array<GameTable>> {
   if (!$activeTables) $activeTables = ref([])
   loadActiveTables()
   return $activeTables
@@ -38,24 +37,22 @@ export function useSelectedTable(): Ref<GameTable> {
       version: 0,
       user_id: 0,
     })
-  return $selectdTable
+  return $selectedTable
 }
 
 export function loadActiveTables(): void {
   if ($activeTables)
-    axios.get('/api/tables/active').then((resp) => ($activeTables.value = resp.data))
+    axios.get('/api/tables/active').then((resp) => ($activeTables!.value = resp.data))
 }
 
 export function loadAllTables(): void {
-  if ($allTables) 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 loadSelectedTable(tableId: number): void {
+export function loadSelectedTable(tableId: number = 0): void {
   if ($selectedTable) {
-    let id = tableId || $selectedTable.id
+    let id = tableId || $selectedTable.value.id
-    return axios
+    axios.get(`/api/tables/${id}`).then((resp) => ($selectedTable!.value = resp.data))
-      .get(`/api/tables/${id}`)
-      .then((resp) => ($selectedTable.value = resp.data))
   }
 }
 
@@ -84,10 +81,11 @@ export function stopTable(gameTable: GameTable): void {
 }
 
 export function createTable(): Promise<number> {
-  axios.post().then((resp) => resp.data.id)
+  return axios.post(`/api/tables`, {}).then((resp) => resp.data.id)
 }
 
 export function updateTable(tableId: number, updatedTable: GameTable): void {
+  console.log(updatedTable)
   axios
     .post(`/api/tables/${tableId}`, {
       table_name: updatedTable.table_name,

src/user.ts

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { ref, computed, onMounted } from 'vue'
+import { ref, readonly, onMounted } from 'vue'
 import type { Ref } from 'vue'
 
 export interface User {
@@ -9,9 +9,6 @@ export interface User {
 }
 
 const $current_user = ref({ id: 0, username: 'username', is_admin: false, authenticated: false })
-export const current_user = computed((): User => {
-  return computed($current_user)
-})
 
 function loadCurrentUser(): void {
   axios.get('/api/auth/user').then((resp) => {
@@ -24,7 +21,7 @@ export function useUserData(): Ref<User> {
     loadCurrentUser()
   })
 
-  return $current_user
+  return readonly($current_user)
 }
 
 export function login(username: string, password: string): void {