added version info and reload option

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;