added version info and reload option

frontend/package-lock.json

@@ -31,9 +31,7 @@
         "source-sans": "^3.46.0",
         "vue": "^3.4.11",
         "vue-i18n": "^9.13.1",
-        "vue-router": "^4.3.2",
-        "workbox-core": "^7.1.0",
-        "workbox-precaching": "^7.1.0"
+        "vue-router": "^4.3.2"
       },
       "devDependencies": {
         "@types/node": "^20.12.12",
@@ -50,7 +48,9 @@
         "vite": "^5.2.11",
         "vite-plugin-pwa": "^0.20.0",
         "vitest": "^1.6.0",
-        "vue-tsc": "^1.8.27"
+        "vue-tsc": "^1.8.27",
+        "workbox-core": "^7.1.0",
+        "workbox-precaching": "^7.1.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -2983,28 +2983,6 @@
         }
       }
     },
-    "node_modules/@types/eslint": {
-      "version": "8.56.10",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.10.tgz",
-      "integrity": "sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@types/estree": "*",
-        "@types/json-schema": "*"
-      }
-    },
-    "node_modules/@types/eslint-scope": {
-      "version": "3.7.7",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
-      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
-    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -3826,11 +3804,12 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/acorn-import-assertions": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+    "node_modules/acorn-import-attributes": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
       "dev": true,
+      "license": "MIT",
       "peer": true,
       "peerDependencies": {
         "acorn": "^8"
@@ -4633,10 +4612,11 @@
       "dev": true
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.16.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.1.tgz",
-      "integrity": "sha512-4U5pNsuDl0EhuZpq46M5xPslstkviJuhrdobaRDBk2Jy2KO37FDAJl4lb2KlNabxT0m4MTK2UHNrsAcphE8nyw==",
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
       "dev": true,
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "graceful-fs": "^4.2.4",
@@ -6331,10 +6311,11 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
@@ -7664,6 +7645,7 @@
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
       "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
       "dev": true,
+      "license": "MIT",
       "peer": true,
       "engines": {
         "node": ">=6"
@@ -8409,22 +8391,22 @@
       "dev": true
     },
     "node_modules/webpack": {
-      "version": "5.91.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz",
-      "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==",
+      "version": "5.94.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz",
+      "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==",
       "dev": true,
+      "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.5",
         "@webassemblyjs/ast": "^1.12.1",
         "@webassemblyjs/wasm-edit": "^1.12.1",
         "@webassemblyjs/wasm-parser": "^1.12.1",
         "acorn": "^8.7.1",
-        "acorn-import-assertions": "^1.9.0",
+        "acorn-import-attributes": "^1.9.5",
         "browserslist": "^4.21.10",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.16.0",
+        "enhanced-resolve": "^5.17.1",
         "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
@@ -8808,6 +8790,7 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-7.1.0.tgz",
       "integrity": "sha512-5KB4KOY8rtL31nEF7BfvU7FMzKT4B5TkbYa2tzkS+Peqj0gayMT9SytSFtNzlrvMaWgv6y/yvP9C0IbpFjV30Q==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/workbox-expiration": {
@@ -8845,6 +8828,7 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-7.1.0.tgz",
       "integrity": "sha512-LyxzQts+UEpgtmfnolo0hHdNjoB7EoRWcF7EDslt+lQGd0lW4iTvvSe3v5JiIckQSB5KTW5xiCqjFviRKPj1zA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "workbox-core": "7.1.0",
@@ -8879,6 +8863,7 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-7.1.0.tgz",
       "integrity": "sha512-oOYk+kLriUY2QyHkIilxUlVcFqwduLJB7oRZIENbqPGeBP/3TWHYNNdmGNhz1dvKuw7aqvJ7CQxn27/jprlTdg==",
+      "dev": true,
       "dependencies": {
         "workbox-core": "7.1.0"
       }
@@ -8887,6 +8872,7 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-7.1.0.tgz",
       "integrity": "sha512-/UracPiGhUNehGjRm/tLUQ+9PtWmCbRufWtV0tNrALuf+HZ4F7cmObSEK+E4/Bx1p8Syx2tM+pkIrvtyetdlew==",
+      "dev": true,
       "dependencies": {
         "workbox-core": "7.1.0"
       }

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "htwkalender",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/public/sw.js

@@ -1,5 +1,5 @@
-import { precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching';
-import { clientsClaim } from 'workbox-core';
+import { precacheAndRoute, cleanupOutdatedCaches } from "workbox-precaching";
+import { clientsClaim } from "workbox-core";
 
 self.skipWaiting();
 clientsClaim();
@@ -10,19 +10,19 @@ cleanupOutdatedCaches();
 precacheAndRoute(self.__WB_MANIFEST);
 
 // Custom precaching logic for the /api/modules endpoint
-self.addEventListener('install', (event) => {
+self.addEventListener("install", (event) => {
   event.waitUntil(
-    caches.open('api-modules-cache').then((cache) => {
-      return fetch('/api/modules')
+    caches.open("api-modules-cache").then((cache) => {
+      return fetch("/api/modules")
         .then((response) => {
           if (response.ok) {
-            return cache.put('/api/modules', response);
+            return cache.put("/api/modules", response);
           }
-          throw new Error('Failed to fetch /api/modules');
+          throw new Error("Failed to fetch /api/modules");
         })
         .catch((error) => {
-          console.error('Precaching /api/modules failed:', error);
+          console.error("Precaching /api/modules failed:", error);
         });
-    })
+    }),
   );
 });

frontend/src/components/AppVersion.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+const version = __APP_VERSION__;
+</script>
+
+<template>
+  <p>
+    {{ version }}
+  </p>
+</template>

frontend/src/components/LocaleSwitcher.vue

@@ -68,12 +68,7 @@ updateLocale(settingsStore().locale);
     <template #value="slotProps">
       <div v-if="slotProps.value" class="flex align-items-center">
         <div class="mr-2 flag">{{ displayIcon(slotProps.value) }}</div>
-        <div
-          style="
-            font-family: &quot;Twemoji Country Flags&quot;,
-              &quot;Helvetica&quot;, &quot;Comic Sans&quot;, serif;
-          "
-        >
+        <div>
           {{ displayCountry(slotProps.value) }}
         </div>
       </div>

frontend/src/components/ReloadPwa.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { useToast } from "primevue/usetoast";
+
+const Toast = useToast();
+
+const updateCache = () => {
+  if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.ready.then((registration) => {
+      registration.unregister().then((boolean) => {
+        if (boolean) {
+          Toast.add({
+            severity: "success",
+            summary: "Service Worker",
+            detail: "Service Worker has been unregistered",
+            life: 1000,
+          });
+
+          setTimeout(() => {
+            window.location.reload();
+          }, 1000);
+        } else {
+          Toast.add({
+            severity: "error",
+            summary: "Service Worker",
+            detail: "Service Worker could not be unregistered",
+            life: 1000,
+          });
+        }
+      });
+    });
+  }
+};
+</script>
+
+<template>
+  <Button @click="updateCache()">
+    {{ $t("settings.reloadPwa") }}
+  </Button>
+</template>

frontend/src/i18n/translations/de.json

@@ -260,6 +260,8 @@
     "subTitle": "Hier kannst du deine Einstellungen bearbeiten.",
     "language": "Sprache einstellen",
     "darkMode": "Design auswählen",
-    "defaultPage": "Standardseite"
+    "defaultPage": "Standardseite",
+    "version": "App-Version",
+    "reloadPwa": "App neu laden"
   }
 }

frontend/src/i18n/translations/en.json

@@ -265,6 +265,8 @@
     "subTitle": "Here you can change your settings.",
     "language": "Choose your language",
     "darkMode": "Switch page theme",
-    "defaultPage": "Default page"
+    "defaultPage": "Default page",
+    "version": "Version",
+    "reloadPwa": "Reload PWA"
   }
 }

frontend/src/i18n/translations/ja.json

@@ -260,6 +260,8 @@
     "subTitle": "ここで設定を編集できます。",
     "language": "言語",
     "darkMode": "ダークモード",
-    "defaultPage": "デフォルトページ"
+    "defaultPage": "デフォルトページ",
+    "version": "バージョン",
+    "reloadPwa": "PWAを再読み込み"
   }
 }

