Fixed WebPush Notification error subscription

package.json

@@ -25,7 +25,6 @@
   "dependencies": {
     "@quasar/extras": "^1.11.0",
     "@quasar/quasar-ui-qcalendar": "^4.0.0-beta.6",
-    "@vue-leaflet/vue-leaflet": "^0.6.1",
     "@vue/compat": "^3.2.12",
     "@vue/compiler-sfc": "^3.2.12",
     "@vue/eslint-config-standard": "^6.1.0",

src/components/CSignIn/CSignIn.ts

@@ -116,13 +116,8 @@ export default defineComponent({
 
             emit('loginOk')
 
-            // GlobalStore.actions.createPushSubscription()
+            globalStore.createPushSubscription()
-            //   .then((rissub) => {
+
-            //     // ...
-            //   })
-            //   .catch((e) => {
-            //     console.log('ERROR Subscription = ' + e)
-            //   })
           } else {
             emit('checkErrors', riscode)
           }

src/root/home/home.ts

@@ -1,58 +1,17 @@
 
-import { LMap, LIcon, LTileLayer, LMarker, LControlLayers, LTooltip, LPopup, LPolyline, LPolygon, LRectangle,  } from '@vue-leaflet/vue-leaflet'
-
-import 'leaflet/dist/leaflet.css'
-
 import {
   defineComponent, ref, computed,
 } from 'vue'
+
 import { tools } from '@src/store/Modules/tools'
 
 
 export default defineComponent({
   name: 'Home',
-  components: {
-    LMap,
-    LIcon,
-    LTileLayer,
-    LMarker,
-    LControlLayers,
-    LTooltip,
-    LPopup,
-    LPolyline,
-    LPolygon,
-    LRectangle,
-  },
-
   setup() {
 
-    const zoom = ref(2)
-    const iconWidth = ref(25)
-    const iconHeight = ref(40)
-
-    const iconUrl = computed(() => `https://placekitten.com/${iconWidth.value}/${iconHeight.value}`)
-    const iconSize = computed(() => [iconWidth.value, iconHeight.value])
-
-    function log(a: any) {
-      console.log(a)
-    }
-
-    function changeIcon() {
-      iconWidth.value += 2
-      if (iconWidth.value > iconHeight.value) {
-        iconWidth.value = Math.floor(iconHeight.value / 2)
-      }
-    }
-
     return {
       tools,
-      zoom,
-      iconWidth,
-      iconHeight,
-      iconUrl,
-      iconSize,
-      changeIcon,
-      log,
     }
   },
 })

src/root/home/home.vue

@@ -2,79 +2,7 @@
   <q-page class="">
     <h1>Inizio:</h1>
 
-    <template>
-      <div style="height: 75vh; width: 50vw;">
-        <l-map
-          v-model="zoom"
-          v-model:zoom="zoom"
-          :center="[47.41322, -1.219482]"
-          @move="log('move')"
-        >
-          <l-tile-layer
-            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-          ></l-tile-layer>
-          <l-control-layers />
-          <l-marker :lat-lng="[0, 0]" draggable @moveend="log('moveend')">
-            <l-tooltip>
-              lol
-            </l-tooltip>
-          </l-marker>
 
-          <l-marker :lat-lng="[47.41322, -1.219482]">
-            <l-icon :icon-url="iconUrl" :icon-size="iconSize" />
-          </l-marker>
-
-          <l-marker :lat-lng="[50, 50]" draggable @moveend="log('moveend')">
-            <l-popup>
-              lol
-            </l-popup>
-          </l-marker>
-
-          <l-polyline
-            :lat-lngs="[
-          [47.334852, -1.509485],
-          [47.342596, -1.328731],
-          [47.241487, -1.190568],
-          [47.234787, -1.358337],
-        ]"
-            color="green"
-          ></l-polyline>
-          <l-polygon
-            :lat-lngs="[
-          [46.334852, -1.509485],
-          [46.342596, -1.328731],
-          [46.241487, -1.190568],
-          [46.234787, -1.358337],
-        ]"
-            color="#41b782"
-            :fill="true"
-            :fillOpacity="0.5"
-            fillColor="#41b782"
-          />
-          <l-rectangle
-            :lat-lngs="[
-          [46.334852, -1.509485],
-          [46.342596, -1.328731],
-          [46.241487, -1.190568],
-          [46.234787, -1.358337],
-        ]"
-            :fill="true"
-            color="#35495d"
-          />
-          <l-rectangle
-            :bounds="[
-          [46.334852, -1.190568],
-          [46.241487, -1.090357],
-        ]"
-          >
-            <l-popup>
-              lol
-            </l-popup>
-          </l-rectangle>
-        </l-map>
-        <button @click="changeIcon">New kitten icon</button>
-      </div>
-    </template>
   </q-page>
 
 </template>

src/root/maps/maps.ts.off

