Changes in Tracking and some changes in general historyitems

2024-09-22 14:10:04 +02:00
parent 516bf5dd7f
commit 51dbb10b45
7 changed files with 739 additions and 152 deletions
--- a/components/HistoryDisplay.vue
+++ b/components/HistoryDisplay.vue
@@ -58,53 +58,15 @@ const setup = async () => {
    items.value = (await supabase.from("historyitems").select().eq("vehicle",elementId)).data || []
  } else if(type === "space") {
    items.value = (await supabase.from("historyitems").select().eq("space",elementId)).data || []
+  } else if(type === "trackingtrip") {
+    items.value = (await supabase.from("historyitems").select().eq("trackingtrip",elementId)).data || []
  }
 }

 setup()


-const historyItems = computed(() => {

-  let items = []
-
-  if(type === "customer") {
-    items = dataStore.historyItems.filter(i => i.customer === elementId)
-  } else if(type === "vendor") {
-    items = dataStore.historyItems.filter(i => i.vendor === elementId)
-  } else if(type === "project") {
-    items = dataStore.historyItems.filter(i => i.project === elementId)
-  } else if(type === "plant") {
-    items = dataStore.historyItems.filter(i => i.plant === elementId)
-  } else if(type === "incomingInvoice") {
-    items = dataStore.historyItems.filter(i => i.incomingInvoice === elementId)
-  } else if(type === "document") {
-    items = dataStore.historyItems.filter(i => i.document === elementId)
-  } else if(type === "contact") {
-    items = dataStore.historyItems.filter(i => i.contact === elementId)
-  } else if(type === "contract") {
-    items = dataStore.historyItems.filter(i => i.contract === elementId)
-  } else if(type === "inventoryitem") {
-    items = dataStore.historyItems.filter(i => i.inventoryitem === elementId)
-  } else if(type === "product") {
-    items = dataStore.historyItems.filter(i => i.product === elementId)
-  } else if(type === "profile") {
-    items = dataStore.historyItems.filter(i => i.profile === elementId)
-  } else if(type === "absencerequest") {
-    items = dataStore.historyItems.filter(i => i.absenceRequest === elementId)
-  } else if(type === "event") {
-    items = dataStore.historyItems.filter(i => i.event === elementId)
-  } else if(type === "task") {
-    items = dataStore.historyItems.filter(i => i.task === elementId)
-  } else if(type === "vehicle") {
-    items = dataStore.historyItems.filter(i => i.vehicle === elementId)
-  } else if(type === "space") {
-    items = dataStore.historyItems.filter(i => i.space === elementId)
-  }
-
-  return items
-
-})
 const addHistoryItemData = ref({
  text: "",
 })
@@ -145,6 +107,8 @@ const addHistoryItem = async () => {
    addHistoryItemData.value.vehicle = elementId
  } else if(type === "space") {
    addHistoryItemData.value.space = elementId
+  } else if(type === "trackingtrip") {
+    addHistoryItemData.value.trackingtrip = elementId
  }


