Display migration notice on the old domain

Author: filips123

website/.env.sample

@@ -12,3 +12,7 @@ VUE_APP_SENTRY_ENABLED=true
 VUE_APP_SENTRY_MAX_BREADCRUMBS=100
 VUE_APP_SENTRY_SAMPLE_RATE=0.1
 VUE_APP_SENTRY_TRACING_ORIGINS=api.gimvicurnik.filips.si
+
+VUE_APP_MIGRATION_DISPLAY=true
+VUE_APP_MIGRATION_TARGET=https://urnik.gimvic.org/
+VUE_APP_MIGRATION_INSTRUCTIONS=https://github.com/filips123/GimVicUrnik/wiki#namestitev

website/src/App.vue

@@ -49,6 +49,10 @@
       </v-container>
     </v-main>
 
+    <v-dialog v-model="migrationNoticeDialog" width="35rem">
+      <migration-notice v-if="migrationNoticeDialog" @closeDialog=closeMigrationNoticeDialog />
+    </v-dialog>
+
     <v-snackbar v-model="isSnackbarDisplayed">
       {{ snackbarMessage }}
 
@@ -112,12 +116,14 @@ import { mdiCog, mdiRss } from '@mdi/js'
 import PullToRefresh from 'pulltorefreshjs'
 import { Component, Vue } from 'vue-property-decorator'
 
+import MigrationNotice from '@/components/base/MigrationNotice.vue'
 import { SettingsModule, ThemeType } from '@/store/modules/settings'
 import { updateAllData } from '@/store/modules/storage'
 import { displaySnackbar, hideSnackbar } from '@/utils/snackbar'
 
 @Component({
   components: {
+    MigrationNotice,
     ViewNavigationDesktop: () => import(/* webpackChunkName: "desktop" */ '@/components/navigation/ViewNavigationDesktop.vue'),
     ViewNavigationMobile: () => import(/* webpackChunkName: "mobile" */ '@/components/navigation/ViewNavigationMobile.vue'),
     DayNavigation: () => import(/* webpackChunkName: "mobile" */ '@/components/navigation/DayNavigation.vue')
@@ -132,6 +138,8 @@ export default class App extends Vue {
   isNavigationDisplayed = true
   isDayMenuDisplayed = false
 
+  migrationNoticeDialog = process.env.VUE_APP_MIGRATION_DISPLAY
+
   isSnackbarDisplayed = false
   snackbarMessage = ''
   snackbarButton = ''
@@ -258,5 +266,9 @@ export default class App extends Vue {
   setDayMenuDisplay (isDayMenuDisplayed: boolean): void {
     this.isDayMenuDisplayed = isDayMenuDisplayed
   }
+
+  closeMigrationNoticeDialog (): void {
+    this.migrationNoticeDialog = false
+  }
 }
 </script>

website/src/components/base/MigrationNotice.vue

@@ -0,0 +1,40 @@
+<template>
+  <v-card width="35rem">
+    <v-toolbar class="text-uppercase" color="#009300" dark>
+      Nov naslov spletne aplikacije
+    </v-toolbar>
+
+    <v-card-text class="text--primary pt-6 mb-n6">
+      <p>
+        S šolskim letom 2022/23 bo spletna aplikacija {{ title }} dostopna na naslovu <a :href="target" target="_blank">{{ target }}</a>.
+      </p>
+      <p>
+        Trenutno različico boste morali odstraniti ter aplikacijo ponovno namestiti iz novega naslova. Navodila za namestitev
+        so dostopna v <a :href="instructions" target="_blank">dokumentaciji projekta</a>.
+      </p>
+      <p>
+        Podatki na obstoječi različici se bodo prenehali posodabljati, sčasoma pa bo ukinjena, zato prehod na novo opravite čim prej.
+        Nova različica ohranja vse funkcionalnosti obstoječe, dodaja pa tudi nekatere novosti in izboljšanje stabilnosti.
+      </p>
+    </v-card-text>
+
+    <v-card-actions class="justify-end">
+      <v-btn color="green" text v-on:click=closeDialog>Skrij obvestilo</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component
+export default class MigrationNotice extends Vue {
+  title = process.env.VUE_APP_TITLE
+  target = process.env.VUE_APP_MIGRATION_TARGET
+  instructions = process.env.VUE_APP_MIGRATION_INSTRUCTIONS
+
+  closeDialog (): void {
+    this.$emit('closeDialog')
+  }
+}
+</script>