chore: map loading updated

.env

@@ -0,0 +1,2 @@
+VITE_APP_AIRTABLE_TOKEN=keyxSG4cLVrJWeOUv
+VITE_APP_GTAG_ID=G-R88JSEDEBT

package.json

@@ -10,11 +10,10 @@
   },
   "dependencies": {
     "@mdi/font": "^7.4.47",
-    "@unhead/vue": "^1.8.9",
+    "@unhead/vue": "^1.8.10",
     "@vue-leaflet/vue-leaflet": "^0.10.1",
     "airtable": "^0.12.2",
     "compressorjs": "^1.2.1",
-    "eslint-plugin-vuetify": "latest",
     "leaflet": "^1.9.4",
     "leaflet.locatecontrol": "^0.79.0",
     "leaflet.markercluster": "^1.5.3",
@@ -23,34 +22,35 @@
     "pinia": "^2.1.7",
     "register-service-worker": "^1.7.2",
     "vite-plugin-package-version": "^1.1.0",
-    "vue": "^3.4.7",
+    "vue": "^3.4.15",
     "vue-leaflet-markercluster": "^0.5.1",
     "vue-number-animation": "^2.0.2",
     "vue-router": "^4.2.5",
-    "vuetify": "^3.4.10",
+    "vuetify": "^3.5.1",
     "vuetify-sonner": "^0.3.12"
   },
   "devDependencies": {
-    "@babel/types": "^7.23.0",
+    "@babel/types": "^7.23.6",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.5",
     "@types/leaflet": "^1.9.8",
     "@types/markdown-it": "^13.0.7",
-    "@types/node": "^20.10.8",
-    "@vitejs/plugin-vue": "^4.5.0",
-    "@vue/cli-plugin-pwa": "~5.0.0",
+    "@types/node": "^20.11.5",
+    "@vitejs/plugin-vue": "^5.0.3",
+    "@vue/cli-plugin-pwa": "^5.0.8",
     "@vue/eslint-config-typescript": "^12.0.0",
     "eslint": "^8.56.0",
-    "eslint-plugin-vue": "^9.19.2",
-    "sass": "^1.69.7",
-    "sass-loader": "^13.3.3",
-    "typescript": "^5.3.0",
-    "unplugin-fonts": "^1.1.0",
+    "eslint-plugin-vue": "^9.20.1",
+    "eslint-plugin-vuetify": "^2.1.1",    
+    "sass": "^1.70.0",
+    "sass-loader": "^14.0.0",
+    "typescript": "^5.3.3",
+    "unplugin-fonts": "^1.1.1",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.0.11",
-    "vite-plugin-vuetify": "^2.0.0",
-    "vue-tsc": "^1.8.0"
+    "vite": "^5.0.12",
+    "vite-plugin-vuetify": "^2.0.1",
+    "vue-tsc": "^1.8.27"
   }
 }

src/components/map/LocationMap.vue

@@ -77,6 +77,7 @@ import MapNavigationCard from './MapNavigationCard.vue'
 import locationService from '@/services/location.service'
 import { useLocationStore } from '@/store/location.store'
 import type Location from '@/types/location'