@@ -203,7 +167,7 @@ const renderText = (text) => {
    </UCard>
  </UModal>
  <Toolbar
-    v-if="!renderHeadline"
+      v-if="!renderHeadline"
  >
    <UButton
        @click="showAddHistoryItemModal = true"
@@ -222,31 +186,39 @@ const renderText = (text) => {
    </div>
    <UDivider class="my-3"/>
  </div>
-  <div
-      v-if="items.length > 0"
-      v-for="(item,index) in items.slice().reverse()"
-  >
-    <UDivider
-        class="my-3"
-        v-if="index !== 0"
-    />
-    <div class="flex items-center gap-3">
-      <UAvatar
-          v-if="!item.createdBy"
-          :src="colorMode.value === 'light' ? '/Logo.png' : '/Logo_Dark.png' "
+
+  <!-- ITEM LIST  -->
+
+  <div style="overflow-y: scroll">
+    <div
+        v-if="items.length > 0"
+        v-for="(item,index) in items.slice().reverse()"
+    >
+      <UDivider
+          class="my-3"
+          v-if="index !== 0"
      />
-      <UAvatar
-          :alt="dataStore.getProfileById(item.createdBy).fullName"
-          v-else
-      />
-      <div>
-        <h3 v-if="item.createdBy">{{dataStore.getProfileById(item.createdBy) ? dataStore.getProfileById(item.createdBy).fullName : ""}}</h3>
-        <h3 v-else>FEDEO Bot</h3>
-        <span v-html="renderText(item.text)"/><br>
-        <span class="text-gray-500">{{dayjs(item.created_at).format("DD.MM.YY HH:mm")}}</span>
+      <div class="flex items-center gap-3">
+        <UAvatar
+            v-if="!item.createdBy"
+            :src="colorMode.value === 'light' ? '/Logo.png' : '/Logo_Dark.png' "
+        />
+        <UAvatar
+            :alt="dataStore.getProfileById(item.createdBy).fullName"
+            v-else
+        />
+        <div>
+          <h3 v-if="item.createdBy">{{dataStore.getProfileById(item.createdBy) ? dataStore.getProfileById(item.createdBy).fullName : ""}}</h3>
+          <h3 v-else>FEDEO Bot</h3>
+          <span v-html="renderText(item.text)"/><br>
+          <span class="text-gray-500">{{dayjs(item.created_at).format("DD.MM.YY HH:mm")}}</span>
+        </div>
      </div>
    </div>
  </div>
+
+
+
 </template>

 <style scoped>
--- a/components/Map.vue
+++ b/components/Map.vue
@@ -0,0 +1,44 @@
+<script setup>
+
+const props = defineProps({
+  markers: {
+    type: Array,
+    required: true
+  }
+})
+
+const {markers} = props
+
+const zoom =ref(2)
+
+
+
+
+</script>
+
+<template>
+  <div class="h-full w-full">
+    <LMap
+        style="height: 300px;"
+        :center="markers[0]"
+        :use-global-leaflet="false"
+        :zoom="10"
+        ref="map"
+    >
+      <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
+          v-for="marker in markers"
+          :lat-lng="marker"
+      />
+    </LMap>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
        "@tiptap/starter-kit": "^2.1.15",
        "@tiptap/vue-3": "^2.1.15",
        "@vicons/ionicons5": "^0.12.0",
+        "@vue-leaflet/vue-leaflet": "^0.10.1",
        "@vuepic/vue-datepicker": "^7.4.0",
        "@zip.js/zip.js": "^2.7.32",
        "axios": "^1.6.7",
@@ -40,6 +41,8 @@
        "fast-sort": "^3.4.1",
        "handlebars": "^4.7.8",
        "jsprintmanager": "^6.0.3",
+        "leaflet": "^1.9.4",
+        "maplibre-gl": "^4.7.0",
        "nuxt-editorjs": "^1.0.4",
        "nuxt-viewport": "^2.0.6",
        "papaparse": "^5.4.1",
@@ -2814,6 +2817,26 @@
      "resolved": "https://registry.npmjs.org/@kwsites/promise-deferred/-/promise-deferred-1.1.1.tgz",
      "integrity": "sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw=="
    },
+    "node_modules/@mapbox/geojson-rewind": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
+      "integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==",
+      "dependencies": {
+        "get-stream": "^6.0.1",
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "geojson-rewind": "geojson-rewind"
+      }
+    },
+    "node_modules/@mapbox/jsonlint-lines-primitives": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/@mapbox/node-pre-gyp": {
      "version": "1.0.11",
      "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
@@ -2841,6 +2864,62 @@
        "node": ">=8"
      }
    },
