chore: added changelog for update modal

.env

@@ -2,3 +2,4 @@ VITE_APP_API_URL=https://stacjownik.spythere.eu/api
 VITE_APP_SWDR_URL=https://api.td2.info.pl
 
 VITE_APP_ORDER_VERSION=2
+VITE_UPDATE_TEST='test'

package.json

@@ -15,6 +15,7 @@
     "axios": "^1.6.2",
     "lucide-vue-next": "^0.525.0",
     "pinia": "^2.1.7",
+    "showdown": "^2.1.0",
     "vue": "^3.3.11",
     "vue-i18n": "11",
     "vue-router": "^4.2.5",
@@ -22,6 +23,7 @@
   },
   "devDependencies": {
     "@types/node": "^22.13.10",
+    "@types/showdown": "^2.0.6",
     "@vitejs/plugin-vue": "^4.5.2",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",

src/App.vue

@@ -1,17 +1,20 @@
 <template>
   <div id="app_wrapper">
+    <UpdateCard />
+
     <router-view />
 
     <transition name="slide-anim">
       <div v-if="needRefresh" class="update-prompt" @click="updateServiceWorker(true)">
-        Nowa wersja GeneraTORa dostępna!
+        {{ $t('update.update-available-text') }}
-        <u>Kliknij, aby odświeżyć aplikację!</u>
+        <u>{{ $t('update.update-available-underline') }}</u>
       </div>
     </transition>
 
     <footer>
       &copy; <a href="https://td2.info.pl/profile/?u=20777">Spythere</a>
-      {{ new Date().getUTCFullYear() }} | v.{{ appVersion }}
+      {{ new Date().getUTCFullYear() }} |
+      <button class="g-button text" @click="store.updateCardOpen = true">v.{{ appVersion }}</button>
     </footer>
   </div>
 </template>
@@ -23,8 +26,14 @@ import packageInfo from '../package.json';
 import { useStore } from './store/store';
 import orderStorageMixin from './mixins/orderStorageMixin';
 import StorageManager from './managers/storageManager';
+import axios from 'axios';
+import UpdateCard from './components/UpdateCard.vue';
+
+const STORAGE_VERSION_KEY = 'app_version';
 
 export default defineComponent({
+  components: { UpdateCard },
+
   mixins: [orderStorageMixin],
 
   setup() {
@@ -43,6 +52,7 @@ export default defineComponent({
 
   methods: {
     init() {
+      this.checkAppVersion();
       this.loadLang();
       this.loadSettings();
       this.handleQueries();
@@ -63,6 +73,30 @@ export default defineComponent({
       }
     },
 
+    async checkAppVersion() {
+      const storageVersion = StorageManager.getStringValue(STORAGE_VERSION_KEY);
+
+      try {
+        const releaseData = await (
+          await axios.get('https://api.github.com/repos/Spythere/genera-tor/releases/latest')
+        ).data;
+
+        if (!releaseData) return;
+
+        this.store.appUpdateData.version = this.appVersion;
+        this.store.appUpdateData.changelog = releaseData.body;
+        this.store.appUpdateData.releaseURL = releaseData.html_url;
+
+        this.store.updateCardOpen =
+          (storageVersion != '' && storageVersion != this.appVersion) ||
+          import.meta.env.VITE_UPDATE_TEST === 'test';
+      } catch (error) {
+        console.error(`Wystąpił błąd podczas pobierania danych z API GitHuba: ${error}`);
+      }
+
+      StorageManager.setStringValue(STORAGE_VERSION_KEY, this.appVersion);
+    },
+
     changeLang(lang: string) {
       this.$i18n.locale = lang;
       this.store.currentAppLocale = lang;

src/components/UpdateCard.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="update-card" v-if="store.updateCardOpen" @toggle-card="toggleCard(false)">
+    <div class="card-background"></div>
+    <div class="card-content">
+      <h1 style="margin-bottom: 0.5em">🚀 {{ $t('update.title') }}</h1>
+
+      <div class="changelog" v-if="htmlChangelog != ''" v-html="htmlChangelog"></div>
+      <div class="no-features" v-else>{{ $t('update.no-data') }}</div>
+
+      <button class="g-button action btn-confirm" ref="confirmButtonEl" @click="toggleCard(false)">
+        {{ $t('update.confirm') }}
+      </button>
+
+      <p class="bottom-info">
+        {{ $t('update.info-1') }}
+        <br />
+        <span v-html="$t('update.info-2')"></span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineComponent, ref, watch } from 'vue';
+import { Converter } from 'showdown';
+import { useStore } from '../store/store';
+
+const converter = new Converter();
+const store = useStore();
+const confirmButtonEl = ref<HTMLButtonElement | null>(null);
+
+watch(
+  computed(() => store.updateCardOpen),
+  (val) => {
+    console.log(val, confirmButtonEl);
+
+    if (val) {
+      confirmButtonEl.value?.focus();
+    }
+  }
+);
+
+const htmlChangelog = computed(() => {
+  if (store.appUpdateData.changelog == '') return '';
+
+  return converter.makeHtml(store.appUpdateData.changelog);
+});
+
+function toggleCard(value: boolean) {
+  store.updateCardOpen = value;
+}
+</script>
+
+<style lang="scss" scoped>
+// Converter styles
+::v-deep(h1) {
+  text-align: center;
+  color: var(--clr-primary);
+}
+
+::v-deep(h2) {
+  padding: 0.25em 0;
+  border-bottom: 1px solid #aaa;
+}
+
+::v-deep(ul) {
+  list-style: disc;
+  padding: 1em;
+  line-height: 1.5em;
+  text-align: justify;
+}
+
+.update-card {
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+  z-index: 200;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.card-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 250;
+
+  cursor: pointer;
+
+  background-color: rgba(0, 0, 0, 0.55);
+}
+
+.card-content {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  gap: 0.5em;
+
+  margin: 1em;
+
+  max-height: 95vh;
+  max-height: 95dvh;
+
+  background-color: #1a1a1a;
+  box-shadow: 0 0 15px 10px #0e0e0e;
+  border-radius: 1em;
+
+  overflow: auto;
+
+  padding: 1em;
+  min-height: 700px;
+  overflow: auto;
+  max-width: 700px;
+
+  z-index: 300;
+}
+
+.no-features {
+  text-align: center;
+}
+
+.changelog {
+  text-align: left;
+}
+
+button.btn-confirm {
+  padding: 0.5em 0.75em;
+  font-size: 1.1em;
+}
+
+p.bottom-info {
+  text-align: center;
+  color: #ccc;
+}
+
+a {
+  text-decoration: underline;
+}
+</style>

src/locales/en.json

@@ -8,6 +8,15 @@
       "order-list": "SAVED ORDERS",
       "order-train-picker": "TRAINS"
    },
+   "update": {
+      "update-available-text": "New GeneraTOR version is available!",
+      "update-available-underline": "Click here to update!",
+      "title": "Stacjownik update!",
+      "confirm": "ROGER THAT!",
+      "no-data": "No changelog available!",
+      "info-1": "This changelog will be available to see once again after clicking the version number in the footer",
+      "info-2": "The full app changelog available on <a href='https://github.com/Spythere/genera-tor' target='_blank'>the project's GitHub</a>"
+   },
    "order-message": {
       "title": "Message to display in the simulator's chatbox:",
       "info": "Copy or save the content of the generated train order using buttons below:",

src/locales/pl.json

@@ -3,6 +3,15 @@
       "pl": "POLSKI",
       "en": "ANGIELSKI"
    },
+   "update": {
+      "update-available-text": "Nowa wersja GeneraTORa dostępna!",
+      "update-available-underline": "Kliknij, aby odświeżyć aplikację!",
+      "title": "Aktualizacja GeneraTORa!",
+      "no-data": "Brak dostępnego changelogu!",
+      "confirm": "Przyjąłem!",
+      "info-1": "Ten changelog będzie zawsze dostępny po kliknięciu numeru wersji w stopce strony",
+      "info-2": "Pełny changelog dostępny na <a href='https://github.com/Spythere/genera-tor' target='_blank'>GitHubie projektu</a>"
+   },
    "navbar": {
       "order-message": "TREŚĆ ROZKAZU",
       "order-list": "ZAPISANE ROZKAZY",

src/store/store.ts

@@ -11,6 +11,13 @@ export const useStore = defineStore('store', {
     return {
       currentAppLocale: 'pl',
       
+      appUpdateData: {
+        version: '',
+        changelog: '',
+        releaseURL: ''
+      },
+      
+      updateCardOpen: false,
       helperModalOpen: false,
       orderDarkMode: false,
 

yarn.lock

@@ -1337,6 +1337,11 @@
   resolved "https://registry.npmjs.org/@types/semver/-/semver-7.5.6.tgz"
   integrity sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==
 
+"@types/showdown@^2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@types/showdown/-/showdown-2.0.6.tgz#3d7affd5f971b4a17783ec2b23b4ad3b97477b7e"
+  integrity sha512-pTvD/0CIeqe4x23+YJWlX2gArHa8G0J0Oh6GKaVXV7TAeickpkkZiNOgFcFcmLQ5lB/K0qBJL1FtRYltBfbGCQ==
+
 "@types/trusted-types@^2.0.2":
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
@@ -1861,6 +1866,11 @@ commander@^2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
+commander@^9.0.0:
+  version "9.5.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-9.5.0.tgz#bc08d1eb5cedf7ccb797a96199d41c7bc3e60d30"
+  integrity sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==
+
 common-tags@^1.8.0:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6"
@@ -3735,6 +3745,13 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
+showdown@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/showdown/-/showdown-2.1.0.tgz#1251f5ed8f773f0c0c7bfc8e6fd23581f9e545c5"
+  integrity sha512-/6NVYu4U819R2pUIk79n67SYgJHWCce0a5xTP979WbNp0FL9MN1I1QK662IDU1b6JzKTvmhgI7T7JYIxBi3kMQ==
+  dependencies:
+    commander "^9.0.0"
+
 side-channel-list@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/side-channel-list/-/side-channel-list-1.0.0.tgz#10cb5984263115d3b7a0e336591e290a830af8ad"