feat: 🐛 readded support for selectable driver and vehicle at track upload

app.py

@@ -199,8 +199,11 @@ def uploadFile():
         with open(file_path, 'wb') as f:
             f.write(file.read())
                 
-        driver = driverHandler.getDriver(1)
+        driverID = int(request.form.get('driverID'))
-        vehicle = vehicleHandler.getVehicle(1)
+        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}")

web/src/components/fileUpload.vue

@@ -7,6 +7,12 @@ type driver = {
   name: string
 }
 
+type vehicle = {
+  id: number
+  name: string
+}
+
+
 export default defineComponent({
   emits: ['close', 'response'],
   name: 'settings',
@@ -16,7 +22,9 @@ export default defineComponent({
     const file = ref<File | null>();
     const form = ref<HTMLFormElement>();
     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 })
@@ -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,6 +136,8 @@ export default defineComponent({
 
     }
 
+    getVehicles()
+    getDrivers()
     getLocalization()
     const close = () => {
       emit("close");
@@ -82,7 +147,10 @@ export default defineComponent({
       close,
       fileInputChange,
       selectedDriver,
+      selectedVehicle,
       save,
+      drivers,
+      vehicles,
       localizedUploadHeader
     };
   },
@@ -105,7 +173,8 @@ export default defineComponent({
         <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>
@@ -113,6 +182,12 @@ export default defineComponent({
           <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>
     </div>
   </div>
@@ -125,6 +200,7 @@ export default defineComponent({
   width: 80%;
   z-index: 10;
 }
+
 .btn.close {
   position: absolute;
   right: 30px;