Dodano modal aktualizacji

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app_container">
-    <!-- <UpdateModal /> -->
+    <UpdateModal />
     
     <header class="app_header">
       <div class="header_container">

src/components/App/UpdateModal.vue

@@ -1,19 +1,29 @@
 <template>
-  <section>
-    <!-- <h2>Ostatnie aktualizacje w Stacjowniku</h2>
-    <p>Tutaj będą pojawiać się informacje o kolejnych nowościach na stronie :)</p>
+  <transition name="card-anim">
+    <section class="update-modal card" v-if="releaseData && !isUpToDate">
+      <h2 class="modal_header text--primary">
+        <img :src="icons.logo" alt="stacjownik logo" />
 
-    <ul>
-      <li v-for="update in updates">
-        <div>{{ update.date }}</div>
+        {{ releaseData.tag_name }}
+      </h2>
 
-        <div>
-          <span v-for="(line, l) in update.content" :key="l">{{ line }}</span>
-        </div>
-      </li>
-    </ul> -->
+      <div class="horizontal"></div>
 
-  </section>
+      <div class="modal_content">
+        <h3>{{ $t('update.title') }}</h3>
+        <a :href="releaseData.html_url" target="_blank">{{ $t('update.release-link') }}</a>
+
+        <br />
+        <br />
+
+        <p>{{ $t('update.paragraph1') }}</p>
+      </div>
+
+      <div class="modal_actions">
+        <button class="btn btn--option" @click="reload">{{ $t('update.refresh-button') }}</button>
+      </div>
+    </section>
+  </transition>
 </template>
 
 <script lang="ts">
@@ -33,7 +43,12 @@ export default defineComponent({
     return {
       cardOpen: false,
 
-      updateBody: '',
+      releaseData: null as ReleaseAPIData | null,
+      isUpToDate: true,
+
+      icons: {
+        logo: require('@/assets/stacjownik-header-logo.svg'),
+      },
     };
   },
 
@@ -41,19 +56,78 @@ export default defineComponent({
     async fetchReleases() {
       try {
         const releaseData: ReleaseAPIData = await (await axios.get(GH_LASTEST_RELEASE_URL)).data;
-        if(!releaseData) return;
+        if (!releaseData) return;
 
         const tagVersion = releaseData.tag_name.slice(1);
 
-        console.log(packageInfo.version == tagVersion);
-
-        this.updateBody = releaseData.body;
+        setTimeout(() => {
+          this.releaseData = releaseData;
+          this.isUpToDate = packageInfo.version == tagVersion;
+        }, 1500);
       } catch (error) {
         console.error(`Wystąpił błąd podczas pobierania danych z API GitHuba: ${error}`);
       }
     },
+
+    reload() {
+      window.location.reload();
+    },
   },
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@import '../../styles/card.scss';
+@import '../../styles/responsive.scss';
+
+.update-modal {
+  text-align: center;
+  background-color: var(--clr-secondary);
+
+  padding: 1em;
+}
+
+.horizontal {
+  margin: 1em 0;
+
+  height: 2px;
+  width: 100%;
+  background-color: white;
+}
+
+.modal_header {
+  font-size: 1.6em;
+
+  img {
+    width: 50%;
+    vertical-align: text-top;
+  }
+}
+
+.modal_content {
+  font-size: 1.1em;
+
+  a {
+    text-decoration: underline;
+  }
+}
+
+.modal_actions {
+  margin-top: 2em;
+
+  button {
+    color: white;
+    padding: 0.5em;
+    font-size: 1.2em;
+
+    background-color: black;
+  }
+}
+
+@include smallScreen {
+  .update-modal {
+    height: auto;
+    max-width: 95%;
+  }
+}
+</style>

src/locales/en.json

@@ -10,6 +10,12 @@
     "migration-warning": "Stacjownik services will be unavailable 2/06/2022 between 1-3am (CEST time) due to the migration of API hostings!",
     "migration-confirm": "Roger that!"
   },
+  "update": {
+      "title": "New Stacjownik version is available!",
+      "paragraph1": "Refresh the page with the button below to apply all changes!",
+      "release-link": "Click here to browse version changelog (GitHub)",
+      "refresh-button": "Refresh the page" 
+  },
   "data-status": {
     "S1a-connection": "<b>S1a signal</b> <br> Cannot connect with Stacjownik API service!",
     "S1a-sceneries": "<b>S1a signal</b> <br> Cannot load online stations data!",

src/locales/pl.json

@@ -11,6 +11,13 @@
     "migration-confirm": "Przyjąłem!"
   },
 
+  "update": {
+    "title": "Nowa wersja Stacjownika jest dostępna!",
+    "paragraph1": "Odśwież stronę, aby zaaplikować zmiany!",
+    "release-link": "Kliknij, aby przejrzeć listę zmian (GitHub)",
+    "refresh-button": "Odśwież stronę"
+  },
+
   "data-status": {
     "S1a-connection": "<b>Sygnał S1a</b> <br> Błąd podczas próby połączenia się z API Stacjownika!",
     "S1a-sceneries": "<b>Sygnał S1a</b> <br> Błąd podczas pobierania danych o sceneriach online!",

src/styles/card.scss

@@ -13,6 +13,19 @@
   background: rgba(black, 0.65);
 }
 
+.card-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all 150ms ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: translate(-50%, -50%) scale(0.8);
+    opacity: 0;
+  }
+}
+
 .card {
   position: fixed;
   top: 50%;