Poprawki wyglądu; cleanup kodu

src/App.scss

@@ -81,162 +81,6 @@
   border-radius: 0 0 1em 1em;
 }
 
-// Error icon
-.wip-alert {
-  padding: 0 0.5em;
-  text-align: center;
-}
-
-.icon-error {
-  width: 13em;
-  margin: 0.5em 0;
-}
-
-// HEADER
-.app_header {
-  display: flex;
-  justify-content: center;
-
-  position: relative;
-  background-color: $primaryCol;
-}
-
-.header {
-  &_body {
-    max-width: 21em;
-  }
-
-  &_container {
-    display: flex;
-    justify-content: center;
-    position: relative;
-
-    width: 1350px;
-    padding: 0.5em 0.3em 0 0.3em;
-    border-radius: 0 0 1em 1em;
-  }
-
-  &_brand {
-    img {
-      width: 100%;
-    }
-  }
-
-  &_info {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    max-width: 100%;
-
-    font-size: 1.2em;
-  }
-
-  &_links {
-    display: flex;
-    justify-content: center;
-
-    border-radius: 0.7em;
-
-    font-size: 1.25em;
-    padding: 0.5em;
-  }
-
-  &_icons {
-    position: absolute;
-    right: 0;
-    top: 0;
-    height: 100%;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    align-items: flex-end;
-    padding: 0.5em 0.5em;
-
-    @include smallScreen() {
-      right: auto;
-      left: 0.75em;
-      padding: 0;
-
-      align-items: center;
-    }
-  }
-}
-
-// ICONS
-.icons {
-  position: relative;
-
-  &-top {
-    img {
-      width: 2.5em;
-
-      cursor: pointer;
-    }
-
-    margin-bottom: 0.5em;
-  }
-
-  &-bottom {
-    display: flex;
-
-    a {
-      margin-left: 0.6em;
-      user-select: none;
-    }
-
-    img {
-      width: 1.9em;
-    }
-
-    @include smallScreen() {
-      flex-direction: column;
-
-      a {
-        margin: 0.25em 0;
-      }
-    }
-  }
-}
-
-// COUNTER
-.info_counter {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  span {
-    margin: 0 0.15em;
-  }
-
-  img {
-    width: 1.35em;
-  }
-}
-
-// REGION SELECTION
-.info_region {
-  color: white;
-  font-weight: bold;
-
-  display: flex;
-  justify-content: flex-end;
-
-  .select-box_content button {
-    background-color: transparent;
-    font-weight: bold;
-    padding: 0.1em 0.5em;
-    color: paleturquoise;
-  }
-
-  .options {
-    font-size: 0.9em;
-  }
-
-  .arrow {
-    padding: 0;
-  }
-}
-
 // FOOTER
 footer.app_footer {
   max-width: 100%;

src/App.vue

@@ -1,67 +1,12 @@
 <template>
   <div class="app_container">
-    <UpdateModal />
-
     <transition name="modal-anim">
       <keep-alive>
         <TrainModal v-if="store.chosenModalTrainId" />
       </keep-alive>
     </transition>
 
-    <header class="app_header">
+    <AppHeader :current-lang="currentLang" @change-lang="changeLang" />
-      <div class="header_container">
-        <div class="header_icons">
-          <span class="icons-top">
-            <img :src="getIcon('pl')" alt="icon-pl" @click="changeLang('en')" v-if="currentLang == 'pl'" />
-            <img :src="getIcon('en', 'jpg')" alt="icon-en" @click="changeLang('pl')" v-else />
-          </span>
-          <span class="icons-bottom">
-            <a href="https://www.paypal.com/paypalme/spythere" target="_blank">
-              <img :src="getIcon('dollar')" alt="icon paypal" />
-            </a>
-
-            <a href="https://discord.gg/x2mpNN3svk" target="_blank">
-              <img :src="getIcon('discord', 'png')" alt="icon discord" />
-            </a>
-          </span>
-        </div>
-
-        <div class="header_body">
-          <status-indicator />
-          <span class="header_brand">
-            <img :src="getImage('stacjownik-header-logo.svg')" alt="Stacjownik" />
-          </span>
-
-          <span class="header_info">
-            <Clock />
-
-            <div class="info_counter">
-              <img :src="getIcon('dispatcher')" alt="icon dispatcher" />
-              <span class="text--primary">{{ onlineDispatchers.length }}</span>
-              <span class="text--grayed"> / </span>
-              <span class="text--primary">{{ trainList.length }}</span>
-              <img :src="getIcon('train')" alt="icon train" />
-            </div>
-
-            <span class="info_region">
-              <SelectBox :itemList="computedRegions" :defaultItemIndex="0" @selected="changeRegion" />
-            </span>
-          </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="/trains">{{ $t('app.trains') }}</router-link>
-            /
-            <router-link class="route" active-class="route-active" to="/journal/timetables">
-              {{ $t('app.journal') }}
-            </router-link>
-          </span>
-        </div>
-      </div>
-    </header>
 
     <main class="app_main">
       <router-view v-slot="{ Component }">
@@ -87,23 +32,22 @@ import { computed, defineComponent, provide, ref, watch } from 'vue';
 import Clock from './components/App/Clock.vue';
 
 import packageInfo from '.././package.json';
-import options from './data/options.json';
 
 import StatusIndicator from './components/App/StatusIndicator.vue';
 import SelectBox from './components/Global/SelectBox.vue';
 import { useStore } from './store/store';
-import UpdateModal from './components/App/UpdateModal.vue';
 import TrainModal from './components/Global/TrainModal.vue';
 import StorageManager from './scripts/managers/storageManager';
 import imageMixin from './mixins/imageMixin';
+import AppHeader from './components/App/AppHeader.vue';
 
 export default defineComponent({
   components: {
     Clock,
     StatusIndicator,
     SelectBox,
-    UpdateModal,
     TrainModal,
+    AppHeader,
   },
 
   mixins: [imageMixin],
@@ -127,30 +71,8 @@ export default defineComponent({
     };
   },
 
-  computed: {
-    trainList() {
-      return this.store.trainList.filter((train) => train.online);
-    },
-
-    computedRegions() {
-      return this.options.regions.map((region) => {
-        const regionStationCount =
-          this.store.apiData.stations?.filter((station) => station.region == region.id && station.isOnline).length || 0;
-        const regionTrainCount =
-          this.store.apiData.trains?.filter((train) => train.region == region.id && train.online).length || 0;
-
-        return {
-          id: region.id,
-          value: `${region.value} <div class='text--grayed'>${regionStationCount} / ${regionTrainCount}</div>`,
-          selectedValue: region.value,
-        };
-      });
-    },
-  },
-
   data: () => ({
     VERSION: packageInfo.version,
-    options,
 
     currentLang: 'pl',
     releaseURL: '',
@@ -164,37 +86,20 @@ export default defineComponent({
     this.updateStorage();
     this.setReleaseURL();
 
-    function preventScroll(e: Event) {
-      e.preventDefault();
-      e.stopPropagation();
-      e.stopImmediatePropagation();
-
-      return false;
-    }
-
     watch(
       () => this.store.blockScroll,
       (value) => {
         if (value) {
           document.body.classList.add('no-scroll');
-          // document.querySelector('#app')!.addEventListener('wheel', preventScroll, { passive: false,  });
-          // document.querySelector('#app')!.addEventListener('touchmove', preventScroll, { passive: false });
           return;
         }
 
         document.body.classList.remove('no-scroll');
-
-        // document.querySelector('#app')!.removeEventListener('wheel', preventScroll);
-        // document.querySelector('#app')!.removeEventListener('touchmove', preventScroll);
       }
     );
   },
 
   methods: {
-    changeRegion(region: { id: string; value: string }) {
-      this.store.changeRegion(region);
-    },
-
     changeLang(lang: string) {
       this.$i18n.locale = lang;
       this.currentLang = lang;

src/components/App/AppHeader.vue

@@ -0,0 +1,259 @@
+<template>
+  <header class="app_header">
+    <div class="header_container">
+      <div class="header_icons">
+        <span class="icons-top">
+          <img :src="getIcon('pl')" alt="icon-pl" @click="changeLang('en')" v-if="currentLang == 'pl'" />
+          <img :src="getIcon('en', 'jpg')" alt="icon-en" @click="changeLang('pl')" v-else />
+        </span>
+
+        <span class="icons-bottom">
+          <a href="https://www.paypal.com/paypalme/spythere" target="_blank">
+            <img :src="getIcon('dollar')" alt="icon paypal" />
+          </a>
+
+          <a href="https://discord.gg/x2mpNN3svk" target="_blank">
+            <img :src="getIcon('discord', 'png')" alt="icon discord" />
+          </a>
+        </span>
+      </div>
+
+      <div class="header_body">
+        <StatusIndicator />
+
+        <span class="header_brand">
+          <img :src="getImage('stacjownik-header-logo.svg')" alt="Stacjownik" />
+        </span>
+
+        <span class="header_info">
+          <Clock />
+
+          <div class="info_counter">
+            <img :src="getIcon('dispatcher')" alt="icon dispatcher" />
+            <span class="text--primary">{{ onlineDispatchersCount }}</span>
+            <span class="text--grayed"> / </span>
+            <span class="text--primary">{{ onlineTrainsCount }}</span>
+            <img :src="getIcon('train')" alt="icon train" />
+          </div>
+
+          <span class="info_region">
+            <SelectBox :itemList="computedRegions" :defaultItemIndex="0" @selected="changeRegion" />
+          </span>
+        </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="/trains">{{ $t('app.trains') }}</router-link>
+          /
+          <router-link class="route" active-class="route-active" to="/journal/timetables">
+            {{ $t('app.journal') }}
+          </router-link>
+        </span>
+      </div>
+    </div>
+  </header>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../../store/store';
+import options from '../../data/options.json';
+import imageMixin from '../../mixins/imageMixin';
+import SelectBox from '../Global/SelectBox.vue';
+import StatusIndicator from './StatusIndicator.vue';
+import Clock from './Clock.vue';
+
+export default defineComponent({
+    emits: ["changeLang"],
+    mixins: [imageMixin],
+    props: {
+        currentLang: {
+            type: String,
+            required: true,
+        },
+    },
+    setup() {
+        return {
+            store: useStore(),
+        };
+    },
+    methods: {
+        changeRegion(region: {
+            id: string;
+            value: string;
+        }) {
+            this.store.changeRegion(region);
+        },
+        changeLang(lang: string) {
+            this.$emit("changeLang", lang);
+        },
+    },
+    computed: {
+        onlineTrainsCount() {
+            return this.store.trainList.filter((train) => train.online).length;
+        },
+        onlineDispatchersCount() {
+            return this.store.stationList.filter((station) => station.onlineInfo && station.onlineInfo.region == this.store.region.id).length;
+        },
+        computedRegions() {
+            return options.regions.map((region) => {
+                const regionStationCount = this.store.apiData.stations?.filter((station) => station.region == region.id && station.isOnline).length || 0;
+                const regionTrainCount = this.store.apiData.trains?.filter((train) => train.region == region.id && train.online).length || 0;
+                return {
+                    id: region.id,
+                    value: `${region.value} <div class='text--grayed'>${regionStationCount} / ${regionTrainCount}</div>`,
+                    selectedValue: region.value,
+                };
+            });
+        },
+    },
+    components: { SelectBox, StatusIndicator, Clock }
+});
+</script>
+<style lang="scss" scoped>
+@import '../../styles/variables.scss';
+@import '../../styles/responsive.scss';
+
+// HEADER
+.app_header {
+  display: flex;
+  justify-content: center;
+
+  position: relative;
+  background-color: $primaryCol;
+}
+
+.header {
+  &_body {
+    max-width: 21em;
+  }
+
+  &_container {
+    display: flex;
+    justify-content: center;
+    position: relative;
+
+    width: 1350px;
+    padding: 0.5em 0.3em 0 0.3em;
+    border-radius: 0 0 1em 1em;
+  }
+
+  &_brand {
+    img {
+      width: 100%;
+    }
+  }
+
+  &_info {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    max-width: 100%;
+
+    font-size: 1.2em;
+  }
+
+  &_links {
+    display: flex;
+    justify-content: center;
+
+    border-radius: 0.7em;
+
+    font-size: 1.25em;
+    padding: 0.5em;
+  }
+
+  &_icons {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-end;
+    padding: 0.5em 0.5em;
+
+    @include smallScreen() {
+      right: auto;
+      left: 0.75em;
+      padding: 0;
+
+      align-items: center;
+    }
+  }
+}
+
+// ICONS
+.icons {
+  position: relative;
+
+  &-top {
+    img {
+      width: 2.5em;
+
+      cursor: pointer;
+    }
+
+    margin-bottom: 0.5em;
+  }
+
+  &-bottom {
+    display: flex;
+
+    a {
+      margin-left: 0.6em;
+      user-select: none;
+    }
+
+    img {
+      width: 1.9em;
+    }
+
+    @include smallScreen() {
+      flex-direction: column;
+
+      a {
+        margin: 0.25em 0;
+      }
+    }
+  }
+}
+
+// COUNTER
+.info_counter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  span {
+    margin: 0 0.15em;
+  }
+
+  img {
+    width: 1.35em;
+  }
+}
+
+// REGION SELECTION
+.info_region {
+  color: white;
+  font-weight: bold;
+
+  display: flex;
+  justify-content: flex-end;
+
+  .select-box_content button {
+    background-color: transparent;
+    font-weight: bold;
+    padding: 0.1em 0.5em;
+    color: paleturquoise;
+  }
+
+  .options {
+    font-size: 0.9em;
+  }
+}
+</style>

src/components/Global/SelectBox.vue

@@ -138,7 +138,7 @@ export default defineComponent({
   position: absolute;
   top: 50%;
   right: 0;
-  padding: 0.5em;
+  padding: 0;
 
   img {
     vertical-align: middle;
@@ -151,12 +151,13 @@ export default defineComponent({
 }
 
 button.selected {
-  background: #333;
+  background-color: transparent;
-  color: white;
+  color: paleturquoise;
 
   font-size: 1em;
+  font-weight: bold;
 
-  padding: 0.35em 0.5em;
+  padding: 0.1em 0.5em;
   margin-right: 1.4em;
 
   width: 100%;
@@ -168,7 +169,7 @@ button.selected {
   text-align: left;
 
   &:focus {
-    background: #555;
+    background-color: #262626;
   }
 }
 
@@ -189,8 +190,9 @@ ul.options {
   height: auto;
 
   z-index: 100;
-
   width: 100%;
+
+  font-size: 0.9em;
 }
 
 li.option {
@@ -219,11 +221,11 @@ li.option {
     position: relative;
 
     display: inline-block;
-    background-color: hsla(0, 0%, 15%, 0.95);
+    background-color: #262626f2;
 
     &:hover,
     &:focus {
-      background-color: hsla(0, 0%, 20%, 0.95);
+      background-color: #333333f2;
     }
 
     padding: 0.5em 0;

src/components/JournalView/DriverStats.vue

@@ -51,9 +51,8 @@
 </template>
 
 <script lang="ts">
-
 import axios from 'axios';
-import { defineComponent } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
 import { DriverStatsAPIData } from '../../scripts/interfaces/api/DriverStatsAPIData';
 import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
 import { URLs } from '../../scripts/utils/apiURLs';
@@ -66,6 +65,7 @@ export default defineComponent({
     const store = useStore();
     return {
       store,
+      driverStatsName: computed(() => store.driverStatsName),
     };
   },
 
@@ -82,6 +82,12 @@ export default defineComponent({
     this.fetchDispatcherStats();
   },
 
+  watch: {
+    driverStatsName(value: any) {
+      console.log(value);
+    },
+  },
+
   methods: {
     async fetchDispatcherStats() {
       this.store.driverStatsData = undefined;
@@ -107,6 +113,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
+@import '../../styles/card.scss';
 
 .timetable-row {
   display: grid;

src/components/JournalView/JournalTimetables.vue

@@ -13,6 +13,8 @@
         :data-status="dataStatus"
       />
 
+      <!-- <button @click="statsCardOpen = true">Stats</button> -->
+
       <div class="list_wrapper" @scroll="handleScroll">
         <!-- <transition name="warning" mode="out-in"> -->
         <!-- <div :key="dataStatus"> -->

src/components/StationsView/StationFilterCard.vue

@@ -261,25 +261,7 @@ export default defineComponent({
   }
 }
 
-
 .card {
-  &_btn {
-    button {
-      display: flex;
-      align-items: center;
-
-      padding: 0.5em 1em;
-      border-radius: 0.75em 0.75em 0 0;
-
-      font-weight: bold;
-    }
-
-    img {
-      width: 1.3em;
-      margin-right: 0.25em;
-    }
-  }
-
   &_content {
     display: grid;
     grid-template-rows: 70px 1fr 100px 50px auto;

src/components/StationsView/StationTable.vue

@@ -332,7 +332,7 @@ table {
   }
 
   thead tr {
-    background-color: $primaryCol;
+    background-color: $bgCol;
   }
 
   thead th {
@@ -342,7 +342,7 @@ table {
     min-width: 75px;
 
     padding: 0.5em;
-    background-color: $primaryCol;
+    background-color: $bgCol;
     white-space: pre-wrap;
 
     cursor: pointer;

src/styles/filters_options.scss

@@ -1,4 +1,4 @@
-@import './responsive.scss';
+@import 'responsive.scss';
 @import 'variables.scss';
 @import 'search_box.scss';
 
@@ -50,8 +50,8 @@ h1.option-title {
 .options_wrapper {
   position: absolute;
 
-  background-color: #111111ee;
+  background-color: $bgCol;
-  box-shadow: 0 0 15px 5px #000000b3;
+  box-shadow: 0 5px 10px 2px #0f0f0f;
 
   width: 100%;
   max-width: 500px;

src/styles/global.scss

@@ -3,6 +3,7 @@
   --clr-secondary: #2f2f2f;
 
   --clr-bg: #4d4d4d;
+  --clr-bg2: #1b1b1b;
 
   --clr-accent: #1085b3;
   --clr-accent2: #ff3d5d;
@@ -223,10 +224,12 @@ button {
     font-size: 1em;
 
     border-radius: 0.75em 0.75em 0 0;
+    background-color: #1b1b1b;
+
 
     img {
       height: 1.3em;
-      margin-right: 0.5em;
+      margin-right: 0.5rem;
     }
   }
 

src/styles/variables.scss

@@ -1,7 +1,7 @@
 $primaryCol: #2c2c2c;
 $secondaryCol: #01e733;
 
-$bgCol: #4d4d4d;
+$bgCol: #1d1d1d;
 $bgLigtherCol: #5b5b5b;
 
 $errorCol: #ff1919;