Fix błędów z reaktywnością danych

src/App.scss

@@ -201,8 +201,9 @@
     width: 1.35em;
   }
 
-  & > .region {
+  .region {
     color: paleturquoise;
+    font-weight: bold;
   }
 }
 

src/App.vue

@@ -33,13 +33,13 @@
             <span class="header_info">
               <Clock />
               <div class="info_counter">
-                <span class="region" @click="openFilterCard">
+                <span class="region" @click="changeRegion">
-                  {{ currentRegion.value }}
+                  {{ store.region.value }}
                 </span>
                 <img src="@/assets/icon-dispatcher.svg" alt="icon dispatcher" />
-                <span class="text--primary">{{ dispatcherCount }}</span>
+                <span class="text--primary">{{ onlineDispatchers.length }}</span>
                 <span class="text--grayed">|</span>
-                <span class="text--primary">{{ trainCount }}</span>
+                <span class="text--primary">{{ store.trainList.length }}</span>
                 <img src="@/assets/icon-train.svg" alt="icon train" />
               </div>
             </span>
@@ -99,8 +99,6 @@ export default defineComponent({
     const store = useStore();
     store.connectToAPI();
 
-    const currentRegion = store.region;
-
     // const sceneryDataStatus = computed(() => data.value.sceneryDataStatus);
 
     const isFilterCardVisible = ref(false);
@@ -108,18 +106,13 @@ export default defineComponent({
     provide('isFilterCardVisible', isFilterCardVisible);
 
     return {
-      currentRegion,
+      store,
       isFilterCardVisible,
+      onlineDispatchers: computed(() =>
+        store.stationList.filter((station) => station.onlineInfo && station.onlineInfo.region == store.region.id)
+      ),
 
       dispatcherDataStatus: store.dataStatuses.dispatchers,
-
-      trainCount: store.trainCount,
-
-      dispatcherCount: store.stationList.filter((station) => station.onlineInfo).length,
-
-      openFilterCard() {
-        isFilterCardVisible.value = true;
-      },
     };
   },
 
@@ -163,6 +156,10 @@ export default defineComponent({
       StorageManager.setBooleanValue('version_notes_read', true);
     },
 
+    changeRegion() {
+      this.store.changeRegion({ id: 'cae', value: 'PL2' });
+    },
+
     changeLang(lang: string) {
       this.$i18n.locale = lang;
       this.currentLang = lang;

src/components/StationsView/StationFilterCard.vue

@@ -13,7 +13,7 @@
 
         <div class="card_content">
           <div class="card_title flex">{{ $t('filters.title') }}</div>
-          <section class="card_regions">
+          <!-- <section class="card_regions">
             <div class="regions_content">
               <span v-for="region in inputs.regions" :key="region.id" :class="`region-${region.id}`">
                 <label>
@@ -31,7 +31,7 @@
                 </label>
               </span>
             </div>
-          </section>
+          </section> -->
           <section class="card_options">
             <filter-option
               v-for="(option, i) in inputs.options"
@@ -190,11 +190,6 @@ export default defineComponent({
       }, 400);
     },
 
-    handleChangeRegion() {
-      this.store.region = this.currentRegion;
-      this.closeCard();
-    },
-
     changeNumericFilterValue(name: string, value: number, saveToStorage = false) {
       this.$emit('changeFilterValue', {
         name,
@@ -314,7 +309,7 @@ export default defineComponent({
 
   &_content {
     display: grid;
-    grid-template-rows: 70px 35px 1fr 100px 50px auto;
+    grid-template-rows: 70px 1fr 100px 50px auto;
     min-height: 0;
     max-height: 100vh;
   }

src/scripts/interfaces/Station.ts

@@ -33,6 +33,7 @@ export default interface Station {
   onlineInfo?: {
     hash: string;
     name: string;
+    region: string;
 
     maxUsers: number;
     currentUsers: number;
@@ -57,38 +58,4 @@ export default interface Station {
 
     scheduledTrains?: ScheduledTrain[];
   }
-
-  // stationName: string;
-  // stationHash: string;
-  // stationURL: string;
-
-  // maxUsers: number;
-  // currentUsers: number;
-
-
-  // stationLines: string;
-  // stationProject: string;
-
-  // reqLevel: number;
-  // supportersOnly: boolean;
-
-  // SBL: string;
-  // TWB: string;
-  // signalType: string;
-  // controlType: string;
-
-  // default: boolean;
-  // nonPublic: boolean;
-  // unavailable: boolean;
-
-  // routes: {
-  //   oneWay: { catenary: number; noCatenary: number };
-  //   twoWay: { catenary: number; noCatenary: number };
-  // };
-
-  // checkpoints: {
-  //   checkpointName: string;
-  //   scheduledTrains: ScheduledTrain[];
-  // }[];
-
 }

src/store/store.ts

@@ -22,6 +22,8 @@ import { APIData, StationJSONData, StoreState } from './storeTypes';
 export const useStore = defineStore('store', {
   state: () =>
     ({
+      apiData: {} as unknown,
+
       stationList: [],
       trainList: [],
 
@@ -47,7 +49,9 @@ export const useStore = defineStore('store', {
     } as StoreState),
 
   actions: {
-    setTrainsOnlineData(trains?: TrainAPIData[]) {
+    setTrainsOnlineData() {
+      const { trains } = this.apiData;
+
       if (!trains) return [];
 
       this.trainList = trains
@@ -93,15 +97,17 @@ export const useStore = defineStore('store', {
         }) as Train[];
     },
 
-    getDispatcherStatus(dispatchers: any[][] | undefined, stationAPIData: StationAPIData) {
+    getDispatcherStatus(onlineStationData: StationAPIData) {
+      const { dispatchers } = this.apiData;
+
       const prevDispatcherStatus = this.lastDispatcherStatuses.find(
-        (dispatcher) => dispatcher.hash === stationAPIData.stationHash
+        (dispatcher) => dispatcher.hash === onlineStationData.stationHash
       );
 
       const stationStatus = !dispatchers
         ? undefined
         : dispatchers.find(
-            (status: string[]) => status[0] == stationAPIData.stationHash && status[1] == this.region.id
+            (status: string[]) => status[0] == onlineStationData.stationHash && status[1] == this.region.id
           ) || -1;
 
       const statusTimestamp =
@@ -110,7 +116,7 @@ export const useStore = defineStore('store', {
         prevDispatcherStatus && !dispatchers ? prevDispatcherStatus.statusID : getStatusID(stationStatus);
 
       return {
-        hash: stationAPIData.stationHash,
+        hash: onlineStationData.stationHash,
         statusID,
         statusTimestamp,
       };
@@ -188,17 +194,17 @@ export const useStore = defineStore('store', {
         .map((train) => ({ driverName: train.driverName, driverId: train.driverId, trainNo: train.trainNo }));
     },
 
-    setStationsOnlineInfo(data: APIData) {
+    setStationsOnlineInfo() {
       const onlineStationNames: string[] = [];
       const prevDispatcherStatuses: StoreState['lastDispatcherStatuses'] = [];      
 
-      data.stations?.forEach((stationAPIData) => {
+      this.apiData.stations?.forEach((stationAPIData) => {
         if (stationAPIData.region !== this.region.id || !stationAPIData.isOnline) return;
         const station = this.stationList.find((s) => s.name === stationAPIData.stationName);
 
         onlineStationNames.push(stationAPIData.stationName);
 
-        const dispatcherStatus = this.getDispatcherStatus(data.dispatchers, stationAPIData);
+        const dispatcherStatus = this.getDispatcherStatus(stationAPIData);
         prevDispatcherStatuses.push(dispatcherStatus);
 
         const stationTrains = this.getStationTrains(stationAPIData);
@@ -207,6 +213,7 @@ export const useStore = defineStore('store', {
         const onlineInfo = {
           name: stationAPIData.stationName,
           hash: stationAPIData.stationHash,
+          region: stationAPIData.region,
           maxUsers: stationAPIData.maxUsers,
           currentUsers: stationAPIData.currentUsers,
           spawns: parseSpawns(stationAPIData.spawnString),
@@ -239,7 +246,7 @@ export const useStore = defineStore('store', {
           });
       });
 
-      if (data.dispatchers != null) this.lastDispatcherStatuses = prevDispatcherStatuses;
+      if (this.apiData.dispatchers != null) this.lastDispatcherStatuses = prevDispatcherStatuses;
     },
 
     async fetchStationsGeneralInfo() {
@@ -324,7 +331,9 @@ export const useStore = defineStore('store', {
       );
 
       socket.on('UPDATE', (data: APIData) => {
-        this.fetchOnlineData(data);
+        this.apiData = data;
+
+        this.setOnlineData();
       });
 
       socket.emit('connection');
@@ -337,8 +346,14 @@ export const useStore = defineStore('store', {
       this.connectToWebsocket();
     },
 
-    async fetchOnlineData(data: APIData) {
+    async changeRegion(region: StoreState['region']) {
-      if (!data.stations) {
+      this.region = region;
+
+      await this.setOnlineData();
+    },
+
+    async setOnlineData() {
+      if (!this.apiData.stations) {
         this.dataStatuses.sceneries = DataStatus.Error;
         this.dataStatuses.trains = DataStatus.Error;
         this.dataStatuses.dispatchers = DataStatus.Error;
@@ -347,11 +362,14 @@ export const useStore = defineStore('store', {
       }
 
       this.dataStatuses.sceneries = DataStatus.Loaded;
-      this.dataStatuses.trains = !data.trains ? DataStatus.Warning : DataStatus.Loaded;
+      this.dataStatuses.trains = !this.apiData.trains ? DataStatus.Warning : DataStatus.Loaded;
-      this.dataStatuses.dispatchers = !data.dispatchers ? DataStatus.Warning : DataStatus.Loaded;
+      this.dataStatuses.dispatchers = !this.apiData.dispatchers ? DataStatus.Warning : DataStatus.Loaded;
+
+      this.setTrainsOnlineData();
+      this.setStationsOnlineInfo();
+
+      console.log("Loading");
       
-      this.setStationsOnlineInfo(data);
-      this.setTrainsOnlineData(data.trains);
     },
   },
 });

src/store/storeTypes.ts

@@ -10,6 +10,7 @@ export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned'
 export interface StoreState {
   stationList: Station[];
   trainList: Train[];
+  apiData: APIData;
 
   lastDispatcherStatuses: { hash: string; statusTimestamp: number; statusID: string }[];
 

src/views/StationsView.vue

@@ -71,19 +71,16 @@ export default defineComponent({
     const filterManager = reactive(new StationFilterManager());
     const focusedStationName = '';
 
-    const computedStations: ComputedRef<Station[]> = computed(() => {
+    const computedStations: ComputedRef<Station[]> = computed(() =>
-      return filterManager.getFilteredStationList(store.stationList);
+      filterManager
-    });
+        .getFilteredStationList(store.stationList)
-
+        .filter((station) => !station.onlineInfo || station.onlineInfo.region == store.region.id)
-    const focusedStationInfo = computed(() =>
-      computedStations.value.find((station) => station.name === focusedStationName)
     );
 
     return {
       computedStations,
       filterManager,
       focusedStationName,
-      focusedStationInfo,
     };
   },
   mounted() {

src/views/TrainsView.vue

@@ -2,8 +2,6 @@
   <section class="trains-view">
     <div class="wrapper">
       <div class="options-bar">
-        <!-- <TrainStats :trains="trainList" :trainStatsOpen="trainStatsOpen" /> -->
-
         <train-options />
       </div>
 
@@ -51,8 +49,6 @@ export default defineComponent({
   setup() {
     const store = useStore();
 
-    const trainList = store.trainList;
-
     const sorterActive = ref({ id: 'distance', dir: -1 });
     const filterList = reactive([...trainFilters]) as TrainFilter[];
     const isTrainOptionsCardVisible = ref(false);
@@ -67,11 +63,16 @@ export default defineComponent({
     provide('isTrainOptionsCardVisible', isTrainOptionsCardVisible);
 
     const computedTrains: ComputedRef<Train[]> = computed(() => {
-      return filteredTrainList(trainList, searchedTrain.value, searchedDriver.value, sorterActive.value, filterList);
+      return filteredTrainList(
+        store.trainList,
+        searchedTrain.value,
+        searchedDriver.value,
+        sorterActive.value,
+        filterList
+      );
     });
 
     return {
-      trainList,
       computedTrains,
       searchedTrain,
       searchedDriver,