did something

src/Router.vue

@@ -0,0 +1,3 @@
+<template>
+  <RouterView />
+</template>

src/TableEditor.vue

@@ -0,0 +1,75 @@
+<template>
+  <Form v-slot="$form">
+    <Card>
+      <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>
+      <template #footer>
+        <Button label="Save" />
+        <Button label="Clear" />
+      </template>
+    </Card>
+  </Form>
+</template>
+
+<style>
+.active {
+  color: green;
+  background-color: green;
+  font-weight: 10;
+}
+
+.inactive {
+  color: red;
+}
+</style>
+
+<script setup lang="ts">
+import axios from 'axios'
+import { reactive, ref, watch, onMounted } 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'
+
+const route = useRoute()
+const table = reactive({
+  table_name: 'default',
+  table_link: 'default',
+  active: 0,
+})
+
+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
+    table.table_link = resp.data.table_link
+    table.active = resp.data.active
+    tableName.value = resp.data.table_name
+    tableLink.value = resp.data.table_link
+  })
+})
+
+watch(
+  () => route.params.id,
+  (newValue, oldValue) => {
+    console.log(newValue)
+    axios.get(`http://localhost/api/table/${newValue}`).then((resp) => {
+      table.table_name = resp.data.table_name
+      table.table_link = resp.data.table_link
+      table.active = resp.data.active
+    })
+  },
+)
+</script>

src/TableManager.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-
 import { ref, onMounted } from 'vue'
 
 import axios from 'axios'
 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"
+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()
@@ -15,37 +14,44 @@ const activeTables = ref()
 onMounted(() => {
   activeTables.value = [
     {
-      tableName: "Table-One",
-      link: "vtt.cyberpunkrush.co/table-one"
-    }
+      tableName: 'Table-One',
+      link: 'vtt.cyberpunkrush.co/table-one',
+    },
   ]
 
-  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)
+  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))
 }
 
 function stopTable(tableId: number) {
-  const activate = axios.get(`http://localhost/api/tables/${tableId}:stop`);
-  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)
+  const activate = axios.get(`http://localhost/api/tables/${tableId}:stop`)
+  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))
 }
 
 const saveButtonSubmenu = [
-  { label: "Restart" },
-  { label: "Stop" },
+  { label: 'Edit' },
+  { label: 'Restart' },
+  { label: 'Force Stop' },
   { separator: true },
-  { label: "Delete" }
+  { label: 'Delete' },
 ]
-
 </script>
 
-
 <style>
 .ActiveTables {
   margin: 20px;
@@ -111,7 +117,11 @@ const saveButtonSubmenu = [
         <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="saveButtonSubmenu"
+            />
           </template>
         </Column>
       </DataTable>

src/main.ts

@@ -1,17 +1,31 @@
 import { createApp } from 'vue'
-import PrimeVue from 'primevue/config';
+import { createWebHistory, createRouter } from 'vue-router'
+import PrimeVue from 'primevue/config'
 import Aura from '@primeuix/themes/aura'
-import App from './App.vue'
+import Router from './Router.vue'
+import TableManager from './TableManager.vue'
+import TableEditor from './TableEditor.vue'
 import 'primeflex/primeflex.css'
 
-const app = createApp(App)
+const routes = [
+  { path: '/', component: TableManager },
+  { path: '/edit/:id', component: TableEditor },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+const app = createApp(Router)
+app.use(router)
 app.use(PrimeVue, {
   theme: {
     preset: Aura,
     options: {
-      darkModeSelector: ".darkmode",
-      cssLayer: false
-    }
-  }
+      darkModeSelector: '.darkmode',
+      cssLayer: false,
+    },
+  },
 })
 app.mount('#app')