refactor: types & performance

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

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({

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: {

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: {

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],

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],

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: {

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: {

src/components/SceneryView/SceneryInfo/SceneryInfoStats.vue

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

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],

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',

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({

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;

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 {

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],

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 },

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;

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({