feat: update modal

src/App.vue

@@ -1,5 +1,10 @@
 <template>
   <div class="app_container">
+    <UpdateModal
+      :update-modal-open="updateModalOpen"
+      @toggle-modal="() => (updateModalOpen = false)"
+    />
+
     <Tooltip />
 
     <transition name="modal-anim">
@@ -22,7 +27,10 @@
       &copy;
       <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
       {{ new Date().getUTCFullYear() }} |
-      <a :href="releaseURL" target="_blank">v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}</a>
+      <a :href="store.appUpdate?.releaseURL" target="_blank"
+        >v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}</a
+      >
+
       <br />
       <a href="https://discord.gg/x2mpNN3svk">
         <img src="/images/icon-discord.png" alt="" />&nbsp;<b>{{ $t('footer.discord') }}</b>
@@ -48,6 +56,7 @@ import StatusIndicator from './components/App/StatusIndicator.vue';
 import AppHeader from './components/App/AppHeader.vue';
 import TrainModal from './components/TrainsView/TrainModal.vue';
 import Tooltip from './components/Tooltip/Tooltip.vue';
+import UpdateModal from './components/App/UpdateModal.vue';
 
 import StorageManager from './managers/storageManager';
 
@@ -59,6 +68,7 @@ export default defineComponent({
     StatusIndicator,
     AppHeader,
     TrainModal,
+    UpdateModal,
     Tooltip
   },
 
@@ -68,8 +78,9 @@ export default defineComponent({
     apiStore: useApiStore(),
     tooltipStore: useTooltipStore(),
 
+    updateModalOpen: false,
+
     currentLang: 'pl',
-    releaseURL: '',
     isOnProductionHost: location.hostname == 'stacjownik-td2.web.app',
 
     nextUpdateTime: 0
@@ -86,7 +97,6 @@ export default defineComponent({
   methods: {
     init() {
       this.loadLang();
-      this.setReleaseURL();
       this.setupOfflineHandling();
       this.checkAppVersion();
 
@@ -104,20 +114,29 @@ export default defineComponent({
       window.requestAnimationFrame(this.update);
     },
 
-    checkAppVersion() {
-      if (import.meta.env.DEV) {
-        this.store.isNewUpdate = true;
-
-        return;
-      }
-
+    async checkAppVersion() {
       const storageVersion = StorageManager.getStringValue(STORAGE_VERSION_KEY);
 
-      if (storageVersion === undefined || storageVersion != version) {
-        this.store.isNewUpdate = true;
+      try {
+        const releaseData = await (
+          await axios.get('https://api.github.com/repos/Spythere/stacjownik/releases/latest')
+        ).data;
 
-        StorageManager.setStringValue(STORAGE_VERSION_KEY, version);
+        if (!releaseData) return;
+
+        this.store.appUpdate = {
+          version,
+          changelog: releaseData.body,
+          releaseURL: releaseData.html_url
+        };
+
+        this.updateModalOpen =
+          storageVersion != version || 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, version);
     },
 
     setupOfflineHandling() {
@@ -149,21 +168,6 @@ export default defineComponent({
       StorageManager.setStringValue('lang', lang);
     },
 
-    async setReleaseURL() {
-      try {
-        const releaseData = await (
-          await axios.get('https://api.github.com/repos/Spythere/stacjownik/releases/latest')
-        ).data;
-
-        if (!releaseData) return;
-
-        this.releaseURL = releaseData.html_url;
-      } catch (error) {
-        console.error(`Wystąpił błąd podczas pobierania danych z API GitHuba: ${error}`);
-        return;
-      }
-    },
-
     loadLang() {
       const storageLang = StorageManager.getStringValue('lang');
 

src/components/App/UpdateModal.vue

@@ -1,21 +1,14 @@
 <template>
-  <AnimatedModal :is-open="mainStore.isNewUpdate" @toggle-modal="toggleModal">
+  <AnimatedModal :is-open="updateModalOpen" @toggle-modal="toggleModal">
     <div class="modal_content">
       <div>
         <h1 style="margin-bottom: 0.5em">{{ $t('update.title') }}</h1>
-        <h2 class="text--primary">{{ $t('update.version', [version]) }}</h2>
-        <hr class="separator" />
       </div>
 
-      <div class="features-list">
-        <h2>Nowości i zmiany:</h2>
-        <ul>
-          <li v-for="content in localeChangesArray" :key="content">{{ content }}</li>
-        </ul>
-      </div>
+      <div class="features-body" v-html="htmlChangelog"></div>
 
       <div class="modal_actions">
-        <button class="btn--action">Przyjąłem!</button>
+        <button class="btn--action" @click="toggleModal">Przyjąłem!</button>
 
         <p>Ten changelog będzie zawsze dostępny po kliknięciu numeru wersji w stopce strony!</p>
 
@@ -39,11 +32,24 @@
 import { defineComponent } from 'vue';
 import { useMainStore } from '../../store/mainStore';
 import { version } from '../../../package.json';
+import { Converter } from 'showdown';
+
 import AnimatedModal from '../Global/AnimatedModal.vue';
 
+const converter = new Converter();
+
 export default defineComponent({
   components: { AnimatedModal },
 
+  props: {
+    updateModalOpen: {
+      type: Boolean,
+      required: true
+    }
+  },
+
+  emits: ['toggleModal'],
+
   data() {
     return {
       mainStore: useMainStore(),
@@ -52,8 +58,13 @@ export default defineComponent({
   },
 
   computed: {
-    localeChangesArray() {
-      return this.$t('update.content').split('\n');
+    htmlChangelog() {
+      if (this.mainStore.appUpdate == null) return '';
+
+      const x = converter.makeHtml(this.mainStore.appUpdate.changelog);
+      console.log(x);
+
+      return x;
     }
   },
 
@@ -66,10 +77,22 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.modal_content {
-  font-size: 1.2em;
+::v-deep h1 {
   text-align: center;
-  padding: 1em;
+}
+
+::v-deep h2 {
+  padding: 0.25em 0;
+}
+
+::v-deep ul {
+  list-style: inside;
+  padding: 0.5em;
+  line-height: 1.5em;
+}
+
+.modal_content {
+  padding: 2em;
   height: 80vh;
   min-height: 550px;
 
@@ -85,49 +108,9 @@ hr.separator {
   background-color: #fff;
 }
 
-.features-list {
-  margin-top: 0.5em;
-  overflow: auto;
-
-  ul {
-    text-align: left;
-    list-style: '\21D2  ';
-    padding: 1em;
-  }
-
-  li {
-    margin: 0.5em 0;
-  }
-}
-
 .modal_actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5em;
-
-  button {
-    font-weight: bold;
-    padding: 0.35em;
-  }
-
-  p {
-    font-size: 0.9em;
-  }
-}
-
-.actions-checkboxes {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-
-  gap: 1em;
-
-  label {
-    font-size: 0.9em;
-  }
-
-  label > input {
-    margin-right: 0.5em;
-  }
 }
 </style>

src/store/mainStore.ts

@@ -18,7 +18,7 @@ export const useMainStore = defineStore('mainStore', {
       region: { id: 'eu', value: 'PL1', name: 'PL1' },
 
       isOffline: false,
-      isNewUpdate: false,
+      appUpdate: null,
 
       dispatcherStatsName: '',
       dispatcherStatsStatus: Status.Data.Initialized,

src/store/tooltipStore.ts

@@ -22,8 +22,6 @@ export const useTooltipStore = defineStore('tooltipStore', {
     show(_e: MouseEvent, type: string, value?: string) {
       if (!isTooltip(type)) return;
 
-      console.log(type, value);
-
       this.type = type;
       this.content = value ?? '';
     },

src/store/typings.ts

@@ -4,7 +4,7 @@ import { Availability, StationRoutesInfo, Status } from '../typings/common';
 export interface MainStoreState {
   region: { id: string; value: string; name: string };
   isOffline: boolean;
-  isNewUpdate: boolean;
+  appUpdate: { version: string; changelog: string; releaseURL: string } | null;
   dispatcherStatsName: string;
   dispatcherStatsData?: API.DispatcherStats.Response;
   driverStatsName: string;