From fb82472cac2b85f39d3ad3cd40c2462517e36c06 Mon Sep 17 00:00:00 2001
From: iamBadgers <jmosrael@gmail.com>
Date: Sun, 22 Mar 2026 23:02:01 -0700
Subject: [PATCH] make the start button work

---
 src/App.vue | 65 +++++++++++++++++++++++++++++------------------------
 1 file changed, 36 insertions(+), 29 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5f388e0..9fee86d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,22 +19,30 @@ onMounted(() => {
     }
   ]
 
-  axios.get('http://localhost/api/tables').then((resp) => allTables.value=resp.data)
-  axios.get('http://localhost/api/active_tables').then((resp) => activeTables.value=resp.data)
+  axios.get('http://localhost/api/tables').then((resp) => allTables.value = resp.data)
+  axios.get('http://localhost/api/active_tables').then((resp) => activeTables.value = resp.data)
 })
 
+function startTable(tableId: number) {
+  const activate = axios.get(`http://localhost/api/tables/${tableId}:start`);
+  activate.then((resp) => axios.get('http://localhost/api/tables')).then((resp) => allTables.value = resp.data)
+  activate.then((resp) => axios.get('http://localhost/api/active_tables')).then((resp) => activeTables.value = resp.data)
+}
+
 </script>
 
 <style>
-  .ActiveTables {
-    margin: 20px;
-    h2 {
-      padding-left: 15px;
-    }
-    .ATTables {
-      padding-left: 50px;
-    }
+.ActiveTables {
+  margin: 20px;
+
+  h2 {
+    padding-left: 15px;
   }
+
+  .ATTables {
+    padding-left: 50px;
+  }
+}
 </style>
 
 <template>
@@ -45,15 +53,15 @@ onMounted(() => {
     </template>
 
     <template #content>
-     <DataTable class="ATTables" style="" :exportable="false" :value="activeTables">
-      <Column field="table_name" header="Table Name"/>
-      <Column field="table_link" header="Table Link"/>
-      <Column header="Close">
-        <template #body="slotProps">
-          <Button label="Close"/>
-        </template>
-      </Column>
-    </DataTable>
+      <DataTable class="ATTables" style="" :exportable="false" :value="activeTables">
+        <Column field="table_name" header="Table Name" />
+        <Column field="table_link" header="Table Link" />
+        <Column header="Close">
+          <template #body="slotProps">
+            <Button label="Close" />
+          </template>
+        </Column>
+      </DataTable>
     </template>
   </Card>
 
@@ -63,17 +71,16 @@ onMounted(() => {
     </template>
 
     <template #content>
-     <DataTable class="ATTables" style="" :exportable="false" :value="allTables">
-      <Column field="table_name" header="Table Name"/>
-      <Column field="table_link" header="Table Link"/>
-      <Column header="Close">
-        <template #body="slotProps">
-          <Button label="Close"/>
-        </template>
-      </Column>
-    </DataTable>
+      <DataTable class="ATTables" style="" :exportable="false" :value="allTables">
+        <Column field="table_name" header="Table Name" />
+        <Column field="table_link" header="Table Link" />
+        <Column header="Close">
+          <template #body="slotProps">
+            <Button label="Start" @click="startTable(slotProps.data.id)" />
+          </template>
+        </Column>
+      </DataTable>
     </template>
   </Card>
 
 </template>
-