+    "node_modules/@mapbox/point-geometry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
+    },
+    "node_modules/@mapbox/tiny-sdf": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.6.tgz",
+      "integrity": "sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA=="
+    },
+    "node_modules/@mapbox/unitbezier": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
+      "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw=="
+    },
+    "node_modules/@mapbox/vector-tile": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
+      "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
+      "dependencies": {
+        "@mapbox/point-geometry": "~0.1.0"
+      }
+    },
+    "node_modules/@mapbox/whoots-js": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
+      "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@maplibre/maplibre-gl-style-spec": {
+      "version": "20.3.1",
+      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-20.3.1.tgz",
+      "integrity": "sha512-5ueL4UDitzVtceQ8J4kY+Px3WK+eZTsmGwha3MBKHKqiHvKrjWWwBCIl1K8BuJSc5OFh83uI8IFNoFvQxX2uUw==",
+      "dependencies": {
+        "@mapbox/jsonlint-lines-primitives": "~2.0.2",
+        "@mapbox/unitbezier": "^0.0.1",
+        "json-stringify-pretty-compact": "^4.0.0",
+        "minimist": "^1.2.8",
+        "quickselect": "^2.0.0",
+        "rw": "^1.3.3",
+        "sort-object": "^3.0.3",
+        "tinyqueue": "^3.0.0"
+      },
+      "bin": {
+        "gl-style-format": "dist/gl-style-format.mjs",
+        "gl-style-migrate": "dist/gl-style-migrate.mjs",
+        "gl-style-validate": "dist/gl-style-validate.mjs"
+      }
+    },
+    "node_modules/@maplibre/maplibre-gl-style-spec/node_modules/quickselect": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+    },
    "node_modules/@netlify/functions": {
      "version": "2.6.0",
      "resolved": "https://registry.npmjs.org/@netlify/functions/-/functions-2.6.0.tgz",
@@ -5326,8 +5405,15 @@
    "node_modules/@types/geojson": {
      "version": "7946.0.14",
      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
-      "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==",
-      "dev": true
+      "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg=="
+    },
+    "node_modules/@types/geojson-vt": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/@types/geojson-vt/-/geojson-vt-3.2.5.tgz",
+      "integrity": "sha512-qDO7wqtprzlpe8FfQ//ClPV9xiuoh2nkIgiouIptON9w5jvD/fA4szvP9GBlDVdJ5dldAl0kX/sy3URbWwLx0g==",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
    },
    "node_modules/@types/hast": {
      "version": "3.0.4",
@@ -5349,7 +5435,7 @@
      "version": "1.9.12",
      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.12.tgz",
      "integrity": "sha512-BK7XS+NyRI291HIo0HCfE18Lp8oA30H1gpi1tf0mF3TgiCEzanQjOqNZ4x126SXzzi2oNSZhZ5axJp1k0iM6jg==",
-      "dev": true,
+      "devOptional": true,
      "dependencies": {
        "@types/geojson": "*"
      }
@@ -5359,6 +5445,21 @@
      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.0.tgz",
      "integrity": "sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA=="
    },
+    "node_modules/@types/mapbox__point-geometry": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz",
+      "integrity": "sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA=="
+    },
+    "node_modules/@types/mapbox__vector-tile": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.4.tgz",
+      "integrity": "sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==",
+      "dependencies": {
+        "@types/geojson": "*",
+        "@types/mapbox__point-geometry": "*",
+        "@types/pbf": "*"
+      }
+    },
    "node_modules/@types/mdast": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.3.tgz",
@@ -5380,6 +5481,11 @@
        "undici-types": "~5.26.4"
      }
    },
+    "node_modules/@types/pbf": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.5.tgz",
+      "integrity": "sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA=="
+    },
    "node_modules/@types/phoenix": {
      "version": "1.6.4",
      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.4.tgz",
@@ -5396,6 +5502,14 @@
      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
      "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="
    },
+    "node_modules/@types/supercluster": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.3.tgz",
+      "integrity": "sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
    "node_modules/@types/tough-cookie": {
      "version": "4.0.5",
      "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
@@ -5993,7 +6107,6 @@
      "version": "0.10.1",
      "resolved": "https://registry.npmjs.org/@vue-leaflet/vue-leaflet/-/vue-leaflet-0.10.1.tgz",
      "integrity": "sha512-RNEDk8TbnwrJl8ujdbKgZRFygLCxd0aBcWLQ05q/pGv4+d0jamE3KXQgQBqGAteE1mbQsk3xoNcqqUgaIGfWVg==",
-      "dev": true,
      "dependencies": {
        "vue": "^3.2.25"
      },
@@ -6926,6 +7039,14 @@
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
    },
