From a2de0e2030c8e76c742f0022873b82bbe8684626 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 4 May 2024 14:43:34 +0200
Subject: [PATCH] refactor: types & performance

---
 src/components/Global/RegionDropdown.vue      |   4 +-
 .../SceneryView/SceneryDispatchersHistory.vue |   4 +-
 src/components/SceneryView/SceneryHeader.vue  |   3 +-
 src/components/SceneryView/SceneryInfo.vue    |   3 +-
 .../SceneryInfo/SceneryInfoDispatcher.vue     |   2 +-
 .../SceneryInfo/SceneryInfoIcons.vue          |   2 +-
 .../SceneryInfo/SceneryInfoRoutes.vue         |   2 +-
 .../SceneryInfo/SceneryInfoSpawnList.vue      |   2 +-
 .../SceneryInfo/SceneryInfoStats.vue          |  83 -------
 .../SceneryInfo/SceneryInfoUserList.vue       |   2 +-
 .../SceneryView/SceneryTimetable.vue          |  11 +-
 .../SceneryView/SceneryTimetablesHistory.vue  |   4 +-
 .../SceneryView/ScheduledTrainStatus.vue      |   2 +-
 src/components/StationsView/StationTable.vue  |  44 ++--
 src/components/TrainsView/TrainInfo.vue       |   2 +-
 src/components/TrainsView/TrainModal.vue      |   2 +-
 src/components/TrainsView/TrainSchedule.vue   |   2 +-
 src/components/TrainsView/TrainTable.vue      |   3 +-
 src/managers/trainFilterManager.ts            |   3 +-
 src/mixins/trainInfoMixin.ts                  |   7 +-
 src/scripts/interfaces/Station.ts             |  34 ---
 src/scripts/interfaces/StationRoutes.ts       |  15 --
 src/scripts/interfaces/Train.ts               |  38 ----
 src/scripts/utils/stationFilterUtils.ts       |   2 +-
 src/store/mainStore.ts                        |  56 ++++-
 src/store/stationFiltersStore.ts              |  20 +-
 src/store/typings.ts                          | 133 +----------
 src/store/utils.ts                            |  11 +-
 src/typings/api.ts                            |   2 +-
 src/typings/common.ts                         | 209 ++++++++++++++++++
 src/views/StationsView.vue                    |  40 +++-
 src/views/TrainsView.vue                      |   2 +-
 32 files changed, 349 insertions(+), 400 deletions(-)
 delete mode 100644 src/components/SceneryView/SceneryInfo/SceneryInfoStats.vue
 delete mode 100644 src/scripts/interfaces/Station.ts
 delete mode 100644 src/scripts/interfaces/StationRoutes.ts
 delete mode 100644 src/scripts/interfaces/Train.ts

diff --git a/src/components/Global/RegionDropdown.vue b/src/components/Global/RegionDropdown.vue
index aa6552a..507907c 100644
--- a/src/components/Global/RegionDropdown.vue
+++ b/src/components/Global/RegionDropdown.vue
@@ -65,12 +65,12 @@ export default defineComponent({
       immediate: true,
       handler(regionQuery: string) {
         if (regionQuery) {
-          this.store.region.id =
+          this.store.region =
             regionsJSON.find(
               (reg) =>
                 reg.id == regionQuery.toLocaleLowerCase() ||
                 reg.value.toLocaleLowerCase() == regionQuery.toLocaleLowerCase()
-            )?.id || 'eu';
+            ) ?? regionsJSON[0];
         }
       }
     }
diff --git a/src/components/SceneryView/SceneryDispatchersHistory.vue b/src/components/SceneryView/SceneryDispatchersHistory.vue
index 34a2ea6..c44b301 100644
--- a/src/components/SceneryView/SceneryDispatchersHistory.vue
+++ b/src/components/SceneryView/SceneryDispatchersHistory.vue
@@ -72,13 +72,11 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
-import Station from '../../scripts/interfaces/Station';
 import Loading from '../Global/Loading.vue';
 import styleMixin from '../../mixins/styleMixin';
 import listObserverMixin from '../../mixins/listObserverMixin';
-import { ActiveScenery } from '../../store/typings';
 import { API } from '../../typings/api';
