Enable inactive / loading / active

src/TableEditor.vue

@@ -1,25 +1,46 @@
 <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">
     <Card class="detailCard flex">
       <template #title>
         {{ table.table_name }}
       </template>
       <template #subtitle>
+        <div>
           Status:
           <Chip
             :class="table.active ? 'active' : 'inactive'"
             :label="table.active ? 'active' : 'inactive'"
           />
+        </div>
       </template>
       <template #content>
-        <div>Table Status: {{tableStatus.active}}</div>
-        <div>World: {{tableStatus.world}}</div>
-        <div>Users: {{tableStatus.users}}</div>
+        <div :class="table.active ? 'active-foundry-stats' : 'inactive-foundry-stats'">
+          <div>Table Status: {{ foundryStatus.active }}</div>
+          <div>World: {{ foundryStatus.world }}</div>
+          <div>Users: {{ foundryStatus.users }}</div>
+        </div>
       </template>
       <template #footer>
-        <Button class="button-box" label="Start" />
-        <Button class="button-box" label="Stop" />
-        <Button class="button-box" label="Delete" />
+        <Button class="button-box" label="Start" @click="startTable()" />
+        <Button class="button-box" label="Stop" @click="stopTable()" />
+        <Button class="button-box" label="Delete" @click="deleteTable()" />
       </template>
     </Card>
 
@@ -41,10 +62,11 @@
             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" />
+        <Button class="button-box" label="Save" @click="save()" />
         <Button class="button-box" label="Clear" />
       </template>
     </Card>
@@ -69,36 +91,58 @@
 .button-box {
   margin: 5px;
 }
+
+.active-foundry-stats {
+}
+
+.inactive-foundry-stats {
+  display: none;
+}
 </style>
 
 <script setup lang="ts">
 import axios from 'axios'
-import { reactive, ref, watch, onMounted } from 'vue'
+import { reactive, ref, watch, onMounted, onUnmounted } from 'vue'
 import { useRoute } from 'vue-router'
 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 Toolbar from 'primevue/toolbar'
 
+const hostname = ref()
 const route = useRoute()
+
 const table = reactive({
   table_name: 'default',
   table_link: 'default',
   active: 0,
   version: 0,
 })
-const tableStatus = reactive({
+
+const foundryStatus = reactive({
+  running: false,
   active: false,
-  world: "",
-  users: 0
+  world: '',
+  users: 0,
 })
 
+const version = ref(12)
+const availableVersion = ref([11, 12])
 
 const tableName = ref()
 const tableLink = ref()
 
+var interval
+
 onMounted(() => {
+  interval = setInterval(() => {
+    readTable()
+    readFoundryStatus()
+  }, 2000)
+
   axios
     .get(`/api/tables/${route.params.id}`)
     .then((resp) => {
@@ -111,22 +155,98 @@ onMounted(() => {
       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
+      foundryStatus.active = resp.data.active
+      foundryStatus.world = resp.data.world
+      foundryStatus.users = resp.data.users
       console.log(resp)
     })
+  hostname.value = location.host
+})
+
+onUnmounted(() => {
+  console.log('unmounted')
+  clearInterval(interval)
 })
 
 watch(
   () => route.params.id,
   (newValue, oldValue) => {
     console.log(newValue)
-    axios.get(`/api/table/${newValue}`).then((resp) => {
+    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
+  })
+}
+
+function readFoundryStatus() {
+  if (table.active) {
+    axios.get(`/${table.table_link}/api/status`).then((resp) => {
+      if (resp.status = 200) {
+        foundryStatus.running = !!resp.data.version
+        console.log(resp)
+        console.log(foundryStatus)
+        foundryStatus.active = resp.data.active
+        foundryStatus.world = resp.data.world
+        foundryStatus.users = resp.data.users
+      } else {
+        foundryStatus.running = false
+        foundryStatus.active = false
+        foundryStatus.world = 'Not Loaded'
+        foundryStatus.users = '-'
+      }
+    })
+  }
+}
+
+function loadTable() {
+  axios.get(`/api/tables/${route.params.id}`)
+}
+
+function save() {
+  axios.post(`/api/tables/${route.params.id}`, {
+    table_name: tableName.value,
+    table_link: tableLink.value,
+    version: version.value,
+  })
+}
+
+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 = '-'
+    })
+}
+
+function deleteTable() {}
+
+function isTableLoading() {
+  return table.active && !foundryStatus.running
+}
+
+function isTableInactive() {
+  return !table.active
+}
+
+function isTableReady() {
+  return table.active && foundryStatus.running
+}
 </script>

src/TableManager.vue

@@ -11,6 +11,7 @@ import SplitButton from 'primevue/splitbutton'
 import ConfirmDialog from 'primevue/confirmdialog'
 import { useConfirm } from 'primevue/useconfirm'
 
+const hostname = ref()
 const router = useRouter()
 const allTables = ref()
 const activeTables = ref()
@@ -19,6 +20,7 @@ const confirm = useConfirm()
 onMounted(() => {
   activeTables.value = []
   loadTables()
+  hostname.value = location.host
 })
 
 async function loadTables(): Promise<void> {
@@ -120,7 +122,7 @@ function buildButtonModel(table: any) {
         <Column field="table_link" header="Table Link">
           <template #body="slotProps">
             <a :href="'/' + slotProps.data.table_link">
-              http://localhost/{{ slotProps.data.table_link }}
+              http://{{ hostname }}/{{ slotProps.data.table_link }}
             </a>
           </template>
         </Column>
@@ -144,10 +146,10 @@ function buildButtonModel(table: any) {
         <Column field="table_link" header="Table Link">
           <template #body="slotProps">
             <a v-if="slotProps.data.active" :href="'/' + slotProps.data.table_link">
-              http://localhost/{{ slotProps.data.table_link }}
+              http://{{ hostname }}/{{ slotProps.data.table_link }}
             </a>
             <div v-if="!slotProps.data.active">
-              http://localhost/{{ slotProps.data.table_link }}
+              http://{{ hostname }}/{{ slotProps.data.table_link }}
             </div>
           </template>
         </Column>