feat: ✨ implemented ui and api interactions for drivers and vehicles redesigned settings ui

app.py

@@ -94,6 +94,7 @@ def handleDriverRoute():
         # handle creating vehicle
         try:
             __driverHandler.createVehicle(request.args["name"])
+            # TODO: return id, 200
         except Exception as e:
             return "error" + " " + str(e), 500
 

web/src/views/driver.vue

@@ -1,10 +1,82 @@
 <script lang="ts">
-import {defineComponent, SetupContext} from 'vue';
+import { defineComponent, Ref, ref, SetupContext } from 'vue';
+
+type driver = {
+  id: number
+  name: string
+}
 
 export default defineComponent({
   name: 'map',
   setup(_, { emit }: SetupContext) {
-    return { 
+
+    const driverName: Ref<string> = ref("")
+    const driverList: Ref<driver[]> = ref([{ id: 1, name: "jeff" }])
+
+    // handles sending webrequests to the backend
+    const getDrivers = async () => {
+
+      const headers: Headers = new Headers()
+
+      headers.set('Content-Type', 'application/json')
+      headers.set('Accept', 'application/json')
+
+      const request: RequestInfo = new Request("/vehicle", {
+        method: "GET",
+        headers: headers
+      })
+
+      var response = await fetch(request)
+
+      // make sure the request was successfull
+      if (response.ok) {
+
+        var jsonBody = await response.json()
+
+        // convert vehicles from json response to processable data
+        var drivers: driver[] = []
+        for (let i = 0; i < jsonBody.length; i++) {
+          drivers.push(jsonBody["vehicles"][i])
+        }
+
+        // push all vehicles into the table
+        drivers.forEach(driver => {
+          driverList.value.push({ id: driver.id, name: driver.name })
+        });
+
+      } else {
+        alert(response.text)
+      }
+    }
+
+    // handles sending webrequests to the backend
+    const createDriver = async () => {
+      // TODO: send of post request with new driver and attach it to the grid
+      const headers: Headers = new Headers()
+
+      headers.set('Content-Type', 'application/json')
+      headers.set('Accept', 'application/json')
+
+      const request: RequestInfo = new Request("/vehicle", {
+        method: "POST",
+        headers: headers
+      })
+
+      var response = await fetch(request)
+      // make sure the request was successfull
+      if (response.ok) {
+        var jsonBody = await response.json()
+        driverList.value.push({ id: jsonBody["body"], name: driverName.value })
+      } else {
+        alert(response.text)
+      }
+    }
+
+    getDrivers()
+    return {
+      createDriver,
+      driverName,
+      driverList
     };
   },
 });
@@ -12,8 +84,31 @@ export default defineComponent({
 
 
 <template>
-  driver
+  <div class="overflow-x-auto">
+    <table class="table">
+      <!-- head -->
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Name</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td></td>
+          <td><input type="text" placeholder="Driver Name" class="input input-bordered w-full max-w-xs"
+              v-model="driverName" /></td>
+          <td><a class="btn btn-success" v-on:click="createDriver">Create Driver</a></td>
+        </tr>
+        <tr v-for="driver in driverList">
+          <th>{{ driver.id }}</th>
+          <td>{{ driver.name }}</td>
+          <td><a class="btn btn-warning">Open Editor</a></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </template>
 
-<style scoped>
+<style scoped></style>
-</style>

web/src/views/settings.vue

@@ -55,10 +55,9 @@ export default defineComponent({
 
 
 <template>
-    <div class="card bg-base-100 w-full shadow-xl" style="">
         <div class="card-body">
 
-            <h2 class="card-title">Settings</h2>
+            <h2 class="card-title">User Settings</h2>
             <label class="input input-bordered flex items-center gap-2">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                     class="h-4 w-4 opacity-70">
@@ -79,6 +78,9 @@ export default defineComponent({
                 <input type="password" class="grow" value="password" />
             </label>
 
+            <div class="divider"></div>
+
+            <h2 class="card-title">Plattform Settings</h2>
             <div class="w-full">
                 {{ settingsLangLocalized }}:
                 <div class="dropdown dropdown-bottom">
@@ -101,8 +103,6 @@ export default defineComponent({
                 </div>
             </div>
         </div>
-
-    </div>
 </template>
 
 <style scoped>

web/src/views/vehicle.vue

@@ -1,10 +1,76 @@
 <script lang="ts">
-import {defineComponent, SetupContext} from 'vue';
+import {defineComponent, Ref, ref, SetupContext} from 'vue';
+
+type vehicle = {
+  id:number
+  name:string
+}
 
 export default defineComponent({
   name: 'map',
   setup(_, { emit }: SetupContext) {
+
+    const vehicleName:Ref<string> = ref("")
+    const vehicleList:Ref<vehicle[]> = ref([{id:1,name:"Bike"}])
+
+    // handles getting all existing drivers
+    const getVehicles = async () => {
+      const headers: Headers = new Headers()
+      headers.set('Content-Type', 'application/json')
+      headers.set('Accept', 'application/json')
+
+      const request: RequestInfo = new Request("/vehicle", {
+        method:"GET", 
+        headers:headers
+      })
+
+      var response = await fetch(request)
+      // make sure the request was successfull
+      if (response.ok){
+        var jsonBody = await response.json()
+
+        // convert vehicles from json response to processable data
+        var vehicles:vehicle[] = []
+        for(let i = 0; i < jsonBody.length; i++) {
+          vehicles.push(jsonBody["vehicles"][i])
+        }
+
+        // push all vehicles into the table
+        vehicles.forEach(vehicle => {
+          vehicleList.value.push({id: vehicle.id, name: vehicle.name})
+        });
+      } else {
+        alert(response.text)
+      }
+    }
+
+    // handles sending webrequests to the backend
+    const createVehicle = async () => {
+      const headers: Headers = new Headers()
+
+      headers.set('Content-Type', 'application/json')
+      headers.set('Accept', 'application/json')
+
+      const request: RequestInfo = new Request("/vehicle", {
+        method:"POST", 
+        headers:headers
+      })
+
+      var response = await fetch(request)
+      // make sure the request was successfull
+      if (response.ok){
+        var jsonBody = await response.json()
+        vehicleList.value.push({id: jsonBody["body"], name: vehicleName.value})
+      } else {
+        alert(response.text)
+      }
+    }
+
+    getVehicles()
     return { 
+      createVehicle,
+      vehicleName,
+      vehicleList
     };
   },
 });
@@ -12,7 +78,30 @@ export default defineComponent({
 
 
 <template>
-  vehicle
+  <div class="overflow-x-auto">
+    <table class="table">
+      <!-- head -->
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Name</th>
+          <th></th>
+        </tr>
+      </thead>
+      <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><a class="btn btn-success" v-on:click="createVehicle">Create Vehicle</a></td>
+        </tr>
+        <tr v-for="vehicle in vehicleList">
+          <th>{{ vehicle.id }}</th>
+          <td>{{ vehicle.name }}</td>
+          <td><a class="btn btn-warning">Open Editor</a></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </template>
 
 <style scoped>