Czapka świąteczna w logo

src/App.scss

@@ -62,15 +62,39 @@
   }
 }
 
+// Error icon
+.wip-alert {
+  padding: 0 0.5em;
+  text-align: center;
+}
+
+.icon-error {
+  width: 13em;
+  margin: 0.5em 0;
+}
+
 // HEADER
 .app_header {
   background: $primaryCol;
-  padding: 0.15em;
+  padding: 0.5em 0.3em 0 0.3em;
 
   border-radius: 0 0 1em 1em;
 
   display: flex;
   justify-content: center;
+
+}
+
+.train-logo {
+  position:  relative;
+  z-index: 2;
+
+  .logo-cap {
+    position: absolute;
+    left: 0;
+    transform: translateX(0.22em);
+    width: 0.7em;
+  }
 }
 
 .header {
@@ -81,7 +105,7 @@
 
     text-align: center;
 
-    img {
+    .logo-image {
       width: 0.8em;
     }
 

src/App.vue

@@ -7,12 +7,23 @@
     /> -->
 
     <div class="app_container">
+      <!-- <div class="wip-alert">
+        <img class="icon-error" :src="iconError" alt="error" />
+        <h2>Stacjownik tymczasowo nieaktywny!</h2>
+        <p>Absolutny zakaz wjazdu!</p>
+      </div> -->
       <header class="app_header">
         <div class="header_body">
           <span class="header_brand">
             <span>
-              <span>Stacj</span>
+              <span>
-              <img src="@/assets/trainlogo.png" alt="trainlogo" />
+                <span>S</span>
+              </span>
+              <span>tacj</span>
+              <span class="train-logo">
+                <img class="logo-image" src="@/assets/trainlogo.png" alt="trainlogo" />
+                <img class="logo-cap" src="@/assets/christmas-cap.svg" alt="" />
+              </span>
               <span>wnik</span>
             </span>
 
@@ -53,13 +64,9 @@
           </span>
 
           <span class="header_links">
-            <router-link class="route" active-class="route-active" to="/" exact
+            <router-link class="route" active-class="route-active" to="/" exact>{{ $t('app.sceneries') }} </router-link>
-              >{{ $t("app.sceneries") }}
-            </router-link>
             /
-            <router-link class="route" active-class="route-active" to="/trains"
+            <router-link class="route" active-class="route-active" to="/trains">{{ $t('app.trains') }} </router-link>
-              >{{ $t("app.trains") }}
-            </router-link>
           </span>
         </div>
       </header>
@@ -86,15 +93,15 @@
 </template>
 
 <script lang="ts">
-import Clock from "@/components/App/Clock.vue";
+import Clock from '@/components/App/Clock.vue';
 
-import StorageManager from "@/scripts/managers/storageManager";
+import StorageManager from '@/scripts/managers/storageManager';
-import { computed, ComputedRef, defineComponent, provide, ref } from "vue";
+import { computed, ComputedRef, defineComponent, provide, ref } from 'vue';
-import { GETTERS } from "./constants/storeConstants";
+import { GETTERS } from './constants/storeConstants';
-import { StoreData } from "./scripts/interfaces/StoreData";
+import { StoreData } from './scripts/interfaces/StoreData';
-import { useStore } from "./store";
+import { useStore } from './store';
 
-import packageInfo from ".././package.json";
+import packageInfo from '.././package.json';
 
 export default defineComponent({
   components: {
@@ -103,11 +110,9 @@ export default defineComponent({
 
   setup() {
     const store = useStore();
-    store.dispatch("synchronizeData");
+    store.dispatch('synchronizeData');
 
-    const data: ComputedRef<StoreData> = computed(
+    const data: ComputedRef<StoreData> = computed(() => store.getters[GETTERS.allData]);
-      () => store.getters[GETTERS.allData]
-    );
 
     const currentRegion: ComputedRef<{ id: string; value: string }> = computed(
       () => store.getters[GETTERS.currentRegion]
@@ -115,7 +120,7 @@ export default defineComponent({
 
     const isFilterCardVisible = ref(false);
 
-    provide("isFilterCardVisible", isFilterCardVisible);
+    provide('isFilterCardVisible', isFilterCardVisible);
 
     return {
       data,
@@ -132,10 +137,12 @@ export default defineComponent({
     VERSION: packageInfo.version,
     updateModalVisible: false,
     hasReleaseNotes: false,
-    currentLang: "pl",
+    currentLang: 'pl',
 
-    iconEN: require("@/assets/icon-en.jpg"),
+    iconEN: require('@/assets/icon-en.jpg'),
-    iconPL: require("@/assets/icon-pl.svg"),
+    iconPL: require('@/assets/icon-pl.svg'),
+    iconError: require('@/assets/icon-error.svg'),
+    svgChristmasCap: require('@/assets/christmas-cap.svg'),
   }),
 
   created() {
@@ -143,16 +150,13 @@ export default defineComponent({
   },
 
   mounted() {
-    if (StorageManager.getStringValue("version") != this.VERSION) {
+    if (StorageManager.getStringValue('version') != this.VERSION) {
-      StorageManager.setStringValue("version", this.VERSION);
+      StorageManager.setStringValue('version', this.VERSION);
 
-      if (this.hasReleaseNotes)
+      if (this.hasReleaseNotes) StorageManager.setBooleanValue('version_notes_read', false);
-        StorageManager.setBooleanValue("version_notes_read", false);
     }
 
-    this.updateModalVisible =
+    this.updateModalVisible = this.hasReleaseNotes && !StorageManager.getBooleanValue('version_notes_read');
-      this.hasReleaseNotes &&
-      !StorageManager.getBooleanValue("version_notes_read");
 
     this.updateToNewestVersion();
   },
@@ -160,28 +164,28 @@ export default defineComponent({
   methods: {
     toggleUpdateModal() {
       this.updateModalVisible = !this.updateModalVisible;
-      StorageManager.setBooleanValue("version_notes_read", true);
+      StorageManager.setBooleanValue('version_notes_read', true);
     },
 
     changeLang(lang: string) {
       this.$i18n.locale = lang;
       this.currentLang = lang;
 
-      StorageManager.setStringValue("lang", lang);
+      StorageManager.setStringValue('lang', lang);
     },
 
     updateToNewestVersion() {
       //   to do
-      if (!StorageManager.isRegistered("unavailable-status")) {
+      if (!StorageManager.isRegistered('unavailable-status')) {
-        StorageManager.setBooleanValue("unavailable-status", true);
+        StorageManager.setBooleanValue('unavailable-status', true);
-        StorageManager.setBooleanValue("ending-status", true);
+        StorageManager.setBooleanValue('ending-status', true);
-        StorageManager.setBooleanValue("no-space-status", true);
+        StorageManager.setBooleanValue('no-space-status', true);
-        StorageManager.setBooleanValue("afk-status", true);
+        StorageManager.setBooleanValue('afk-status', true);
       }
     },
 
     loadLang() {
-      const storageLang = StorageManager.getStringValue("lang");
+      const storageLang = StorageManager.getStringValue('lang');
 
       if (storageLang) {
         this.changeLang(storageLang);
@@ -192,8 +196,8 @@ export default defineComponent({
 
       const naviLanguage = window.navigator.language.toString();
 
-      if (naviLanguage.includes("en")) {
+      if (naviLanguage.includes('en')) {
-        this.changeLang("en");
+        this.changeLang('en');
         return;
       }
     },
@@ -201,4 +205,4 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" src="./App.scss"></style>
+<style lang="scss" src="./App.scss"></style>

src/assets/christmas-cap.svg

@@ -0,0 +1,5 @@
+<svg width="422" height="296" viewBox="0 0 422 296" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.32302 168.093L252.745 290.956C257.124 293.166 262.462 291.278 264.477 286.806L275.756 261.786L18.2313 129.684L5.42101 156.716C3.41988 160.939 5.15134 165.987 9.32302 168.093Z" fill="white"/>
+<path d="M24.6835 129.8L271.788 255.896C276.15 243.931 278.835 227.281 280.412 211.029C282.229 192.309 282.505 174.997 282.505 167.939C282.505 160.983 286.666 155.266 292.077 151.261C297.536 147.219 304.891 144.383 313.098 143.051C328.788 140.504 348.597 143.285 366.805 155.149L394.174 143.968C393.442 143.18 392.703 142.385 391.958 141.583C368.672 116.521 339.115 84.7104 308.357 58.0648C291.166 43.1726 273.765 30.0424 257.045 20.6605C240.257 11.24 224.628 5.86873 210.864 5.86873C185.768 5.86873 148.585 16.2407 112.501 37.8003C77.9356 58.4528 44.9028 89.062 24.6835 129.8Z" fill="#E01C1C" stroke="#D00000" stroke-width="11.7375"/>
+<circle r="33.7452" transform="matrix(-1 0 0 1 387.513 157.094)" fill="white"/>
+</svg>