Changes in Tracking and some changes in general historyitems

pages/trackingTrips/[mode]/[[id]].client.vue

@@ -2,6 +2,8 @@
 import dayjs from "dayjs";
 import {useSupabaseSelectSingle} from "~/composables/useSupabase.js";
 
+
+
 definePageMeta({
   middleware: "auth"
 })
@@ -34,30 +36,33 @@ const openTab = ref(0)
 const mode = ref(route.params.mode || "show")
 const itemInfo = ref({
   name: "",
-  licensePlate: "",
-  type: "",
+  type: "Geschäftlich",
   driver: null,
   active: true
 })
 const oldItemInfo = ref({})
 
-
-
+const profiles = ref([])
 
 //Functions
 const setupPage = async () => {
-  if(mode.value === "show" || mode.value === "edit"){
-    itemInfo.value = await useSupabaseSelectSingle("trackingTrips",route.params.id,"*, trackingDevice(*, vehicle(*))")
+  if(mode.value === "show" ){
+    itemInfo.value = await useSupabaseSelectSingle("trackingtrips",route.params.id,"*, trackingDevice(*, vehicle(*))")
+  } else if(mode.value === "edit") {
+    itemInfo.value = await useSupabaseSelectSingle("trackingtrips",route.params.id,"*")
+
   }
 
   if(itemInfo.value) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
+
+  profiles.value = await useSupabaseSelect("profiles","*")
 }
 
 const cancelEditorCreate = () => {
   if(itemInfo.value) {
-    router.push(`/vehicles/show/${itemInfo.value.id}`)
+    router.push(`/trackingTrips/show/${itemInfo.value.id}`)
   } else {
-    router.push(`/vehicles`)
+    router.push(`/trackingTrips`)
   }
 
 }
@@ -76,6 +81,9 @@ const getRowAmount = (row) => {
 }
 
 setupPage()
+
+const zoom = ref(6)
+
 </script>
 
 <template>
@@ -94,92 +102,156 @@ setupPage()
     <template #center>
       <h1
           v-if="itemInfo"
-          :class="['text-xl','font-medium']"
+          :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>
     </template>
     <template #right>
       <UButton
-          v-if="mode === 'edit'"
-          @click="dataStore.updateItem('vehicles',itemInfo, oldItemInfo)"
+          @click="cancelEditorCreate"
+          color="red"
+          variant="outline"
+          v-if="mode === 'edit' || mode === 'create'"
       >
-        Speichern
+        Abbrechen
+      </UButton>
+      <UButton
+          v-if="mode === 'edit'"
+          variant="outline"
+          color="primary"
+          icon="i-mdi-content-save"
+          @click="dataStore.updateItem('trackingtrips',itemInfo, oldItemInfo)"
+      >
+         Entwurf
+      </UButton>
+      <UButton
+          v-if="mode === 'edit'"
+          icon="i-mdi-content-save"
+          @click="dataStore.updateItem('trackingtrips',{...itemInfo, fixed:true}, oldItemInfo)"
+      >
+        Festschreiben
+      </UButton>
+      <UButton
+          v-if="mode === 'show' && !itemInfo.fixed"
+          @click="router.push(`/trackingTrips/edit/${itemInfo.id}`)"
+      >
+        Bearbeiten
       </UButton>
     </template>
   </UDashboardNavbar>
+
+
+
   <UTabs
-      :items="[{label: 'Informationen'},{label: 'Koordinaten'}]"
+      :items="[{label: 'Informationen'}]"
       v-if="mode === 'show' && itemInfo.id"
       class="p-5"
       v-model="openTab"
   >
     <template #item="{item}">
-      <div v-if="item.label === 'Informationen'" class="flex flex-row mt-5">
-        <div class="w-1/2 mr-2">
-          <UCard>
-            <table class="w-full">
-              <tr>
-                <td>Fahrzeug:</td>
-                <td><nuxt-link :to="`/vehicles/show/${itemInfo.trackingDevice.vehicle.id}`">{{itemInfo.trackingDevice.vehicle.licensePlate}}</nuxt-link></td>
-              </tr>
-              <tr>
-                <td>Typ:</td>
-                <td>{{itemInfo.type ? itemInfo.type : "Nicht gesetzt"}}</td>
-              </tr>
-              <tr>
-                <td>Startzeit:</td>
-                <td>{{dayjs(itemInfo.startTime).format("DD.MM.YY HH:mm")}}</td>
-              </tr>
-              <tr>
-                <td>Endzeit:</td>
-                <td>{{dayjs(itemInfo.endTime).format("DD.MM.YY HH:mm")}}</td>
-              </tr>
-              <tr>
-                <td>Entfernung:</td>
-                <td>{{(itemInfo.distance/1000).toFixed(2)}} km</td>
-              </tr>
-            </table>
+      <div v-if="item.label === 'Informationen'" class="flex flex-col mt-5">
+        <div class="flex flex-row" style="height: 40vh">
+          <div class="w-1/2 mr-2">
+            <UCard>
+              <table class="w-full">
+                <tr>
+                  <td>Festgeschrieben:</td>
+                  <td>{{itemInfo.fixed ? "Ja" : "Nein"}}</td>
+                </tr>
+                <tr>
+                  <td>Fahrzeug:</td>
+                  <td><nuxt-link :to="`/vehicles/show/${itemInfo.trackingDevice.vehicle.id}`">{{itemInfo.trackingDevice.vehicle.licensePlate}}</nuxt-link></td>
+                </tr>
+                <tr>
+                  <td>Typ:</td>
+                  <td>{{itemInfo.type ? itemInfo.type : "-"}}</td>
+                </tr>
+                <tr>
+                  <td>Fahrer:</td>
+                  <td>{{profiles.find(i => i.id === itemInfo.driver) ? profiles.find(i => i.id === itemInfo.driver).fullName : "-"}}</td>
+                </tr>
+                <tr>
+                  <td>Startzeit:</td>
+                  <td>{{dayjs(itemInfo.startTime).format("DD.MM.YY HH:mm")}}</td>
+                </tr>
+                <tr>
+                  <td>Endzeit:</td>
+                  <td>{{dayjs(itemInfo.endTime).format("DD.MM.YY HH:mm")}}</td>
+                </tr>
+                <tr>
+                  <td>Entfernung:</td>
+                  <td>{{(itemInfo.distance/1000).toFixed(2)}} km</td>
+                </tr>
+                <tr>
+                  <td>Beschreibung:</td>
+                  <td>{{itemInfo.description ? itemInfo.description : "-" }}</td>
+                </tr>
+              </table>
 
 
-          </UCard>
+            </UCard>
+            <UCard class="mt-5">
+              <Map :markers="[[itemInfo.startLatitude, itemInfo.startLongitude],[itemInfo.endLatitude, itemInfo.endLongitude]]"/>
+
+            </UCard>
+          </div>
+          <div class="w-1/2">
+            <UCard>
+              <div style="height: 75vh; overflow-y: scroll">
+                <HistoryDisplay
+                    type="trackingtrip"
+                    v-if="itemInfo"
+                    :element-id="itemInfo.id"
+                    render-headline
+                />
+              </div>
+
+            </UCard>
+          </div>
         </div>
-        <div class="w-1/2">
-          <UCard>
-<!--            <HistoryDisplay
-                type="vehicle"
-                v-if="itemInfo"
-                :element-id="itemInfo.id"
-                render-headline
-            />-->
-          </UCard>
+        <div class="h-40 mt-5">
+
+
         </div>
       </div>
-      <div v-else-if="item.label === 'Koordinaten'">
-        <UCard class="mt-5">
-          <LMap
-              style="height: 300px;"
-              :center="[itemInfo.startLatitude, itemInfo.startLongitude]"
-              :use-global-leaflet="false"
-              :zoom="10"
-          >
-            <LTileLayer
-                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-                attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
-                layer-type="base"
-                name="OpenStreetMap"
-            />
-            <LMarker :lat-lng="[itemInfo.startLatitude, itemInfo.startLongitude]"  />
-            <LMarker :lat-lng="[itemInfo.endLatitude, itemInfo.endLongitude]" />
-          </LMap>
-        </UCard>
-      </div>
     </template>
 
   </UTabs>
   <UForm
-      v-else-if="mode == 'edit' || mode == 'create'"
+      v-else-if="mode === 'edit' || mode === 'create'"
       class="p-5"
   >
+    <UFormGroup
+        label="Typ:"
+    >
+      <USelectMenu
+          v-model="itemInfo.type"
+          :options="['Privat','Geschäftlich','Arbeitsweg']"
+      />
+    </UFormGroup>
+    <UFormGroup
+        label="Fahrer:"
+    >
+      <USelectMenu
+          v-model="itemInfo.driver"
+          :options="[{id: null, fullName: 'Kein Fahrer'},...profiles]"
+          option-attribute="fullName"
+          value-attribute="id"
 
+      >
+        <template #label>
+          {{profiles.find(profile => profile.id === itemInfo.driver) ? profiles.find(profile => profile.id === itemInfo.driver).fullName : 'Kein Fahrer ausgewählt'}}
+        </template>
+      </USelectMenu>
+    </UFormGroup>
+    <UFormGroup
+        label="Beschreibung:"
+    >
+      <UTextarea
+          v-model="itemInfo.description"
+          rows="6"
+          maxrows="6"
+      />
+    </UFormGroup>
 
   </UForm>
 </template>