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