From 0f19bc767a68585e089bbb068a0f7d53627777fd Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 22 Sep 2022 13:59:19 +0200
Subject: [PATCH] =?UTF-8?q?Poprawki=20wygl=C4=85du;=20cleanup=20kodu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.scss                                  | 156 ----------
 src/App.vue                                   | 101 +-----
 src/components/App/AppHeader.vue              | 259 ++++++++++++++++
 src/components/Global/SelectBox.vue           |  18 +-
 src/components/JournalView/DriverStats.vue    | 289 +++++++++---------
 .../JournalView/JournalTimetables.vue         |   2 +
 .../StationsView/StationFilterCard.vue        |  18 --
 src/components/StationsView/StationTable.vue  |   4 +-
 src/styles/filters_options.scss               |   6 +-
 src/styles/global.scss                        |   5 +-
 src/styles/variables.scss                     |   2 +-
 11 files changed, 432 insertions(+), 428 deletions(-)
 create mode 100644 src/components/App/AppHeader.vue

diff --git a/src/App.scss b/src/App.scss
index 3589e72..8fac615 100644
--- a/src/App.scss
+++ b/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%;
diff --git a/src/App.vue b/src/App.vue
index 932fd33..3730eb2 100644
--- a/src/App.vue
+++ b/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">
-      <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>
+    <AppHeader :current-lang="currentLang" @change-lang="changeLang" />
 
     <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;
