Pushing Tracking

2024-09-22 12:09:39 +02:00
parent fc0a6eaa76
commit 516bf5dd7f
6 changed files with 370 additions and 21 deletions
--- a/pages/trackingTrips/[mode]/[[id]].client.vue
+++ b/pages/trackingTrips/[mode]/[[id]].client.vue
@@ -0,0 +1,194 @@
+<script setup>
+import dayjs from "dayjs";
+import {useSupabaseSelectSingle} from "~/composables/useSupabase.js";
+
+definePageMeta({
+  middleware: "auth"
+})
+
+defineShortcuts({
+  'backspace': () => {
+    router.push("/trackingTrips")
+  },
+  'arrowleft': () => {
+    if(openTab.value > 0){
+      openTab.value -= 1
+    }
+  },
+  'arrowright': () => {
+    if(openTab.value < 3) {
+      openTab.value += 1
+    }
+  },
+})
+
+const dataStore = useDataStore()
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+const id = ref(route.params.id ? route.params.id : null )
+const openTab = ref(0)
+
+
+//Working
+const mode = ref(route.params.mode || "show")
+const itemInfo = ref({
+  name: "",
+  licensePlate: "",
+  type: "",
+  driver: null,
+  active: true
+})
+const oldItemInfo = ref({})
+
+
+
+
+//Functions
+const setupPage = async () => {
+  if(mode.value === "show" || mode.value === "edit"){
+    itemInfo.value = await useSupabaseSelectSingle("trackingTrips",route.params.id,"*, trackingDevice(*, vehicle(*))")
+  }
+
+  if(itemInfo.value) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
+}
+
+const cancelEditorCreate = () => {
+  if(itemInfo.value) {
+    router.push(`/vehicles/show/${itemInfo.value.id}`)
+  } else {
+    router.push(`/vehicles`)
+  }
+
+}
+
+
+
+const getRowAmount = (row) => {
+  let amount = 0
+
+  row.accounts.forEach(account => {
+    amount += account.amountNet
+    amount += account.amountTax
+  })
+
+  return amount
+}
+
+setupPage()
+</script>
+
+<template>
+  <UDashboardNavbar
+      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
+  >
+    <template #left>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.push(`/trackingTrips`)"
+      >
+        Fahrten
+      </UButton>
+    </template>
+    <template #center>
+      <h1
+          v-if="itemInfo"
+          :class="['text-xl','font-medium']"
+      >{{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)"
+      >
+        Speichern
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UTabs
+      :items="[{label: 'Informationen'},{label: 'Koordinaten'}]"
+      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>
+
+
+          </UCard>
+        </div>
+        <div class="w-1/2">
+          <UCard>
+<!--            <HistoryDisplay
+                type="vehicle"
+                v-if="itemInfo"
+                :element-id="itemInfo.id"
+                render-headline
+            />-->
+          </UCard>
+        </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'"
+      class="p-5"
+  >
+
+
+  </UForm>
+</template>
+
+<style scoped>
+td {
+  border-bottom: 1px solid lightgrey;
+  vertical-align: top;
+  padding-bottom: 0.15em;
+  padding-top: 0.15em;
+}
+</style>