Poprawki wyglądu; cleanup kodu

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;
-  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;

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>

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;