diff --git a/src/components/App/AppHeader.vue b/src/components/App/AppHeader.vue
new file mode 100644
index 0000000..66421a6
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Global/SelectBox.vue b/src/components/Global/SelectBox.vue
index 64b63a9..e794028 100644
--- a/src/components/Global/SelectBox.vue
+++ b/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;
-  color: white;
+  background-color: transparent;
+  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;
diff --git a/src/components/JournalView/DriverStats.vue b/src/components/JournalView/DriverStats.vue
index ff3d4a2..3802d1e 100644
--- a/src/components/JournalView/DriverStats.vue
+++ b/src/components/JournalView/DriverStats.vue
@@ -1,141 +1,148 @@
-<template>
-  <div class="card-dimmer" @click="closeCard"></div>
-
-  <div class="stats-card card">
-    <div>
-      <h2 class="card-title">
-        STATYSTYKI MASZYNISTY <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
-      </h2>
-
-      <div class="loading" v-if="!store.driverStatsData">Ładowanie...</div>
-
-      <div v-else>
-        <div class="info-stats" v-if="store.driverStatsData._sum.routeDistance != null">
-          <span class="stat-badge">
-            <span>PRZEBYTO</span>
-            <span>{{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km</span>
-          </span>
-          <span class="stat-badge">
-            <span>PORZUCONO</span>
-            <span>
-              {{ (store.driverStatsData._sum.routeDistance - store.driverStatsData._sum.currentDistance).toFixed(2) }}km
-            </span>
-          </span>
-
-          <span class="stat-badge">
-            <span>WYPEŁNIONO</span>
-            <span>{{ store.driverStatsData._count.fulfilled }} RJ</span>
-          </span>
-
-          <span class="stat-badge">
-            <span>PORZUCONO</span>
-            <span>{{ store.driverStatsData._count._all - store.driverStatsData._count.fulfilled }} RJ</span>
-          </span>
-
-          <span class="stat-badge">
-            <span>ZATWIERDZONO</span>
-            <span>{{ store.driverStatsData._sum.confirmedStopsCount }} stacji</span>
-          </span>
-
-          <span class="stat-badge">
-            <span>PORZUCONO</span>
-            <span>
-              {{ store.driverStatsData._sum.allStopsCount - store.driverStatsData._sum.confirmedStopsCount }}
-              stacji
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-
-import axios from 'axios';
-import { defineComponent } from 'vue';
-import { DriverStatsAPIData } from '../../scripts/interfaces/api/DriverStatsAPIData';
-import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
-import { URLs } from '../../scripts/utils/apiURLs';
-import { useStore } from '../../store/store';
-
-export default defineComponent({
-  emits: ['closeCard'],
-
-  setup() {
-    const store = useStore();
-    return {
-      store,
-    };
-  },
-
-  data() {
-    return {
-      test: Math.random(),
-      lastDispatcherName: '',
-
-      lastTimetables: [] as TimetableHistory[],
-    };
-  },
-
-  activated() {
-    this.fetchDispatcherStats();
-  },
-
-  methods: {
-    async fetchDispatcherStats() {
-      this.store.driverStatsData = undefined;
-
-      const statsData: DriverStatsAPIData = await (
-        await axios.get(`${URLs.stacjownikAPI}/api/getDriverInfo?name=${this.store.driverStatsName}`)
-      ).data;
-
-      const recentTimetablesData: TimetableHistory[] = await (
-        await axios.get(`${URLs.stacjownikAPI}/api/getTimetables?driverName=${this.store.driverStatsName}`)
-      ).data;
-
-      this.store.driverStatsData = statsData;
-      this.lastTimetables = recentTimetablesData || [];
-    },
-
-    closeCard() {
-      this.$emit('closeCard');
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-
-.timetable-row {
-  display: grid;
-  grid-template-columns: 4fr 1fr 1fr 2fr 2fr;
-  gap: 0.2em;
-  margin: 0.5em 0;
-  text-align: center;
-
-  span {
-    min-width: 100px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    background-color: #4d4d4d;
-    padding: 0.5em 0.2em;
-  }
-
-  @include smallScreen() {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-
-    span {
-      padding: 0.2em 0.3em;
-    }
-
-    grid-template-columns: 1fr;
-    background-color: #4d4d4d;
-  }
-}
-</style>
+<template>
+  <div class="card-dimmer" @click="closeCard"></div>
+
+  <div class="stats-card card">
+    <div>
+      <h2 class="card-title">
+        STATYSTYKI MASZYNISTY <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
+      </h2>
+
+      <div class="loading" v-if="!store.driverStatsData">Ładowanie...</div>
+
+      <div v-else>
+        <div class="info-stats" v-if="store.driverStatsData._sum.routeDistance != null">
+          <span class="stat-badge">
+            <span>PRZEBYTO</span>
+            <span>{{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km</span>
+          </span>
+          <span class="stat-badge">
+            <span>PORZUCONO</span>
+            <span>
+              {{ (store.driverStatsData._sum.routeDistance - store.driverStatsData._sum.currentDistance).toFixed(2) }}km
+            </span>
+          </span>
+
+          <span class="stat-badge">
+            <span>WYPEŁNIONO</span>
+            <span>{{ store.driverStatsData._count.fulfilled }} RJ</span>
+          </span>
+
+          <span class="stat-badge">
+            <span>PORZUCONO</span>
+            <span>{{ store.driverStatsData._count._all - store.driverStatsData._count.fulfilled }} RJ</span>
+          </span>
+
+          <span class="stat-badge">
+            <span>ZATWIERDZONO</span>
+            <span>{{ store.driverStatsData._sum.confirmedStopsCount }} stacji</span>
+          </span>
+
+          <span class="stat-badge">
+            <span>PORZUCONO</span>
+            <span>
+              {{ store.driverStatsData._sum.allStopsCount - store.driverStatsData._sum.confirmedStopsCount }}
+              stacji
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import axios from 'axios';
+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';
+import { useStore } from '../../store/store';
+
+export default defineComponent({
+  emits: ['closeCard'],
+
+  setup() {
+    const store = useStore();
+    return {
+      store,
+      driverStatsName: computed(() => store.driverStatsName),
+    };
+  },
+
+  data() {
+    return {
+      test: Math.random(),
+      lastDispatcherName: '',
+
+      lastTimetables: [] as TimetableHistory[],
+    };
+  },
+
+  activated() {
+    this.fetchDispatcherStats();
+  },
+
+  watch: {
+    driverStatsName(value: any) {
+      console.log(value);
+    },
+  },
+
+  methods: {
+    async fetchDispatcherStats() {
+      this.store.driverStatsData = undefined;
+
+      const statsData: DriverStatsAPIData = await (
+        await axios.get(`${URLs.stacjownikAPI}/api/getDriverInfo?name=${this.store.driverStatsName}`)
+      ).data;
+
+      const recentTimetablesData: TimetableHistory[] = await (
+        await axios.get(`${URLs.stacjownikAPI}/api/getTimetables?driverName=${this.store.driverStatsName}`)
+      ).data;
+
+      this.store.driverStatsData = statsData;
+      this.lastTimetables = recentTimetablesData || [];
+    },
+
+    closeCard() {
+      this.$emit('closeCard');
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+@import '../../styles/card.scss';
+
+.timetable-row {
+  display: grid;
+  grid-template-columns: 4fr 1fr 1fr 2fr 2fr;
+  gap: 0.2em;
+  margin: 0.5em 0;
+  text-align: center;
+
+  span {
+    min-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    background-color: #4d4d4d;
+    padding: 0.5em 0.2em;
+  }
+
+  @include smallScreen() {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+
+    span {
+      padding: 0.2em 0.3em;
+    }
+
+    grid-template-columns: 1fr;
+    background-color: #4d4d4d;
+  }
+}
+</style>
diff --git a/src/components/JournalView/JournalTimetables.vue b/src/components/JournalView/JournalTimetables.vue
index 40557fd..c4e5f9f 100644
--- a/src/components/JournalView/JournalTimetables.vue
+++ b/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"> -->
diff --git a/src/components/StationsView/StationFilterCard.vue b/src/components/StationsView/StationFilterCard.vue
index e3fc7f4..9bbab00 100644
--- a/src/components/StationsView/StationFilterCard.vue
+++ b/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;
diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue
index cbf17e4..6cebdc7 100644
--- a/src/components/StationsView/StationTable.vue
+++ b/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;
diff --git a/src/styles/filters_options.scss b/src/styles/filters_options.scss
index 98d8f86..0f07283 100644
--- a/src/styles/filters_options.scss
+++ b/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;
-  box-shadow: 0 0 15px 5px #000000b3;
+  background-color: $bgCol;
+  box-shadow: 0 5px 10px 2px #0f0f0f;
 
   width: 100%;
   max-width: 500px;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index db20d16..38f943f 100644
--- a/src/styles/global.scss
+++ b/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;
     }
   }
 
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index c5262db..8b8884f 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,7 +1,7 @@
 $primaryCol: #2c2c2c;
 $secondaryCol: #01e733;
 
-$bgCol: #4d4d4d;
+$bgCol: #1d1d1d;
 $bgLigtherCol: #5b5b5b;
 
 $errorCol: #ff1919;