Fixed WebPush Notification error subscription

2021-10-05 15:39:33 +02:00
parent 9121569809
commit eb4156fc89
9 changed files with 161 additions and 130 deletions
--- a/package.json
+++ b/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",
--- a/src/components/CSignIn/CSignIn.ts
+++ b/src/components/CSignIn/CSignIn.ts
@@ -116,13 +116,8 @@ export default defineComponent({

            emit('loginOk')

-            // GlobalStore.actions.createPushSubscription()
-            //   .then((rissub) => {
-            //     // ...
-            //   })
-            //   .catch((e) => {
-            //     console.log('ERROR Subscription = ' + e)
-            //   })
+            globalStore.createPushSubscription()
+
          } else {
            emit('checkErrors', riscode)
          }
--- a/src/root/home/home.ts
+++ b/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,
    }
  },
 })
--- a/src/root/home/home.vue
+++ b/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>
--- a/src/root/maps/maps.scss
+++ b/src/root/maps/maps.scss
--- a/src/root/maps/maps.ts.off
+++ b/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,
+    }
+  },
+})
--- a/src/root/maps/maps.vue.off
+++ b/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>
--- a/src/webpack-require.d.ts
+++ b/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;
--- a/yarn.lock
+++ b/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"