+    "node_modules/arr-union": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
+      "integrity": "sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/array-buffer-byte-length": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
@@ -6964,6 +7085,14 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/assign-symbols": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
+      "integrity": "sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/ast-kit": {
      "version": "0.12.1",
      "resolved": "https://registry.npmjs.org/ast-kit/-/ast-kit-0.12.1.tgz",
@@ -7373,6 +7502,23 @@
      "resolved": "https://registry.npmjs.org/byte-length/-/byte-length-1.0.2.tgz",
      "integrity": "sha512-ovBpjmsgd/teRmgcPh23d4gJvxDoXtAzEL9xTfMU8Yc2kqCDb7L9jAG0XHl1nzuGl+h3ebCIF1i62UFyA9V/2Q=="
    },
+    "node_modules/bytewise": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/bytewise/-/bytewise-1.1.0.tgz",
+      "integrity": "sha512-rHuuseJ9iQ0na6UDhnrRVDh8YnWVlU6xM3VH6q/+yHDeUH2zIhUzP+2/h3LIrhLDBtTqzWpE3p3tP/boefskKQ==",
+      "dependencies": {
+        "bytewise-core": "^1.2.2",
+        "typewise": "^1.0.3"
+      }
+    },
+    "node_modules/bytewise-core": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/bytewise-core/-/bytewise-core-1.2.3.tgz",
+      "integrity": "sha512-nZD//kc78OOxeYtRlVk8/zXqTB4gf/nlguL1ggWA8FuchMyOxcyHR4QPQZMUmA7czC+YnaBrPUCubqAWe50DaA==",
+      "dependencies": {
+        "typewise-core": "^1.2"
+      }
+    },
    "node_modules/c12": {
      "version": "1.11.1",
      "resolved": "https://registry.npmjs.org/c12/-/c12-1.11.1.tgz",
@@ -8692,6 +8838,11 @@
      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
    },
+    "node_modules/earcut": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-3.0.0.tgz",
+      "integrity": "sha512-41Fs7Q/PLq1SDbqjsgcY7GA42T0jvaCNGXgGtsNdvg+Yv8eIu06bxv4/PoREkZ9nMDNwnUSG9OFB9+yv8eKhDg=="
+    },
    "node_modules/eastasianwidth": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -9095,6 +9246,17 @@
      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
    },
+    "node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/externality": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/externality/-/externality-1.0.2.tgz",
@@ -9451,6 +9613,11 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/geojson-vt": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-4.0.2.tgz",
+      "integrity": "sha512-AV9ROqlNqoZEIJGfm1ncNjEXfkz2hdFlZf0qkVfmkwdKa8vj7H16YUOT81rJw1rdFhyEDlN2Tds91p/glzbl5A=="
+    },
    "node_modules/get-caller-file": {
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -9516,6 +9683,14 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/get-value": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
+      "integrity": "sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/giget": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/giget/-/giget-1.2.3.tgz",
@@ -9564,6 +9739,11 @@
      "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz",
      "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw=="
    },
+    "node_modules/gl-matrix": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
+      "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
+    },
    "node_modules/glob": {
      "version": "8.1.0",
      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
@@ -9607,6 +9787,49 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/global-prefix": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-4.0.0.tgz",
+      "integrity": "sha512-w0Uf9Y9/nyHinEk5vMJKRie+wa4kR5hmDbEhGGds/kG1PwGLLHKRoNMeJOyCQjjBkANlnScqgzcFwGHgmgLkVA==",
+      "dependencies": {
+        "ini": "^4.1.3",
+        "kind-of": "^6.0.3",
+        "which": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/global-prefix/node_modules/ini": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.3.tgz",
+      "integrity": "sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/global-prefix/node_modules/isexe": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz",
+      "integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==",
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/global-prefix/node_modules/which": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz",
+      "integrity": "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==",
+      "dependencies": {
+        "isexe": "^3.1.1"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^16.13.0 || >=18.0.0"
+      }
+    },
    "node_modules/globals": {
      "version": "11.12.0",
      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -10471,6 +10694,14 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/is-extglob": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -10629,6 +10860,17 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/is-primitive": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-3.0.1.tgz",
@@ -10800,6 +11042,14 @@
      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
    },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/jackspeak": {
      "version": "2.3.6",
      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
@@ -11022,6 +11272,11 @@
      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
      "dev": true
    },
