From a4b18958444d1f7a046a311ccd61dd00c30413bd Mon Sep 17 00:00:00 2001
From: steev <mauricefl@outlook.de>
Date: Thu, 9 Jan 2025 01:30:05 +0100
Subject: [PATCH] feat: :bug: readded support for selectable driver and vehicle
 at track upload

---
 app.py                            |   7 +-
 web/src/components/fileUpload.vue | 128 ++++++++++++++++++++++++------
 2 files changed, 107 insertions(+), 28 deletions(-)

diff --git a/app.py b/app.py
index 87c859f..c2cb09d 100644
--- a/app.py
+++ b/app.py
@@ -199,8 +199,11 @@ def uploadFile():
         with open(file_path, 'wb') as f:
             f.write(file.read())
                 
-        driver = driverHandler.getDriver(1)
-        vehicle = vehicleHandler.getVehicle(1)
+        driverID = int(request.form.get('driverID'))
+        vehicleID = int(request.form.get('vehicleID'))
+                
+        driver = driverHandler.getDriver(driverID)
+        vehicle = vehicleHandler.getVehicle(vehicleID)
         
         app.logger.debug(f"driver {driver.id}")
         app.logger.debug(f"vehicle {vehicle.id}")
diff --git a/web/src/components/fileUpload.vue b/web/src/components/fileUpload.vue
index c0c291c..05637fd 100644
--- a/web/src/components/fileUpload.vue
+++ b/web/src/components/fileUpload.vue
@@ -1,12 +1,18 @@
 <script lang="ts">
-import {defineComponent, SetupContext, ref, Ref} from 'vue';
+import { defineComponent, SetupContext, ref, Ref } from 'vue';
 import GetLocalizedText from "../classes/language";
 
 type driver = {
-  id:number
-  name:string
+  id: number
+  name: string
 }
 
+type vehicle = {
+  id: number
+  name: string
+}
+
+
 export default defineComponent({
   emits: ['close', 'response'],
   name: 'settings',
@@ -15,16 +21,18 @@ export default defineComponent({
 
     const file = ref<File | null>();
     const form = ref<HTMLFormElement>();
-    const drivers:Ref<driver[]> = ref([])
-    const selectedDriver:Ref<number> = ref(0);
+    const drivers: Ref<driver[]> = ref([])
+    const vehicles: Ref<vehicle[]> = ref([])
+    const selectedDriver: Ref<number> = ref(0);
+    const selectedVehicle: Ref<number> = ref(0);
 
-    props.drivers.forEach((d:driver) => {
-      drivers.value.push({id:d.id, name:d.name})
+    props.drivers.forEach((d: driver) => {
+      drivers.value.push({ id: d.id, name: d.name })
     });
 
     // localized text
     // if there is time left this gets moved out to its own class
-    var localizedUploadHeader:Ref<string> = ref("")
+    var localizedUploadHeader: Ref<string> = ref("")
     async function getLocalization() {
       localizedUploadHeader.value = await GetLocalizedText("localizedUploadHeader")
     }
@@ -37,6 +45,60 @@ export default defineComponent({
       }
     }
 
+    // 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("http://localhost:5000/driver", {
+        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
+        for (let i = 0; i < jsonBody.length; i++) {
+          drivers.value.push({ id: jsonBody[i]["id"], name: jsonBody[i]["name"] })
+        }
+      } else {
+        console.log(await response.text())
+      }
+    }
+
+    // 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("http://localhost:5000/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
+        for (let i = 0; i < jsonBody.length; i++) {
+          vehicles.value.push({ id: jsonBody[i]["id"], name: jsonBody[i]["name"] })
+        }
+      } else {
+        console.log(await response.text())
+      }
+    }
+
     var save = async () => {
 
       if (!file.value) {
@@ -46,7 +108,8 @@ export default defineComponent({
 
       const formData = new FormData();
       formData.append("file", file.value);
-      formData.append("driverId", selectedDriver.value.toString());    
+      formData.append("driverID", selectedDriver.value.toString());
+      formData.append("vehicleID", selectedVehicle.value.toString());
 
       try {
 
@@ -73,16 +136,21 @@ export default defineComponent({
 
     }
 
+    getVehicles()
+    getDrivers()
     getLocalization()
     const close = () => {
       emit("close");
     };
 
-    return { 
-      close, 
+    return {
+      close,
       fileInputChange,
       selectedDriver,
+      selectedVehicle,
       save,
+      drivers,
+      vehicles,
       localizedUploadHeader
     };
   },
@@ -98,19 +166,26 @@ export default defineComponent({
 
       <button class="btn btn-error close round" @click="close()">
         <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed">
-          <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/>
+          <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
         </svg>
       </button>
       <label class="form-control w-full max-w-xs">
         <div class="label">
           <span class="label-text">Upload a GPX File</span>
         </div>
-        <input type="file" ref="file" v-on:change="fileInputChange($event)" class="file-input file-input-bordered w-full max-w-xs" />
+        <input type="file" ref="file" v-on:change="fileInputChange($event)"
+          class="file-input file-input-bordered w-full max-w-xs" />
       </label>
       <div class="dropdown dropdown-bottom">
         select Driver: <div tabindex="0" role="button" class="btn m-1">Click</div>
         <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
-          <li v-for="driver in drivers"><a v-on:click="selectedDriver=driver.id">{{ driver.name }}</a></li>
+          <li v-for="driver in drivers"><a v-on:click="selectedDriver = driver.id">{{ driver.name }}</a></li>
+        </ul>
+      </div>
+      <div class="dropdown dropdown-bottom">
+        select Vehicle: <div tabindex="0" role="button" class="btn m-1">Click</div>
+        <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
+          <li v-for="vehicle in vehicles"><a v-on:click="selectedVehicle = vehicle.id">{{ vehicle.name }}</a></li>
         </ul>
       </div>
       <button class="btn btn-success" v-on:click="save">Upload</button>
@@ -119,16 +194,17 @@ export default defineComponent({
 </template>
 
 <style scoped>
-  .settingsBody {
-    position: absolute; 
-    margin: 10% 10% 0 10%; 
-    width: 80%; 
-    z-index: 10;
-  }
-  .btn.close {
-    position: absolute;
-    right: 30px;
-    top: 30px;
-    margin: 0;
-  }
+.settingsBody {
+  position: absolute;
+  margin: 10% 10% 0 10%;
+  width: 80%;
+  z-index: 10;
+}
+
+.btn.close {
+  position: absolute;
+  right: 30px;
+  top: 30px;
+  margin: 0;
+}
 </style>
\ No newline at end of file