Update dropdown to select. Add in float labels. Further cleaning editor.

src/CreateTable.vue

@@ -5,12 +5,13 @@ 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 Select from 'primevue/select'
+import FloatLabel from 'primevue/floatlabel';
 
 const router = useRouter()
-const table_name = ref('Default Table Name')
-const table_link = ref('default_table_link')
-const version = ref(12)
+const table_name = ref()
+const table_link = ref()
+const version = ref()
 
 const availableVersion = ref([11, 12])
 
@@ -23,6 +24,12 @@ function saveTable() {
     })
     .then(() => router.push({ name: 'home' }))
 }
+
+function clear() {
+  table_name.value = null
+  table_link.value = null
+  version.value = null
+}
 </script>
 
 <style>
@@ -42,14 +49,25 @@ function saveTable() {
     <template #title> New Table Details </template>
     <template #content>
       <div class="flex flex-column">
-        <InputText class="button-box" type="text" placeholder="Table Name" v-model="table_name" />
-        <InputText class="button-box" type="text" placeholder="Table Link" v-model="table_link" />
-        <Dropdown class="button-box" v-model="version" :options="availableVersion"></Dropdown>
+        <FloatLabel variant="on">
+          <InputText id="table_name" class="button-box w-full" type="text" v-model="table_name" />
+          <label for="table_name">Table Name</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+          <InputText id="table_link" class="button-box w-full" type="text" v-model="table_link" />
+          <label for="table_link">Table Link</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+          <Select id="table_version" class="button-box w-full" v-model="version" :options="availableVersion"></Select>
+          <label for="table_version">Foundry Version</label>
+        </FloatLabel>
       </div>
     </template>
     <template #footer>
       <Button class="button-box" label="Save" @click="saveTable()" />
-      <Button class="button-box" label="Clear" />
+      <Button class="button-box" label="Clear" @click="clear()" />
     </template>
   </Card>
 </template>

src/Router.vue

@@ -1,7 +1,9 @@
 <template>
   <Toolbar>
     <template #start>
-      <Button label="Home" as="a" href="/" />
+      <Button asChild v-slot="slotProps">
+        <RouterLink to="/" :class="slotProps.class">Home</RouterLink>
+      </Button>
     </template>
     <template #center>
       <a :href="tableLink()"> {{ tableLink() }} </a>
@@ -21,6 +23,7 @@ import Toolbar from 'primevue/toolbar'
 import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import Login from './Login.vue'
+import { RouterLink } from 'vue-router'
 
 import { useUserData } from './user'
 import { ref, onMounted } from 'vue'

src/TableEditor.vue

@@ -1,4 +1,6 @@
 <template>
+  <ConfirmDialog></ConfirmDialog>
+
   <div class="flex flex-row">
     <Card class="detailCard flex">
       <template #title>
@@ -18,9 +20,14 @@
         </div>
       </template>
       <template #footer>
-        <Button class="button-box" label="Start" @click="startTable()" />
-        <Button class="button-box" label="Stop" @click="stopTable()" />
-        <Button class="button-box" label="Delete" @click="deleteTable()" />
+        <div>
+          <Button class="button-box" label="Start" @click="startTable(activeTable)" />
+          <Button class="button-box" label="Stop" @click="stopTable(activeTable)" />
+        </div>
+        <div>
+          <Button class="button-box" label="Hard Start" @click="hardStartTable(activeTable)" />
+          <Button class="button-box" label="Delete" @click="protectedDelete()" />
+        </div>
       </template>
     </Card>
 
@@ -31,7 +38,7 @@
           <div class="flex flex-column">
             <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>
+            <Select class="button-box" name="version" :options="availableVersion"></Select>
           </div>
         </template>
         <template #footer>
@@ -69,23 +76,26 @@
 
 <script setup lang="ts">
 import axios from 'axios'
-import { reactive, ref, useTemplateRef, onMounted, watch, onUnmounted } from 'vue'
-import { useRoute } from 'vue-router'
+import { reactive, ref, onMounted, watch, onUnmounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useConfirm } from 'primevue/useconfirm'
 import { Form } from '@primevue/forms'
 import InputText from 'primevue/inputtext'
 import Button from 'primevue/button'
 import Card from 'primevue/card'
 import Chip from 'primevue/chip'
-import Dropdown from 'primevue/dropdown'
+import Select from 'primevue/select'
+import ConfirmDialog from 'primevue/confirmdialog'
 
 import {
   useSelectedTable,
   loadSelectedTable,
-  //  startTable,
+  clearSelectedTable,
+  startTable,
   hardStartTable,
-  //  stopTable,
+  stopTable,
   updateTable,
-  //  deleteTable,
+  deleteTable,
 } from './game_tables'
 
 import type { GameTable } from './game_tables'
@@ -93,7 +103,8 @@ import type { Ref } from 'vue'
 
 const hostname = ref()
 const route = useRoute()
-const editForm = useTemplateRef('edit-form')
+const router = useRouter()
+const confirm = useConfirm()
 
 const table = reactive({
   table_name: 'default',
@@ -137,8 +148,8 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  console.log('unmounted')
   clearInterval(interval)
+  clearSelectedTable()
 })
 
 function readTable() {
@@ -151,7 +162,7 @@ function readTable() {
 
 function readFoundryStatus() {
   if (table.active) {
-    axios.get(`/${table.table_link}/api/status`).then((resp) => {
+    axios.get(`http://${activeTable.value.table_link}.${hostname.value}/api/status`).then((resp) => {
       if (resp.status == 200) {
         foundryStatus.running = resp.data.version
         foundryStatus.active = resp.data.active
@@ -170,6 +181,17 @@ watch(activeTable, () => {
   forceReset.value++
 })
 
+function protectedDelete() {
+  confirm.require({
+    header: `Delete ${table.table_name}?`,
+    message: "This will delete the table and all of it's data",
+    accept: () => {
+      deleteTable(activeTable.value)
+      router.push('/')
+    },
+  })
+}
+
 function loadTable() {
   axios
     .get(`/api/tables/${route.params.id}`)
@@ -198,21 +220,6 @@ function save(form: any) {
   })
 }
 
-function startTable() {
-  axios.post(`/api/tables/${route.params.id}:start`, { hard: 'false' })
-}
-
-function stopTable() {
-  axios.post(`/api/tables/${route.params.id}:stop`).then(() => {
-    foundryStatus.running = false
-    foundryStatus.active = false
-    foundryStatus.world = 'Not Loaded'
-    foundryStatus.users = 0
-  })
-}
-
-function deleteTable() { }
-
 function isTableLoading() {
   return table.active && !foundryStatus.running
 }

src/game_tables.ts

@@ -56,6 +56,19 @@ export function loadSelectedTable(tableId: number = 0): void {
   }
 }
 
+export function clearSelectedTable(): void {
+  if ($selectedTable) {
+    $selectedTable.value = {
+      id: 0,
+      table_name: 'None',
+      table_link: 'None',
+      active: false,
+      version: 0,
+      user_id: 0,
+    }
+  }
+}
+
 export function startTable(gameTable: GameTable): void {
   axios
     .post(`/api/tables/${gameTable.id}:start`, { hard: 'False' })