Merge pull request #24 from Spythere/development

Site migration to a new domain (old branch)

.github/workflows/firebase-hosting-merge.yml

@@ -5,7 +5,7 @@ name: Deploy to Firebase Hosting on merge
 'on':
   push:
     branches:
-      - main
+      - main-old
 jobs:
   build_and_deploy:
     runs-on: ubuntu-latest

src/App.vue

@@ -8,6 +8,10 @@
       <UpdatePrompt />
     </transition>
 
+    <transition name="slide-anim">
+      <MigrationInfo v-if="store.isMigrationInfoOpen" />
+    </transition>
+
     <div class="app-body">
       <Navbar />
 
@@ -28,11 +32,12 @@ import axios from 'axios';
 import StorageManager from './managers/storageManager';
 import Navbar from './components/App/Navbar.vue';
 import UpdatePrompt from './components/Global/UpdatePrompt.vue';
+import MigrationInfo from './components/Global/MigrationInfo.vue';
 
 const STORAGE_VERSION_KEY = 'app_version';
 
 export default defineComponent({
-  components: { UpdateCard, UpdatePrompt, Navbar },
+  components: { UpdateCard, UpdatePrompt, Navbar, MigrationInfo },
 
   mixins: [orderStorageMixin],
 
@@ -49,6 +54,7 @@ export default defineComponent({
       this.loadLang();
       this.setupDarkMode();
       this.loadSettings();
+      this.handleMigrationInfo();
       this.checkAppVersion();
       this.handleQueries();
     },
@@ -65,7 +71,10 @@ export default defineComponent({
       }
 
       this.store.orderDarkMode = this.getOrderSetting('dark-mode') === 'true';
-      document.documentElement.setAttribute('data-theme', this.store.orderDarkMode ? 'dark' : 'light');
+      document.documentElement.setAttribute(
+        'data-theme',
+        this.store.orderDarkMode ? 'dark' : 'light'
+      );
     },
 
     handleQueries() {
@@ -124,6 +133,20 @@ export default defineComponent({
       if (!naviLanguage.startsWith('pl')) {
         this.changeLang('en');
       }
+    },
+
+    handleMigrationInfo() {
+      // Show only on old domain
+      if (location.hostname !== 'generator-td2.web.app' && location.hostname != 'localhost') return;
+
+      const showInfo = localStorage.getItem('showMigrationInfo');
+
+      // Do not show if already acknowledged
+      if (showInfo === 'false') return;
+
+      setTimeout(() => {
+        this.store.isMigrationInfoOpen = true;
+      }, 2000);
     }
   }
 });

src/components/Global/MigrationInfo.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="migrate-info">
+    <div class="info-content">
+      <i18n-t keypath="migrate-info.line-1" for="migrate-info" tag="div">
+        <a href="https://generator-td2.spythere.eu/" target="_blank">{{
+          t('migrate-info.link')
+        }}</a>
+      </i18n-t>
+      <button class="g-button action accept-btn" @click="onAcceptButtonClick">
+        {{ t('migrate-info.accept-btn') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { useStore } from '../../store/store';
+
+const store = useStore();
+const { t } = useI18n();
+
+function onAcceptButtonClick() {
+  store.isMigrationInfoOpen = false;
+  localStorage.setItem('showMigrationInfo', 'false');
+}
+</script>
+
+<style lang="scss" scoped>
+@use '../../styles/colors';
+
+.migrate-info {
+  position: fixed;
+  z-index: 100;
+  bottom: 0;
+  left: 0;
+
+  padding: 0.25em;
+  text-align: center;
+
+  width: 100%;
+  background-color: colors.$warnCol;
+  color: black;
+  font-weight: bold;
+}
+
+.info-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
+a {
+  color: black;
+  text-decoration: underline;
+
+  &:hover {
+    color: black;
+  }
+}
+
+.accept-btn {
+  color: white;
+}
+</style>

src/locales/en.json

@@ -69,5 +69,10 @@
     "title": "Active timetables and trains on the scenery",
     "subtitle": "Click on the user below to fill the current order with their information",
     "no-trains": "No trains to display"
+  },
+  "migrate-info": {
+    "line-1": "GeneraTOR is being moved to a new domain - {0}! You can still use the current website, but it will no longer be updated and will be shut down in the nearest future!",
+    "link": "https://generator-td2.spythere.eu/",
+    "accept-btn": "ROGER THAT!"
   }
 }

src/locales/pl.json

@@ -69,5 +69,10 @@
     "title": "Aktywne RJ i gracze na scenerii",
     "subtitle": "Kliknij na gracza, aby wypełnić obecny rozkaz jego danymi",
     "no-trains": "Brak pociągów do wyświetlenia"
+  },
+  "migrate-info": {
+    "line-1": "GeneraTOR zostaje przeniesiony na nową domenę - {0}! Możesz korzystać z obecnej strony, jednak nie będzie ona otrzymywać już aktualizacji i w przyszłości zostanie wyłączona!",
+    "link": "https://generator-td2.spythere.eu/",
+    "accept-btn": "PRZYJĄŁEM!"
   }
 }

src/store/store.ts

@@ -19,6 +19,7 @@ export const useStore = defineStore('store', {
         releaseURL: ''
       },
 
+      isMigrationInfoOpen: false,
       updateCardOpen: false,
       helperModalOpen: false,
       orderDarkMode: false,

src/styles/_global.scss

@@ -57,6 +57,7 @@ button.g-button {
   &.action {
     background-color: colors.$bgColDarker;
     padding: 0.5em;
+    color: white;
 
     &:focus-visible {
       outline: 2px solid colors.$accentCol;