+    "node_modules/json-stringify-pretty-compact": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-4.0.0.tgz",
+      "integrity": "sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q=="
+    },
    "node_modules/json5": {
      "version": "2.2.3",
      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -11066,6 +11321,11 @@
      "resolved": "https://registry.npmjs.org/jsprintmanager/-/jsprintmanager-6.0.3.tgz",
      "integrity": "sha512-5JQIUtdjad8w5SiG1cws635XW8qgSJEK6E0bTe8ksEf/Z+p8V9O1Ou6IHkU2lMD1Wv0uhOr8/aGNqIH0aSgQ4Q=="
    },
+    "node_modules/kdbush": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
+      "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA=="
+    },
    "node_modules/keygrip": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz",
@@ -11077,6 +11337,14 @@
        "node": ">= 0.6"
      }
    },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/kleur": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
@@ -11303,8 +11571,7 @@
    "node_modules/leaflet": {
      "version": "1.9.4",
      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
-      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
-      "dev": true
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
    },
    "node_modules/legacy-swc-helpers": {
      "name": "@swc/helpers",
@@ -11602,6 +11869,46 @@
        "node": "^16.14.0 || >=18.0.0"
      }
    },
+    "node_modules/maplibre-gl": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-4.7.0.tgz",
+      "integrity": "sha512-hkt7je7NxiMQE8EpCxLWP8t6tkK6SkrMe0hIBjYd4Ar/Q7BOCILxthGmGnU993Mwmkvs2mGiXnVUSOK12DeCzg==",
+      "dependencies": {
+        "@mapbox/geojson-rewind": "^0.5.2",
+        "@mapbox/jsonlint-lines-primitives": "^2.0.2",
+        "@mapbox/point-geometry": "^0.1.0",
+        "@mapbox/tiny-sdf": "^2.0.6",
+        "@mapbox/unitbezier": "^0.0.1",
+        "@mapbox/vector-tile": "^1.3.1",
+        "@mapbox/whoots-js": "^3.1.0",
+        "@maplibre/maplibre-gl-style-spec": "^20.3.1",
+        "@types/geojson": "^7946.0.14",
+        "@types/geojson-vt": "3.2.5",
+        "@types/mapbox__point-geometry": "^0.1.4",
+        "@types/mapbox__vector-tile": "^1.3.4",
+        "@types/pbf": "^3.0.5",
+        "@types/supercluster": "^7.1.3",
+        "earcut": "^3.0.0",
+        "geojson-vt": "^4.0.2",
+        "gl-matrix": "^3.4.3",
+        "global-prefix": "^4.0.0",
+        "kdbush": "^4.0.2",
+        "murmurhash-js": "^1.0.0",
+        "pbf": "^3.3.0",
+        "potpack": "^2.0.0",
+        "quickselect": "^3.0.0",
+        "supercluster": "^8.0.1",
+        "tinyqueue": "^3.0.0",
+        "vt-pbf": "^3.1.3"
+      },
+      "engines": {
+        "node": ">=16.14.0",
+        "npm": ">=8.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/maplibre/maplibre-gl-js?sponsor=1"
+      }
+    },
    "node_modules/markdown-it": {
      "version": "14.1.0",
      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
@@ -12703,6 +13010,11 @@
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
    },
+    "node_modules/murmurhash-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
+      "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw=="
+    },
    "node_modules/mz": {
      "version": "2.7.0",
      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -13910,6 +14222,18 @@
      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ=="
    },
