Pushing Tracking

components/MainNav.vue

@@ -139,10 +139,21 @@ const links = computed(() => {
       ]
     },] : [],
     ... dataStore.ownTenant.features.vehicles ? [{
-      label: "Fahrzeuge",
-      to: "/vehicles",
+      label: "Fuhrpark",
+      defaultOpen: false,
       icon: "i-heroicons-truck",
-    }] : [],
+      children: [
+        {
+          label: "Fahrzeuge",
+          to: "/vehicles",
+          icon: "i-heroicons-truck"
+        },{
+          label: "Fahrten",
+          to: "/trackingTrips",
+          icon: "i-heroicons-map"
+        },
+      ]
+    },] : [],
     {
       label: "Stammdaten",
       defaultOpen: false,

nuxt.config.ts

@@ -22,19 +22,7 @@ export default defineNuxtConfig({
     build: {
         transpile: ['@vuepic/vue-datepicker']
     },
-    modules: [
-        '@pinia/nuxt',
-        '@nuxt/ui',
-        '@nuxt/content',
-        '@nuxtjs/supabase',
-        "nuxt-editorjs",
-        '@nuxtjs/fontaine',
-        '@nuxtjs/google-fonts',
-        '@vite-pwa/nuxt',
-        'nuxt-viewport',
-        'nuxt-tiptap-editor'
-
-    ],
+    modules: ['@pinia/nuxt', '@nuxt/ui', '@nuxt/content', '@nuxtjs/supabase', "nuxt-editorjs", '@nuxtjs/fontaine', '@nuxtjs/google-fonts', '@vite-pwa/nuxt', 'nuxt-viewport', 'nuxt-tiptap-editor', '@nuxtjs/leaflet'],
     routeRules: {
         '/printing': {ssr: false}
 

package-lock.json

@@ -37,6 +37,7 @@
         "client-oauth2": "^4.3.3",
         "date-fns": "^3.6.0",
         "dayjs": "^1.11.10",
+        "fast-sort": "^3.4.1",
         "handlebars": "^4.7.8",
         "jsprintmanager": "^6.0.3",
         "nuxt-editorjs": "^1.0.4",
@@ -55,7 +56,7 @@
       },
       "devDependencies": {
         "@nuxt/devtools": "latest",
-        "@nuxtjs/leaflet": "^1.2.2",
+        "@nuxtjs/leaflet": "^1.2.3",
         "@nuxtjs/supabase": "^1.1.4",
         "@vite-pwa/nuxt": "^0.3.3",
         "nuxt": "^3.8.0",
@@ -3751,9 +3752,9 @@
       }
     },
     "node_modules/@nuxtjs/leaflet": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@nuxtjs/leaflet/-/leaflet-1.2.2.tgz",
-      "integrity": "sha512-EAO582L2AQ3YASmj1wOomeLQmgT5xylQEOXkK0J0RKz1kDjSDCiRB12IXHCGEYRQ1stzmJ2UxRJNkyXncF3MxQ==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/leaflet/-/leaflet-1.2.3.tgz",
+      "integrity": "sha512-APsmKfL3x/rpB8XXh4HrBHHf5BiJUq/SjnmaMfoYXAdn8ci+DdgUuFj/d+PPkCOKyiIRaLcjmIpxM51oRjIWOw==",
       "dev": true,
       "dependencies": {
         "@types/leaflet": "^1.9.12",
@@ -9136,6 +9137,11 @@
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
       "dev": true
     },
+    "node_modules/fast-sort": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/fast-sort/-/fast-sort-3.4.1.tgz",
+      "integrity": "sha512-76uvGPsF6So53sZAqenP9UVT3p5l7cyTHkLWVCMinh41Y8NDrK1IYXJgaBMfc1gk7nJiSRZp676kddFG2Aa5+A=="
+    },
     "node_modules/fastq": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",

package.json

@@ -11,7 +11,7 @@
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
-    "@nuxtjs/leaflet": "^1.2.2",
+    "@nuxtjs/leaflet": "^1.2.3",
     "@nuxtjs/supabase": "^1.1.4",
     "@vite-pwa/nuxt": "^0.3.3",
     "nuxt": "^3.8.0",
@@ -51,6 +51,7 @@
     "client-oauth2": "^4.3.3",
     "date-fns": "^3.6.0",
     "dayjs": "^1.11.10",
+    "fast-sort": "^3.4.1",
     "handlebars": "^4.7.8",
     "jsprintmanager": "^6.0.3",
     "nuxt-editorjs": "^1.0.4",

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>

pages/trackingTrips/index.vue

@@ -0,0 +1,149 @@
+<template>
+  <UDashboardNavbar title="Fahrten" :badge="filteredRows.length">
+    <template #right>
+      <UInput
+          id="searchinput"
+          v-model="searchString"
+          icon="i-heroicons-funnel"
+          autocomplete="off"
+          placeholder="Suche..."
+          class="hidden lg:block"
+          @keydown.esc="$event.target.blur()"
+      >
+        <template #trailing>
+          <UKbd value="/" />
+        </template>
+      </UInput>
+
+<!--      <UButton @click="router.push(`/vehicles/create`)">+ Fahrzeug</UButton>-->
+    </template>
+  </UDashboardNavbar>
+
+  <UDashboardToolbar>
+    <template #right>
+      <USelectMenu
+          v-model="selectedColumns"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="templateColumns"
+          multiple
+          class="hidden lg:block"
+          by="key"
+      >
+        <template #label>
+          Spalten
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
+  <UTable
+      :rows="filteredRows"
+      :columns="columns"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @select="(i) => router.push(`/trackingTrips/show/${i.id}`) "
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Fahrzeuge anzuzeigen' }"
+  >
+    <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>
+    </template>
+    <template #startTime-data="{row}">
+      {{dayjs(row.startTime).format("DD.MM.YY HH:mm")}}
+    </template>
+    <template #endTime-data="{row}">
+      {{dayjs(row.endTime).format("DD.MM.YY HH:mm")}}
+    </template>
+    <template #distance-data="{row}">
+      {{row.distance > 0 ? (row.distance/1000).toFixed(2) : 0 }} km
+    </template>
+  </UTable>
+</template>
+
+<script setup>
+
+import dayjs from "dayjs";
+
+definePageMeta({
+  middleware: "auth"
+})
+
+defineShortcuts({
+  '/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  },
+  'Enter': {
+    usingInput: true,
+    handler: () => {
+      router.push(`/trackingTrips/show/${filteredRows.value[selectedItem.value].id}`)
+    }
+  },
+  'arrowdown': () => {
+    if(selectedItem.value < filteredRows.value.length - 1) {
+      selectedItem.value += 1
+    } else {
+      selectedItem.value = 0
+    }
+  },
+  'arrowup': () => {
+    if(selectedItem.value === 0) {
+      selectedItem.value = filteredRows.value.length - 1
+    } else {
+      selectedItem.value -= 1
+    }
+  }
+})
+
+const dataStore = useDataStore()
+const router = useRouter()
+
+const items = ref([])
+const selectedItem = ref(0)
+
+const setupPage = async () => {
+  items.value = await useSupabaseSelect("trackingTrips","*, trackingDevice(*), vehicle (*)")
+}
+
+setupPage()
+
+const templateColumns = [
+  {
+    key: 'licensePlate',
+    label: "Kennzeichen:",
+    sortable: true
+  },
+  {
+    key: "type",
+    label: "Typ:",
+    sortable: true
+  },
+  {
+    key: "startTime",
+    label: "Startzeit:",
+    sortable: true
+  },
+  {
+    key: "endTime",
+    label: "Endzeit:",
+    sortable: true
+  },
+  {
+    key: "distance",
+    label: "Entfernung:",
+    sortable: true
+  }
+]
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
+
+const searchString = ref('')
+
+const filteredRows = computed(() => {
+  return useSearch(searchString.value, items.value)
+})
+</script>
+
+<style scoped>
+
+</style>