stuff

src/TableEditor.vue

@@ -1,31 +1,56 @@
 <template>
-  <Form v-slot="$form">
-    <Card>
+  <Form v-slot="$form" class="flex flex-row">
+    <Card class="detailCard flex">
       <template #title>
         {{ table.table_name }}
-        <Chip class="active" icon="pi pi-apple" :label="table.active ? 'active' : 'inactive'" />
       </template>
-      <template #content>
-        <InputText name="tableName" type="text" placeholder="Table Name" v-model="tableName" />
-        <InputText name="tableLink" type="text" placeholder="Table Link" v-model="tableLink" />
+      <template #subtitle>
+        Status:
+        <Chip :class="table.active ? 'active' : 'inactive'" :label="table.active ? 'active' : 'inactive'" />
       </template>
       <template #footer>
-        <Button label="Save" />
-        <Button label="Clear" />
+        <Button class="button-box" label="Start" />
+        <Button class="button-box" label="Stop" />
+        <Button class="button-box" label="Delete" />
       </template>
     </Card>
+
+    <Card class="detailCard flex">
+      <template #title>
+        Edit Details
+      </template>
+      <template #content>
+        <div class="flex flex-column">
+          <InputText class="button-box" name="tableName" type="text" placeholder="Table Name" v-model="tableName" />
+          <InputText class="button-box" name="tableLink" type="text" placeholder="Table Link" v-model="tableLink" />
+        </div>
+      </template>
+      <template #footer>
+        <Button class="button-box" label="Save" />
+        <Button class="button-box" label="Clear" />
+      </template>
+
+    </Card>
   </Form>
 </template>
 
 <style>
+@import "primeicons/primeicons.css";
+
 .active {
-  color: green;
-  background-color: green;
-  font-weight: 10;
+  --p-chip-color: green;
 }
 
 .inactive {
-  color: red;
+  --p-chip-color: red;
+}
+
+.detailCard {
+  margin: 25px;
+}
+
+.button-box {
+  margin: 5px;
 }
 </style>
 
@@ -49,8 +74,6 @@ const table = reactive({
 const tableName = ref()
 const tableLink = ref()
 
-console.log('asdf')
-
 onMounted(() => {
   axios.get(`http://localhost/api/tables/${route.params.id}`).then((resp) => {
     table.table_name = resp.data.table_name

src/TableManager.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
 
 import axios from 'axios'
 import Button from 'primevue/button'
@@ -8,6 +9,7 @@ import Column from 'primevue/column'
 import Card from 'primevue/card'
 import SplitButton from 'primevue/splitbutton'
 
+const route = useRouter()
 const allTables = ref()
 const activeTables = ref()
 
@@ -43,13 +45,19 @@ function stopTable(tableId: number) {
     .then((resp) => (activeTables.value = resp.data))
 }
 
-const saveButtonSubmenu = [
-  { label: 'Edit' },
+function buildButtonModel(id: number) {
+  return [{
+    label: 'Edit', command: () => {
+      route.push({ name: 'edit', params: { id: id } })
+    }
+  },
   { label: 'Restart' },
   { label: 'Force Stop' },
   { separator: true },
-  { label: 'Delete' },
-]
+  { label: 'Delete' }
+  ]
+}
+
 </script>
 
 <style>
@@ -113,15 +121,13 @@ const saveButtonSubmenu = [
 
     <template #content>
       <DataTable class="Tables" :value="allTables">
-        <Column field="table_name" header="Table Name" />
+        <Column field="table_name" header="Table Name">
+        </Column>
         <Column field="table_link" header="Table Link" />
         <Column header="Close">
           <template #body="slotProps">
-            <SplitButton
-              label="Start"
-              @click="startTable(slotProps.data.id)"
-              :model="saveButtonSubmenu"
-            />
+            <SplitButton label="Start" @click="startTable(slotProps.data.id)"
+              :model="buildButtonModel(slotProps.data.id)" />
           </template>
         </Column>
       </DataTable>

src/main.ts

@@ -8,8 +8,8 @@ import TableEditor from './TableEditor.vue'
 import 'primeflex/primeflex.css'
 
 const routes = [
-  { path: '/', component: TableManager },
-  { path: '/edit/:id', component: TableEditor },
+  { name: "home", path: '/', component: TableManager },
+  { name: "edit", path: '/edit/:id', component: TableEditor },
 ]
 
 const router = createRouter({