+    "node_modules/pbf": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.3.0.tgz",
+      "integrity": "sha512-XDF38WCH3z5OV/OVa8GKUNtLAyneuzbCisx7QUCF8Q6Nutx0WnJrQe5O+kOtBlLfRNUws98Y58Lblp+NJG5T4Q==",
+      "dependencies": {
+        "ieee754": "^1.1.12",
+        "resolve-protobuf-schema": "^2.1.0"
+      },
+      "bin": {
+        "pbf": "bin/pbf"
+      }
+    },
    "node_modules/pdf-lib": {
      "version": "1.17.1",
      "resolved": "https://registry.npmjs.org/pdf-lib/-/pdf-lib-1.17.1.tgz",
@@ -14787,6 +15111,11 @@
      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
    },
+    "node_modules/potpack": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-2.0.0.tgz",
+      "integrity": "sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw=="
+    },
    "node_modules/preact": {
      "version": "10.12.1",
      "resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz",
@@ -15053,6 +15382,11 @@
        "prosemirror-transform": "^1.1.0"
      }
    },
+    "node_modules/protocol-buffers-schema": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
+      "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
+    },
    "node_modules/protocols": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/protocols/-/protocols-2.0.1.tgz",
@@ -15127,6 +15461,11 @@
      "resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz",
      "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag=="
    },
+    "node_modules/quickselect": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz",
+      "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g=="
+    },
    "node_modules/radix3": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/radix3/-/radix3-1.1.2.tgz",
@@ -15772,6 +16111,14 @@
        "node": ">= 0.6"
      }
    },
+    "node_modules/resolve-protobuf-schema": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+      "dependencies": {
+        "protocol-buffers-schema": "^3.3.1"
+      }
+    },
    "node_modules/restructure": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/restructure/-/restructure-3.0.1.tgz",
@@ -15956,6 +16303,11 @@
        "queue-microtask": "^1.2.2"
      }
    },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
    "node_modules/safe-array-concat": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.2.tgz",
@@ -16176,6 +16528,20 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/set-value": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
+      "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "is-extendable": "^0.1.1",
+        "is-plain-object": "^2.0.3",
+        "split-string": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/setprototypeof": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -16398,6 +16764,38 @@
        "node": ">= 14"
      }
    },
+    "node_modules/sort-asc": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.2.0.tgz",
+      "integrity": "sha512-umMGhjPeHAI6YjABoSTrFp2zaBtXBej1a0yKkuMUyjjqu6FJsTF+JYwCswWDg+zJfk/5npWUUbd33HH/WLzpaA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sort-desc": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.2.0.tgz",
+      "integrity": "sha512-NqZqyvL4VPW+RAxxXnB8gvE1kyikh8+pR+T+CXLksVRN9eiQqkQlPwqWYU0mF9Jm7UnctShlxLyAt1CaBOTL1w==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sort-object": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-3.0.3.tgz",
+      "integrity": "sha512-nK7WOY8jik6zaG9CRwZTaD5O7ETWDLZYMM12pqY8htll+7dYeqGfEUPcUBHOpSJg2vJOrvFIY2Dl5cX2ih1hAQ==",
+      "dependencies": {
+        "bytewise": "^1.1.0",
+        "get-value": "^2.0.2",
+        "is-extendable": "^0.1.1",
+        "sort-asc": "^0.2.0",
+        "sort-desc": "^0.2.0",
+        "union-value": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/sortablejs": {
      "version": "1.14.0",
      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
@@ -16480,6 +16878,40 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/split-string": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
+      "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
+      "dependencies": {
+        "extend-shallow": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/split-string/node_modules/extend-shallow": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==",
+      "dependencies": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/split-string/node_modules/is-extendable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/splitpanes": {
      "version": "3.1.5",
      "resolved": "https://registry.npmjs.org/splitpanes/-/splitpanes-3.1.5.tgz",
@@ -16833,6 +17265,14 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/supercluster": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
+      "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
+      "dependencies": {
+        "kdbush": "^4.0.2"
+      }
+    },
    "node_modules/supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -17250,6 +17690,11 @@
      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
    },
