From 28fb38ae65a5220a88d9d256a64aea1e482b1bcf Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 15 Dec 2021 14:07:49 +0100
Subject: [PATCH] =?UTF-8?q?Czapka=20=C5=9Bwi=C4=85teczna=20w=20logo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.scss                 | 28 +++++++++++-
 src/App.vue                  | 86 +++++++++++++++++++-----------------
 src/assets/christmas-cap.svg |  5 +++
 3 files changed, 76 insertions(+), 43 deletions(-)
 create mode 100644 src/assets/christmas-cap.svg

diff --git a/src/App.scss b/src/App.scss
index 511bb00..5472e5b 100644
--- a/src/App.scss
+++ b/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;
     }
 
diff --git a/src/App.vue b/src/App.vue
index 933c623..cd5838f 100644
--- a/src/App.vue
+++ b/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>
-              <img src="@/assets/trainlogo.png" alt="trainlogo" />
+              <span>
+                <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
-              >{{ $t("app.sceneries") }}
-            </router-link>
+            <router-link class="route" active-class="route-active" to="/" exact>{{ $t('app.sceneries') }} </router-link>
             /
-            <router-link class="route" active-class="route-active" to="/trains"
-              >{{ $t("app.trains") }}
-            </router-link>
+            <router-link class="route" active-class="route-active" to="/trains">{{ $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 { computed, ComputedRef, defineComponent, provide, ref } from "vue";
-import { GETTERS } from "./constants/storeConstants";
-import { StoreData } from "./scripts/interfaces/StoreData";
-import { useStore } from "./store";
+import StorageManager from '@/scripts/managers/storageManager';
+import { computed, ComputedRef, defineComponent, provide, ref } from 'vue';
+import { GETTERS } from './constants/storeConstants';
+import { StoreData } from './scripts/interfaces/StoreData';
+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(
-      () => store.getters[GETTERS.allData]
-    );
+    const data: ComputedRef<StoreData> = computed(() => 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"),
-    iconPL: require("@/assets/icon-pl.svg"),
+    iconEN: require('@/assets/icon-en.jpg'),
+    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) {
-      StorageManager.setStringValue("version", this.VERSION);
+    if (StorageManager.getStringValue('version') != this.VERSION) {
+      StorageManager.setStringValue('version', this.VERSION);
 
-      if (this.hasReleaseNotes)
-        StorageManager.setBooleanValue("version_notes_read", false);
+      if (this.hasReleaseNotes) StorageManager.setBooleanValue('version_notes_read', false);
     }
 
-    this.updateModalVisible =
-      this.hasReleaseNotes &&
-      !StorageManager.getBooleanValue("version_notes_read");
+    this.updateModalVisible = 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")) {
-        StorageManager.setBooleanValue("unavailable-status", true);
-        StorageManager.setBooleanValue("ending-status", true);
-        StorageManager.setBooleanValue("no-space-status", true);
-        StorageManager.setBooleanValue("afk-status", true);
+      if (!StorageManager.isRegistered('unavailable-status')) {
+        StorageManager.setBooleanValue('unavailable-status', true);
+        StorageManager.setBooleanValue('ending-status', true);
+        StorageManager.setBooleanValue('no-space-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")) {
-        this.changeLang("en");
+      if (naviLanguage.includes('en')) {
+        this.changeLang('en');
         return;
       }
     },
@@ -201,4 +205,4 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" src="./App.scss"></style>
\ No newline at end of file
+<style lang="scss" src="./App.scss"></style>
diff --git a/src/assets/christmas-cap.svg b/src/assets/christmas-cap.svg
new file mode 100644
index 0000000..e5cf177
--- /dev/null
+++ b/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>