From f9995505a844c7c949ecd6a90391f24da82d5f23 Mon Sep 17 00:00:00 2001
From: flfeders <f.federspiel@federspiel.tech>
Date: Fri, 27 Sep 2024 21:12:47 +0200
Subject: [PATCH] Help Slideover and trackingtrips

---
 components/HelpSlideover.vue                 |  2 +-
 components/Map.vue                           | 32 ++++++++++++++++----
 pages/trackingTrips/[mode]/[[id]].client.vue | 25 +++++++++++++--
 pages/trackingTrips/index.vue                |  8 +++++
 4 files changed, 57 insertions(+), 10 deletions(-)

diff --git a/components/HelpSlideover.vue b/components/HelpSlideover.vue
index 790952c..9e53a82 100644
--- a/components/HelpSlideover.vue
+++ b/components/HelpSlideover.vue
@@ -22,7 +22,7 @@ const links = [{
   target: '_blank'
 }, {
   label: 'Roadmap',
-  icon: 'i-heroicons-rocket-launch-solid',
+  icon: 'i-heroicons-rocket-launch',
   to: 'https://fedeo.de/roadmap',
   target: '_blank'
 }, {
diff --git a/components/Map.vue b/components/Map.vue
index 5dcb800..f32ffd1 100644
--- a/components/Map.vue
+++ b/components/Map.vue
@@ -1,13 +1,17 @@
 <script setup>
 
 const props = defineProps({
-  markers: {
+  startMarker: {
+    type: Array,
+    required: true
+  },
+  endMarker: {
     type: Array,
     required: true
   }
 })
 
-const {markers} = props
+const {startMarker,endMarker} = props
 
 const zoom =ref(2)
 
@@ -20,7 +24,7 @@ const zoom =ref(2)
   <div class="h-full w-full">
     <LMap
         style="height: 300px;"
-        :center="markers[0]"
+        :center="startMarker"
         :use-global-leaflet="false"
         :zoom="10"
         ref="map"
@@ -32,10 +36,26 @@ const zoom =ref(2)
           name="OpenStreetMap"
       />
       <LMarker
-          v-for="marker in markers"
-          :lat-lng="marker"
-      />
+          :lat-lng="startMarker"
+      >
+        <LIcon
+            icon-url="https://api.iconify.design/heroicons:map-pin-solid.svg"
+        />
+      </LMarker>
+      <LMarker
+          :lat-lng="endMarker"
+      >
+        <LIcon
+            icon-url="https://api.iconify.design/heroicons:flag-solid.svg"
+        />
+      </LMarker>
     </LMap>
+    <div class="w-2/3 mx-auto mt-3 flex flex-row justify-between">
+
+      <p><UIcon name="i-heroicons-map-pin-solid" class="mr-3"/>Start</p>
+
+      <p><UIcon name="i-heroicons-flag-solid" class="mr-3"/>Ziel</p>
+    </div>
   </div>
 </template>
 
diff --git a/pages/trackingTrips/[mode]/[[id]].client.vue b/pages/trackingTrips/[mode]/[[id]].client.vue
index 88d7ec9..576f7b8 100644
--- a/pages/trackingTrips/[mode]/[[id]].client.vue
+++ b/pages/trackingTrips/[mode]/[[id]].client.vue
@@ -43,6 +43,7 @@ const itemInfo = ref({
 const oldItemInfo = ref({})
 
 const profiles = ref([])
+const projects = ref([])
 
 //Functions
 const setupPage = async () => {
@@ -56,6 +57,7 @@ const setupPage = async () => {
   if(itemInfo.value) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
 
   profiles.value = await useSupabaseSelect("profiles","*")
+  projects.value = await useSupabaseSelect("projects","*")
 }
 
 const cancelEditorCreate = () => {
@@ -102,8 +104,8 @@ const zoom = ref(6)
     <template #center>
       <h1
           v-if="itemInfo"
-          :class="['text-xl','font-medium', ...itemInfo.fixed ? ['text-primary-500'] : ['text-rose-600'] ]"
-      >{{itemInfo ? `Fahrt vom: ${dayjs(itemInfo.startTime).format("DD.MM.YY HH:mm")} über ${(itemInfo.distance/1000).toFixed(2)} km` : '' }}</h1>
+          :class="['text-xl','font-medium' ]"
+      ><UIcon name="i-heroicons-lock-closed" v-if="itemInfo.fixed"/><UIcon name="i-heroicons-lock-open" v-else/> {{itemInfo ? `Fahrt vom: ${dayjs(itemInfo.startTime).format("DD.MM.YY HH:mm")} über ${(itemInfo.distance/1000).toFixed(2)} km` : '' }}   </h1>
     </template>
     <template #right>
       <UButton
@@ -190,7 +192,13 @@ const zoom = ref(6)
 
             </UCard>
             <UCard class="mt-5">
-              <Map :markers="[[itemInfo.startLatitude, itemInfo.startLongitude],[itemInfo.endLatitude, itemInfo.endLongitude]]"/>
+              <Map :markers="[[itemInfo.startLatitude, itemInfo.startLongitude],[itemInfo.endLatitude, itemInfo.endLongitude]]"
+                :startMarker="[itemInfo.startLatitude, itemInfo.startLongitude]"
+                 :endMarker="[itemInfo.endLatitude, itemInfo.endLongitude]"
+              />
+
+
+
 
             </UCard>
           </div>
@@ -243,6 +251,17 @@ const zoom = ref(6)
         </template>
       </USelectMenu>
     </UFormGroup>
+    <UFormGroup
+        label="Projekt:"
+    >
+      <USelectMenu
+          v-model="itemInfo.project"
+          :options="projects"
+          option-attribute="name"
+          value-attribute="id"
+
+      />
+    </UFormGroup>
     <UFormGroup
         label="Beschreibung:"
     >
diff --git a/pages/trackingTrips/index.vue b/pages/trackingTrips/index.vue
index 40b0d78..802c273 100644
--- a/pages/trackingTrips/index.vue
+++ b/pages/trackingTrips/index.vue
@@ -43,6 +43,10 @@
       @select="(i) => router.push(`/trackingTrips/show/${i.id}`) "
       :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Fahrten anzuzeigen' }"
   >
+    <template #fixed-data="{row}">
+      <UIcon name="i-heroicons-lock-closed" v-if="row.fixed"/>
+      <div v-else></div>
+    </template>
     <template #licensePlate-data="{row}">
       <span v-if="row === filteredRows[selectedItem]" class="font-bold text-primary-500">{{row.vehicle.licensePlate}}</span>
       <span v-else>{{row.vehicle.licensePlate}}</span>
@@ -108,6 +112,10 @@ const setupPage = async () => {
 setupPage()
 
 const templateColumns = [
+  {
+    key: 'fixed',
+    label: ""
+  },
   {
     key: 'licensePlate',
     label: "Kennzeichen:",