frontend/src/view/EditCalendarView.vue

@@ -75,7 +75,7 @@ function loadCalendar(): void {
       }
     });
   } else {
-    if(tokenStore().feed.id === token.value) {
+    if (tokenStore().feed.id === token.value) {
       // get data from tokenStore feed if offline
       const offlineModules = tokenStore().feed.modules;
 
@@ -90,7 +90,6 @@ function loadCalendar(): void {
           detail: t("editCalendarView.calendarLoadedFromOfflineMode"),
           life: 3000,
         });
-
       } else {
         toast.add({
           severity: "info",
@@ -108,9 +107,9 @@ function loadCalendar(): void {
       });
       return;
     }
-      modules.value = moduleStore().modules;
-      router.push("/edit-calendar");
-    }
+    modules.value = moduleStore().modules;
+    router.push("/edit-calendar");
+  }
 }
 </script>
 

frontend/src/view/SettingsView.vue

@@ -3,6 +3,8 @@ import LocaleSwitcher from "@/components/LocaleSwitcher.vue";
 import { ref } from "vue";
 import DarkModeSwitcher from "@/components/DarkModeSwitcher.vue";
 import DefaultPageSwitcher from "@/components/DefaultPageSwitcher.vue";
+import AppVersion from "@/components/AppVersion.vue";
+import ReloadPwa from "@/components/ReloadPwa.vue";
 
 const icon = "pi pi-cog";
 const isDark = ref(true);
