feat: ✨ implemented visual messaging

web/src/views/vehicle.vue

@@ -1,9 +1,9 @@
 <script lang="ts">
-import {defineComponent, Ref, ref, SetupContext} from 'vue';
+import { defineComponent, Ref, ref, SetupContext } from 'vue';
 
 type vehicle = {
-  id:number
-  name:string
+  id: number
+  name: string
   licenseplate: string
 }
 
@@ -11,9 +11,13 @@ export default defineComponent({
   name: 'map',
   setup(_, { emit }: SetupContext) {
 
-    const vehicleName:Ref<string> = ref("")
-    const licensePlate:Ref<string> = ref("")
-    const vehicleList:Ref<vehicle[]> = ref([])
+    const vehicleName: Ref<string> = ref("")
+    const licensePlate: Ref<string> = ref("")
+    const vehicleList: Ref<vehicle[]> = ref([])
+
+    // values for UI Information distribution
+    const messageType: Ref<string> = ref("");
+    const message: Ref<string> = ref("");
 
     // handles getting all existing drivers
     const getVehicles = async () => {
@@ -22,27 +26,29 @@ export default defineComponent({
       headers.set('Accept', 'application/json')
 
       const request: RequestInfo = new Request("http://localhost:5000/vehicle", {
-        method:"GET", 
-        headers:headers
+        method: "GET",
+        headers: headers
       })
 
       var response = await fetch(request)
       // make sure the request was successfull
-      if (response.ok){
+      if (response.ok) {
         var jsonBody = await response.json()
 
         // convert vehicles from json response to processable data
-        for(let i = 0; i < jsonBody.length; i++) {
+        for (let i = 0; i < jsonBody.length; i++) {
           let plate = "N/A"
           let vehicle = jsonBody[i]
           if (vehicle["licensePlate"] != undefined) {
             plate = vehicle["licensePlate"];
           }
 
-          vehicleList.value.push({id: vehicle["id"], name: vehicle["name"], licenseplate: plate})
+          vehicleList.value.push({ id: vehicle["id"], name: vehicle["name"], licenseplate: plate })
         }
       } else {
         console.log(await response.text())
+        messageType.value = "error";
+				message.value = `loading vehicles failed with error: ${await response.text()}`;
       }
     }
 
@@ -56,27 +62,31 @@ export default defineComponent({
       const requestBody = JSON.stringify({ name: vehicleName.value, licensePlate: licensePlate.value });
 
       const request: RequestInfo = new Request("http://localhost:5000/vehicle", {
-        method:"POST", 
-        headers:headers,
+        method: "POST",
+        headers: headers,
         body: requestBody
       })
 
       var response = await fetch(request)
       // make sure the request was successfull
-      if (response.ok){
+      if (response.ok) {
         var jsonBody = await response.json()
-        vehicleList.value.push({id: jsonBody["body"], name: vehicleName.value, licenseplate: "N/A"})
+        vehicleList.value.push({ id: jsonBody["body"], name: vehicleName.value, licenseplate: "N/A" })
       } else {
         console.log(await response.text())
+        messageType.value = "error";
+				message.value = `creating vehicle failed with error: ${error}`;
       }
     }
 
     getVehicles()
-    return { 
+    return {
       createVehicle,
       vehicleName,
       licensePlate,
-      vehicleList
+      vehicleList,
+      message,
+      messageType
     };
   },
 });
@@ -84,6 +94,7 @@ export default defineComponent({
 
 
 <template>
+  <Message v-if="type == 'none'" :type="messageType" :message="message" @close="message = ''; messageType = 'None'"></Message>
   <div class="overflow-x-auto">
     <table class="table">
       <!-- head -->
@@ -97,20 +108,34 @@ export default defineComponent({
       <tbody>
         <tr>
           <td></td>
-          <td><input type="text" placeholder="Vehicle Name" class="input input-bordered w-full max-w-xs" v-model="vehicleName"/></td>
-          <td><input type="text" placeholder="License Plate" class="input input-bordered w-full max-w-xs" v-model="licensePlate"/></td>
-          <td><a class="btn btn-success" v-on:click="createVehicle">Create Vehicle</a></td>
+          <td><input type="text" placeholder="Vehicle Name" class="input input-bordered w-full "
+              v-model="vehicleName" /></td>
+          <td><input type="text" placeholder="License Plate" class="input input-bordered w-full "
+              v-model="licensePlate" /></td>
+          <td><a class="btn btn-success w-full" v-on:click="createVehicle">Create Vehicle</a></td>
+        </tr>
+        <tr v-if="vehicleList.length == 0">
+          <th>
+            <div class="skeleton h-4 w-full"></div>
+          </th>
+          <td>
+            <div class="skeleton h-4 w-full"></div>
+          </td>
+          <td>
+            <div class="skeleton h-4 w-full"></div>
+          </td>
+          <td><a class="btn btn-error w-full" v-on:click="createVehicle">Delete Vehicle</a></td>
+          <td></td>
         </tr>
         <tr v-for="vehicle in vehicleList">
           <th>{{ vehicle.id }}</th>
           <td>{{ vehicle.name }}</td>
           <td>{{ vehicle.licenseplate }}</td>
-          <td></td>
+          <td><a class="btn btn-error w-full" v-on:click="createVehicle">Delete Vehicle</a></td>
         </tr>
       </tbody>
     </table>
   </div>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>