+    "node_modules/tinyqueue": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-3.0.0.tgz",
+      "integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g=="
+    },
    "node_modules/tippy.js": {
      "version": "6.3.7",
      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
@@ -17475,6 +17920,19 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/typewise": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typewise/-/typewise-1.0.3.tgz",
+      "integrity": "sha512-aXofE06xGhaQSPzt8hlTY+/YWQhm9P0jYUp1f2XtmW/3Bk0qzXcyFWAtPoo2uTGQj1ZwbDuSyuxicq+aDo8lCQ==",
+      "dependencies": {
+        "typewise-core": "^1.2.0"
+      }
+    },
+    "node_modules/typewise-core": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/typewise-core/-/typewise-core-1.2.0.tgz",
+      "integrity": "sha512-2SCC/WLzj2SbUwzFOzqMCkz5amXLlxtJqDKTICqg30x+2DZxcfZN2MvQZmGfXWKNWaKK9pBPsvkcwv8bF/gxKg=="
+    },
    "node_modules/uc.micro": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
@@ -17748,6 +18206,20 @@
        "@types/estree": "^1.0.0"
      }
    },
+    "node_modules/union-value": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
+      "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
+      "dependencies": {
+        "arr-union": "^3.1.0",
+        "get-value": "^2.0.6",
+        "is-extendable": "^0.1.1",
+        "set-value": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/unique-filename": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-3.0.0.tgz",
@@ -18704,6 +19176,16 @@
      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",
      "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw=="
    },