@@ -61,11 +63,26 @@ function handleDarkModeToggled(isDarkVar: boolean) {
             ></DarkModeSwitcher>
           </div>
         </div>
+        <div class="grid my-2">
+          <div class="col text-left">
+            {{ $t("settings.version") }}
+          </div>
+          <div class="col text-center">
+            <AppVersion />
+          </div>
+        </div>
+        <div class="grid my-2">
+          <div class="col text-center"></div>
+          <div class="col text-center">
+            <ReloadPwa />
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
-<style scoped>
+
+<style lang="css" scoped>
 .col {
   display: flex;
   justify-content: center;

frontend/src/vite-env.d.ts

@@ -17,3 +17,5 @@
 /// <reference types="vite/client" />
 
 declare module "ical.js";
+
+declare const __APP_VERSION__: string;

frontend/tsconfig.json

@@ -3,7 +3,7 @@
     "target": "ES2020",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "types": ["node"],
+    "types": ["node", "vite-plugin-pwa/vue"],
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
     /* Bundler mode */

frontend/vite.config.ts

@@ -33,7 +33,7 @@ export default defineConfig({
         "apple-touch-icon.png",
         "mask-icon.svg",
         "robots.txt",
-        "sitemap.xml"
+        "sitemap.xml",
       ],
       manifest: {
         name: "HTWKalender",
@@ -87,16 +87,15 @@ export default defineConfig({
         ],
       },
       registerType: "autoUpdate",
-      devOptions: {
-        enabled: true,
-        /* when using generateSW the PWA plugin will switch to classic */
-        type: "module",
-        navigateFallback: "index.html",
-        suppressWarnings: true,
-      },
       strategies: "injectManifest",
+      injectManifest: {
+        globPatterns: ["**/*.{js,css,html,png,svg}"],
+      },
     }),
   ],
+  define: {
+    __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
+  },
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),
@@ -116,6 +115,9 @@ export default defineConfig({
       },
     },
   },
+  build: {
+    sourcemap: true,
+  },
   esbuild: {
     supported: {
       "top-level-await": true,