From d0758fb56b3246053ab95e3ce87d9f85430a01d1 Mon Sep 17 00:00:00 2001
From: steev <mauricefl@outlook.de>
Date: Thu, 9 Jan 2025 11:45:20 +0100
Subject: [PATCH] did stuff

---
 .gitea/workflows/deployment.yml   |  23 ----
 web/src/components/map.vue        |  20 ++--
 web/src/components/navbar.vue     |  13 +--
 web/src/components/pointcloud.vue | 178 ++++++++++++++++++++++++------
 web/src/views/driver.vue          |   2 +-
 web/src/views/route.vue           |  15 ++-
 web/src/views/vehicle.vue         |   2 +-
 7 files changed, 168 insertions(+), 85 deletions(-)
 delete mode 100644 .gitea/workflows/deployment.yml

diff --git a/.gitea/workflows/deployment.yml b/.gitea/workflows/deployment.yml
deleted file mode 100644
index eb33ad4..0000000
--- a/.gitea/workflows/deployment.yml
+++ /dev/null
@@ -1,23 +0,0 @@
-name: Build and Push Docker Image
-
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  build-and-push:
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Log in to DockerHub
-        run: echo "${{ ?!EQ{_Pt\$D}yb^}d8 }}" | docker login https://dockerreg.slpnetwork.de -u "${{ slpdocker }}" --password-stdin
-
-      - name: Build Docker Image
-        run: |
-          docker build -t dockerreg.slpnetwork.de/geotrack:latest .
-
-      - name: Push Docker Image
-        run: |
-          docker push dockerreg.slpnetwork.de/geotrack:latest
diff --git a/web/src/components/map.vue b/web/src/components/map.vue
index 1c9b97e..d9f14f2 100644
--- a/web/src/components/map.vue
+++ b/web/src/components/map.vue
@@ -18,11 +18,10 @@ export default defineComponent({
     const initializeMap = () => {
       if (mapDiv.value) {
         mapInstance.value = L.map(mapDiv.value, {
-          center: [51.4819, 7.2162], // Beispielkoordinaten
+          center: [51.4819, 7.2162],
           zoom: 13,
         });
 
-        // Hinzufügen von OpenStreetMap-Kacheln
         L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {}).addTo(mapInstance.value);
       }
     };
@@ -32,12 +31,10 @@ export default defineComponent({
       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);
 
@@ -50,14 +47,13 @@ export default defineComponent({
     });
 
     return {
-      mapDiv, // Gebe mapDiv zurück, damit es im Template verwendet wird
+      mapDiv, 
     };
   },
 });
 </script>
 
 <template>
-  <!-- Das ref-Attribut gibt den Container für die Karte an -->
   <div ref="mapDiv" style="width: 70vw; height: 75vh; overflow: hidden;"></div>
   <br>
   <div class="overflow-x-auto" style="width: 70vw;">