+    "node_modules/vt-pbf": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
+      "integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==",
+      "dependencies": {
+        "@mapbox/point-geometry": "0.1.0",
+        "@mapbox/vector-tile": "^1.3.1",
+        "pbf": "^3.2.1"
+      }
+    },
    "node_modules/vue": {
      "version": "3.4.21",
      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.21.tgz",
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
    "@tiptap/starter-kit": "^2.1.15",
    "@tiptap/vue-3": "^2.1.15",
    "@vicons/ionicons5": "^0.12.0",
+    "@vue-leaflet/vue-leaflet": "^0.10.1",
    "@vuepic/vue-datepicker": "^7.4.0",
    "@zip.js/zip.js": "^2.7.32",
    "axios": "^1.6.7",
@@ -54,6 +55,8 @@
    "fast-sort": "^3.4.1",
    "handlebars": "^4.7.8",
    "jsprintmanager": "^6.0.3",
+    "leaflet": "^1.9.4",
+    "maplibre-gl": "^4.7.0",
    "nuxt-editorjs": "^1.0.4",
    "nuxt-viewport": "^2.0.6",
    "papaparse": "^5.4.1",
--- a/pages/trackingTrips/[mode]/[[id]].client.vue
+++ b/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>
--- a/pages/trackingTrips/index.vue
+++ b/pages/trackingTrips/index.vue
@@ -102,7 +102,7 @@ const items = ref([])
 const selectedItem = ref(0)

 const setupPage = async () => {
-  items.value = await useSupabaseSelect("trackingTrips","*, trackingDevice(*), vehicle (*)")
+  items.value = await useSupabaseSelect("trackingtrips","*, trackingDevice(*), vehicle (*)","startTime",false)
 }

 setupPage()
--- a/stores/data.js
+++ b/stores/data.js
@@ -58,7 +58,8 @@ export const useDataStore = defineStore('data', () => {
            label: "Projekte",
            labelSingle: "Projekt",
            redirect:true,
-            historyItemHolder: "project"
+            historyItemHolder: "project",
+            numberRangeHolder: "projectNumber",
        },
        vehicles: {
            label: "Fahrzeuge",
@@ -81,7 +82,8 @@ export const useDataStore = defineStore('data', () => {
            label: "Lagerplätze",
            labelSingle: "Lagerplatz",
            redirect: true,
-            numberRangeHolder: "spaceNumber"
+            numberRangeHolder: "spaceNumber",
+            historyItemHolder: "space"
        },
        users: {
            label: "Benutzer",
@@ -135,6 +137,17 @@ export const useDataStore = defineStore('data', () => {
        statementallocations: {
            label: "Bankzuweisungen",
            labelSingle: "Bankzuweisung"
+        },
+        productcategories: {
+            label: "Artikelkategorien",
+            labelSingle: "Artikelkategorie",
+            redirect: true
+        },
+        trackingtrips: {
+            label: "Fahrten",
+            labelSingle: "Fahrt",
+            redirect: true,
+            historyItemHolder: "trackingtrip",
        }
    }

@@ -632,24 +645,25 @@ export const useDataStore = defineStore('data', () => {
                    name = "Name"
                } else if(key === "customer") {
                    name = "Kunde"
-                    oldVal = customers.value.find(i => i.id === prop.data.o).name
-                    newVal = customers.value.find(i => i.id === prop.data.n).name
+                    if(prop.data.o) oldVal = customers.value.find(i => i.id === prop.data.o).name
+                    if(prop.data.o) newVal = customers.value.find(i => i.id === prop.data.n).name
                } else if(key === "vendor") {
                    name = "Lieferant"
-                    oldVal = vendors.value.find(i => i.id === prop.data.o).name
-                    newVal = vendors.value.find(i => i.id === prop.data.n).name
+                    if(prop.data.o) oldVal = vendors.value.find(i => i.id === prop.data.o).name
+                    if(prop.data.o) newVal = vendors.value.find(i => i.id === prop.data.n).name
+
                } else if(key === "description") {
                    name = "Beschreibung"
                } else if(key === "categorie") {
                    name = "Kategorie"
                } else if(key === "profile") {
                    name = "Mitarbeiter"
-                    oldVal = profiles.value.find(i => i.id === prop.data.o).fullName
-                    newVal = profiles.value.find(i => i.id === prop.data.n).fullName
+                    if(prop.data.o) oldVal = profiles.value.find(i => i.id === prop.data.o).fullName
+                    if(prop.data.o) newVal = profiles.value.find(i => i.id === prop.data.n).fullName
                } else if(key === "plant") {
                    name = "Objekt"
-                    oldVal = plants.value.find(i => i.id === prop.data.o).name
-                    newVal = plants.value.find(i => i.id === prop.data.n).name
+                    if(prop.data.o) oldVal = plants.value.find(i => i.id === prop.data.o).name
+                    if(prop.data.o) newVal = plants.value.find(i => i.id === prop.data.n).name
                } else if(key === "annualPaidLeaveDays") {
                    name = "Urlaubstage"
                } else if(key === "employeeNumber") {
@@ -662,8 +676,8 @@ export const useDataStore = defineStore('data', () => {
                    name = "Kennzeichen"
                } else if(key === "driver") {
                    name = "Fahrer"
-                    oldVal = profiles.value.find(i => i.id === prop.data.o).fullName
-                    newVal = profiles.value.find(i => i.id === prop.data.n).fullName
+                    if(prop.data.o) oldVal = profiles.value.find(i => i.id === prop.data.o).fullName
+                    if(prop.data.o) newVal = profiles.value.find(i => i.id === prop.data.n).fullName
                }


@@ -810,10 +824,10 @@ export const useDataStore = defineStore('data', () => {
            console.log(supabaseError)
            toast.add({title: "Es ist ein Fehler bei der Erstellung aufgetreten", color: "rose"})
        } else if (supabaseData) {
-            console.log(supabaseData)
+            //console.log(supabaseData)
            await generateHistoryItems(dataType, supabaseData[0])

-            if(dataType !== "statementallocations"){
+            if(!["statementallocations", "productcategories"].includes(dataType) ){
                await eval( dataType + '.value.push(' + JSON.stringify(...supabaseData) + ')')
            }

@@ -825,7 +839,7 @@ export const useDataStore = defineStore('data', () => {
    }

    async function updateItem (dataType, data, oldData = null) {
-        console.log(dataType, data)
+        //console.log(dataType, data)
        //Temporary Fix TODO: Remove and build Solution
        data = JSON.parse(JSON.stringify(data))
        delete data.users