From cd4df58d9c74cbb94c42495d925a8fac7eb3ccce Mon Sep 17 00:00:00 2001
From: iamBadgers <jmosrael@gmail.com>
Date: Mon, 30 Mar 2026 21:49:09 -0700
Subject: [PATCH] butons...

---
 src/App.vue | 39 ++++++++++++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index de09f3a..b37d2a5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,6 +7,7 @@ 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"
 
 const allTables = ref()
 const activeTables = ref()
@@ -35,6 +36,13 @@ function stopTable(tableId: number) {
   activate.then((resp) => axios.get('http://localhost/api/active_tables')).then((resp) => activeTables.value = resp.data)
 }
 
+const saveButtonSubmenu = [
+  { label: "Restart" },
+  { label: "Stop" },
+  { separator: true },
+  { label: "Delete" }
+]
+
 </script>
 
 
@@ -46,12 +54,25 @@ function stopTable(tableId: number) {
     padding-left: 15px;
   }
 
-  .ATTables {
+  .Tables {
+    padding-left: 50px;
+  }
+}
+
+.AllTables {
+  margin: 20px;
+
+  h2 {
+    padding-left: 15px;
+  }
+
+  .Tables {
     padding-left: 50px;
   }
 
   .button-box {
-    padding: 10px;
+    padding-top: 25px;
+    padding-bottom: 10px;
   }
 }
 </style>
@@ -63,39 +84,39 @@ function stopTable(tableId: number) {
     </template>
 
     <template #content>
-      <DataTable :exportable="false" :value="activeTables">
+      <DataTable class="Tables" :value="activeTables">
         <Column field="table_name" header="Table Name" />
         <Column field="table_link" header="Table Link">
           <template #body="slotProps">
-            <a :href="slotProps.data.table_link">{{slotProps.data.table_link}}</a>
+            <a :href="slotProps.data.table_link">{{ slotProps.data.table_link }}</a>
           </template>
         </Column>
         <Column header="Close">
           <template #body="slotProps">
-            <Button label="Close" @click="stopTable(slotProps.data.id)"/>
+            <Button label="Close" @click="stopTable(slotProps.data.id)" />
           </template>
         </Column>
       </DataTable>
     </template>
   </Card>
 
-  <Card class="ActiveTables">
+  <Card class="AllTables">
     <template #title>
       <h2>All Tables</h2>
     </template>
 
     <template #content>
-      <DataTable class="ATTables" style="" :exportable="false" :value="allTables">
+      <DataTable class="Tables" :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)" />
+            <SplitButton label="Start" @click="startTable(slotProps.data.id)" :model="saveButtonSubmenu" />
           </template>
         </Column>
       </DataTable>
       <div class="button-box flex justify-content-end">
-        <Button label="New Table"/>
+        <Button label="New Table" />
       </div>
     </template>
   </Card>