Fix up the toolbar. Fix up the edit page.

2026-05-16 23:29:14 -07:00
parent 6ccf36a2d9
commit 8a7b0f1cc8
6 changed files with 84 additions and 120 deletions
--- a/src/Router.vue
+++ b/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
--- a/src/TableEditor.vue
+++ b/src/TableEditor.vue
@@ -1,22 +1,5 @@
 <template>
-  <Toolbar>
-    <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">
+  <div class="flex flex-row">
    <Card class="detailCard flex">
      <template #title>
        {{ table.table_name }}
@@ -24,10 +7,7 @@
      <template #subtitle>
        <div>
          Status:
-          <Chip
-            :class="table.active ? 'active' : 'inactive'"
-            :label="table.active ? 'active' : 'inactive'"
-          />
+          <Chip :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
-            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"
-          />
-          <Dropdown class="button-box" v-model="version" :options="availableVersion"></Dropdown>
+            <InputText class="button-box" name="table_name" type="text" placeholder="Table Name" />
+            <InputText class="button-box" name="table_link" type="text" placeholder="Table Link" />
+            <Dropdown class="button-box" name="version" :options="availableVersion"></Dropdown>
          </div>
        </template>
        <template #footer>
-        <Button class="button-box" label="Save" @click="save()" />
-        <Button class="button-box" label="Clear" />
+          <Button class="button-box" type="submit" label="Save" />
+          <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() {
-  axios.post(`/api/tables/${route.params.id}`, {
-    table_name: tableName.value,
-    table_link: tableLink.value,
-    version: version.value,
+function save(form: any) {
+  console.log(form)
+  updateTable(activeTable.value.id, {
+    id: activeTable.value.id,
+    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
  })
 }

@@ -255,7 +216,7 @@ function stopTable() {
  })
 }

-function deleteTable() {}
+function deleteTable() { }

 function isTableLoading() {
  return table.active && !foundryStatus.running
--- a/src/TableList.vue
+++ b/src/TableList.vue
@@ -8,10 +8,7 @@

    <Column field="table_link" header="Table Link">
      <template #body="slotProps">
-        <a
-          v-if="slotProps.data.active"
-          :href="'http://' + slotProps.data.table_link + '.' + hostname"
-        >
+        <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">
@@ -30,11 +27,7 @@
      <template #body="slotProps">
        <div class="flex flex-row">
          <span class="flex"></span>
-          <SplitButton
-            label="Start"
-            @click="startTable(slotProps.data)"
-            :model="buildButtonModel(slotProps.data)"
-          />
+          <SplitButton 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,
--- a/src/TableManager.vue
+++ b/src/TableManager.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router'
-import { GameTable, useActiveTables, useAllTables } from './game_tables'
+import { 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>
--- a/src/game_tables.ts
+++ b/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
-    return axios
-      .get(`/api/tables/${id}`)
-      .then((resp) => ($selectedTable.value = resp.data))
+    let id = tableId || $selectedTable.value.id
+    axios.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,
--- a/src/user.ts
+++ b/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 {