-import { Status } from '../../typings/common';
+import { ActiveScenery, Station, Status } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
diff --git a/src/components/SceneryView/SceneryHeader.vue b/src/components/SceneryView/SceneryHeader.vue
index fa1e07b..3ffc75b 100644
--- a/src/components/SceneryView/SceneryHeader.vue
+++ b/src/components/SceneryView/SceneryHeader.vue
@@ -14,8 +14,7 @@
 
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-import Station from '../../scripts/interfaces/Station';
-import { ActiveScenery } from '../../store/typings';
+import { ActiveScenery, Station } from '../../typings/common';
 
 export default defineComponent({
   props: {
diff --git a/src/components/SceneryView/SceneryInfo.vue b/src/components/SceneryView/SceneryInfo.vue
index 520923e..1b0a2ef 100644
--- a/src/components/SceneryView/SceneryInfo.vue
+++ b/src/components/SceneryView/SceneryInfo.vue
@@ -89,8 +89,7 @@ import SceneryInfoIcons from './SceneryInfo/SceneryInfoIcons.vue';
 import SceneryInfoUserList from './SceneryInfo/SceneryInfoUserList.vue';
 import SceneryInfoSpawnList from './SceneryInfo/SceneryInfoSpawnList.vue';
 import SceneryInfoRoutes from './SceneryInfo/SceneryInfoRoutes.vue';
-import Station from '../../scripts/interfaces/Station';
-import { ActiveScenery } from '../../store/typings';
+import { ActiveScenery, Station } from '../../typings/common';
 
 export default defineComponent({
   components: {
diff --git a/src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue b/src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue
index ca5cb42..ea7a538 100644
--- a/src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue
+++ b/src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue
@@ -49,8 +49,8 @@ import dateMixin from '../../../mixins/dateMixin';
 import routerMixin from '../../../mixins/routerMixin';
 import styleMixin from '../../../mixins/styleMixin';
 import StationStatusBadge from '../../Global/StationStatusBadge.vue';
-import { ActiveScenery } from '../../../store/typings';
 import donatorMixin from '../../../mixins/donatorMixin';
+import { ActiveScenery } from '../../../typings/common';
 
 export default defineComponent({
   mixins: [styleMixin, dateMixin, routerMixin, donatorMixin],
diff --git a/src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue b/src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue
index 64af824..0d9821c 100644
--- a/src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue
+++ b/src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue
@@ -89,7 +89,7 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 import styleMixin from '../../../mixins/styleMixin';
-import Station from '../../../scripts/interfaces/Station';
+import { Station } from '../../../typings/common';
 
 export default defineComponent({
   mixins: [styleMixin],
diff --git a/src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue b/src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue
index 2b4b0b1..cc1f904 100644
--- a/src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue
+++ b/src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue
@@ -52,7 +52,7 @@
 
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-import Station from '../../../scripts/interfaces/Station';
+import { Station } from '../../../typings/common';
 
 export default defineComponent({
   props: {
diff --git a/src/components/SceneryView/SceneryInfo/SceneryInfoSpawnList.vue b/src/components/SceneryView/SceneryInfo/SceneryInfoSpawnList.vue
index 5859dea..ed823dd 100644
--- a/src/components/SceneryView/SceneryInfo/SceneryInfoSpawnList.vue
+++ b/src/components/SceneryView/SceneryInfo/SceneryInfoSpawnList.vue
@@ -30,7 +30,7 @@
 
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-import { ActiveScenery } from '../../../store/typings';
+import { ActiveScenery } from '../../../typings/common';
 
 export default defineComponent({
   props: {
diff --git a/src/components/SceneryView/SceneryInfo/SceneryInfoStats.vue b/src/components/SceneryView/SceneryInfo/SceneryInfoStats.vue
deleted file mode 100644
index 147cb88..0000000
--- a/src/components/SceneryView/SceneryInfo/SceneryInfoStats.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-  <section class="info-stats" :class="!station.onlineInfo ? 'no-stats' : ''">
-    <span class="likes">
-      <img src="/images/icon-like" alt="Likes count icon" />
-      <span>{{ station.onlineInfo?.dispatcherRate || '0' }}</span>
-    </span>
-
-    <span class="users">
-      <img src="/images/icon-user" alt="Users count icon" />
-      <span>{{ station.onlineInfo?.currentUsers || '0' }}</span>
-      /
-      <span>{{ station.onlineInfo?.maxUsers || '0' }}</span>
-    </span>
-
-    <span class="spawns">
-      <img src="/images/icon-spawn" alt="Spawns count icon" />
-      <span>{{ station.onlineInfo?.spawns.length || '0' }}</span>
-    </span>
-
-    <span class="schedules">
-      <img src="/images/icon-timetable" alt="Timetables count icon" />
-      <span>
-        <span style="color: #eee">{{ station.onlineInfo?.scheduledTrains?.length || '0' }}</span>
-        /
-        <span style="color: #bbb"
-          >{{
-            station.onlineInfo?.scheduledTrains?.filter((train) => train.stopInfo.confirmed)
-              .length || '0'
-          }}
-        </span>
-      </span>
-    </span>
-  </section>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent } from 'vue';
-import Station from '../../../scripts/interfaces/Station';
-
-export default defineComponent({
-  props: {
-    station: {
-      type: Object as PropType<Station>,
-      required: true
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../../styles/variables.scss';
-
-.info-stats {
-  padding: 1rem 0;
-
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-
-  font-size: 1.65em;
-
-  &.no-stats {
-    opacity: 0.5;
-  }
-
-  & > span {
-    display: flex;
-    align-items: center;
-
-    margin: 0.3em;
-  }
-
-  .likes,
-  .spawns {
-    color: $accentCol;
-  }
-
-  span > img {
-    width: 1.2em;
-    margin-right: 0.5em;
-  }
-}
-</style>
diff --git a/src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue b/src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue
index 14930fe..06db7fb 100644
--- a/src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue
+++ b/src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue
@@ -32,7 +32,7 @@
 import { PropType, defineComponent } from 'vue';
 import modalTrainMixin from '../../../mixins/modalTrainMixin';
 import routerMixin from '../../../mixins/routerMixin';
-import { ActiveScenery } from '../../../store/typings';
+import { ActiveScenery } from '../../../typings/common';
 
 export default defineComponent({
   mixins: [routerMixin, modalTrainMixin],
diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue
index a0d140d..279775f 100644
--- a/src/components/SceneryView/SceneryTimetable.vue
+++ b/src/components/SceneryView/SceneryTimetable.vue
@@ -14,14 +14,6 @@
         </span>
 
         <span class="header_links" v-if="station">
-          <!-- <a
-            :href="`https://pragotron-td2.web.app/board?name=${station.name}`"
-            target="_blank"
-            :title="$t('scenery.pragotron-link')"
-          >
-            <img src="/images/icon-pragotron.svg" alt="icon-pragotron" />
-          </a> -->
-
           <a :href="tabliceZbiorczeHref" target="_blank" :title="$t('scenery.tablice-link')">
             <img src="/images/icon-tablice.ico" alt="icon-tablice" />
           </a>
@@ -186,12 +178,11 @@ import { useRoute } from 'vue-router';
 import Loading from '../Global/Loading.vue';
 import dateMixin from '../../mixins/dateMixin';
 import routerMixin from '../../mixins/routerMixin';
-import Station from '../../scripts/interfaces/Station';
 import { useMainStore } from '../../store/mainStore';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
-import { ActiveScenery } from '../../store/typings';
 import { useApiStore } from '../../store/apiStore';
+import { ActiveScenery, Station } from '../../typings/common';
 
 export default defineComponent({
   name: 'SceneryTimetable',
diff --git a/src/components/SceneryView/SceneryTimetablesHistory.vue b/src/components/SceneryView/SceneryTimetablesHistory.vue
index 4fefc36..0c35eb6 100644
--- a/src/components/SceneryView/SceneryTimetablesHistory.vue
+++ b/src/components/SceneryView/SceneryTimetablesHistory.vue
@@ -71,12 +71,10 @@
 import { defineComponent, PropType } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
 
-import Station from '../../scripts/interfaces/Station';
 import Loading from '../Global/Loading.vue';
 import listObserverMixin from '../../mixins/listObserverMixin';
-import { ActiveScenery } from '../../store/typings';
 import { API } from '../../typings/api';
-import { Status } from '../../typings/common';
+import { ActiveScenery, Station, Status } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
diff --git a/src/components/SceneryView/ScheduledTrainStatus.vue b/src/components/SceneryView/ScheduledTrainStatus.vue
index 3187b21..6d69c01 100644
--- a/src/components/SceneryView/ScheduledTrainStatus.vue
+++ b/src/components/SceneryView/ScheduledTrainStatus.vue
@@ -11,7 +11,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import { ScheduledTrain, StopStatus } from '../../store/typings';
+import { ScheduledTrain, StopStatus } from '../../typings/common';
 
 interface ScheduledTrainComp extends ScheduledTrain {
   stopStatusIndicator: string;
diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue
index f283a10..acb5484 100644
--- a/src/components/StationsView/StationTable.vue
+++ b/src/components/StationsView/StationTable.vue
@@ -1,6 +1,10 @@
 <template>
   <section class="station_table">
-    <div class="table_wrapper">
+    <Loading
+      v-if="apiStore.dataStatuses.connection == Status.Loading && displayedStations.length == 0"
+    />
+
+    <div class="table_wrapper" v-else-if="displayedStations.length > 0">
       <table>
         <thead>
           <tr>
@@ -50,7 +54,7 @@
 
         <tbody>
           <tr
-            v-for="station in stations"
+            v-for="station in displayedStations"
             :class="{ 'last-selected': lastSelectedStationName == station.name }"
             :key="station.name"
             @click.left="setScenery(station.name)"
@@ -283,12 +287,11 @@
           </tr>
         </tbody>
       </table>
+    </div>
 
-      <Loading v-if="apiStore.dataStatuses.connection == Status.Loading && stations.length == 0" />
-
-      <div class="no-stations" v-else-if="stations.length == 0">
-        {{ $t('sceneries.no-stations') }}
-      </div>
+    <div class="no-stations" v-else>
+      {{ $t('sceneries.no-stations') }} (region: <b>{{ mainStore.region.name }}</b
+      >)
     </div>
   </section>
 </template>
@@ -297,24 +300,16 @@
 import { defineComponent, PropType } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
 import styleMixin from '../../mixins/styleMixin';
-import Station from '../../scripts/interfaces/Station';
 import { useStationFiltersStore } from '../../store/stationFiltersStore';
 import { useMainStore } from '../../store/mainStore';
 import Loading from '../Global/Loading.vue';
 import { HeadIdsTypes, headIconsIds, headIds } from '../../scripts/data/stationHeaderNames';
 import StationStatusBadge from '../Global/StationStatusBadge.vue';
-import { Status } from '../../typings/common';
+import { Station, Status } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
 import popupMixin from '../../mixins/popupMixin';
 
 export default defineComponent({
-  props: {
-    stations: {
-      type: Array as PropType<Station[]>,
-      required: true
-    }
-  },
-
   emits: ['toggleDonationModal'],
   components: { Loading, StationStatusBadge },
   mixins: [styleMixin, dateMixin, popupMixin],
@@ -328,6 +323,10 @@ export default defineComponent({
   computed: {
     sorterActive() {
       return this.stationFiltersStore.sorterActive;
+    },
+
+    displayedStations() {
+      return this.stationFiltersStore.filteredStationList;
     }
   },
 
@@ -347,7 +346,8 @@ export default defineComponent({
 
   methods: {
     setScenery(name: string) {
-      const station = this.stations.find((station) => station.name === name);
+      const station = this.displayedStations.find((station) => station.name === name);
+
       if (!station) return;
 
       this.lastSelectedStationName = station.name;
@@ -389,12 +389,11 @@ export default defineComponent({
 
 $rowCol: #424242;
 
-.table_wrapper {
-  overflow: auto;
-  overflow-y: scroll;
-  font-weight: 500;
+.station_table {
   height: 90vh;
   min-height: 550px;
+  overflow: auto;
+  font-weight: 500;
 }
 
 .no-stations {
@@ -402,9 +401,8 @@ $rowCol: #424242;
   font-size: 1.5em;
 
   padding: 1em;
-  margin: 1em 0;
 
-  background: #333;
+  background: #1a1a1a;
 }
 
 table {
diff --git a/src/components/TrainsView/TrainInfo.vue b/src/components/TrainsView/TrainInfo.vue
index 2174537..5cbc7c2 100644
--- a/src/components/TrainsView/TrainInfo.vue
+++ b/src/components/TrainsView/TrainInfo.vue
@@ -163,12 +163,12 @@
 import { defineComponent } from 'vue';
 import styleMixin from '../../mixins/styleMixin';
 import trainInfoMixin from '../../mixins/trainInfoMixin';
-import Train from '../../scripts/interfaces/Train';
 import ProgressBar from '../Global/ProgressBar.vue';
 import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
 import StockList from '../Global/StockList.vue';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
+import { Train } from '../../typings/common';
 
 export default defineComponent({
   mixins: [trainInfoMixin, styleMixin, modalTrainMixin],
diff --git a/src/components/TrainsView/TrainModal.vue b/src/components/TrainsView/TrainModal.vue
index 471d0e6..bb5c45e 100644
--- a/src/components/TrainsView/TrainModal.vue
+++ b/src/components/TrainsView/TrainModal.vue
@@ -13,7 +13,7 @@ import { defineComponent } from 'vue';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 import TrainInfo from './TrainInfo.vue';
 import TrainSchedule from './TrainSchedule.vue';
-import Train from '../../scripts/interfaces/Train';
+import { Train } from '../../typings/common';
 
 export default defineComponent({
   components: { TrainInfo, TrainSchedule },
diff --git a/src/components/TrainsView/TrainSchedule.vue b/src/components/TrainsView/TrainSchedule.vue
index be1b60c..ecb4a77 100644
--- a/src/components/TrainsView/TrainSchedule.vue
+++ b/src/components/TrainsView/TrainSchedule.vue
@@ -81,11 +81,11 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
-import Train from '../../scripts/interfaces/Train';
 import StopLabel from './StopLabel.vue';
 import StockList from '../Global/StockList.vue';
 import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
+import { Train } from '../../typings/common';
 
 export interface TrainScheduleStop {
   nameHtml: string;
diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue
index c6ac691..08d9ca6 100644
--- a/src/components/TrainsView/TrainTable.vue
+++ b/src/components/TrainsView/TrainTable.vue
@@ -30,11 +30,10 @@
 <script lang="ts">
 import { defineComponent, inject, PropType, Ref } from 'vue';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
-import Train from '../../scripts/interfaces/Train';
 import { useMainStore } from '../../store/mainStore';
 import Loading from '../Global/Loading.vue';
 import TrainInfo from './TrainInfo.vue';
-import { Status } from '../../typings/common';
+import { Status, Train } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
diff --git a/src/managers/trainFilterManager.ts b/src/managers/trainFilterManager.ts
index bdba0f9..1acf953 100644
--- a/src/managers/trainFilterManager.ts
+++ b/src/managers/trainFilterManager.ts
@@ -1,6 +1,5 @@
 import { TrainFilter, TrainFilterId } from '../components/TrainsView/typings';
-import Train from '../scripts/interfaces/Train';
-import { TrainStop } from '../store/typings';
+import { Train, TrainStop } from '../typings/common';
 
 function confirmedPercentage(stops: TrainStop[] | undefined) {
   if (!stops) return -1;
diff --git a/src/mixins/trainInfoMixin.ts b/src/mixins/trainInfoMixin.ts
index 51fea95..f627401 100644
--- a/src/mixins/trainInfoMixin.ts
+++ b/src/mixins/trainInfoMixin.ts
@@ -1,6 +1,5 @@
 import { defineComponent } from 'vue';
-import Train from '../scripts/interfaces/Train';
-import { TrainStop } from '../store/typings';
+import { Train, TrainStop } from '../typings/common';
 
 export default defineComponent({
   data: () => ({
@@ -51,8 +50,8 @@ export default defineComponent({
       return diffMins < 1
         ? this.$t('trains.last-seen-now')
         : diffMins < 2
-        ? this.$t('trains.last-seen-min')
-        : this.$t('trains.last-seen-ago', { minutes: diffMins });
+          ? this.$t('trains.last-seen-min')
+          : this.$t('trains.last-seen-ago', { minutes: diffMins });
     },
 
     displayTrainPosition(train: Train) {
diff --git a/src/scripts/interfaces/Station.ts b/src/scripts/interfaces/Station.ts
deleted file mode 100644
index 453f07e..0000000
--- a/src/scripts/interfaces/Station.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Availability, ActiveScenery } from '../../store/typings';
-import { StationRoutes } from './StationRoutes';
-
-export default interface Station {
-  name: string;
-
-  generalInfo?: {
-    name: string;
-    url: string;
-    abbr: string;
-    hash?: string;
-
-    reqLevel: number;
-    // supportersOnly: boolean;
-
-    lines: string;
-    project: string;
-    projectUrl?: string;
-
-    signalType: string;
-    controlType: string;
-
-    SUP: boolean;
-    ASDEK: boolean;
-    authors?: string[];
-
-    availability: Availability;
-    routes: StationRoutes;
-
-    checkpoints: string[];
-  };
-
-  onlineInfo?: ActiveScenery;
-}
diff --git a/src/scripts/interfaces/StationRoutes.ts b/src/scripts/interfaces/StationRoutes.ts
deleted file mode 100644
index a88dfbb..0000000
--- a/src/scripts/interfaces/StationRoutes.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { StationRoutesInfo } from '../../store/typings';
-
-export interface StationRoutes {
-  single: StationRoutesInfo[];
-  double: StationRoutesInfo[];
-
-  singleElectrifiedNames: string[];
-  singleOtherNames: string[];
-  doubleElectrifiedNames: string[];
-  doubleOtherNames: string[];
-  sblNames: string[];
-
-  minRouteSpeed: number;
-  maxRouteSpeed: number;
-}
diff --git a/src/scripts/interfaces/Train.ts b/src/scripts/interfaces/Train.ts
deleted file mode 100644
index a701b67..0000000
--- a/src/scripts/interfaces/Train.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { TrainStop } from '../../store/typings';
-
-export default interface Train {
-  trainId: string;
-
-  mass: number;
-  length: number;
-  speed: number;
-  signal: string;
-  distance: number;
-  connectedTrack: string;
-  driverId: number;
-  trainNo: number;
-  driverName: string;
-  driverLevel: number;
-  currentStationName: string;
-  currentStationHash: string;
-  locoType: string;
-  online: boolean;
-  lastSeen: number;
-  region: string;
-  stockList: string[];
-
-  isTimeout: boolean;
-  isSupporter: boolean;
-
-  timetableData?: {
-    timetableId: number;
-    category: string;
-    route: string;
-    followingStops: TrainStop[];
-    TWR: boolean;
-    SKR: boolean;
-    routeDistance: number;
-    sceneries: string[];
-    sceneryNames: string[];
-  };
-}
diff --git a/src/scripts/utils/stationFilterUtils.ts b/src/scripts/utils/stationFilterUtils.ts
index a8d8912..59cfd83 100644
--- a/src/scripts/utils/stationFilterUtils.ts
+++ b/src/scripts/utils/stationFilterUtils.ts
@@ -1,7 +1,7 @@
 import { Filter } from '../../components/StationsView/typings';
 import { Status } from '../../typings/common';
 import { HeadIdsTypes } from '../data/stationHeaderNames';
-import Station from '../interfaces/Station';
+import { Station } from '../../typings/common';
 
 const dispatcherStatusPriority = [
   Status.ActiveDispatcher.UNKNOWN,
diff --git a/src/store/mainStore.ts b/src/store/mainStore.ts
index 214a4e4..a8f9408 100644
--- a/src/store/mainStore.ts
+++ b/src/store/mainStore.ts
@@ -1,18 +1,21 @@
 import { defineStore } from 'pinia';
-import Train from '../scripts/interfaces/Train';
 import { parseSpawns, getScheduledTrains, getStationTrains } from './utils';
 
-import { ActiveScenery, ScheduledTrain, StoreState } from './typings';
-
-import { Status } from '../typings/common';
-import Station from '../scripts/interfaces/Station';
+import {
+  ActiveScenery,
+  ScheduledTrain,
+  Station,
+  StationRoutes,
+  Status,
+  Train
+} from '../typings/common';
 import { useApiStore } from './apiStore';
-import { StationRoutes } from '../scripts/interfaces/StationRoutes';
+import { MainStoreState } from './typings';
 
-export const useMainStore = defineStore('store', {
+export const useMainStore = defineStore('mainStore', {
   state: () =>
     ({
-      region: { id: 'eu', value: 'PL1' },
+      region: { id: 'eu', value: 'PL1', name: 'PL1' },
 
       isOffline: false,
       isNewUpdate: false,
@@ -29,8 +32,11 @@ export const useMainStore = defineStore('store', {
       modalLastClickedTarget: null,
 
       mousePos: { x: 0, y: 0 },
-      popUpData: { key: null, content: '' }
-    }) as StoreState,
+      popUpData: { key: null, content: '' },
+
+      stations: [] as Station[],
+      trainsOnline: [] as Train[]
+    }) as MainStoreState,
 
   getters: {
     trainList(): Train[] {
@@ -96,6 +102,7 @@ export const useMainStore = defineStore('store', {
         });
     },
 
+    // computed active sceneries
     activeSceneryList(state): ActiveScenery[] {
       const apiStore = useApiStore();
 
@@ -156,8 +163,8 @@ export const useMainStore = defineStore('store', {
           scenery.dispatcherStatus == Status.ActiveDispatcher.NO_LIMIT
             ? Date.now() + 25500000
             : scenery.dispatcherStatus > 5
-            ? scenery.dispatcherStatus
-            : null;
+              ? scenery.dispatcherStatus
+              : null;
 
         list.push({
           name: scenery.stationName,
@@ -231,6 +238,7 @@ export const useMainStore = defineStore('store', {
       return allActiveSceneries;
     },
 
+    // computed station data
     stationList(): Station[] {
       const apiStore = useApiStore();
 
@@ -283,6 +291,30 @@ export const useMainStore = defineStore('store', {
           }
         };
       });
+    },
+
+    allStationInfo(): Station[] {
+      const onlineUnsavedStations = this.activeSceneryList
+        .filter(
+          (scenery) =>
+            this.stationList.findIndex((st) => st.name == scenery.name) == -1 &&
+            scenery.region == this.region.id
+        )
+        .map((os) => ({
+          name: os.name,
+          generalInfo: undefined,
+          onlineInfo: os
+        }));
+
+      return [
+        ...onlineUnsavedStations,
+        ...this.stationList.map((st) => ({
+          ...st,
+          onlineInfo: this.activeSceneryList.find(
+            (os) => os.name == st.name && os.region == this.region.id
+          )
+        }))
+      ];
     }
   }
 });
diff --git a/src/store/stationFiltersStore.ts b/src/store/stationFiltersStore.ts
index cd6d396..1e545a6 100644
--- a/src/store/stationFiltersStore.ts
+++ b/src/store/stationFiltersStore.ts
@@ -77,26 +77,8 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
 
     filteredStationList: (state) => {
       const store = useMainStore();
-      const savedStationNames = store.stationList.map((s) => s.name);
 
-      const onlineUnsavedStations = store.activeSceneryList
-        .filter((os) => !savedStationNames.includes(os.name) && os.region == store.region.id)
-        .map((os) => ({
-          name: os.name,
-          generalInfo: undefined,
-          onlineInfo: os
-        }));
-
-      return [
-        ...onlineUnsavedStations,
-        ...store.stationList.map((station) => ({
-          ...station,
-          // append to 'onlineInfo' object for filtering legacy reasons - to optimize later (hopefully)
-          onlineInfo: store.activeSceneryList.find(
-            (os) => os.name == station.name && os.region == store.region.id
-          )
-        }))
-      ]
+      return store.allStationInfo
         .filter((station) => filterStations(station, state.filters))
         .sort((a, b) => sortStations(a, b, state.sorterActive));
     }
diff --git a/src/store/typings.ts b/src/store/typings.ts
index 27f5605..b018c02 100644
--- a/src/store/typings.ts
+++ b/src/store/typings.ts
@@ -1,18 +1,11 @@
 import { API } from '../typings/api';
-import { Status } from '../typings/common';
+import { Availability, Station, StationRoutesInfo, Status, Train } from '../typings/common';
 
 export const popupKeys = ['DonatorPopUp', 'TrainCommentsPopUp', 'VehiclePreviewPopUp'] as const;
-export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
 export type PopUpType = (typeof popupKeys)[number];
 
-export interface RegionCounters {
-  stationCount: number;
-  trainsCount: number;
-  timetablesCount: number;
-}
-
-export interface StoreState {
-  region: { id: string; value: string };
+export interface MainStoreState {
+  region: { id: string; value: string; name: string };
   isOffline: boolean;
   isNewUpdate: boolean;
   dispatcherStatsName: string;
@@ -24,17 +17,8 @@ export interface StoreState {
   modalLastClickedTarget: EventTarget | null;
   mousePos: { x: number; y: number };
   popUpData: { key: PopUpType | null; content: string };
-}
-
-export interface StationRoutesInfo {
-  routeName: string;
-  isElectric: boolean;
-  isInternal: boolean;
-  isRouteSBL: boolean;
-  routeLength: number;
-  routeSpeed: number;
-  routeTracks: number;
-  hidden?: boolean;
+  stations: Station[];
+  trainsOnline: Train[];
 }
 
 export interface StationJSONData {
@@ -62,110 +46,3 @@ export interface StationJSONData {
 
   availability: Availability;
 }
-
-export interface ActiveScenery {
-  name: string;
-  hash: string;
-  region: string;
-  maxUsers: number;
-  currentUsers: number;
-  spawns: { spawnName: string; spawnLength: number; isElectrified: boolean }[];
-  dispatcherName: string;
-  dispatcherRate: number;
-  dispatcherId: number;
-  dispatcherExp: number;
-  dispatcherIsSupporter: boolean;
-
-  dispatcherStatus: Status.ActiveDispatcher | number;
-  dispatcherTimestamp: number | null;
-
-  isOnline: boolean;
-
-  stationTrains?: StationTrain[];
-  scheduledTrains?: ScheduledTrain[];
-
-  scheduledTrainCount: {
-    all: number;
-    confirmed: number;
-    unconfirmed: number;
-  };
-}
-
-export interface StationTrain {
-  driverName: string;
-  driverId: number;
-  trainNo: number;
-  trainId: string;
-  stopStatus: string;
-}
-
-export interface ScheduledTrain {
-  checkpointName: string;
-
-  trainId: string;
-  trainNo: number;
-
-  driverName: string;
-  driverId: number;
-  currentStationName: string;
-  currentStationHash: string;
-  category: string;
-  stopInfo: TrainStop;
-
-  terminatesAt: string;
-  beginsAt: string;
-
-  prevStationName: string;
-  nextStationName: string;
-
-  arrivingLine: string | null;
-  departureLine: string | null;
-
-  prevDepartureLine: string | null;
-  nextArrivalLine: string | null;
-
-  signal: string;
-  connectedTrack: string;
-
-  stopLabel: string;
-  stopStatus: StopStatus;
-  stopStatusID: number;
-
-  region: string;
-}
-
-export enum StopStatus {
-  ARRIVING = 'arriving',
-  DEPARTED = 'departed',
-  DEPARTED_AWAY = 'departed-away',
-  ONLINE = 'online',
-  STOPPED = 'stopped',
-  TERMINATED = 'terminated'
-}
-
-export interface TrainStop {
-  stopName: string;
-  stopNameRAW: string;
-  stopType: string;
-  stopDistance: number;
-  mainStop: boolean;
-
-  arrivalLine: string | null;
-  arrivalTimestamp: number;
-  arrivalRealTimestamp: number;
-  arrivalDelay: number;
-
-  departureLine: string | null;
-  departureTimestamp: number;
-  departureRealTimestamp: number;
-  departureDelay: number;
-  pointId: number;
-
-  comments?: string;
-
-  beginsHere: boolean;
-  terminatesHere: boolean;
-  confirmed: boolean;
-  stopped: boolean;
-  stopTime: number | null;
-}
diff --git a/src/store/utils.ts b/src/store/utils.ts
index 3b7535d..a0b86c2 100644
--- a/src/store/utils.ts
+++ b/src/store/utils.ts
@@ -1,6 +1,11 @@
-import Station from '../scripts/interfaces/Station';
-import Train from '../scripts/interfaces/Train';
-import { ScheduledTrain, StationTrain, StopStatus, TrainStop } from './typings';
+import {
+  TrainStop,
+  StopStatus,
+  Train,
+  ScheduledTrain,
+  Station,
+  StationTrain
+} from '../typings/common';
 
 export function getLocoURL(locoType: string): string {
   return `https://rj.td2.info.pl/dist/img/thumbnails/${
diff --git a/src/typings/api.ts b/src/typings/api.ts
index 7c2d806..847c9af 100644
--- a/src/typings/api.ts
+++ b/src/typings/api.ts
@@ -128,8 +128,8 @@ export namespace API {
     export type Response = Data[];
 
     export interface Data {
+      id: string;
       trainNo: number;
-
       mass: number;
       length: number;
       speed: number;
diff --git a/src/typings/common.ts b/src/typings/common.ts
index 8665faf..cfd711a 100644
--- a/src/typings/common.ts
+++ b/src/typings/common.ts
@@ -1,3 +1,14 @@
+export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
+
+export enum StopStatus {
+  ARRIVING = 'arriving',
+  DEPARTED = 'departed',
+  DEPARTED_AWAY = 'departed-away',
+  ONLINE = 'online',
+  STOPPED = 'stopped',
+  TERMINATED = 'terminated'
+}
+
 export namespace Status {
   export enum ActiveDispatcher {
     FREE = -3,
@@ -20,3 +31,201 @@ export namespace Status {
     Warning = 3
   }
 }
+
+export interface RegionCounters {
+  stationCount: number;
+  trainsCount: number;
+  timetablesCount: number;
+}
+
+export interface Train {
+  id: string;
+  trainId: string;
+  mass: number;
+  length: number;
+  speed: number;
+  signal: string;
+  distance: number;
+  connectedTrack: string;
+  driverId: number;
+  trainNo: number;
+  driverName: string;
+  driverLevel: number;
+  currentStationName: string;
+  currentStationHash: string;
+  locoType: string;
+  online: boolean;
+  lastSeen: number;
+  region: string;
+  stockList: string[];
+
+  isTimeout: boolean;
+  isSupporter: boolean;
+
+  timetableData?: {
+    timetableId: number;
+    category: string;
+    route: string;
+    followingStops: TrainStop[];
+    TWR: boolean;
+    SKR: boolean;
+    routeDistance: number;
+    sceneries: string[];
+    sceneryNames: string[];
+  };
+}
+
+export interface Station {
+  name: string;
+
+  generalInfo?: {
+    name: string;
+    url: string;
+    abbr: string;
+    hash?: string;
+
+    reqLevel: number;
+    // supportersOnly: boolean;
+
+    lines: string;
+    project: string;
+    projectUrl?: string;
+
+    signalType: string;
+    controlType: string;
+
+    SUP: boolean;
+    ASDEK: boolean;
+    authors?: string[];
+
+    availability: Availability;
+    routes: StationRoutes;
+
+    checkpoints: string[];
+  };
+
+  onlineInfo?: ActiveScenery;
+}
+
+export interface StationRoutes {
+  single: StationRoutesInfo[];
+  double: StationRoutesInfo[];
+
+  singleElectrifiedNames: string[];
+  singleOtherNames: string[];
+  doubleElectrifiedNames: string[];
+  doubleOtherNames: string[];
+  sblNames: string[];
+
+  minRouteSpeed: number;
+  maxRouteSpeed: number;
+}
+
+export interface StationRoutesInfo {
+  routeName: string;
+  isElectric: boolean;
+  isInternal: boolean;
+  isRouteSBL: boolean;
+  routeLength: number;
+  routeSpeed: number;
+  routeTracks: number;
+  hidden?: boolean;
+}
+
+export interface ActiveScenery {
+  name: string;
+  hash: string;
+  region: string;
+  maxUsers: number;
+  currentUsers: number;
+  spawns: { spawnName: string; spawnLength: number; isElectrified: boolean }[];
+  dispatcherName: string;
+  dispatcherRate: number;
+  dispatcherId: number;
+  dispatcherExp: number;
+  dispatcherIsSupporter: boolean;
+
+  dispatcherStatus: Status.ActiveDispatcher | number;
+  dispatcherTimestamp: number | null;
+
+  isOnline: boolean;
+
+  stationTrains?: StationTrain[];
+  scheduledTrains?: ScheduledTrain[];
+
+  scheduledTrainCount: {
+    all: number;
+    confirmed: number;
+    unconfirmed: number;
+  };
+}
+
+export interface StationTrain {
+  driverName: string;
+  driverId: number;
+  trainNo: number;
+  trainId: string;
+  stopStatus: string;
+}
+
+export interface ScheduledTrain {
+  checkpointName: string;
+
+  trainId: string;
+  trainNo: number;
+
+  driverName: string;
+  driverId: number;
+  currentStationName: string;
+  currentStationHash: string;
+  category: string;
+  stopInfo: TrainStop;
+
+  terminatesAt: string;
+  beginsAt: string;
+
+  prevStationName: string;
+  nextStationName: string;
+
+  arrivingLine: string | null;
+  departureLine: string | null;
+
+  prevDepartureLine: string | null;
+  nextArrivalLine: string | null;
+
+  signal: string;
+  connectedTrack: string;
+
+  stopLabel: string;
+  stopStatus: StopStatus;
+  stopStatusID: number;
+
+  region: string;
+}
+
+export interface TrainStop {
+  stopName: string;
+  stopNameRAW: string;
+  stopType: string;
+  stopDistance: number;
+  mainStop: boolean;
+
+  arrivalLine: string | null;
+  arrivalTimestamp: number;
+  arrivalRealTimestamp: number;
+  arrivalDelay: number;
+
+  departureLine: string | null;
+  departureTimestamp: number;
+  departureRealTimestamp: number;
+  departureDelay: number;
+  pointId: number;
+
+  comments?: string;
+
+  beginsHere: boolean;
+  terminatesHere: boolean;
+  confirmed: boolean;
+  stopped: boolean;
+  stopTime: number | null;
+}
diff --git a/src/views/StationsView.vue b/src/views/StationsView.vue
index e52f9de..2bfcce0 100644
--- a/src/views/StationsView.vue
+++ b/src/views/StationsView.vue
@@ -20,7 +20,15 @@
       </div>
 
       <Donation :isModalOpen="isDonationModalOpen" @toggleModal="toggleDonationModal" />
-      <StationTable :stations="computedStationList" @toggleDonationModal="toggleDonationModal" />
+      <StationTable @toggleDonationModal="toggleDonationModal" />
+
+      <div class="stations-stats">
+        <hr style="margin: 0.5em 0" />
+        Średnia liczba rozkładów jazdy na dyżurnego: <b>{{ avgTimetableCount }}</b> | Dostępne
+        szlaki 1-torowe: <b>{{ oneWayTracks }}</b> (zelektr.) / <b>{{ 0 }}</b> (spalinowe) |
+        Dostępne szlaki 2-torowe: <b>{{ 0 }}</b> (zelektr.) / <b>{{ 0 }}</b> (spalinowe) | Otwarte
+        spawny: <b>{{ 0 }}</b> (PAS.) / <b>{{ 0 }}</b> (TOW.) / <b>{{ 0 }}</b> (LUZ.)
+      </div>
     </div>
   </section>
 </template>
@@ -56,8 +64,29 @@ export default defineComponent({
   },
 
   computed: {
-    computedStationList() {
-      return this.filterStore.filteredStationList;
+    avgTimetableCount() {
+      const scheduledTrainsTotal = this.store.activeSceneryList.reduce<number>((acc, sc) => {
+        if (sc.region != 'eu') return acc;
+
+        acc += sc.scheduledTrainCount.all;
+
+        return acc;
+      }, 0);
+
+      return (
+        this.store.activeSceneryList.length != 0
+          ? scheduledTrainsTotal / this.store.activeSceneryList.length
+          : 0
+      ).toFixed(2);
+    },
+
+    oneWayTracks() {
+      // return this.computedStationList
+      //   .filter((st) => st.onlineInfo && st.generalInfo?.routes.single)
+      //   .map((st) => st.generalInfo!.routes.single.map((r) => r.routeName))
+      //   .join(', ');
+
+      return [];
     }
   },
 
@@ -119,6 +148,11 @@ export default defineComponent({
   margin-bottom: 0.5em;
 }
 
+.stations-stats {
+  text-align: center;
+  color: #ccc;
+}
+
 button.btn-donation {
   $btnColor: #254069;
 
diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue
index 19baee8..7e2283f 100644
--- a/src/views/TrainsView.vue
+++ b/src/views/TrainsView.vue
@@ -20,11 +20,11 @@ import { computed, ComputedRef, defineComponent, provide, reactive, ref, watch }
 import TrainOptions from '../components/TrainsView/TrainOptions.vue';
 import TrainTable from '../components/TrainsView/TrainTable.vue';
 import modalTrainMixin from '../mixins/modalTrainMixin';
-import Train from '../scripts/interfaces/Train';
 import { useMainStore } from '../store/mainStore';
 import { TrainFilter, trainFilters } from '../components/TrainsView/typings';
 import { filteredTrainList } from '../managers/trainFilterManager';
 import TrainStats from '../components/TrainsView/TrainStats.vue';
+import { Train } from '../typings/common';
 
 export default defineComponent({
   components: {