Dodanie możliwości zmiany serwerów gry

src/App.scss

@@ -124,6 +124,7 @@
 .info_counter {
   display: flex;
   align-items: center;
+  
   color: $accentCol;
 
   span {
@@ -133,6 +134,10 @@
   img {
     width: 1.35em;
   }
+
+  & > .region {
+    color: paleturquoise;
+  }
 }
 
 // FOOTER

src/App.vue

@@ -39,7 +39,10 @@
 
           <span class="header_info">
             <Clock />
+
             <div class="info_counter">
+              <span class="region">{{ currentRegion.value }}</span>
+
               <img src="@/assets/icon-dispatcher.svg" alt="icon dispatcher" />
               <span>{{ data.activeStationCount }}</span>
               <span>{{ data.activeTrainCount }}</span>
@@ -104,7 +107,7 @@ export default defineComponent({
       () => store.getters[GETTERS.allData]
     );
 
-    const currentRegion: ComputedRef<string> = computed(
+    const currentRegion: ComputedRef<{ id: string; value: string }> = computed(
       () => store.getters[GETTERS.currentRegion]
     );
 
@@ -154,12 +157,6 @@ 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/components/Global/SelectBox.vue

@@ -186,7 +186,7 @@ button.selected {
 
   height: 100%;
 
-  min-width: 10em;
+  min-width: 9em;
 
   text-align: center;
 }

src/components/StationsView/StationFilterCard.vue

@@ -13,6 +13,29 @@
 
         <div class="card_title flex">{{ $t("filters.title") }}</div>
 
+        <section class="card_regions">
+          <span
+            v-for="region in inputs.regions"
+            :key="region.id"
+            :class="`region-${region.id}`"
+          >
+            <label>
+              <input
+                type="radio"
+                name="region"
+                :id="region.id"
+                :value="region"
+                v-model="currentRegion"
+                @change="handleChangeRegion"
+              />
+
+              <span :class="{ checked: currentRegion.id === region.id }">
+                {{ region.value }}
+              </span>
+            </label>
+          </span>
+        </section>
+
         <section class="card_options">
           <filter-option
             v-for="(option, i) in inputs.options"
@@ -54,14 +77,6 @@
               defaultValue: true,
             }"
           />
-          <!-- <div class="option">
-        <label>
-          <input type="checkbox" v-model="saveOptions" @change="saveFilters" />
-          <span class="save" :class="{ checked: saveOptions }">
-            {{ $t("filters.save") }}
-          </span>
-        </label>
-      </div> -->
         </section>
 
         <section class="card_actions flex">
@@ -78,10 +93,12 @@
 </template>
 
 <script lang="ts">
+import { ACTIONS, GETTERS, MUTATIONS } from "@/constants/storeConstants";
 import inputData from "@/data/options.json";
 
 import StorageManager from "@/scripts/managers/storageManager";
-import { defineComponent } from "@vue/runtime-core";
+import { useStore } from "@/store";
+import { computed, ComputedRef, defineComponent } from "@vue/runtime-core";
 import ActionButton from "../Global/ActionButton.vue";
 import FilterOption from "./FilterOption.vue";
 
@@ -96,10 +113,14 @@ export default defineComponent({
     saveOptions: false,
     STORAGE_KEY: "options_saved",
     isVisible: false,
+
+    currentRegion: { id: "", value: "" },
   }),
 
   mounted() {
     this.saveOptions = StorageManager.isRegistered(this.STORAGE_KEY);
+
+    this.currentRegion = this.$store.getters[GETTERS.currentRegion];
   },
 
   methods: {
@@ -120,10 +141,16 @@ export default defineComponent({
         name: target.name,
         value: target.value,
       });
+
       if (this.saveOptions)
         StorageManager.setStringValue(target.name, target.value);
     },
 
+    handleChangeRegion() {
+      this.$store.commit(MUTATIONS.SET_REGION, this.currentRegion);
+      this.$store.dispatch(ACTIONS.fetchOnlineData);
+    },
+
     invertFilters() {
       this.inputs.options.forEach((option) => {
         option.value = !option.value;
@@ -221,6 +248,28 @@ export default defineComponent({
     }
   }
 
+  &_regions {
+    display: flex;
+    justify-content: center;
+
+    label > input {
+      display: none;
+    }
+
+    label > span {
+      padding: 0.25em 0.5em;
+      margin: 0 0.25em;
+
+      cursor: pointer;
+
+      background-color: gray;
+
+      &.checked {
+        background-color: seagreen;
+      }
+    }
+  }
+
   &_modes {
     display: flex;
     justify-content: center;

src/components/StationsView/StationTable.vue

@@ -213,11 +213,11 @@
       </table>
     </div>
 
-    <div class="no-stations" v-if="stations.length == 0 && isDataLoaded">
+    <div class="no-stations" v-if="isDataLoaded && stations.length == 0">
       {{ $t("sceneries.no-stations") }}
     </div>
 
-    <div class="no-stations" v-else-if="!isDataLoaded">
+    <div class="no-stations" v-if="!isDataLoaded">
       {{ $t("app.loading") }}
     </div>
   </section>

src/data/options.json

@@ -195,5 +195,25 @@
     "section": "mode",
     "value": true,
     "defaultValue": true
+  }],
+  "regions": [{
+    "id": "eu",
+    "value": "PL1"
+  },
+  {
+    "id": "eu2",
+    "value": "PL2"
+  },
+  {
+    "id": "de",
+    "value": "DE"
+  },
+  {
+    "id": "cze",
+    "value": "CZE"
+  },
+  {
+    "id": "ru",
+    "value": "ENG"
   }]
 }

src/store/index.ts

@@ -28,7 +28,7 @@ export interface State {
   stationList: Station[],
   trainList: Train[],
   
-  region: string;
+  region: { id: string; value: string };
   trainCount: number;
   stationCount: number;
 
@@ -46,7 +46,7 @@ export const store = createStore<State>({
     stationList: [],
     trainList: [],
 
-    region: "eu",
+    region: { id: "eu", value: "PL1" },
     
     trainCount: 0,
     stationCount: 0,
@@ -74,7 +74,7 @@ export const store = createStore<State>({
     timetableDataStatus: (state): DataStatus => state.timetableDataStatus,
     sceneryDataStatus: (state): DataStatus => state.sceneryDataStatus,
     dataStatus: (state): DataStatus => state.dataConnectionStatus,
-    currentRegion: (state): string => state.region
+    currentRegion: (state): { id: string; value: string } => state.region
   },  
 
   actions: {
@@ -90,6 +90,8 @@ export const store = createStore<State>({
     },
 
     async fetchOnlineData({ commit, dispatch }) {
+      // commit(MUTATIONS.SET_DATA_CONNECTION_STATUS, DataStatus.Loading);
+
       Promise.all([axios.get(URLs.stations), axios.get(URLs.trains), axios.get(URLs.dispatchers)])
         .then(async response => {
           const onlineStationsData: StationAPIData[] = response[0].data.message;
@@ -97,15 +99,15 @@ export const store = createStore<State>({
           const onlineDispatchersData: string[][] = await response[2].data.message;
 
           const updatedStationList = onlineStationsData.reduce((acc, station) => {
-            if (station.region !== this.state.region || !station.isOnline) return acc;
+            if (station.region !== this.state.region.id || !station.isOnline) return acc;
 
-            const stationStatus = onlineDispatchersData.find((status: string[]) => status[0] == station.stationHash && status[1] == this.state.region);
+            const stationStatus = onlineDispatchersData.find((status: string[]) => status[0] == station.stationHash && status[1] == this.state.region.id);
 
             const statusTimestamp = getStatusTimestamp(stationStatus);
             const statusID = getStatusID(stationStatus);
 
             const stationTrains = onlineTrainsData
-              .filter(train => train.region === this.state.region && train.isOnline && train.station.stationName === station.stationName)
+              .filter(train => train.region === this.state.region.id && train.isOnline && train.station.stationName === station.stationName)
               .map(train => ({ driverName: train.driverName, trainNo: train.trainNo }));
 
             acc.push({
@@ -130,7 +132,7 @@ export const store = createStore<State>({
 
           const updatedTrainList = await Promise.all(
             onlineTrainsData
-              .filter(train => train.region === this.state.region)
+              .filter(train => train.region === this.state.region.id)
               .map(async train => {
                 const locoType = train.dataCon.split(";") ? train.dataCon.split(";")[0] : train.dataCon;
 
@@ -157,6 +159,7 @@ export const store = createStore<State>({
           // Pass reduced lists to mutations
           commit(MUTATIONS.UPDATE_STATIONS, updatedStationList);
           commit(MUTATIONS.UPDATE_TRAINS, updatedTrainList);
+          commit(MUTATIONS.SET_DATA_CONNECTION_STATUS, DataStatus.Loaded);
 
           dispatch(ACTIONS.fetchTimetableData);
         })
@@ -294,7 +297,7 @@ export const store = createStore<State>({
       state.dataConnectionStatus = status;
     },
 
-    SET_REGION(state, region: string) {
+    SET_REGION(state, region: { id: string; value: string }) {
       state.region = region;
     },
 

src/views/StationsView.vue

@@ -11,14 +11,6 @@
             @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
@@ -57,7 +49,7 @@ import { StoreData } from "@/scripts/interfaces/StoreData";
 import { DataStatus } from "@/scripts/enums/DataStatus";
 import { computed, ComputedRef, defineComponent, reactive } from "vue";
 import { useStore } from "@/store";
-import { ACTIONS, GETTERS, MUTATIONS } from "@/constants/storeConstants";
+import { GETTERS } from "@/constants/storeConstants";
 
 export default defineComponent({
   components: {
@@ -168,10 +160,6 @@ 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>