F/version button

_project/frontend-nuxt/components/Version.vue

@@ -0,0 +1,49 @@
+<template>
+  <v-btn class="text-red" @click="reload()" v-if="!versionMatch"
+    >trans(fe.version.button)</v-btn
+  >
+</template>
+
+<script lang="ts" setup>
+import alertAdd from "~~/composables/customAlert"
+import { versionMatch } from "~~/plugins/runtime"
+
+const customAlert = alertAdd
+
+function reload() {
+  window.location.reload()
+}
+
+async function onMismatch() {
+  const chooseValue = await customAlert(
+    {
+      title: trans("fe.version.alert.title"),
+      body: trans("fe.version.alert.body"),
+    },
+    {
+      name: trans("fe.version.alert.yes"),
+      color: "green",
+      returnValue: true,
+    },
+    {
+      name: trans("fe.version.alert.no"),
+      color: "red",
+      returnValue: false,
+    }
+  )
+
+  chooseValue && reload()
+}
+
+onMounted(() => {
+  if (!versionMatch.value) {
+    void onMismatch()
+  }
+})
+
+watch(versionMatch, equal => {
+  if (!equal) {
+    void onMismatch()
+  }
+})
+</script>

_project/frontend-nuxt/composables/customAlert.ts

@@ -0,0 +1,70 @@
+interface alertData {
+  title: string | undefined
+  body: string | undefined
+}
+
+interface alertBtn<T> {
+  name: string
+  color: string
+  returnValue: T
+}
+
+interface alertList {
+  promiseResolve: (val: any) => void
+  show: boolean
+  title: string
+  body: string | undefined
+  buttons: Array<any>
+}
+
+const alertsList = ref<Array<alertList>>([])
+
+function alertAdd<Buttons extends alertBtn<any>>(data: alertData): Promise<true>
+function alertAdd<Buttons extends alertBtn<any>[]>(
+  data: alertData,
+  ...buttons: Buttons
+): Promise<Buttons[number]["returnValue"]>
+function alertAdd(data: alertData, ...buttons: any[]) {
+  if (!buttons.length) {
+    buttons = [
+      {
+        name: "OK",
+        color: "green",
+        returnValue: true,
+      },
+    ]
+  }
+  return new Promise(promiseResolve => {
+    alertsList.value.push({
+      promiseResolve,
+      show: true,
+      title: data?.title || "",
+      body: data?.body ?? data.body,
+      buttons,
+    })
+  })
+}
+
+document.onkeydown = function (evt) {
+  if (alertsList.value.length) {
+    evt = evt || window.event
+    if ("key" in evt) {
+      if (evt.key === "Escape" || evt.key === "Esc") {
+        alertRemove(alertsList.value.length, false)
+      }
+      if (evt.key === "Enter") {
+        alertRemove(alertsList.value.length, true)
+      }
+    }
+  }
+}
+
+function alertRemove(index: number, returnValue: any) {
+  const removeData = alertsList.value[index]
+  removeData.promiseResolve(returnValue)
+  alertsList.value.splice(index, 1)
+}
+
+export { alertRemove, alertsList, alertAdd }
+
+export default alertAdd

_project/frontend-nuxt/composables/intl.ts

@@ -19,6 +19,11 @@ const messages = {
     "validation.string.maxLength": `Das Feld darf nicht mehr als {maxLength} Zeichen haben`,
     "validation.string.minLength": `Das Feld muss mindestens {minLength} Zeichen enthalten`,
     "validation.not_a_valid": `Der eingegebene Wert ist kein gültiger {type}: {message}`,
+    "fe.version.button": "Neue Version verfügbar",
+    "fe.version.alert.title": "Neue Version verfügbar!",
+    "fe.version.alert.body": "Neue Version verfügbar, Seite neu laden?",
+    "fe.version.alert.yes": "Ja",
+    "fe.version.alert.no": "Nein",
   },
   en: {
     "handle.success": "{action} Success",
@@ -41,6 +46,11 @@ const messages = {
       "The field requires at least {minLength} characters",
     "validation.not_a_valid":
       "The entered value is not a valid {type}: {message}",
+    "fe.version.button": "New version available",
+    "fe.version.alert.title": "New version available!",
+    "fe.version.alert.body": "New version available, reload page?",
+    "fe.version.alert.yes": "Yes",
+    "fe.version.alert.no": "No",
   },
 }
 

_project/frontend-nuxt/layouts/default.vue

@@ -39,6 +39,7 @@ onMounted(() => {
       <div v-else>
         <span v-if="currentUser">{{ currentUser.displayName }}</span>
       </div>
+      <Version />
     </v-app-bar>
     <v-main>
       <slot />