+import { mapState } from 'pinia'
 
 export default {
   name: 'LocationMap',
@@ -98,7 +99,6 @@ export default {
   },
   data () {
     return {
-      map: null,
       geojson: null,
       userLocation: undefined as { lat: number; lng: number } | undefined,
       userIcon: L.icon({
@@ -109,7 +109,6 @@ export default {
       currentZoom: 10,
       currentCenter: {lat: 47.78707377527543, lng: 8.8828643076576 } as any,
       position: null,
-      locations: Array<Location>(),
       showPopup: false,
       popupLocation: undefined as Location | undefined,
       bounds: L.latLngBounds([
@@ -125,8 +124,13 @@ export default {
         '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
     }
   },
+  computed: {
+    ...mapState(useLocationStore, {
+      locations: store =>  store.locationList
+    })
+  },
   created () {
-    this.loadDistrictPolygons()
+
   },
   mounted () {
     this.currentZoom = this.$route.query.zoom
@@ -138,9 +142,8 @@ export default {
     this.currentCenter.lat = this.$route.query.clng
       ? Number.parseFloat(this.$route.query.clng as string)
       : this.currentCenter.lat
-
-    this.loadLocations()
-  },
+    this.loadDistrictPolygons()
+    },
   methods: {
     loadDistrictPolygons () {
       fetch('/landkreis-konstanz.geojson').then((response) => {
@@ -149,23 +152,6 @@ export default {
         })
       })
     },
-    async loadLocations () {
-      const locStore = useLocationStore()
-      await locStore.getLocationRecords()
-      const locations = locStore.getLocationList
-      if (this.locationTypes) {
-        const list = Array<Location>()
-        this.locationTypes.forEach((type) => {
-          const filteredList = locations.filter((loc) => {
-            return loc.type === type
-          })
-          list.push(...filteredList)
-        })
-        this.locations = list
-      } else {
-        this.locations = locations
-      }
-    },
     getPin (location: Location) {
       return L.icon({
         iconUrl: locationService.getLocationTypeImage(location),

src/router/index.ts

@@ -94,23 +94,23 @@ const router = createRouter({
     } else if (savedPosition) {
       return savedPosition
     } else {
-      return new Promise((resolve, reject) => {
+      return new Promise((resolve) => {
         setTimeout(() => {
           resolve({ left: 0, top: 0 })
-        }, 500)
+        }, 5)
       })
     }
   },
   routes
 })
 
-router.beforeEach((to) => {
+router.beforeEach(() => {
   // ✅ This will work make sure the correct store is used for the
   // current running app
+  useLocationStore().getLocationRecords()
   useMaterialStore().getMaterialRecords()
   useTargetStore().getTargetRecords()
   useTipStore().getTipRecords()
-  useLocationStore().getLocationRecords()
 })
 
 export default router

src/services/location.service.ts

@@ -1,6 +1,5 @@
 import type Location  from '@/types/location'
 import base from './airtable.service'
-import { toast } from 'vuetify-sonner'
 
 const BASE_NAME = 'Location'
 const locationService = {
@@ -29,13 +28,6 @@ const locationService = {
             fetchNextPage()
           }, function done (err) {
             if (err) {
-              console.error(err)
-              toast("Kommunikationsfehler", {
-                description: err.message,
-                cardProps: {
-                  color: 'error',
-                }
-              })
               reject(err)
             }
             resolve(locations)

src/services/material.service.ts

@@ -1,7 +1,6 @@
 import MaterialRequest from '@/types/material-request'
 import type Material from '@/types/material'
 import base from './airtable.service'
-import { toast } from 'vuetify-sonner'
 import { useTargetStore } from '@/store/target.store'
 
 const materialService = {
@@ -39,13 +38,6 @@ const materialService = {
           },
           function done (err) {
             if (err) {
-              console.error(err)
-              toast("Kommunikationsfehler", {
-                description: err.message,
-                cardProps: {
-                  color: 'error',
-                }
-              })
               reject(err)
             }
             resolve(allRecords)

src/services/partner.service.ts

@@ -32,13 +32,6 @@ const partnerService = {
           },
           function done (err: Error) {
             if (err) {
-              console.error(err)
-              toast("Kommunikationsfehler", {
-                description: err.message,
-                cardProps: {
-                  color: 'error',
-                }
-              })
               reject(err)
             }
             resolve(allRecords)

src/services/target.service.ts

@@ -36,13 +36,6 @@ const targetService = {
           },
           function done (err) {
             if (err) {
-              console.error(err)
-              toast("Kommunikationsfehler", {
-                description: err.message,
-                cardProps: {
-                  color: 'error',
-                }
-              })
               reject(err)
             }
             resolve(allTargets)

src/services/tip.service.ts

@@ -36,13 +36,6 @@ const tipService = {
           },
           function done (err) {
             if (err) {
-              console.error(err)
-              toast("Kommunikationsfehler", {
-                description: err.message,
-                cardProps: {
-                  color: 'error',
-                }
-              })
               reject(err)
             }
             resolve(allTips)

src/store/location.store.ts

@@ -3,6 +3,7 @@ import { defineStore } from "pinia"
 import locationService from '@/services/location.service'
 import type Location from "@/types/location"
 import { useLoadingStore } from "@/store/loading.store"
+import { toast } from 'vuetify-sonner'
 
 interface State {
   locationList: Array<Location>
@@ -16,17 +17,40 @@ export const useLocationStore = defineStore("location", {
   }),
   getters: {
     getLocationList: (state: State) => state.locationList as Array<Location>,
+    filteredLocationList: (state: State) => (locationTypes: Array<string>) => {
+      if (locationTypes && locationTypes.length > 0) {
+        const locList = state.locationList
+        const list = Array<Location>()
+        locationTypes.forEach((type) => {
+          const filteredList = locList.filter((loc) => {
+            return loc.type === type
+          })
+          list.push(...filteredList)
+        })
+        return list
+      } else {
+        return state.locationList
+      }
+    },
     getLocationListCount: (state: State) => state.locationList.length as Number
   },
   actions: {
-    getLocationRecords() {
+    async getLocationRecords() {
       if (!this.isLoading && (!this.locationList || this.locationList.length === 0)) {
         this.isLoading = true
         const loading = useLoadingStore()
         loading.updateShowLoadingSpinner(true)
         locationService.getLocationList()
           .then((result) => this.locationList = result)
-          .catch((error) => console.error(error))
+          .catch((error) => {
+            console.error(error)
+            toast("Kommunikationsfehler", {
+              description: error.message,
+              cardProps: {
+                color: 'error',
+              }
+            })
+          })
           .finally(() => {
             loading.updateShowLoadingSpinner(false)
             this.isLoading = false

src/store/material.store.ts

@@ -3,6 +3,7 @@ import { defineStore } from "pinia"
 import materialService from '@/services/material.service'
 import type Material from "@/types/material"
 import { useLoadingStore } from "@/store/loading.store"
+import { toast } from 'vuetify-sonner'
 
 interface State {
   materialList: Array<Material>
@@ -31,7 +32,15 @@ export const useMaterialStore = defineStore("material", {
         loading.updateShowLoadingSpinner(true)
         materialService.getMaterialRecords()
           .then((result) => this.materialList = result)
-          .catch((error) => console.error(error))
+          .catch((error) => {
+            console.error(error)
+            toast("Kommunikationsfehler", {
+              description: error.message,
+              cardProps: {
+                color: 'error',
+              }
+            })
+          })
           .finally(() => {
             loading.updateShowLoadingSpinner(false)
             this.isLoading = false

src/store/problemstoffmobil.store.ts

@@ -2,6 +2,7 @@ import { defineStore } from "pinia"
 import problemstoffmobilService from '@/services/problemstoffmobil.service'
 import { useLoadingStore } from "./loading.store"
 import type Event from "@/types/event"
+import { toast } from 'vuetify-sonner'
 
 interface State {
   eventList: Array<Event>
@@ -25,7 +26,15 @@ export const useEventStore = defineStore("event", {
         loading.updateShowLoadingSpinner(true)
         problemstoffmobilService.getEventRecords()
           .then((result) => this.eventList = result)
-          .catch((error) => console.error(error))
+          .catch((error) => {
+            console.error(error)
+            toast("Kommunikationsfehler", {
+              description: error.message,
+              cardProps: {
+                color: 'error',
+              }
+            })
+          })
           .finally(() => {
             loading.updateShowLoadingSpinner(false)
             this.isLoading = false

src/store/target.store.ts

@@ -2,6 +2,7 @@ import { defineStore } from "pinia"
 import targetService from '@/services/target.service'
 import type Target from "@/types/target"
 import { useLoadingStore } from "./loading.store"
+import { toast } from 'vuetify-sonner'
 
 interface State {
   targetList: Array<Target>
@@ -25,7 +26,15 @@ export const useTargetStore = defineStore("target", {
         loading.updateShowLoadingSpinner(true)
         targetService.getTargetRecords()
           .then((result) => this.targetList = result)
-          .catch((error) => console.error(error))
+          .catch((error) => {
+            console.error(error)
+            toast("Kommunikationsfehler", {
+              description: error.message,
+              cardProps: {
+                color: 'error',
+              }
+            })
+          })
           .finally(() => {
             loading.updateShowLoadingSpinner(false)
             this.isLoading = false