Aktualizacja scenerii; WIP: zmiana serwerów SWDR

src/App.vue

@@ -104,8 +104,13 @@ export default defineComponent({
       () => store.getters[GETTERS.allData]
     );
 
+    const currentRegion: ComputedRef<string> = computed(
+      () => store.getters[GETTERS.currentRegion]
+    );
+
     return {
       data,
+      currentRegion,
     };
   },
 
@@ -149,6 +154,12 @@ export default defineComponent({
       StorageManager.setStringValue("lang", lang);
     },
 
+    // changeRegion(region: string = "eu") {
+    //   this.$store.commit(MUTATIONS.SET_REGION, region);
+    //   this.$store.dispatch(ACTIONS.fetchOnlineData);
+
+    // },
+
     loadLang() {
       const storageLang = StorageManager.getStringValue("lang");
 

src/constants/storeConstants.ts

@@ -8,6 +8,7 @@ export const MUTATIONS = {
     SET_SCENERY_DATA: "SET_SCENERY_DATA",
     SET_SCENERY_DATA_STATUS: "SET_SCENERY_DATA_STATUS",
     SET_DATA_CONNECTION_STATUS: "SET_DATA_CONNECTION_STATUS",
+    SET_REGION: "SET_REGION",
     UPDATE_STATIONS: "UPDATE_STATIONS",
     UPDATE_TRAINS: "UPDATE_TRAINS",
     UPDATE_TIMETABLES: "UPDATE_TIMETABLES"
@@ -19,5 +20,6 @@ export const GETTERS = {
     allData: "allData",
     timetableDataStatus: "timetableDataStatus",
     sceneryDataStatus: "sceneryDataStatus", 
-    dataStatus: "dataStatus"
+    dataStatus: "dataStatus",
+    currentRegion: "currentRegion"
 }

src/store/index.ts

@@ -24,11 +24,11 @@ import { DataStatus } from "@/scripts/enums/DataStatus";
 import { getLocoURL, getStatusID, getStatusTimestamp, getTimestamp, getTrainStopStatus, parseSpawns, timestampToString } from "@/scripts/utils/storeUtils";
 import { URLs } from '@/scripts/utils/apiURLs';
 
-
 export interface State {
   stationList: Station[],
   trainList: Train[],
-
+  
+  region: string;
   trainCount: number;
   stationCount: number;
 
@@ -45,6 +45,8 @@ export const store = createStore<State>({
   state: () => ({
     stationList: [],
     trainList: [],
+
+    region: "eu",
     
     trainCount: 0,
     stationCount: 0,
@@ -71,7 +73,8 @@ export const store = createStore<State>({
     }),
     timetableDataStatus: (state): DataStatus => state.timetableDataStatus,
     sceneryDataStatus: (state): DataStatus => state.sceneryDataStatus,
-    dataStatus: (state): DataStatus => state.dataConnectionStatus
+    dataStatus: (state): DataStatus => state.dataConnectionStatus,
+    currentRegion: (state): string => state.region
   },
 
   actions: {
@@ -84,7 +87,6 @@ export const store = createStore<State>({
       dispatch(ACTIONS.fetchOnlineData);
 
       setInterval(() => dispatch(ACTIONS.fetchOnlineData), 30000);
-      
     },
 
     async fetchOnlineData({ commit, dispatch }) {      
@@ -95,15 +97,15 @@ export const store = createStore<State>({
           const onlineDispatchersData: string[][] = await response[2].data.message;
 
           const updatedStationList = onlineStationsData.reduce((acc, station) => {
-            if (station.region !== "eu" || !station.isOnline) return acc;
+            if (station.region !== this.state.region || !station.isOnline) return acc;
 
-            const stationStatus = onlineDispatchersData.find((status: string[]) => status[0] == station.stationHash && status[1] == "eu");
+            const stationStatus = onlineDispatchersData.find((status: string[]) => status[0] == station.stationHash && status[1] == this.state.region);
 
             const statusTimestamp = getStatusTimestamp(stationStatus);
             const statusID = getStatusID(stationStatus);
 
             const stationTrains = onlineTrainsData
-              .filter(train => train.region === "eu" && train.isOnline && train.station.stationName === station.stationName)
+              .filter(train => train.region === this.state.region && train.isOnline && train.station.stationName === station.stationName)
               .map(train => ({ driverName: train.driverName, trainNo: train.trainNo }));
 
             acc.push({
@@ -128,7 +130,7 @@ export const store = createStore<State>({
 
           const updatedTrainList = await Promise.all(
             onlineTrainsData
-              .filter(train => train.region === "eu")
+              .filter(train => train.region === this.state.region)
               .map(async train => {
                 const locoType = train.dataCon.split(";") ? train.dataCon.split(";")[0] : train.dataCon;
 
@@ -292,6 +294,10 @@ export const store = createStore<State>({
       state.dataConnectionStatus = status;
     },
 
+    SET_REGION(state, region: string) {
+      state.region = region;
+    },
+
     UPDATE_STATIONS(state, updatedStationList: any[]) {
       state.stationList = state.stationList.reduce((acc: Station[], station) => {
         const onlineStationData = updatedStationList.find(updatedStation => updatedStation.stationName === station.stationName);

src/views/StationsView.vue

@@ -11,6 +11,14 @@
             @resetFilters="resetFilters"
           />
 
+          <!-- <action-button>PL1</action-button> -->
+
+          <!-- <select-box
+            style="margin-left: 0.5em"
+            :itemList="regions"
+            @selected="selectRegion"
+          ></select-box> -->
+
           <div class="paypal-link">
             <a target="_blank" href="https://paypal.me/spythere">
               <img
@@ -43,19 +51,19 @@ import inputData from "@/data/options.json";
 
 import StationTable from "@/components/StationsView/StationTable.vue";
 import FilterCard from "@/components/StationsView/StationFilterCard.vue";
-import ActionButton from "@/components/Global/ActionButton.vue";
+import SelectBox from "@/components/Global/SelectBox.vue";
 
 import { StoreData } from "@/scripts/interfaces/StoreData";
 import { DataStatus } from "@/scripts/enums/DataStatus";
 import { computed, ComputedRef, defineComponent, reactive } from "vue";
 import { useStore } from "@/store";
-import { GETTERS } from "@/constants/storeConstants";
+import { ACTIONS, GETTERS, MUTATIONS } from "@/constants/storeConstants";
 
 export default defineComponent({
   components: {
     StationTable,
     FilterCard,
-    ActionButton,
+    SelectBox,
   },
   data: () => ({
     trainIcon: require("@/assets/icon-train.svg"),
@@ -65,7 +73,19 @@ export default defineComponent({
     modalHidden: true,
     STORAGE_KEY: "options_saved",
     inputs: inputData,
+
+    regions: [
+      {
+        id: "eu",
+        value: "PL1",
+      },
+      {
+        id: "ru",
+        value: "ENG",
+      },
+    ],
   }),
+
   setup() {
     const store = useStore();
     const filterManager = reactive(new StationFilterManager());
@@ -148,6 +168,10 @@ export default defineComponent({
     setFocusedStation(name: string) {
       this.focusedStationName = this.focusedStationName == name ? "" : name;
     },
+    selectRegion(region: { id: string; value: string }) {
+      this.$store.commit(MUTATIONS.SET_REGION, region.id);
+      this.$store.dispatch(ACTIONS.fetchOnlineData);
+    },
   },
 });
 </script>
@@ -199,6 +223,7 @@ export default defineComponent({
 
 .options-bar {
   display: flex;
+  align-items: center;
 
   margin-bottom: 0.5em;
 }