feat: ✨ implemented track searching

web/src/views/route.vue

@@ -6,10 +6,15 @@ import '@vuepic/vue-datepicker/dist/main.css'
 import Map from '../components/map.vue';
 import FileUpload from '../components/fileUpload.vue';
 
+type driver = {
+  id:number
+  name:string
+}
 
 type track = {
   id:number
   name:string
+  driver: driver
 }
 
 export default defineComponent({
@@ -77,7 +82,34 @@ export default defineComponent({
     }
 
     const searchTracks = async() => {
+      const headers: Headers = new Headers()
+      headers.set('Content-Type', 'application/json')
+      headers.set('Accept', 'application/json')
 
+      const request: RequestInfo = new Request("/track?start="+startSearchDate.value+"&end="+endSearchDate.value, {
+        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++) {
+          tracks.value.push({
+            id: jsonBody[i]["id"], 
+            name: jsonBody[i]["name"], 
+            driver:{
+              name:jsonBody[i]["driver"]["name"], 
+              id:jsonBody[i]["driver"]["id"]
+            }
+          })
+        }
+      } else {
+        alert(response.text)
+      }
     }
 
     return {