fix: 🐛 fixed issue in both back and frontend that would prevent geojson data from beeing loaded

web/src/classes/settings.ts

@@ -1,36 +0,0 @@
-enum SettingNodes {
-    allowDateCollect,
-    theme,
-    language,
-}
-
-/**
- * class which handles reading and writing settings
- */
-var SettingsHandler = class SettingsHandler implements ISettings{
-
-    settings:Map<SettingNodes, any>
-    constructor() {
-        this.settings = new Map<SettingNodes, any>();
-        // TODO: load settings from localstorage if any present
-    }
-
-    /**
-     * writes settings to the localstorage and handles errors
-     * @param name the settings name
-     * @param value
-     */
-    WriteSetting(name:SettingNodes, value:any):boolean {
-        return false
-    }
-
-    /**
-     * fetches settings from the localstorage and handles errors
-     * @param name the requested setting
-     */
-    FetchSetting(name:SettingNodes):any {
-        return ""
-    }
-}
-
-export {SettingsHandler, SettingNodes};

web/src/components/fileUpload.vue

@@ -33,6 +33,7 @@ export default defineComponent({
       const target = $event.target as HTMLInputElement;
       if (target && target.files) {
         file.value = target.files[0];
+        console.log(`selected file: ${file.value}`);
       }
     }
 
@@ -45,10 +46,13 @@ export default defineComponent({
 
       const formData = new FormData();
       formData.append("file", file.value);
-      formData.append("driverId", selectedDriver.value.toString());
-      
+      formData.append("driverId", selectedDriver.value.toString());    
+
       try {
-        const response = await fetch('http://localhost:5000/track', {
+
+        console.log('Request Body:', formData);
+
+        const response = await fetch('http://localhost:5000/upload', {
           method: 'POST',
           body: formData,
         });

web/src/components/map.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, onMounted, ref } from 'vue';
+import { defineComponent, onMounted, PropType, ref, watch } from 'vue';
 import "leaflet/dist/leaflet.css";
 import L from "leaflet";
 
@@ -7,28 +7,45 @@ export default defineComponent({
   name: 'Map',
   props: {
     geoJsonData: {
-      type: Object,
-      required: false,
-      default: null,
-    },
+      type: Object as PropType<any>,
+      required: true
+    }
   },
   setup(props) {
     const mapDiv = ref<HTMLElement | null>(null); // ref to map container element
+    const mapInstance = ref<any>(null); // reference for the Leaflet map
 
-    onMounted(() => {
+    const initializeMap = () => {
       if (mapDiv.value) {
-        const map = L.map(mapDiv.value, {
-          center: [51.4819, 7.2162], // Beispielkoordinaten, setze deine eigenen
+        mapInstance.value = L.map(mapDiv.value, {
+          center: [51.4819, 7.2162], // Beispielkoordinaten
           zoom: 13,
         });
 
-        // Hinzufügen der GeoJSON-Daten zur Karte
-        if (props.geoJsonData) {
-          L.geoJSON(props.geoJsonData).addTo(map);
-        }
-
         // Hinzufügen von OpenStreetMap-Kacheln
-        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {}).addTo(map);
+        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {}).addTo(mapInstance.value);
+      }
+    };
+
+    onMounted(() => {
+      console.log(props.geoJsonData)
+      initializeMap();
+    });
+
+    // Beobachte geoJsonData und füge sie der Karte hinzu, wenn sie sich ändert
+    watch(() => props.geoJsonData, (newData) => {
+      if (newData) {
+        console.log("Neue GeoJSON-Daten erhalten:", newData);
+
+        // Stelle sicher, dass die Karte initialisiert wurde
+        if (mapInstance.value) {
+            const geoJsonLayer = L.geoJSON(newData).addTo(mapInstance.value);
+
+            const bounds = geoJsonLayer.getBounds();
+            mapInstance.value.fitBounds(bounds);
+        } else {
+          console.error("Die Karte oder GeoJSON-Daten sind nicht verfügbar.");
+        }
       }
     });
 

web/src/interfaces/ISettings.ts

@@ -1,4 +0,0 @@
-interface ISettings {
-    WriteSetting: (name:SettingNodes, value:any) => boolean;
-    FetchSetting: (name:SettingNodes) => any;
-}

web/src/views/route.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import {defineComponent, ref, Ref, SetupContext} from 'vue';
+import { defineComponent, ref, Ref, SetupContext } from 'vue';
 import PointCloud from '../components/pointcloud.vue';
 import VueDatePicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css'
@@ -7,105 +7,131 @@ import Map from '../components/map.vue';
 import FileUpload from '../components/fileUpload.vue';
 
 type DriverType = {
-  id:number
-  name:string
+  id: number
+  name: string
 }
 
 type track = {
-  id:number
-  name:string
+  id: number
+  name: string
   driver: DriverType
 }
 
+type GeoJSONFeature = {
+  type: "Feature";
+  geometry: {
+    type: "LineString";
+    coordinates: number[][];
+  };
+  properties: {
+    name: string;
+    driver: string;
+  };
+};
+
+type GeoJSON = {
+  type: "FeatureCollection";
+  features: GeoJSONFeature[];
+};
+
 export default defineComponent({
   name: 'map',
-  components: {PointCloud, VueDatePicker, Map, FileUpload},
+  components: { PointCloud, VueDatePicker, Map, FileUpload },
   setup(_, { emit }: SetupContext) {
-    const showMap:Ref<boolean> = ref(false);
-    const showCloud:Ref<boolean> = ref(false);
-    const search:Ref<boolean> = ref(false);
-    const showUpload:Ref<boolean> = ref(false);
-    const tracks:Ref<track[]> = ref([])
+    const showMap: Ref<boolean> = ref(false);
+    const showCloud: Ref<boolean> = ref(false);
+    const search: Ref<boolean> = ref(false);
+    const showUpload: Ref<boolean> = ref(false);
+    const tracks: Ref<track[]> = ref([])
     const startSearchDate = ref();
     const endSearchDate = ref();
-    const mapData = ref(null);
+    const mapData: Ref<GeoJSON | null> = ref(null);
 
-    const loadTrack = async (id:number) => {
+    const loadTrack = async (id: number) => {
       showMap.value = true;
       showCloud.value = false;
       search.value = false;
       showUpload.value = false;
 
-      const headers: Headers = new Headers()
-      headers.set('Content-Type', 'application/json')
-      headers.set('Accept', 'application/json')
+      const headers: Headers = new Headers();
+      headers.set('Content-Type', 'application/json');
+      headers.set('Accept', 'application/json');
 
       const request: RequestInfo = new Request("http://localhost:5000/track?id=" + id, {
-        method:"GET", 
-        headers:headers
-      })
+        method: "GET",
+        headers: headers
+      });
 
-      var response = await fetch(request)
-      
-      // make sure the request was successfull
-      if (response.ok){
-        // convert vehicles from json response to processable data
-        mapData.value = await response.json()
-      } else {
-        console.log(await response.text())
+      try {
+        var response = await fetch(request);
+
+        if (response.ok) {
+          // Wenn die Antwort OK ist, die Daten verarbeiten
+          mapData.value = await response.json();
+
+          // Überprüfe, ob die Antwort die richtigen Daten enthält
+          if (mapData.value && mapData.value.features && mapData.value.features.length > 0) {
+            console.log("GeoJSON-Daten erfolgreich geladen", mapData.value);
+          } else {
+            console.log("Keine GeoJSON-Daten in der Antwort.");
+          }
+        } else {
+          console.log(await response.text());
+        }
+      } catch (error) {
+        console.error("Fehler beim Laden der Track-Daten:", error);
       }
+    };
 
-    }
 
-    const getTracks  = async() => {
+    const getTracks = 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/track", {
-        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++) {
-          tracks.value.push({id: jsonBody[i]["id"], name: jsonBody[i]["name"], driver: {
-            id: jsonBody[i]["driver"]["id"], name: jsonBody[i]["driver"]["name"]
-          }})
+        for (let i = 0; i < jsonBody.length; i++) {
+          tracks.value.push({ id: jsonBody[i]["id"], name: jsonBody[i]["name"], driver: { name: "", id: 0 } })
         }
       } else {
         console.log(await response.text())
       }
     }
 
-    const searchTracks = async() => {
+    const searchTracks = 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/track?start="+startSearchDate.value+"&end="+endSearchDate.value, {
-        method:"GET", 
-        headers:headers
+      const request: RequestInfo = new Request("http://localhost:5000/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){
+      if (response.ok) {
         var jsonBody = await response.json()
+        console.log(jsonBody)
 
         // convert vehicles from json response to processable data
-        for(let i = 0; i < jsonBody.length; i++) {
+        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"]
+            id: jsonBody[i]["id"],
+            name: jsonBody[i]["name"],
+            driver: {
+              name: jsonBody[i]["driver"]["name"],
+              id: jsonBody[i]["driver"]["id"]
             }
           })
         }
@@ -114,7 +140,9 @@ export default defineComponent({
       }
     }
 
-    return { 
+    getTracks()
+
+    return {
       showMap,
       showCloud,
       search,
@@ -133,13 +161,18 @@ export default defineComponent({
 
 
 <template>
-  <FileUpload v-if="showUpload" @close="showUpload=false;" :drivers="[]" style="position:absolute; top: 30VH; width: 80%;"></FileUpload>
+  <FileUpload v-if="showUpload" @close="showUpload = false;" :drivers="[]"
+    style="position:absolute; top: 30VH; width: 80%;"></FileUpload>
   <div class="grid grid-flow-col auto-cols-max gap-4">
     <div>
       <ul class="menu menu-xs bg-base-200 rounded-lg w-full max-w-xs overscroll-auto">
-        <li> <a v-on:click="showUpload=true; showMap=false;showCloud=false;search=false;"> upload file </a> </li>
-        <li> <a v-on:click="search=true;showMap=false;showCloud=false;showUpload=false;"> filter track </a> </li>
-        <li><div class="divider"></div></li>
+        <li> <a v-on:click="showUpload = true; showMap = false; showCloud = false; search = false;"> upload file </a>
+        </li>
+        <li> <a v-on:click="search = true; showMap = false; showCloud = false; showUpload = false;"> filter track </a>
+        </li>
+        <li>
+          <div class="divider"></div>
+        </li>
         <li v-for="track in tracks"> <a v-on:click="loadTrack(track.id)"> {{ track.name }} </a> </li>
       </ul>
     </div>
@@ -158,10 +191,10 @@ export default defineComponent({
       <button class="btn btn-success" v-on:click="" style="margin-left: 5%; height:60px; width:120px;">Search</button>
     </div>
     <div v-if="showMap && !search && !showCloud">
-      <Map style="width: 68VW; margin-left: 10%; border-radius: 10px; border: 1px solid #95a5a6;"></Map>
+      <Map :geoJsonData="mapData"
+        style="width: 68vw; margin-left: 10%; border-radius: 10px; border: 1px solid #95a5a6;"></Map>
     </div>
   </div>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>

web/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./theme-manager.config.ts","./vite.config.ts","./src/app.vue","./src/leatflet.d.ts","./src/main.ts","./src/vite-env.d.ts","./src/classes/debugger.ts","./src/classes/language.ts","./src/components/settings.vue","./src/components/cookieprompt.vue","./src/components/fileupload.vue","./src/components/map.vue","./src/components/navbar.vue","./src/components/pointcloud.vue","./src/views/driver.vue","./src/views/home.vue","./src/views/login.vue","./src/views/register.vue","./src/views/route.vue","./src/views/settings.vue","./src/views/vehicle.vue"],"version":"5.6.2"}