Messing with table creation.

src/CreateTable.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import axios from 'axios'
 import { ref } from 'vue'
+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';
 
+const router = useRouter()
 const table_name = ref("Default Table Name")
 const table_link = ref("default_table_link")
 const version = ref(12)
@@ -15,7 +17,7 @@ const availableVersion = ref([
 ]);
 
 function saveTable() {
-  axios.post('http://localhost/api/tables', { "table_name": table_name.value, "table_link": table_link.value, })
+  axios.post('http://localhost/api/tables', { "table_name": table_name.value, "table_link": table_link.value, "version": version.value }).then(() => router.push({ name: "home" }))
 }
 
 </script>

src/TableManager.vue

@@ -11,46 +11,37 @@ import SplitButton from 'primevue/splitbutton'
 import ConfirmDialog from 'primevue/confirmdialog'
 import { useConfirm } from 'primevue/useconfirm'
 
-const route = useRouter()
+const router = useRouter()
 const allTables = ref()
 const activeTables = ref()
 const confirm = useConfirm()
 
 onMounted(() => {
-  activeTables.value = [
+  activeTables.value = []
-    {
+  loadTables()
-      tableName: 'Table-One',
-      link: 'vtt.cyberpunkrush.co/table-one',
-    },
-  ]
-
-  axios.get('http://localhost/api/tables/all').then((resp) => (allTables.value = resp.data))
-  axios.get('http://localhost/api/tables/active').then((resp) => (activeTables.value = resp.data))
 })
 
+async function loadTables(): Promise<void> {
+  return axios.get('http://localhost/api/tables/all')
+    .then((resp) => (allTables.value = resp.data))
+    .then(() => axios.get('http://localhost/api/tables/active'))
+    .then((resp) => (activeTables.value = resp.data))
+}
+
 function startTable(tableId: number) {
   axios.post(`http://localhost/api/tables/${tableId}:start`)
-    .then((resp) => axios.get('http://localhost/api/tables/all'))
+    .then(() => loadTables())
-    .then((resp) => (allTables.value = resp.data))
-    .then((resp) => axios.get('http://localhost/api/tables/active'))
-    .then((resp) => (activeTables.value = resp.data))
 }
 
 function stopTable(tableId: number) {
   axios.post(`http://localhost/api/tables/${tableId}:stop`)
-    .then((resp) => axios.get('http://localhost/api/tables/all'))
+    .then(() => loadTables())
-    .then((resp) => (allTables.value = resp.data))
-    .then((resp) => axios.get('http://localhost/api/tables/active'))
-    .then((resp) => (activeTables.value = resp.data))
 }
 
 function deleteTable(tableId: number) {
   axios
     .delete(`http://localhost/api/tables/${tableId}`)
-    .then((resp) => axios.get('http://localhost/api/tables/active'))
+    .then(() => loadTables())
-    .then((resp) => (activeTables.value = resp.data))
-    .then((resp) => axios.get('http://localhost/api/tables/all'))
-    .then((resp) => (allTables.value = resp.data))
 }
 
 function buildButtonModel(table: any) {
@@ -58,11 +49,10 @@ function buildButtonModel(table: any) {
     {
       label: 'Edit',
       command: () => {
-        route.push({ name: 'edit', params: { id: table.id } })
+        router.push({ name: 'edit', params: { id: table.id } })
       },
     },
     { label: 'Restart' },
-    { label: 'Force Stop' },
     { separator: true },
     {
       label: 'Delete',
@@ -77,12 +67,11 @@ function buildButtonModel(table: any) {
   ]
 }
 
-function createTable() {
-  axios.post('http://localhost/api/tables', { table_name: 'table name', table_link: 'table link' })
-}
 </script>
 
 <style>
+@import 'primeflex/primeflex.css';
+
 .ActiveTables {
   margin: 20px;
 
@@ -160,8 +149,11 @@ function createTable() {
         </Column>
         <Column header="Close">
           <template #body="slotProps">
+            <div class="flex flex-row">
+              <span class="flex"></span>
               <SplitButton label="Start" @click="startTable(slotProps.data.id)"
                 :model="buildButtonModel(slotProps.data)" />
+            </div>
           </template>
         </Column>
       </DataTable>