Merge branch 'main' into feat-map-ui

Author: FelixINX

components/settings/SettingsAboutDialog.vue

@@ -50,15 +50,19 @@
       <div class="tt-settings__about">
         <v-container class="d-flex align-center">
           <img
-            src="https://felixinx.me/wp-content/uploads/2021/11/cropped-Logo-FD-270x270.png"
+            src="https://www.gravatar.com/avatar/6e45287de1e42819a97f91bfe4477b1f"
             width="40px"
             height="40px"
+            class="rounded-circle"
           />
           <div class="ml-4">
             <!-- eslint-disable -->
             <a
-              href="https://felixinx.me"
-              class="font-weight-medium text-decoration-none text-body-1"
+              href="https://read.cv/felixinx"
+              class="
+                font-weight-medium
+                text-decoration-none text-body-1
+              "
             >
               <!-- eslint-enable -->
               {{ $t('aboutDialog.by') }}
@@ -68,7 +72,7 @@
               {{ $t('aboutDialog.contact') }}
               <!-- eslint-disable vue/no-v-html -->
               <a
-                href="https://felixinx.me/en/contact-me/"
+                href="https://docs.google.com/forms/d/e/1FAIpQLSda-86sV12itRXPhLaw-WDDJI38GOSefq_7X006s1YP6pN4eg/viewform?usp=sf_link"
                 v-html="$t('aboutDialog.contactBtn')"
               ></a>
               <!-- eslint-enable vue/no-v-html -->

i18n/en.js

@@ -202,6 +202,8 @@ export default {
       success: 'Success!',
       error: 'Error while installing',
       updateAvailable: 'An update is available',
+      updatePending:
+        'The update is being installed! When ready, the page will refresh.',
       installUpdate: 'Refresh to update now',
     },
     agenciesTitle: 'Agencies',

i18n/fr.js

@@ -198,6 +198,8 @@ export default {
       success: 'Succès!',
       error: "Erreur lors de l'installation",
       updateAvailable: 'Une mise à jour est disponible',
+      updatePending:
+        "La mise à jour est en cours d'installation! Lorsque prête, la page rafraîchira.",
       installUpdate: 'Rafraîchir maintenant',
     },
     agenciesTitle: 'Agences',

layouts/default.vue

@@ -24,20 +24,28 @@
       :timeout="-1"
     >
       <span :class="[settingsDarkMode && 'black--text']">
-        {{ $t('settings.pwa.updateAvailable') }}
+        {{
+          $t(
+            `settings.pwa.${
+              updatePending ? 'updatePending' : 'updateAvailable'
+            }`
+          )
+        }}
       </span>
       <template #action>
         <v-btn
+          v-if="!updatePending"
           small
           depressed
           block
           :color="settingsDarkMode ? null : 'primary'"
-          @click="$store.dispatch('app/installUpdate')"
+          @click="installUpdate"
         >
           {{ $t('settings.pwa.installUpdate') }}
         </v-btn>
       </template>
     </v-snackbar>
+    <script async defer data-website-id="4007fee1-66a9-4b46-92e7-8fed4a802139" data-domains="www.transittracker.ca,transittracker.ca" data-cache="true" src="https://stats.felixinx.me/umami.js"></script>
   </v-app>
 </template>
 
@@ -63,6 +71,7 @@ export default {
     mdiMenuDown,
     mdiTable,
     mdiViewGrid,
+    workbox: null,
   }),
   head() {
     return this.$nuxtI18nHead({ addSeoAttributes: true })
@@ -141,6 +150,9 @@ export default {
         this.$store.commit('app/set', { key: 'openDownloadAssistant', value })
       },
     },
+    updatePending() {
+      return this.$store.state.app.updatePending
+    },
   },
   mounted() {
     this.checkForOldSettings()
@@ -153,7 +165,7 @@ export default {
     // Set language only if defined
     if (this.settingsLang) this.$i18n.setLocale(this.settingsLang)
 
-    this.handleWorkboxEvents()
+    //this.handleWorkboxEvents()
 
     // Install prompt
     window.addEventListener('beforeinstallprompt', (event) => {
@@ -222,23 +234,36 @@ export default {
     },
     async handleWorkboxEvents() {
       // Workbox update
-      const workbox = await window.$workbox
+      this.workbox = await window.$workbox
 
-      if (!workbox) {
+      if (!this.workbox) {
         return
       }
 
-      workbox.addEventListener('installed', (event) => {
-        if (!event.isUpdate) {
-          return
-        }
+      // Occurs when the user accepts the update and the new SW is ready to take control
+      this.workbox.addEventListener('controlling', () => {
+        console.log('WB Controlling')
+        window.location.reload()
+      })
 
+      // The new SW is installing but is waiting for activation
+      this.workbox.addEventListener('waiting', (event) => {
+        console.log('WB Waiting')
         this.$store.commit('app/set', {
           key: 'updateAvailable',
           value: true,
         })
       })
     },
+    installUpdate() {
+      console.log('WB skip waiting')
+      this.$store.commit('app/set', {
+        key: 'updatePending',
+        value: true,
+      })
+
+      this.workbox.messageSkipWaiting()
+    },
     async verifyNotificationSubscriptionStatus() {
       try {
         await Notification.requestPermission()

package.json

@@ -18,7 +18,7 @@
     "@popperjs/core": "^2.11.6",
     "@syncfusion/ej2-vue-grids": "^20.3.57",
     "animejs": "^3.2.1",
-    "core-js": "^3.17.2",
+    "core-js": "^3.25.5",
     "dexie": "^3.0.3",
     "gtfs-realtime-bindings": "^0.0.6",
     "mapbox-gl": "^2.4.1",

store/app.js

@@ -9,6 +9,8 @@ export const state = () => ({
   openRegionSwitcher: false,
   openSettingsDrawer: false,
   openDownloadAssistant: false,
+  updatePending: false,
+  notificationsCentre: false,
 })
 
 export const mutations = {
@@ -76,9 +78,4 @@ export const actions = {
       commit('set', { key: 'installPrompt', value: null })
     })
   },
-  installUpdate({ commit }) {
-    commit('set', { key: 'updateAvailable', value: false })
-
-    window.location.reload()
-  },
 }