@@ -0,0 +1,73 @@
+
+// @ts-ignore
+import { LMap, LIcon, LTileLayer, LMarker, LControlLayers, LTooltip, LPopup, LPolyline, LPolygon, LRectangle,  } from '@vue-leaflet/vue-leaflet'
+
+import 'leaflet/dist/leaflet.css'
+
+import {
+  defineComponent, ref, computed,
+} from 'vue'
+import { tools } from '@src/store/Modules/tools'
+
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const leaflet = require('leaflet');
+
+delete leaflet.Icon.Default.prototype._getIconUrl;
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const iconRetinaUrl = require('leaflet/dist/images/marker-icon-2x.png');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const iconUrl = require('leaflet/dist/images/marker-icon.png');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const shadowUrl = require('leaflet/dist/images/marker-shadow.png');
+
+leaflet.Icon.Default.mergeOptions({ iconRetinaUrl, iconUrl, shadowUrl })
+
+export default defineComponent({
+  name: 'Home',
+  components: {
+    LMap,
+    LIcon,
+    LTileLayer,
+    LMarker,
+    LControlLayers,
+    LTooltip,
+    LPopup,
+    LPolyline,
+    LPolygon,
+    LRectangle,
+  },
+
+  setup() {
+
+    const zoom = ref(2)
+    const iconWidth = ref(25)
+    const iconHeight = ref(40)
+
+    const iconUrl = computed(() => `https://placekitten.com/${iconWidth.value}/${iconHeight.value}`)
+    const iconSize = computed(() => [iconWidth.value, iconHeight.value])
+
+    function log(a: any) {
+      console.log(a)
+    }
+
+    function changeIcon() {
+      iconWidth.value += 2
+      if (iconWidth.value > iconHeight.value) {
+        iconWidth.value = Math.floor(iconHeight.value / 2)
+      }
+    }
+
+    return {
+      tools,
+      zoom,
+      iconWidth,
+      iconHeight,
+      iconUrl,
+      iconSize,
+      changeIcon,
+      log,
+    }
+  },
+})

src/root/maps/maps.vue.off

@@ -0,0 +1,85 @@
+<template>
+  <q-page class="">
+    <h1>Inizio:</h1>
+
+    <template>
+      <div style="height: 75vh; width: 50vw;">
+        <l-map
+          v-model="zoom"
+          v-model:zoom="zoom"
+          :center="[47.41322, -1.219482]"
+          @move="log('move')"
+        >
+          <l-tile-layer
+            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          ></l-tile-layer>
+          <l-control-layers />
+          <l-marker :lat-lng="[0, 0]" draggable @moveend="log('moveend')">
+            <l-tooltip>
+              lol
+            </l-tooltip>
+          </l-marker>
+
+          <l-marker :lat-lng="[47.41322, -1.219482]">
+            <l-icon :icon-url="iconUrl" :icon-size="iconSize" />
+          </l-marker>
+
+          <l-marker :lat-lng="[50, 50]" draggable @moveend="log('moveend')">
+            <l-popup>
+              lol
+            </l-popup>
+          </l-marker>
+
+          <l-polyline
+            :lat-lngs="[
+          [47.334852, -1.509485],
+          [47.342596, -1.328731],
+          [47.241487, -1.190568],
+          [47.234787, -1.358337],
+        ]"
+            color="green"
+          ></l-polyline>
+          <l-polygon
+            :lat-lngs="[
+          [46.334852, -1.509485],
+          [46.342596, -1.328731],
+          [46.241487, -1.190568],
+          [46.234787, -1.358337],
+        ]"
+            color="#41b782"
+            :fill="true"
+            :fillOpacity="0.5"
+            fillColor="#41b782"
+          />
+          <l-rectangle
+            :lat-lngs="[
+          [46.334852, -1.509485],
+          [46.342596, -1.328731],
+          [46.241487, -1.190568],
+          [46.234787, -1.358337],
+        ]"
+            :fill="true"
+            color="#35495d"
+          />
+          <l-rectangle
+            :bounds="[
+          [46.334852, -1.190568],
+          [46.241487, -1.090357],
+        ]"
+          >
+            <l-popup>
+              lol
+            </l-popup>
+          </l-rectangle>
+        </l-map>
+        <button @click="changeIcon">New kitten icon</button>
+      </div>
+    </template>
+  </q-page>
+
+</template>
+<script lang="ts" src="./maps.ts">
+</script>
+<style lang="scss" scoped>
+@import './maps.scss';
+</style>

src/webpack-require.d.ts

@@ -1,3 +0,0 @@
-// This is required to use Webpack loaders, cf https://stackoverflow.com/a/36151803/257169
-
-declare function require(string): any;

yarn.lock

@@ -2240,11 +2240,6 @@
     "@typescript-eslint/types" "4.31.1"
     eslint-visitor-keys "^2.0.0"
 
-"@vue-leaflet/vue-leaflet@^0.6.1":
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/@vue-leaflet/vue-leaflet/-/vue-leaflet-0.6.1.tgz#d731a5d2256d049e345f58330616180191d88b12"
-  integrity sha512-/sm0bdrdftXh5nSGEPsoKrJI1D/GtKiEsBo9X/TA2yu4lYTDcaem6U4t1Ea5CoLleiZRCNUrZr9PG/xHdUPXYA==
-
 "@vue/compat@^3.2.12":
   version "3.2.12"
   resolved "https://registry.yarnpkg.com/@vue/compat/-/compat-3.2.12.tgz#e07b78e6a3ad589567dd199e402b6e4acfda433a"