new table shizz

src/CreateTable.vue

@@ -0,0 +1,54 @@
+<script setup>
+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'
+import Dropdown from 'primevue/dropdown';
+
+const table_name = ref("Default Table Name")
+const table_link = ref("default_table_link")
+const version = ref(12)
+
+const availableVersion = ref([
+  11, 12
+]);
+
+function saveTable() {
+  axios.post('http://localhost/api/tables', { "table_name": table_name.value, "table_link": table_link.value, })
+}
+
+</script>
+
+<style>
+@import 'primeicons/primeicons.css';
+
+.detailCard {
+  margin: 25px;
+}
+
+.button-box {
+  margin: 5px;
+}
+</style>
+
+<template>
+  <Card class="detailCard flex">
+    <template #title> New Table Details </template>
+    <template #content>
+      <div class="flex flex-column">
+        <InputText class="button-box" type="text" placeholder="Table Name" v-model="table_name" />
+        <InputText class="button-box" type="text" placeholder="Table Link" v-model="table_link" />
+        <Dropdown class="button-box" v-model="version" :options="availableVersion"></Dropdown>
+      </div>
+    </template>
+    <template #footer>
+      <Button class="button-box" label="Save" @click="saveTable()" />
+      <Button class="button-box" label="Clear" />
+    </template>
+  </Card>
+
+</template>

src/TableEditor.vue

@@ -6,10 +6,7 @@
       </template>
       <template #subtitle>
         Status:
-        <Chip
-          :class="table.active ? 'active' : 'inactive'"
-          :label="table.active ? 'active' : 'inactive'"
-        />
+        <Chip :class="table.active ? 'active' : 'inactive'" :label="table.active ? 'active' : 'inactive'" />
       </template>
       <template #footer>
         <Button class="button-box" label="Start" />
@@ -22,20 +19,8 @@
       <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"
-          />
+          <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>
@@ -81,12 +66,16 @@ const table = reactive({
   table_name: 'default',
   table_link: 'default',
   active: 0,
+  version: 0,
 })
 
 const tableName = ref()
 const tableLink = ref()
 
 onMounted(() => {
+
+  if (route.params.id == 0) {
+  } else {
     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
@@ -94,6 +83,7 @@ onMounted(() => {
       tableName.value = resp.data.table_name
       tableLink.value = resp.data.table_link
     })
+  }
 })
 
 watch(

src/TableManager.vue

@@ -8,10 +8,13 @@ import DataTable from 'primevue/datatable'
 import Column from 'primevue/column'
 import Card from 'primevue/card'
 import SplitButton from 'primevue/splitbutton'
+import ConfirmDialog from 'primevue/confirmdialog'
+import { useConfirm } from 'primevue/useconfirm'
 
 const route = useRouter()
 const allTables = ref()
 const activeTables = ref()
+const confirm = useConfirm()
 
 onMounted(() => {
   activeTables.value = [
@@ -26,37 +29,51 @@ onMounted(() => {
 })
 
 function startTable(tableId: number) {
-  const start = axios.post(`http://localhost/api/tables/${tableId}:start`)
-  start
+  axios.post(`http://localhost/api/tables/${tableId}:start`)
     .then((resp) => axios.get('http://localhost/api/tables/all'))
     .then((resp) => (allTables.value = resp.data))
-  start
     .then((resp) => axios.get('http://localhost/api/tables/active'))
     .then((resp) => (activeTables.value = resp.data))
 }
 
 function stopTable(tableId: number) {
-  const stop = axios.post(`http://localhost/api/tables/${tableId}:stop`)
-  stop
+  axios.post(`http://localhost/api/tables/${tableId}:stop`)
     .then((resp) => axios.get('http://localhost/api/tables/all'))
     .then((resp) => (allTables.value = resp.data))
-  stop
     .then((resp) => axios.get('http://localhost/api/tables/active'))
     .then((resp) => (activeTables.value = resp.data))
 }
 
-function buildButtonModel(id: number) {
+function deleteTable(tableId: number) {
+  axios
+    .delete(`http://localhost/api/tables/${tableId}`)
+    .then((resp) => axios.get('http://localhost/api/tables/active'))
+    .then((resp) => (activeTables.value = resp.data))
+    .then((resp) => axios.get('http://localhost/api/tables/all'))
+    .then((resp) => (allTables.value = resp.data))
+}
+
+function buildButtonModel(table) {
   return [
     {
       label: 'Edit',
       command: () => {
-        route.push({ name: 'edit', params: { id: id } })
+        route.push({ name: 'edit', params: { id: table.id } })
       },
     },
     { label: 'Restart' },
     { label: 'Force Stop' },
     { separator: true },
-    { label: 'Delete' },
+    {
+      label: 'Delete',
+      command: () => {
+        confirm.require({
+          header: `Delete ${table.table_name}?`,
+          message: "This will delete the table and all of it's data",
+          accept: () => { deleteTable(table.id) },
+        })
+      },
+    },
   ]
 }
 
@@ -97,6 +114,8 @@ function createTable() {
 </style>
 
 <template>
+  <ConfirmDialog></ConfirmDialog>
+
   <Card class="ActiveTables">
     <template #title>
       <h2>Active Tables</h2>
@@ -141,16 +160,15 @@ function createTable() {
         </Column>
         <Column header="Close">
           <template #body="slotProps">
-            <SplitButton
-              label="Start"
-              @click="startTable(slotProps.data.id)"
-              :model="buildButtonModel(slotProps.data.id)"
-            />
+            <SplitButton label="Start" @click="startTable(slotProps.data.id)"
+              :model="buildButtonModel(slotProps.data)" />
           </template>
         </Column>
       </DataTable>
       <div class="button-box flex justify-content-end">
-        <Button label="New Table" @click="createTable()" />
+        <router-link to="/new">
+          <Button label="New Table"" />
+        </router-link>
       </div>
     </template>
   </Card>

src/main.ts

@@ -5,11 +5,14 @@ import Aura from '@primeuix/themes/aura'
 import Router from './Router.vue'
 import TableManager from './TableManager.vue'
 import TableEditor from './TableEditor.vue'
+import CreateTable from './CreateTable.vue'
 import 'primeflex/primeflex.css'
+import ConfirmationService from 'primevue/confirmationservice'
 
 const routes = [
   { name: 'home', path: '/', component: TableManager },
   { name: 'edit', path: '/edit/:id', component: TableEditor },
+  { name: 'new', path: '/new', component: CreateTable }
 ]
 
 const router = createRouter({
@@ -19,6 +22,7 @@ const router = createRouter({
 
 const app = createApp(Router)
 app.use(router)
+app.use(ConfirmationService)
 app.use(PrimeVue, {
   theme: {
     preset: Aura,