@@ -85,16 +81,14 @@ export default defineComponent({
 </template>
 
 <style scoped>
-/* Verhindert, dass die Karte über den Bildschirm hinausgeht */
 #mapDiv {
-  width: 100vw; /* Volle Breite des Viewports */
-  height: 70vh; /* Volle Höhe des Viewports */
-  margin: 0;     /* Keine Margen */
-  padding: 0;    /* Keine Auffüllung */
-  overflow: hidden; /* Verhindert ungewolltes Überlaufen */
+  width: 100vw; 
+  height: 70vh; 
+  margin: 0;
+  padding: 0;
+  overflow: hidden; 
 }
 
-/* Optional: Globale Styles für den Body und html, um das Layout zu normalisieren */
 html, body {
   margin: 0;
   padding: 0;
diff --git a/web/src/components/navbar.vue b/web/src/components/navbar.vue
index b6d828f..969e703 100644
--- a/web/src/components/navbar.vue
+++ b/web/src/components/navbar.vue
@@ -39,15 +39,10 @@ export default defineComponent({
       <ul
         tabindex="0"
         class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
-        <li><a>Item 1</a></li>
-        <li>
-          <a>Parent</a>
-          <ul class="p-4">
-            <li><a>Submenu 1</a></li>
-            <li><a>Submenu 2</a></li>
-          </ul>
-        </li>
-        <li><a>Item 3</a></li>
+        <li><RouterLink to="/">Home</RouterLink></li>
+        <li><RouterLink to="/driver">Driver</RouterLink></li>
+        <li><RouterLink to="/vehicle">Vehicle</RouterLink></li>
+        <li><RouterLink to="/route">Routes</RouterLink></li>
       </ul>
     </div>
     <a class="btn btn-ghost text-xl">GeoTrack</a>
diff --git a/web/src/components/pointcloud.vue b/web/src/components/pointcloud.vue
index 9b0d71c..af44b88 100644
--- a/web/src/components/pointcloud.vue
+++ b/web/src/components/pointcloud.vue
@@ -8,6 +8,7 @@ type Route = {
   name: string;
   id: number;
   time: Date;
+  driver: { id: number; name: string };
 };
 
 export default defineComponent({
@@ -18,6 +19,8 @@ export default defineComponent({
     const tooltipRef: Ref<HTMLDivElement | null> = ref(null);
     const tooltipText = ref("");
     const router = useRouter();
+    const legend = ref<Record<number, string>>({});
+    const driverColors = ref<Record<number, string>>({});
 
     const close = () => {
       emit("close");
@@ -47,26 +50,91 @@ export default defineComponent({
       const raycaster = new THREE.Raycaster();
       const mouse = new THREE.Vector2();
 
-      // Beispiel-Daten (Punkte)
+      // Beispiel-Daten (Fahrer mit ID und Punkten)
+      const drivers = [
+        { id: 1, name: "Alice" },
+        { id: 2, name: "Bob" },
+        { id: 3, name: "Charlie" },
+        { id: 4, name: "Dave" },
+        { id: 5, name: "Eve" },
+      ];
+
       const points: Route[] = Array.from({ length: 100 }, (_, i) => ({
         name: `Route ${i + 1}`,
         id: i + 1,
         time: new Date(Date.now() - i * 1000 * 60),
+        driver: drivers[i % drivers.length], // Fahrer zuweisen
       }));
 
+      // Nach Fahrern gruppieren
+      const groupedPoints = points.reduce((acc, point) => {
+        const driverId = point.driver.id;
+        acc[driverId] = acc[driverId] || [];
+        acc[driverId].push(point);
+        return acc;
+      }, {} as Record<number, Route[]>);
+
+      // Farben für Fahrer generieren und der Legende zuweisen
+      drivers.forEach((driver, index) => {
+        const color = new THREE.Color(`hsl(${(index * 360) / drivers.length}, 70%, 50%)`);
+        driverColors.value[driver.id] = color.getStyle(); // Farbwert für die Legende
+        legend.value[driver.id] = driver.name; // Fahrernamen für die Legende
+      });
+
       // Punktwolke erstellen
       const geometry = new THREE.BufferGeometry();
-      const vertices = new Float32Array(
-        points.flatMap((_, i) => [
-          (Math.random() - 0.5) * 20,
-          (Math.random() - 0.5) * 20,
-          (Math.random() - 0.5) * 20,
-        ])
-      );
-      geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
+      const vertices: number[] = [];
+      const colors: number[] = [];
+
+      const totalPoints = points.length;
+      const offsetXStep = 2; // Wir setzen den Abstand pro Gruppe
+
+      let offsetX = 0;
+
+      // Berechnungen für den Mittelpunkt der Punktwolke
+      let sumX = 0, sumY = 0, sumZ = 0;
+
+      Object.entries(groupedPoints).forEach(([driverIdStr, driverPoints], index) => {
+        const driverId = parseInt(driverIdStr, 10);
+        const color = new THREE.Color(driverColors.value[driverId]); // Die Farbe aus `driverColors`
+
+        // Berechnung des Abstands auf der X-Achse basierend auf der Fahrer-ID
+        offsetX += offsetXStep;
+
+        driverPoints.forEach(() => {
+          // Zufällige Position innerhalb eines Bereichs
+          const x = offsetX + (Math.random() - 0.5) * 2;
+          const y = (Math.random() - 0.5) * 6;
+          const z = (Math.random() - 0.5) * 6;
+
+          // Berechnungen für den Mittelpunkt
+          sumX += x;
+          sumY += y;
+          sumZ += z;
+
+          vertices.push(x, y, z);
+          colors.push(color.r, color.g, color.b);
+        });
+      });
+
+      // Mittelpunkt der Punktwolke berechnen
+      const centerX = sumX / totalPoints;
+      const centerY = sumY / totalPoints;
+      const centerZ = sumZ / totalPoints;
+
+      // Punktwolke verschieben, damit der Mittelpunkt im Ursprung ist
+      const offset = new THREE.Vector3(-centerX, -centerY, -centerZ);
+      for (let i = 0; i < vertices.length; i += 3) {
+        vertices[i] += offset.x;
+        vertices[i + 1] += offset.y;
+        vertices[i + 2] += offset.z;
+      }
+
+      geometry.setAttribute("position", new THREE.Float32BufferAttribute(vertices, 3));
+      geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
 
       const material = new THREE.PointsMaterial({
-        color: 0x0077ff,
+        vertexColors: true, // Farben pro Punkt verwenden
         size: 0.3,
       });
 
@@ -88,12 +156,10 @@ export default defineComponent({
       const onMouseMove = (event: MouseEvent) => {
         if (!canvasRef.value || !tooltipRef.value) return;
 
-        // Mausposition berechnen (normalisiert)
         const rect = canvasRef.value.getBoundingClientRect();
         mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
         mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
 
-        // Raycasting
         raycaster.setFromCamera(mouse, camera);
         const intersects = raycaster.intersectObject(pointCloud);
 
@@ -102,31 +168,31 @@ export default defineComponent({
           const point = points[intersectIndex];
 
           tooltipRef.value.style.display = "block";
-          tooltipRef.value.style.left = `${event.clientX}px`;
-          tooltipRef.value.style.top = `${event.clientY - 20}px`;
-          tooltipText.value = `${point.name} (${point.time.toLocaleString()})`;
+
+          // 3D-Koordinaten des Punktes holen
+          const positionArray = pointCloud.geometry.attributes.position.array;
+          const x = positionArray[intersectIndex * 3];
+          const y = positionArray[intersectIndex * 3 + 1];
+          const z = positionArray[intersectIndex * 3 + 2];
+
+          // 3D-Koordinaten in 2D Bildschirmkoordinaten umrechnen
+          const screenPosition = new THREE.Vector3(x, y, z);
+          screenPosition.project(camera);
+
+          // Umrechnung von NDC (Normalized Device Coordinates) zu Pixeln
+          const tooltipX = (screenPosition.x * 0.5 + 0.5) * window.innerWidth;
+          const tooltipY = (screenPosition.y * -0.5 + 0.5) * window.innerHeight;
+
+          tooltipRef.value.style.left = `${tooltipX + 10}px`; // 10px Abstand zum Punkt
+          tooltipRef.value.style.top = `${tooltipY + 10}px`;  // 10px Abstand zum Punkt
+
+          tooltipText.value = `${point.driver.name}: ${point.name} (${point.time.toLocaleString()})`;
         } else {
           tooltipRef.value.style.display = "none";
         }
       };
 
-      // Punkt klicken
-      const onMouseClick = (event: MouseEvent) => {
-        if (!canvasRef.value) return;
-
-        // Raycasting
-        raycaster.setFromCamera(mouse, camera);
-        const intersects = raycaster.intersectObject(pointCloud);
-
-        if (intersects.length > 0) {
-          const intersectIndex = Math.floor(intersects[0].index || 0);
-          const point = points[intersectIndex];
-          router.push(`/routeViewer/${point.id}`);
-        }
-      };
-
       canvasRef.value.addEventListener("mousemove", onMouseMove);
-      canvasRef.value.addEventListener("click", onMouseClick);
 
       // Fenstergröße anpassen
       window.addEventListener("resize", () => {
@@ -141,6 +207,8 @@ export default defineComponent({
       canvasRef,
       tooltipRef,
       tooltipText,
+      legend,
+      driverColors,
     };
   },
 });
@@ -152,6 +220,16 @@ export default defineComponent({
     <div ref="tooltipRef" class="tooltip hidden fixed z-50 px-2 py-1 bg-base-200 text-base-content rounded">
       {{ tooltipText }}
     </div>
+    <!-- Legende -->
+    <div class="legend absolute top-10 left-10 bg-base-200 p-4 rounded shadow-lg z-50">
+      <h3 class="font-bold mb-2">Fahrer Legende</h3>
+      <ul>
+        <li v-for="(driverName, driverId) in legend" :key="driverId" class="flex items-center mb-1">
+          <div class="w-4 h-4" :style="{ backgroundColor: driverColors[driverId] }"></div>
+          <span class="ml-2">{{ driverName }}</span>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -168,10 +246,40 @@ canvas {
   height: 100%;
 }
 
-.btn.close {
+.tooltip {
+  display: none;
   position: absolute;
-  top: 10px;
-  right: 10px;
-  z-index: 10;
+  z-index: 50;
+  padding: 2px 8px;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  border-radius: 4px;
+  pointer-events: none;
+}
+
+.legend {
+  width: auto;
+  max-width: 250px;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 10px;
+  border-radius: 8px;
+  font-size: 14px;
+}
+
+.legend ul {
+  padding: 0;
+  list-style-type: none;
+}
+
+.legend li {
+  display: flex;
+  align-items: center;
+}
+
+.legend .color-box {
+  width: 15px;
+  height: 15px;
+  margin-right: 10px;
 }
 </style>
diff --git a/web/src/views/driver.vue b/web/src/views/driver.vue
index 3bfb6af..0e06653 100644
--- a/web/src/views/driver.vue
+++ b/web/src/views/driver.vue
@@ -11,7 +11,7 @@ export default defineComponent({
   setup(_, { emit }: SetupContext) {
 
     const driverName: Ref<string> = ref("")
-    const driverList: Ref<driver[]> = ref([{ id: 1, name: "jeff" }])
+    const driverList: Ref<driver[]> = ref([])
 
     // handles sending webrequests to the backend
     const getDrivers = async () => {
diff --git a/web/src/views/route.vue b/web/src/views/route.vue
index df56db5..e4a539d 100644
--- a/web/src/views/route.vue
+++ b/web/src/views/route.vue
@@ -112,10 +112,19 @@ export default defineComponent({
       search.value = false;
       showUpload.value = false;
 
-      const request: RequestInfo = new Request("http://localhost:5000/track?start=" + startSearchDate.value + "&end=" + endSearchDate.value, {
+      // Formatierung der Datumsangaben
+      const startDate = startSearchDate.value ? new Date(startSearchDate.value).toISOString().split('T')[0] : null;
+      const endDate = endSearchDate.value ? new Date(endSearchDate.value).toISOString().split('T')[0] : null;
+
+      // Baue den Request-URL mit den formatierten Datumsangaben
+      const url = new URL("http://localhost:5000/track");
+      if (startDate) url.searchParams.append("start", startDate);
+      if (endDate) url.searchParams.append("end", endDate);
+
+      const request: RequestInfo = new Request(url.toString(), {
         method: "GET",
-        headers: headers
-      })
+        headers: headers,
+      });
 
       var response = await fetch(request)
       // make sure the request was successfull
diff --git a/web/src/views/vehicle.vue b/web/src/views/vehicle.vue
index 973fedb..c583d9d 100644
--- a/web/src/views/vehicle.vue
+++ b/web/src/views/vehicle.vue
@@ -11,7 +11,7 @@ export default defineComponent({
   setup(_, { emit }: SetupContext) {
 
     const vehicleName:Ref<string> = ref("")
-    const vehicleList:Ref<vehicle[]> = ref([{id:1,name:"Bike"}])
+    const vehicleList:Ref<vehicle[]> = ref([])
 
     // handles getting all existing drivers
     const getVehicles = async () => {