web: refactor toolbox items

web/src/components/HeaderBar.vue

@@ -5,21 +5,85 @@
       dark
       prominent
     >
-     <img src="../assets/turbologo.svg" alt="logo" class="logo" width="75" />
-     <v-spacer></v-spacer>
-     <!-- Create, Delete, Edit -->
-     <div>
-       <v-btn icon class="mr-3">
-         <Plus />
-       </v-btn>
-       <v-btn icon class="mr-3">
-         <Pencil />
-        </v-btn>
+    <img src="../assets/turbologo.svg" alt="logo" class="logo" width="75" />
+    <v-spacer></v-spacer>
+    <!-- Create, Delete, Edit -->
+    <div>
+      <v-btn icon class="mr-3" @click="add = true">
+        <Plus />
+      </v-btn>
+      <v-dialog
+        v-model="add"
+        width="600"
+        persistent
+      >
+        <v-card
+          max-width="600"
+        >
+          <v-card-title>
+            <span class="headline">Add License</span>
+          </v-card-title>
+          <v-card-subtitle>
+            <span> Add an extra License to the database</span>
+          </v-card-subtitle>
+          <v-card-text>
+            <div>
+              <v-text-field
+                label="License Name *"
+                v-model="addLicenseName"
+                variant="outlined"
+                required
+              ></v-text-field>
+              <div>
+                <div class="mb-2">
+                  <v-btn prepend-icon stacked variant="outlined">
+                    <CalendarCheck/>
+                  </v-btn>
+                </div>
+                <div class="mb-5">
+                  <v-btn prepend-icon stacked variant="outlined">
+                    <CalendarX/>
+                  </v-btn>
+                </div>
+              </div>
+              <v-text-field
+                label="Amount (optional)"
+                v-model="addAmount"
+                variant="outlined"
+              ></v-text-field>
+              <v-text-field
+                label="Notes (optional)"
+                v-model="addNotes"
+                variant="outlined"
+              ></v-text-field>
+              <span class="dialogNote"> all fields marked with * are required </span>
+            </div>
+          </v-card-text>
+          <v-card-actions>
+            <v-btn
+              class="ms-auto"
+              text="Cancel"
+              @click="add = false"
+            ></v-btn>
+            <v-btn
+              class="ms-auto"
+              text="Add"
+              @click="add = false"
+            ></v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+
+
+      <v-btn icon class="mr-3">
+        <Pencil />
+      </v-btn>
       <v-btn icon class="mr-3">
          <Trash2 />
       </v-btn>
      </div>
 
+
      <!-- Search -->
      <v-text-field
           class="compact-form mr-2"
@@ -44,16 +108,23 @@
 
 <script setup lang="ts">
 import { store } from '@/store';
-import { Plus } from 'lucide-vue-next';
-import { LogOut } from 'lucide-vue-next';
-import { Trash2 } from 'lucide-vue-next';
-import { Pencil } from 'lucide-vue-next';
+import { Plus, LogOut, Trash2, Pencil, CalendarCheck, CalendarX } from 'lucide-vue-next';
+import { ref } from 'vue';
+import { useDate } from 'vuetify' // Used for unifying Date inputs to ISO
+
 
 function handlelogout() {
   console.log('logout');
   store.setToken(null);
 }
 
+const add = ref(false);
+// References for Add License Dialog
+const addLicenseName = ref('');
+const addAmount = ref('');
+const addNotes = ref('');
+
+
 </script>
 
 <style scoped>
@@ -62,4 +133,9 @@ function handlelogout() {
   margin-left: 10px;
 }
 
+.dialogNote{
+  font-size: 13px;
+  color: grey;
+}
+
 </style>

web/src/components/ListViewElement.vue

@@ -4,6 +4,7 @@
   width="93vw"
   rounded="lg"
   class="mt-3"
+  style="border-left: .5rem outset #0FA4AF"
   >
     <v-expansion-panels>
       <v-expansion-panel>
@@ -36,18 +37,16 @@
                 <span v-else>
                   {{ props.endDate }}
                 </span>
-            </div>
+             </div>
 
-            <div class="mr-3">
-              <span style="display: flex;" >
-                <img src="../assets/doublekey.svg" alt="logo" class="logo mr-1" width="24" />
-                  <span v-if="props.amount == null || props.amount == undefined">
-                    <Infinity />
-                  </span>
-                  <span v-else>
-                    {{ props.amount }}
-                  </span>
-              </span>
+            <div class="mr-3 d-flex align-self-center" style="align-items:center">
+              <img src="../assets/doublekey.svg" alt="logo" class="logo mr-1" width="24" />
+                <span v-if="props.amount == null || props.amount == undefined">
+                  <Infinity />
+                </span>
+                <span v-else>
+                  {{ props.amount }}
+                </span>
             </div>
 
         </v-expansion-panel-title>

web/src/components/loginPage.vue

@@ -6,8 +6,8 @@
           <v-card-title class="text-h5">Login</v-card-title>
           <v-card-text>
             <v-form>
-              <v-text-field v-model="email" label="Email" required></v-text-field>
-              <v-text-field v-model="password" label="Password" type="password" required></v-text-field>
+              <v-text-field v-model="email" label="Email" required variant="outlined"></v-text-field>
+              <v-text-field v-model="password" label="Password" type="password" required variant="outlined"></v-text-field>
             </v-form>
           </v-card-text>
           <v-card-actions>