Formatting

src/TableEditor.vue

@@ -6,7 +6,10 @@
       </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" />
@@ -16,26 +19,35 @@
     </Card>
 
     <Card class="detailCard flex">
-      <template #title>
+      <template #title> Edit Details </template>
-        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
-          <InputText class="button-box" name="tableLink" type="text" placeholder="Table Link" v-model="tableLink" />
+            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";
+@import 'primeicons/primeicons.css';
 
 .active {
   --p-chip-color: green;

src/TableManager.vue

@@ -46,23 +46,23 @@ function stopTable(tableId: number) {
 }
 
 function buildButtonModel(id: number) {
-  return [{
+  return [
-    label: 'Edit', command: () => {
+    {
+      label: 'Edit',
+      command: () => {
         route.push({ name: 'edit', params: { id: id } })
-    }
+      },
     },
     { label: 'Restart' },
     { label: 'Force Stop' },
     { separator: true },
-  { label: 'Delete' }
+    { label: 'Delete' },
   ]
 }
 
 function createTable() {
-  axios.post("http://localhost/api/tables",
+  axios.post('http://localhost/api/tables', { table_name: 'table name', table_link: 'table link' })
-    { table_name: "table name", table_link: "table link" })
 }
-
 </script>
 
 <style>
@@ -128,8 +128,7 @@ function createTable() {
 
     <template #content>
       <DataTable class="Tables" :value="allTables">
-        <Column field="table_name" header="Table Name">
+        <Column field="table_name" header="Table Name"> </Column>
-        </Column>
         <Column field="table_link" header="Table Link">
           <template #body="slotProps">
             <a v-if="slotProps.data.active" :href="'/' + slotProps.data.table_link">
@@ -139,12 +138,14 @@ function createTable() {
               http://localhost/{{ slotProps.data.table_link }}
             </div>
           </template>
-
         </Column>
         <Column header="Close">
           <template #body="slotProps">
-            <SplitButton label="Start" @click="startTable(slotProps.data.id)"
+            <SplitButton
-              :model="buildButtonModel(slotProps.data.id)" />
+              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 = [
-  { name: "home", path: '/', component: TableManager },
+  { name: 'home', path: '/', component: TableManager },
-  { name: "edit", path: '/edit/:id', component: TableEditor },
+  { name: 'edit', path: '/edit/:id', component: TableEditor },
 ]
 
 const router = createRouter({