Zmiana instancji store'a na Pinia

package-lock.json

@@ -12,6 +12,7 @@
         "dotenv": "^8.6.0",
         "firebase": "^9.8.1",
         "howler": "^2.2.1",
+        "pinia": "^2.0.14",
         "socket.io-client": "^4.4.1",
         "vue": "^3.2.34",
         "vue-i18n": "^9.1.6",
@@ -8462,6 +8463,56 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.14.tgz",
+      "integrity": "sha512-0nPuZR4TetT/WcLN+feMSjWJku3SQU7dBbXC6uw+R6FLQJCsg+/0pzXyD82T1FmAYe0lsx+jnEDQ1BLgkRKlxA==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.1.4",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.1.tgz",
+      "integrity": "sha512-xmkJ56koG3ptpLnpgmIzk9/4nFf4CqduSJbUM0OdPoU87NwRuZ6x49OLhjSa/fC15fV+5CbEnrxU4oyE022svg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -10581,7 +10632,7 @@
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.6.tgz",
       "integrity": "sha512-pxnwLxeb/Z5SP80JDRzVjh58KsM6jZHRAOtTpS7sXLS4ogXNKC9ANxHHZqLLeVHZN35jCtI4JdmLLbLiC1kBow==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -18003,6 +18054,23 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
+    "pinia": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.14.tgz",
+      "integrity": "sha512-0nPuZR4TetT/WcLN+feMSjWJku3SQU7dBbXC6uw+R6FLQJCsg+/0pzXyD82T1FmAYe0lsx+jnEDQ1BLgkRKlxA==",
+      "requires": {
+        "@vue/devtools-api": "^6.1.4",
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.1",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.1.tgz",
+          "integrity": "sha512-xmkJ56koG3ptpLnpgmIzk9/4nFf4CqduSJbUM0OdPoU87NwRuZ6x49OLhjSa/fC15fV+5CbEnrxU4oyE022svg==",
+          "requires": {}
+        }
+      }
+    },
     "pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -19526,7 +19594,7 @@
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.6.tgz",
       "integrity": "sha512-pxnwLxeb/Z5SP80JDRzVjh58KsM6jZHRAOtTpS7sXLS4ogXNKC9ANxHHZqLLeVHZN35jCtI4JdmLLbLiC1kBow==",
-      "dev": true
+      "devOptional": true
     },
     "unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",

package.json

@@ -13,6 +13,7 @@
     "dotenv": "^8.6.0",
     "firebase": "^9.8.1",
     "howler": "^2.2.1",
+    "pinia": "^2.0.14",
     "socket.io-client": "^4.4.1",
     "vue": "^3.2.34",
     "vue-i18n": "^9.1.6",

src/App.vue

@@ -84,12 +84,10 @@ import Clock from '@/components/App/Clock.vue';
 
 import StorageManager from '@/scripts/managers/storageManager';
 import { computed, ComputedRef, defineComponent, provide, ref } from 'vue';
-import { ACTIONS, GETTERS } from './constants/storeConstants';
-import { StoreData } from './scripts/interfaces/StoreData';
-import { useStore } from './store';
 
 import packageInfo from '.././package.json';
 import StatusIndicator from './components/App/StatusIndicator.vue';
+import { useStore } from './store/store';
 
 export default defineComponent({
   components: {
@@ -99,13 +97,9 @@ export default defineComponent({
 
   setup() {
     const store = useStore();
-    store.dispatch(ACTIONS.connectToAPI);
+    store.connectToAPI();
 
-    const data: ComputedRef<StoreData> = computed(() => store.getters[GETTERS.allData]);
+    const currentRegion = store.region;
-
-    const currentRegion: ComputedRef<{ id: string; value: string }> = computed(
-      () => store.getters[GETTERS.currentRegion]
-    );
 
     // const sceneryDataStatus = computed(() => data.value.sceneryDataStatus);
 
@@ -114,15 +108,14 @@ export default defineComponent({
     provide('isFilterCardVisible', isFilterCardVisible);
 
     return {
-      data,
       currentRegion,
       isFilterCardVisible,
 
-      dispatcherDataStatus: computed(() => data.value.dispatcherDataStatus),
+      dispatcherDataStatus: store.dataStatuses.dispatchers,
 
-      trainCount: computed(() => data.value.trainList.length),
+      trainCount: store.trainCount,
 
-      dispatcherCount: computed(() => data.value.stationList.filter((station) => station.onlineInfo).length),
+      dispatcherCount: store.stationList.filter((station) => station.onlineInfo).length,
 
       openFilterCard() {
         isFilterCardVisible.value = true;

src/components/App/StatusIndicator.vue

@@ -154,25 +154,20 @@
       </svg>
 
       <transition name="tooltip-anim">
-        <div v-html="$t(indicator.message)" class="indicator-tooltip" v-if="tooltipActive">
+        <div v-html="$t(indicator.message)" class="indicator-tooltip" v-if="tooltipActive"></div>
-          
-        </div>
       </transition>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { GETTERS } from '@/constants/storeConstants';
 import { DataStatus } from '@/scripts/enums/DataStatus';
 import { StoreData } from '@/scripts/interfaces/StoreData';
-import { useStore } from '@/store';
+import { useStore } from '@/store/store';
-import { State } from '@/store/types';
+import { StoreState } from '@/store/storeTypes';
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, watch } from 'vue';
-import { Store } from 'vuex';
 
 export default defineComponent({
-
   data() {
     return {
       icons: {
@@ -197,46 +192,50 @@ export default defineComponent({
   },
 
   setup() {
-      const store: Store<State> = useStore();
+    const store = useStore();
 
-      return {
+    return {
-        dataStatus: computed(() => store.getters[GETTERS.allData] as StoreData)
+      dataStatus: store.dataStatuses,
-      }
+    };
   },
 
   watch: {
-    dataStatus(storeData: StoreData) {
+    dataStatus: {
-      const sceneryDataStatus = storeData.sceneryDataStatus;
+      deep: true,
-      const trainsDataStatus = storeData.trainsDataStatus;
-      const dispatcherDataStatus = storeData.dispatcherDataStatus;            
 
-      if (sceneryDataStatus == DataStatus.Error) {
+      handler(statuses: StoreState['dataStatuses']) {
-        this.setSignalStatus(sceneryDataStatus);
+        const sceneryDataStatus = statuses.sceneries;
-        this.indicator.status = sceneryDataStatus;
+        const trainsDataStatus = statuses.trains;
-        this.indicator.message = 'data-status.S1a-sceneries';
+        const dispatcherDataStatus = statuses.dispatchers;
-        return;
-      }
 
-      if (trainsDataStatus == DataStatus.Warning) {
+        if (sceneryDataStatus == DataStatus.Error) {
-        this.setSignalStatus(trainsDataStatus);
+          this.setSignalStatus(sceneryDataStatus);
-        this.indicator.status = trainsDataStatus;
+          this.indicator.status = sceneryDataStatus;
-        this.indicator.message = 'data-status.S5-trains';
+          this.indicator.message = 'data-status.S1a-sceneries';
-        return;
+          return;
-      }
+        }
 
-      if (dispatcherDataStatus == DataStatus.Warning) {
+        if (trainsDataStatus == DataStatus.Warning) {
-        this.setSignalStatus(dispatcherDataStatus);
+          this.setSignalStatus(trainsDataStatus);
-        this.indicator.status = dispatcherDataStatus;
+          this.indicator.status = trainsDataStatus;
-        this.indicator.message = 'data-status.S5-dispatchers';
+          this.indicator.message = 'data-status.S5-trains';
-        return;
+          return;
-      }
+        }
 
-      if (sceneryDataStatus == DataStatus.Loaded) {
+        if (dispatcherDataStatus == DataStatus.Warning) {
-        this.setSignalStatus(DataStatus.Loaded);
+          this.setSignalStatus(dispatcherDataStatus);
+          this.indicator.status = dispatcherDataStatus;
+          this.indicator.message = 'data-status.S5-dispatchers';
+          return;
+        }
 
-        this.indicator.status = DataStatus.Loaded;
+        if (sceneryDataStatus == DataStatus.Loaded) {
-        this.indicator.message = 'data-status.S2';
+          this.setSignalStatus(DataStatus.Loaded);
-      }
+
+          this.indicator.status = DataStatus.Loaded;
+          this.indicator.message = 'data-status.S2';
+        }
+      },
     },
   },
 

src/components/SceneryView/SceneryTimetable.vue

@@ -144,12 +144,11 @@ import Station from '@/scripts/interfaces/Station';
 import SelectBox from '../Global/SelectBox.vue';
 import { computed, defineComponent, ref } from '@vue/runtime-core';
 import { useRoute } from 'vue-router';
-import { useStore } from '@/store';
-import { GETTERS } from '@/constants/storeConstants';
 import { DataStatus } from '@/scripts/enums/DataStatus';
 import { ComputedRef } from 'vue';
 import dateMixin from '@/mixins/dateMixin';
 import routerMixin from '@/mixins/routerMixin';
+import { useStore } from '@/store/store';
 
 export default defineComponent({
   components: { SelectBox },
@@ -181,7 +180,7 @@ export default defineComponent({
 
     const store = useStore();
 
-    const trainsDataStatus = computed(() => store.getters[GETTERS.trainsDataStatus]) as ComputedRef<DataStatus>;
+    const trainsDataStatus = store.dataStatuses.trains;
 
     const selectedCheckpoint = ref(
       props.station?.generalInfo?.checkpoints?.length == 0

src/components/StationsView/StationFilterCard.vue

@@ -56,7 +56,13 @@
           </section>
 
           <section class="card_authors-search">
-            <input type="text" :placeholder="$t('filters.authors-search')" name="authors" v-model="authorsInputValue" @input="handleAuthorsInput" />
+            <input
+              type="text"
+              :placeholder="$t('filters.authors-search')"
+              name="authors"
+              v-model="authorsInputValue"
+              @input="handleAuthorsInput"
+            />
           </section>
 
           <section class="card_sliders">
@@ -107,12 +113,12 @@
 <script lang="ts">
 import { defineComponent, inject } from '@vue/runtime-core';
 
-import { GETTERS, MUTATIONS } from '@/constants/storeConstants';
 import inputData from '@/data/options.json';
 
 import StorageManager from '@/scripts/managers/storageManager';
 import ActionButton from '../Global/ActionButton.vue';
 import FilterOption from './FilterOption.vue';
+import { useStore } from '@/store/store';
 
 export default defineComponent({
   components: { ActionButton, FilterOption },
@@ -135,9 +141,11 @@ export default defineComponent({
 
   setup() {
     const isVisible = inject('isFilterCardVisible');
+    const store = useStore();
 
     return {
       isVisible,
+      store,
     };
   },
 
@@ -150,7 +158,7 @@ export default defineComponent({
       this.changeNumericFilterValue('onlineFromHours', this.minimumHours);
     }
 
-    this.currentRegion = this.$store.getters[GETTERS.currentRegion];
+    this.currentRegion = this.store.region;
   },
 
   methods: {
@@ -175,8 +183,6 @@ export default defineComponent({
     },
 
     handleAuthorsInput(e: Event) {
-      // if ((e.target as HTMLInputElement).value.length < 3) return;
-
       clearTimeout(this.delayInputTimer);
 
       this.delayInputTimer = setTimeout(() => {
@@ -185,7 +191,7 @@ export default defineComponent({
     },
 
     handleChangeRegion() {
-      this.$store.commit(MUTATIONS.SET_REGION, this.currentRegion);
+      this.store.region = this.currentRegion;
       this.closeCard();
     },
 

src/components/StationsView/StationTable.vue

@@ -231,10 +231,9 @@ import returnBtnMixin from '@/mixins/returnBtnMixin';
 
 import { DataStatus } from '@/scripts/enums/DataStatus';
 import { computed, ComputedRef, defineComponent } from '@vue/runtime-core';
-import { useStore } from '@/store';
-import { GETTERS } from '@/constants/storeConstants';
 import Station from '@/scripts/interfaces/Station';
 import { StoreData } from '@/scripts/interfaces/StoreData';
+import { useStore } from '@/store/store';
 
 export default defineComponent({
   props: {
@@ -280,10 +279,8 @@ export default defineComponent({
   setup() {
     const store = useStore();
 
-    const data: ComputedRef<StoreData> = computed(() => store.getters[GETTERS.allData]);
-
     const isDataLoaded = computed(() => {
-      return data.value.sceneryDataStatus != DataStatus.Loading;
+      return store.dataStatuses.sceneries != DataStatus.Loading;
     });
 
     return {
@@ -523,5 +520,4 @@ td.station {
 
   background: #333;
 }
-
 </style>

src/components/TrainsView/TrainTable.vue

@@ -38,7 +38,6 @@
 
 <script lang="ts">
 import { computed, ComputedRef, defineComponent, inject, Ref, watchEffect } from '@vue/runtime-core';
-import { useStore } from '@/store';
 
 import defaultVehicleIconsJSON from '@/data/defaultVehicleIcons.json';
 
@@ -48,8 +47,8 @@ import TrainSchedule from '@/components/TrainsView/TrainSchedule.vue';
 import TrainInfo from '@/components/TrainsView/TrainInfo.vue';
 
 import { DataStatus } from '@/scripts/enums/DataStatus';
-import { GETTERS } from '@/constants/storeConstants';
 import returnBtnMixin from '@/mixins/returnBtnMixin';
+import { useStore } from '@/store/store';
 
 export default defineComponent({
   components: {
@@ -81,7 +80,7 @@ export default defineComponent({
   setup(props) {
     const store = useStore();
 
-    const trainsDataStatus: ComputedRef<DataStatus> = computed(() => store.getters[GETTERS.trainsDataStatus]);
+    const trainsDataStatus = store.dataStatuses.trains;
 
     const searchedTrain = inject('searchedTrain') as Ref<string>;
     const searchedDriver = inject('searchedDriver') as Ref<string>;
@@ -94,9 +93,9 @@ export default defineComponent({
       searchedTrain,
       searchedDriver,
       currentTrains,
+      trainsDataStatus,
 
       sorterActive: inject('sorterActive') as { id: string | number; dir: number },
-      trainsDataStatus: computed(() => trainsDataStatus.value),
       distanceLimitExceeded: computed(
         () => props.trains.findIndex(({ timetableData }) => timetableData && timetableData.routeDistance > 200) != -1
       ),
@@ -107,10 +106,6 @@ export default defineComponent({
     const query = this.$route.query;
 
     if (query.trainNo && query.driverName) {
-      const train = (this.$store.getters[GETTERS.trainList] as Train[]).find(
-        (train) => train.trainNo == Number(query.trainNo) && train.driverName == query.driverName!.toString()
-      );
-
       this.searchedDriver = query.driverName.toString();
       this.searchedTrain = query.trainNo.toString();
 

src/constants/storeConstants.ts

@@ -1,30 +0,0 @@
-export const ACTIONS = {
-    connectToAPI: "connectToAPI",
-    fetchOnlineData: "fetchOnlineData",
-    loadStaticStationData: "loadStaticStationData"
-}
-
-export const MUTATIONS = {
-    SET_DATA_CONNECTION_STATUS: "SET_DATA_CONNECTION_STATUS",
-    
-    SET_SCENERY_DATA: "SET_SCENERY_DATA",
-    SET_SCENERY_DATA_STATUS: "SET_SCENERY_DATA_STATUS",
-    SET_DISPATCHER_DATA_STATUS: "SET_DISPATCHER_DATA_STATUS",
-    SET_TRAINS_DATA_STATUS: "SET_TRAINS_DATA_STATUS",
-
-    SET_REGION: "SET_REGION",
-}
-
-export const GETTERS = {
-    stationList: "stationList",
-    trainList: "trainList",
-    allData: "allData",
-
-    dispatcherDataSWDRStatus: "dispatcherDataSWDRStatus",
-    swdrDataStatus: "swdrDataStatus",
-    trainsDataStatus: "trainsDataStatus",
-
-    currentRegion: "currentRegion",
-
-    webSocket: "webSocket"
-}

src/main.ts

@@ -1,13 +1,12 @@
-import { createApp, Directive, ref } from 'vue'
+import { createApp, Directive, ref } from 'vue';
-import App from './App.vue'
+import App from './App.vue';
-import router from './router'
+import router from './router';
-import { store, key } from './store'
 
 import enLang from '@/locales/en.json';
 import plLang from '@/locales/pl.json';
 
-import { createI18n } from 'vue-i18n'
+import { createI18n } from 'vue-i18n';
-
+import { createPinia } from 'pinia';
 
 const i18n = createI18n({
   locale: 'pl',
@@ -17,26 +16,24 @@ const i18n = createI18n({
     pl: plLang,
   },
   enableLegacy: false,
-})
+});
-
 
 const clickOutsideDirective: Directive = {
   mounted(el, binding) {
-
     el.clickOutsideEvent = (event: Event) => {
       if (!(el == event.target || el.contains(event.target))) {
         binding.value();
       }
     };
 
-    document.addEventListener("click", el.clickOutsideEvent);
+    document.addEventListener('click', el.clickOutsideEvent);
   },
-}
+};
 
 createApp(App)
-.provide('isFilterCardVisible', ref(false))
+  .provide('isFilterCardVisible', ref(false))
-  .use(store, key)
+  .use(createPinia())
   .use(router)
   .use(i18n)
   .directive('click-outside', clickOutsideDirective)
-  .mount('#app')
+  .mount('#app');

src/scripts/interfaces/Station.ts

@@ -1,4 +1,4 @@
-import { Availability } from "@/store/types";
+import { Availability } from "@/store/storeTypes";
 import ScheduledTrain from "./ScheduledTrain";
 import StationRoutes from "./StationRoutes";
 

src/scripts/interfaces/StoreData.ts

@@ -1,11 +1,11 @@
-import { DataStatus } from "../enums/DataStatus";
+import { DataStatus } from '../enums/DataStatus';
-import Station from "./Station";
+import Station from './Station';
-import Train from "./Train";
+import Train from './Train';
 
 export interface StoreData {
   stationList: Station[];
   trainList: Train[];
-
+  dispatcherCount: number;
 
   sceneryDataStatus: DataStatus;
   dispatcherDataStatus: DataStatus;

src/store/index.ts

@@ -1,401 +0,0 @@
-/* eslint-disable */
-
-import { InjectionKey } from 'vue';
-import { createStore, useStore as baseUseStore, Store } from 'vuex';
-
-import axios from 'axios';
-
-import Train from '@/scripts/interfaces/Train';
-
-import { StoreData } from '@/scripts/interfaces/StoreData';
-
-import { ACTIONS, MUTATIONS } from '@/constants/storeConstants';
-import { DataStatus } from '@/scripts/enums/DataStatus';
-
-import {
-  getLocoURL,
-  getScheduledTrain,
-  getStatusID,
-  getStatusTimestamp,
-  parseSpawns,
-} from '@/scripts/utils/storeUtils';
-import { URLs } from '@/scripts/utils/apiURLs';
-import ScheduledTrain from '@/scripts/interfaces/ScheduledTrain';
-import StationRoutes from '@/scripts/interfaces/StationRoutes';
-import { io, Socket } from 'socket.io-client';
-import { APIData, State, StationJSONData } from './types';
-
-const connectToDevAPI = false;
-
-export const key: InjectionKey<Store<State>> = Symbol();
-
-export const store = createStore<State>({
-  state: () => ({
-    stationList: [],
-    trainList: [],
-    // timetableList: [],
-
-    sceneryData: [],
-    lastDispatcherStatuses: [],
-
-    region: { id: 'eu', value: 'PL1' },
-
-    trainCount: 0,
-    stationCount: 0,
-
-    webSocket: undefined,
-
-    dataConnectionStatus: DataStatus.Loading,
-
-    sceneryDataStatus: DataStatus.Loading,
-    timetableDataStatus: DataStatus.Loading,
-    dispatcherDataStatus: DataStatus.Loading,
-    trainsDataStatus: DataStatus.Loading,
-
-    listenerLaunched: false,
-  }),
-
-  getters: {
-    stationList: (state) => state.stationList,
-    trainList: (state) => state.trainList,
-    allData: (state): StoreData => ({
-      stationList: state.stationList,
-      trainList: state.trainList,
-
-      sceneryDataStatus: state.sceneryDataStatus,
-      dispatcherDataStatus: state.dispatcherDataStatus,
-      trainsDataStatus: state.trainsDataStatus,
-    }),
-
-    sceneryDataStatus: (state): DataStatus => state.sceneryDataStatus,
-    trainsDataStatus: (state): DataStatus => state.trainsDataStatus,
-    dataStatus: (state): DataStatus => state.dataConnectionStatus,
-
-    currentRegion: (state): { id: string; value: string } => state.region,
-
-    webSocket: (state): Socket | undefined => state.webSocket,
-  },
-
-  actions: {
-    async connectToAPI({ state, dispatch }) {
-      await dispatch(ACTIONS.loadStaticStationData);
-
-      // Websocket config
-      const socket = io(
-        process.env.NODE_ENV !== 'production' && connectToDevAPI ? URLs.stacjownikAPIDev : URLs.stacjownikAPI,
-        {
-          transports: ['websocket', 'polling'],
-          rememberUpgrade: true,
-          reconnection: true,
-        }
-      );
-
-      socket.on('UPDATE', (data: APIData) => {
-        this.dispatch(ACTIONS.fetchOnlineData, data);
-      });
-
-      socket.emit('connection');
-      state.webSocket = socket;
-    },
-
-    async loadStaticStationData({ commit }) {
-      const sceneryData: StationJSONData = await (
-        await axios.get(`${URLs.stacjownikAPI}/api/getSceneryData?timestamp=${Math.floor(Date.now() / 1800000)}`)
-      ).data.response;
-
-      if (!sceneryData) commit(MUTATIONS.SET_SCENERY_DATA_STATUS, DataStatus.Error);
-      else commit(MUTATIONS.SET_SCENERY_DATA, sceneryData);
-    },
-
-    async fetchOnlineData({ commit }, data: APIData) {
-      if (!data.stations) {
-        commit(MUTATIONS.SET_SCENERY_DATA_STATUS, DataStatus.Error);
-        commit(MUTATIONS.SET_TRAINS_DATA_STATUS, DataStatus.Error);
-        commit(MUTATIONS.SET_DISPATCHER_DATA_STATUS, DataStatus.Error);
-
-        return;
-      }
-
-      commit(MUTATIONS.SET_SCENERY_DATA_STATUS, DataStatus.Loaded);
-      commit(MUTATIONS.SET_DISPATCHER_DATA_STATUS, !data.dispatchers ? DataStatus.Warning : DataStatus.Loaded);
-      commit(MUTATIONS.SET_TRAINS_DATA_STATUS, !data.trains ? DataStatus.Warning : DataStatus.Loaded);
-
-      // Zaktualizuj listę pociągów
-      const updatedTrainList: Train[] =
-        data.trains
-          ?.filter((train) => train.region === this.state.region.id && train.online)
-          .map((train) => {
-            const stock = train.stockString.split(';');
-            const locoType = stock ? stock[0] : train.stockString;
-
-            const timetable = train.timetable;
-
-            return {
-              trainNo: train.trainNo,
-              mass: train.mass,
-              length: train.length,
-              speed: train.speed,
-              region: train.region,
-
-              distance: train.distance,
-              signal: train.signal,
-              online: train.online,
-              driverId: train.driverId,
-              driverName: train.driverName,
-              currentStationName: train.currentStationName,
-              currentStationHash: train.currentStationHash,
-              connectedTrack: train.connectedTrack,
-              locoType,
-              locoURL: getLocoURL(locoType),
-              cars: stock.slice(1),
-
-              timetableData: timetable
-                ? {
-                    timetableId: timetable.timetableId,
-                    SKR: timetable.SKR,
-                    TWR: timetable.TWR,
-                    route: timetable.route,
-                    category: timetable.category,
-                    followingStops: timetable.stopList,
-                    routeDistance: timetable.stopList[timetable.stopList.length - 1].stopDistance,
-                    sceneries: timetable.sceneries,
-                  }
-                : undefined,
-            };
-          }) || [];
-
-      const onlineStationNames: string[] = [];
-      const prevDispatcherStatuses: State['lastDispatcherStatuses'] = [];
-
-      data.stations?.forEach((stationAPI) => {
-        if (stationAPI.region !== this.state.region.id || !stationAPI.isOnline) return;
-
-        onlineStationNames.push(stationAPI.stationName);
-
-        const stationName = stationAPI.stationName.toLowerCase();
-        const station = this.state.stationList.find((s) => s.name == stationAPI.stationName);
-
-        const prevDispatcherStatus = this.state.lastDispatcherStatuses.find(
-          (dispatcher) => dispatcher.hash === stationAPI.stationHash
-        );
-        const stationStatus = !data.dispatchers
-          ? undefined
-          : data.dispatchers.find(
-              (status: string[]) => status[0] == stationAPI.stationHash && status[1] == this.state.region.id
-            ) || -1;
-
-        const statusTimestamp =
-          prevDispatcherStatus && !data.dispatchers
-            ? prevDispatcherStatus.statusTimestamp
-            : getStatusTimestamp(stationStatus);
-        const statusID =
-          prevDispatcherStatus && !data.dispatchers ? prevDispatcherStatus.statusID : getStatusID(stationStatus);
-
-        prevDispatcherStatuses.push({
-          hash: stationAPI.stationHash,
-          statusID,
-          statusTimestamp,
-        });
-
-        const stationTrains = data.trains
-          ?.filter(
-            (train) =>
-              train?.region === this.state.region.id &&
-              train.online &&
-              train.currentStationName === stationAPI.stationName
-          )
-          .map((train) => ({ driverName: train.driverName, driverId: train.driverId, trainNo: train.trainNo }));
-
-        station?.generalInfo?.checkpoints.forEach((cp) => (cp.scheduledTrains.length = 0));
-
-        const scheduledTrains: ScheduledTrain[] = updatedTrainList.reduce((acc: ScheduledTrain[], train) => {
-          if (!train.timetableData) return acc;
-
-          const timetable = train.timetableData;
-          if (!timetable.sceneries.includes(stationAPI.stationHash)) return acc;
-
-          const stopInfoIndex = timetable.followingStops.findIndex((stop) => {
-            const stopName = stop.stopNameRAW.toLowerCase();
-
-            // if (stop.stopName == "ARKADIA ZDRÓJ" && station.name == "Arkadia Zdrój 2019" && stop.pointId != "1583014379097") return false;
-            // if (stop.stopName == "ARKADIA ZDRÓJ" && station.name == "Arkadia Zdrój 2012" && stop.pointId != "1519258642187") return false;
-
-            if (stationName === stopName) return true;
-            if (stopName.includes(stationName) && !stop.stopName.includes('po.') && !stop.stopName.includes('podg.'))
-              return true;
-            if (stationName.includes(stopName) && !stop.stopName.includes('po.') && !stop.stopName.includes('podg.'))
-              return true;
-            if (
-              stopName.includes('podg.') &&
-              stopName.split(', podg.')[0] &&
-              stationName.includes(stopName.split(', podg.')[0])
-            )
-              return true;
-
-            if (
-              station?.generalInfo &&
-              station.generalInfo.checkpoints &&
-              station.generalInfo.checkpoints.length > 0 &&
-              station.generalInfo.checkpoints.some((cp) =>
-                cp.checkpointName.toLowerCase().includes(stop.stopNameRAW.toLowerCase())
-              )
-            )
-              return true;
-
-            return false;
-          });
-
-          if (stopInfoIndex == -1) return acc;
-
-          const scheduledStopTrain = getScheduledTrain(train, stopInfoIndex, stationAPI.stationName);
-
-          if (station && station.generalInfo?.checkpoints && station.generalInfo.checkpoints.length > 0) {
-            for (const checkpoint of station.generalInfo.checkpoints) {
-              const index = timetable.followingStops.findIndex(
-                (stop) => stop.stopNameRAW.toLowerCase() == checkpoint.checkpointName.toLowerCase()
-              );
-
-              if (index == -1) continue;
-
-              const scheduledCheckpointTrain = getScheduledTrain(train, index, stationAPI.stationName);
-              checkpoint.scheduledTrains.push(scheduledCheckpointTrain);
-
-              // timetable.followingStops
-              // .filter(trainStop => trainStop.stopNameRAW.toLowerCase() === checkpoint.checkpointName.toLowerCase())
-              // .forEach((trainCheckpointStop, i) => {
-
-              // });
-            }
-          }
-
-          acc.push(scheduledStopTrain);
-          return acc;
-        }, []);
-
-        const onlineInfo = {
-          name: stationAPI.stationName,
-          hash: stationAPI.stationHash,
-          maxUsers: stationAPI.maxUsers,
-          currentUsers: stationAPI.currentUsers,
-          spawns: parseSpawns(stationAPI.spawnString),
-          dispatcherName: stationAPI.dispatcherName,
-          dispatcherRate: stationAPI.dispatcherRate,
-          dispatcherId: stationAPI.dispatcherId,
-          dispatcherExp: stationAPI.dispatcherExp,
-          dispatcherIsSupporter: stationAPI.dispatcherIsSupporter,
-          stationTrains,
-          statusTimestamp,
-          statusID,
-          scheduledTrains,
-        };
-
-        if (!station) {
-          this.state.stationList.push({
-            name: stationAPI.stationName,
-            onlineInfo,
-          });
-
-          return;
-        }
-
-        station.onlineInfo = { ...onlineInfo };
-      });
-
-      this.state.stationList
-        .filter((station) => !onlineStationNames.includes(station.name) && station.onlineInfo)
-        .forEach((offlineStation) => {
-          offlineStation.onlineInfo = undefined;
-        });
-
-      this.state.trainList = updatedTrainList;
-      this.state.trainsDataStatus = DataStatus.Loaded;
-
-      if (data.dispatchers != null) this.state.lastDispatcherStatuses = prevDispatcherStatuses;
-    },
-  },
-
-  mutations: {
-    SET_SCENERY_DATA(state, data: StationJSONData[]) {
-      state.stationList = data.map((stationData) => ({
-        name: stationData.name,
-
-        generalInfo: {
-          ...stationData,
-          authors: stationData.authors?.split(',').map(a => a.trim()),
-          routes:
-            stationData.routes
-              ?.split(';')
-              .filter((routeString) => routeString)
-              .reduce(
-                (acc, routeString) => {
-                  const specs1 = routeString.split('_')[0];
-                  const isInternal = specs1.startsWith('!');
-                  const name = isInternal ? specs1.replace('!', '') : specs1;
-
-                  const specs2 = routeString.split('_')[1].split('');
-                  const twoWay = specs2[0] == '2';
-                  const catenary = specs2[1] == 'E';
-                  const SBL = specs2[2] == 'S';
-                  const TWB = specs2[3] ? true : false;
-
-                  const propName = twoWay
-                    ? catenary
-                      ? 'twoWayCatenaryRouteNames'
-                      : 'twoWayNoCatenaryRouteNames'
-                    : catenary
-                    ? 'oneWayCatenaryRouteNames'
-                    : 'oneWayNoCatenaryRouteNames';
-
-                  acc[twoWay ? 'twoWay' : 'oneWay'].push({
-                    name,
-                    SBL,
-                    TWB,
-                    catenary,
-                    isInternal,
-                    tracks: twoWay ? 2 : 1,
-                  });
-                  if (!isInternal) acc[propName].push(name);
-
-                  if (SBL) acc['sblRouteNames'].push(name);
-
-                  return acc;
-                },
-                {
-                  oneWay: [],
-                  twoWay: [],
-                  sblRouteNames: [],
-                  oneWayCatenaryRouteNames: [],
-                  oneWayNoCatenaryRouteNames: [],
-                  twoWayCatenaryRouteNames: [],
-                  twoWayNoCatenaryRouteNames: [],
-                } as StationRoutes
-              ) || {},
-          checkpoints: stationData.checkpoints
-            ? stationData.checkpoints.split(';').map((sub) => ({ checkpointName: sub, scheduledTrains: [] }))
-            : [],
-        },
-      }));
-    },
-
-    SET_SCENERY_DATA_STATUS(state, status: DataStatus) {
-      state.sceneryDataStatus = status;
-    },
-
-    SET_DISPATCHER_DATA_STATUS(state, status: DataStatus) {
-      state.dispatcherDataStatus = status;
-    },
-
-    SET_TRAINS_DATA_STATUS(state, status: DataStatus) {
-      state.trainsDataStatus = status;
-    },
-
-    SET_REGION(state, region: { id: string; value: string }) {
-      state.region = region;
-      state.webSocket?.emit('FETCH_DATA');
-    },
-  },
-});
-
-export function useStore(): Store<State> {
-  return baseUseStore(key);
-}

src/store/store.ts

@@ -0,0 +1,357 @@
+import { DataStatus } from '@/scripts/enums/DataStatus';
+import StationAPIData from '@/scripts/interfaces/api/StationAPIData';
+import TrainAPIData from '@/scripts/interfaces/api/TrainAPIData';
+import ScheduledTrain from '@/scripts/interfaces/ScheduledTrain';
+import Station from '@/scripts/interfaces/Station';
+import StationRoutes from '@/scripts/interfaces/StationRoutes';
+import { StoreData } from '@/scripts/interfaces/StoreData';
+import Train from '@/scripts/interfaces/Train';
+import { URLs } from '@/scripts/utils/apiURLs';
+import {
+  getLocoURL,
+  getScheduledTrain,
+  getStatusID,
+  getStatusTimestamp,
+  parseSpawns,
+} from '@/scripts/utils/storeUtils';
+import axios from 'axios';
+import { defineStore } from 'pinia';
+import { io } from 'socket.io-client';
+import { APIData, StationJSONData, StoreState } from './storeTypes';
+
+export const useStore = defineStore('store', {
+  state: () =>
+    ({
+      stationList: [],
+      trainList: [],
+
+      sceneryData: [],
+      lastDispatcherStatuses: [],
+
+      region: { id: 'eu', value: 'PL1' },
+
+      trainCount: 0,
+      stationCount: 0,
+
+      webSocket: undefined,
+
+      dataStatuses: {
+        connection: DataStatus.Loading,
+        sceneries: DataStatus.Loading,
+        timetables: DataStatus.Loading,
+        dispatchers: DataStatus.Loading,
+        trains: DataStatus.Loading,
+      },
+
+      listenerLaunched: false,
+    } as StoreState),
+
+  actions: {
+    setTrainsOnlineData(trains?: TrainAPIData[]) {
+      if (!trains) return [];
+
+      this.trainList = trains
+        .filter((train) => train.region === this.region.id && train.online)
+        .map((train) => {
+          const stock = train.stockString.split(';');
+          const locoType = stock ? stock[0] : train.stockString;
+
+          const timetable = train.timetable;
+
+          return {
+            trainNo: train.trainNo,
+            mass: train.mass,
+            length: train.length,
+            speed: train.speed,
+            region: train.region,
+
+            distance: train.distance,
+            signal: train.signal,
+            online: train.online,
+            driverId: train.driverId,
+            driverName: train.driverName,
+            currentStationName: train.currentStationName,
+            currentStationHash: train.currentStationHash,
+            connectedTrack: train.connectedTrack,
+            locoType,
+            locoURL: getLocoURL(locoType),
+            cars: stock.slice(1),
+
+            timetableData: timetable
+              ? {
+                  timetableId: timetable.timetableId,
+                  SKR: timetable.SKR,
+                  TWR: timetable.TWR,
+                  route: timetable.route,
+                  category: timetable.category,
+                  followingStops: timetable.stopList,
+                  routeDistance: timetable.stopList[timetable.stopList.length - 1].stopDistance,
+                  sceneries: timetable.sceneries,
+                }
+              : undefined,
+          };
+        }) as Train[];
+    },
+
+    getDispatcherStatus(dispatchers: any[][] | undefined, stationAPIData: StationAPIData) {
+      const prevDispatcherStatus = this.lastDispatcherStatuses.find(
+        (dispatcher) => dispatcher.hash === stationAPIData.stationHash
+      );
+
+      const stationStatus = !dispatchers
+        ? undefined
+        : dispatchers.find(
+            (status: string[]) => status[0] == stationAPIData.stationHash && status[1] == this.region.id
+          ) || -1;
+
+      const statusTimestamp =
+        prevDispatcherStatus && !dispatchers ? prevDispatcherStatus.statusTimestamp : getStatusTimestamp(stationStatus);
+      const statusID =
+        prevDispatcherStatus && !dispatchers ? prevDispatcherStatus.statusID : getStatusID(stationStatus);
+
+      return {
+        hash: stationAPIData.stationHash,
+        statusID,
+        statusTimestamp,
+      };
+    },
+
+    getScheduledTrains(stationGeneralInfo: Station['generalInfo'], stationAPIData: StationAPIData) {
+      const stationName = stationAPIData.stationName.toLowerCase();
+
+      stationGeneralInfo?.checkpoints.forEach((cp) => (cp.scheduledTrains.length = 0));
+
+      return this.trainList.reduce((acc: ScheduledTrain[], train) => {
+        if (!train.timetableData) return acc;
+
+        const timetable = train.timetableData;
+        if (!timetable.sceneries.includes(stationAPIData.stationHash)) return acc;
+
+        const stopInfoIndex = timetable.followingStops.findIndex((stop) => {
+          const stopName = stop.stopNameRAW.toLowerCase();
+
+          if (stationName === stopName) return true;
+          if (stopName.includes(stationName) && !stop.stopName.includes('po.') && !stop.stopName.includes('podg.'))
+            return true;
+
+          if (stationName.includes(stopName) && !stop.stopName.includes('po.') && !stop.stopName.includes('podg.'))
+            return true;
+
+          if (
+            stopName.includes('podg.') &&
+            stopName.split(', podg.')[0] &&
+            stationName.includes(stopName.split(', podg.')[0])
+          )
+            return true;
+
+          if (
+            stationGeneralInfo &&
+            stationGeneralInfo.checkpoints &&
+            stationGeneralInfo.checkpoints.length > 0 &&
+            stationGeneralInfo.checkpoints.some((cp) =>
+              cp.checkpointName.toLowerCase().includes(stop.stopNameRAW.toLowerCase())
+            )
+          )
+            return true;
+
+          return false;
+        });
+
+        if (stopInfoIndex == -1) return acc;
+
+        const scheduledStopTrain = getScheduledTrain(train, stopInfoIndex, stationAPIData.stationName);
+
+        if (stationGeneralInfo?.checkpoints) {
+          for (const checkpoint of stationGeneralInfo.checkpoints) {
+            const index = timetable.followingStops.findIndex(
+              (stop) => stop.stopNameRAW.toLowerCase() == checkpoint.checkpointName.toLowerCase()
+            );
+
+            if (index == -1) continue;
+
+            const scheduledCheckpointTrain = getScheduledTrain(train, index, stationAPIData.stationName);
+            checkpoint.scheduledTrains.push(scheduledCheckpointTrain);
+          }
+        }
+
+        acc.push(scheduledStopTrain);
+        return acc;
+      }, []) as ScheduledTrain[];
+    },
+
+    getStationTrains(stationAPIData: StationAPIData) {
+      return this.trainList
+        .filter(
+          (train) =>
+            train?.region === this.region.id && train.online && train.currentStationName === stationAPIData.stationName
+        )
+        .map((train) => ({ driverName: train.driverName, driverId: train.driverId, trainNo: train.trainNo }));
+    },
+
+    setStationsOnlineInfo(data: APIData) {
+      const onlineStationNames: string[] = [];
+      const prevDispatcherStatuses: StoreState['lastDispatcherStatuses'] = [];
+
+      data.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);
+        prevDispatcherStatuses.push(dispatcherStatus);
+
+        const stationTrains = this.getStationTrains(stationAPIData);
+        const scheduledTrains = this.getScheduledTrains(station?.generalInfo, stationAPIData);
+
+        const onlineInfo = {
+          name: stationAPIData.stationName,
+          hash: stationAPIData.stationHash,
+          maxUsers: stationAPIData.maxUsers,
+          currentUsers: stationAPIData.currentUsers,
+          spawns: parseSpawns(stationAPIData.spawnString),
+          dispatcherName: stationAPIData.dispatcherName,
+          dispatcherRate: stationAPIData.dispatcherRate,
+          dispatcherId: stationAPIData.dispatcherId,
+          dispatcherExp: stationAPIData.dispatcherExp,
+          dispatcherIsSupporter: stationAPIData.dispatcherIsSupporter,
+          stationTrains,
+          statusTimestamp: dispatcherStatus.statusTimestamp,
+          statusID: dispatcherStatus.statusID,
+          scheduledTrains,
+        };
+
+        if (!station) {
+          this.stationList.push({
+            name: stationAPIData.stationName,
+            onlineInfo,
+          });
+
+          return;
+        }
+
+        station.onlineInfo = { ...onlineInfo };
+
+        this.stationList
+          .filter((station) => !onlineStationNames.includes(station.name) && station.onlineInfo)
+          .forEach((offlineStation) => {
+            offlineStation.onlineInfo = undefined;
+          });
+      });
+
+      if (data.dispatchers != null) this.lastDispatcherStatuses = prevDispatcherStatuses;
+    },
+
+    async fetchStationsGeneralInfo() {
+      const sceneryData: StationJSONData[] = await (
+        await axios.get(`${URLs.stacjownikAPI}/api/getSceneryData?timestamp=${Math.floor(Date.now() / 1800000)}`)
+      ).data.response;
+
+      if (!sceneryData) {
+        this.dataStatuses.sceneries = DataStatus.Error;
+        return;
+      }
+
+      this.stationList = sceneryData.map((scenery) => ({
+        name: scenery.name,
+
+        generalInfo: {
+          ...scenery,
+          authors: scenery.authors?.split(',').map((a) => a.trim()),
+          routes:
+            scenery.routes
+              ?.split(';')
+              .filter((routeString) => routeString)
+              .reduce(
+                (acc, routeString) => {
+                  const specs1 = routeString.split('_')[0];
+                  const isInternal = specs1.startsWith('!');
+                  const name = isInternal ? specs1.replace('!', '') : specs1;
+
+                  const specs2 = routeString.split('_')[1].split('');
+                  const twoWay = specs2[0] == '2';
+                  const catenary = specs2[1] == 'E';
+                  const SBL = specs2[2] == 'S';
+                  const TWB = specs2[3] ? true : false;
+
+                  const propName = twoWay
+                    ? catenary
+                      ? 'twoWayCatenaryRouteNames'
+                      : 'twoWayNoCatenaryRouteNames'
+                    : catenary
+                    ? 'oneWayCatenaryRouteNames'
+                    : 'oneWayNoCatenaryRouteNames';
+
+                  acc[twoWay ? 'twoWay' : 'oneWay'].push({
+                    name,
+                    SBL,
+                    TWB,
+                    catenary,
+                    isInternal,
+                    tracks: twoWay ? 2 : 1,
+                  });
+                  if (!isInternal) acc[propName].push(name);
+
+                  if (SBL) acc['sblRouteNames'].push(name);
+
+                  return acc;
+                },
+                {
+                  oneWay: [],
+                  twoWay: [],
+                  sblRouteNames: [],
+                  oneWayCatenaryRouteNames: [],
+                  oneWayNoCatenaryRouteNames: [],
+                  twoWayCatenaryRouteNames: [],
+                  twoWayNoCatenaryRouteNames: [],
+                } as StationRoutes
+              ) || {},
+          checkpoints: scenery.checkpoints
+            ? scenery.checkpoints.split(';').map((sub) => ({ checkpointName: sub, scheduledTrains: [] }))
+            : [],
+        },
+      }));
+    },
+
+    connectToWebsocket() {
+      const socket = io(
+        process.env.NODE_ENV !== 'production' && process.env.DEV_API == 1 ? URLs.stacjownikAPIDev : URLs.stacjownikAPI,
+        {
+          transports: ['websocket', 'polling'],
+          rememberUpgrade: true,
+          reconnection: true,
+        }
+      );
+
+      socket.on('UPDATE', (data: APIData) => {
+        this.fetchOnlineData(data);
+      });
+
+      socket.emit('connection');
+      this.webSocket = socket;
+    },
+
+    async connectToAPI() {
+      await this.fetchStationsGeneralInfo();
+
+      this.connectToWebsocket();
+    },
+
+    async fetchOnlineData(data: APIData) {
+      if (!data.stations) {
+        this.dataStatuses.sceneries = DataStatus.Error;
+        this.dataStatuses.trains = DataStatus.Error;
+        this.dataStatuses.dispatchers = DataStatus.Error;
+
+        return;
+      }
+
+      this.dataStatuses.sceneries = DataStatus.Loaded;
+      this.dataStatuses.trains = !data.trains ? DataStatus.Warning : DataStatus.Loaded;
+      this.dataStatuses.dispatchers = !data.dispatchers ? DataStatus.Warning : DataStatus.Loaded;
+
+      this.setStationsOnlineInfo(data);
+      this.setTrainsOnlineData(data.trains);
+    },
+  },
+});

src/store/storeTypes.ts

@@ -0,0 +1,63 @@
+import { DataStatus } from '@/scripts/enums/DataStatus';
+import StationAPIData from '@/scripts/interfaces/api/StationAPIData';
+import TrainAPIData from '@/scripts/interfaces/api/TrainAPIData';
+import Station from '@/scripts/interfaces/Station';
+import Train from '@/scripts/interfaces/Train';
+import { Socket } from 'socket.io-client';
+
+export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
+
+export interface StoreState {
+  stationList: Station[];
+  trainList: Train[];
+
+  lastDispatcherStatuses: { hash: string; statusTimestamp: number; statusID: string }[];
+
+  sceneryData: any[][];
+
+  region: { id: string; value: string };
+  trainCount: number;
+  stationCount: number;
+
+  webSocket?: Socket;
+
+  dataStatuses: {
+    connection: DataStatus;
+    sceneries: DataStatus;
+    timetables: DataStatus;
+    dispatchers: DataStatus;
+    trains: DataStatus;
+  };
+
+  listenerLaunched: boolean;
+}
+
+export interface APIData {
+  stations?: StationAPIData[];
+  dispatchers?: string[][];
+  trains?: TrainAPIData[];
+
+  stationsSWDRStatus: string;
+  trainsSWDRStatus: string;
+  dispatchersSWDRStatus: string;
+}
+
+export interface StationJSONData {
+  name: string;
+  url: string;
+  lines: string;
+  project: string;
+
+  reqLevel: number;
+
+  signalType: string;
+  controlType: string;
+
+  SUP: boolean;
+
+  routes: string;
+  checkpoints: string | null;
+  authors?: string;
+
+  availability: Availability;
+}

src/store/types.ts

@@ -1,61 +0,0 @@
-import { DataStatus } from "@/scripts/enums/DataStatus";
-import StationAPIData from "@/scripts/interfaces/api/StationAPIData";
-import TrainAPIData from "@/scripts/interfaces/api/TrainAPIData";
-import Station from "@/scripts/interfaces/Station";
-import Train from "@/scripts/interfaces/Train";
-import { Socket } from "socket.io-client";
-
-export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
-
-export interface State {
-    stationList: Station[],
-    trainList: Train[],
-
-    lastDispatcherStatuses: { hash: string; statusTimestamp: number; statusID: string; }[],
-
-    sceneryData: any[][],
-
-    region: { id: string; value: string };
-    trainCount: number;
-    stationCount: number;
-
-    dataConnectionStatus: DataStatus;
-    webSocket?: Socket;
-
-    sceneryDataStatus: DataStatus;
-    timetableDataStatus: DataStatus;
-    dispatcherDataStatus: DataStatus;
-    trainsDataStatus: DataStatus;
-
-    listenerLaunched: boolean;
-}
-
-export interface APIData {
-    stations?: StationAPIData[],
-    dispatchers?: string[][],
-    trains?: TrainAPIData[],
-
-    stationsSWDRStatus: string;
-    trainsSWDRStatus: string;
-    dispatchersSWDRStatus: string;
-}
-
-export interface StationJSONData {
-    name: string;
-    url: string;
-    lines: string;
-    project: string;
-
-    reqLevel: number;
-
-    signalType: string;
-    controlType: string;
-
-    SUP: boolean;
-
-    routes: string;
-    checkpoints: string | null;
-    authors?: string;
-
-    availability: Availability;
-}

src/views/SceneryView.vue

@@ -50,13 +50,12 @@ import SceneryHeader from '@/components/SceneryView/SceneryHeader.vue';
 import ActionButton from '@/components/Global/ActionButton.vue';
 
 import { computed, ComputedRef, defineComponent, provide, reactive } from '@vue/runtime-core';
-import { useStore } from '@/store';
-import { GETTERS } from '@/constants/storeConstants';
 import { useRoute } from 'vue-router';
 
 import axios from 'axios';
 import { URLs } from '@/scripts/utils/apiURLs';
 import Station from '@/scripts/interfaces/Station';
+import { useStore } from '@/store/store';
 
 export default defineComponent({
   components: { SceneryInfo, SceneryTimetable, SceneryHistory, ActionButton, SceneryHeader },
@@ -79,16 +78,13 @@ export default defineComponent({
     const store = useStore();
 
     const savedSceneryHistory = reactive({});
-    const data: ComputedRef<StoreData> = computed(() => store.getters[GETTERS.allData]);
 
     const timetableOnly = computed(() => (route.query['timetable_only'] == '1' ? true : false));
 
     const isComponentVisible = computed(() => route.path === '/scenery');
 
     const stationInfo = computed(() => {
-      return data.value.stationList.find(
+      return store.stationList.find((station) => station.name === route.query.station?.toString().replace(/_/g, ' '));
-        (station) => station.name === route.query.station?.toString().replace(/_/g, ' ')
-      );
     });
 
     provide('savedSceneryHistory', savedSceneryHistory);
@@ -98,8 +94,7 @@ export default defineComponent({
     // });
 
     return {
-      data,
+      currentRegion: store.region,
-      currentRegion: computed(() => store.getters[GETTERS.currentRegion]),
       timetableOnly,
       isComponentVisible,
       stationInfo,
@@ -119,10 +114,6 @@ export default defineComponent({
     },
   },
 
-  async mounted() {
-    // this.stationInfo = (this.$store.getters[GETTERS.allData] as StoreData).stationList.find((station) => station.name === this.$route.query.station?.toString().replace(/_/g, ' '))
-  },
-
   async activated() {
     if (this.currentRegion.id != 'eu' && this.viewMode == 'history') this.viewMode = 'info';
 

src/views/StationsView.vue

@@ -36,10 +36,8 @@ import StationTable from '@/components/StationsView/StationTable.vue';
 import FilterCard from '@/components/StationsView/StationFilterCard.vue';
 import SelectBox from '@/components/Global/SelectBox.vue';
 
-import { StoreData } from '@/scripts/interfaces/StoreData';
 import { computed, ComputedRef, defineComponent, reactive } from 'vue';
-import { useStore } from '@/store';
+import { useStore } from '@/store/store';
-import { GETTERS } from '@/constants/storeConstants';
 
 export default defineComponent({
   components: {
@@ -73,10 +71,8 @@ export default defineComponent({
     const filterManager = reactive(new StationFilterManager());
     const focusedStationName = '';
 
-    const data: ComputedRef<StoreData> = computed(() => store.getters[GETTERS.allData]);
-
     const computedStations: ComputedRef<Station[]> = computed(() => {
-      return filterManager.getFilteredStationList(store.getters[GETTERS.stationList]);
+      return filterManager.getFilteredStationList(store.stationList);
     });
 
     const focusedStationInfo = computed(() =>
@@ -84,7 +80,6 @@ export default defineComponent({
     );
 
     return {
-      data,
       computedStations,
       filterManager,
       focusedStationName,
@@ -187,7 +182,6 @@ export default defineComponent({
   margin-bottom: 0.5em;
 }
 
-
 @include smallScreen {
   .options-bar {
     font-size: 1.1em;

src/views/TrainsView.vue

@@ -15,15 +15,14 @@
 <script lang="ts">
 import { computed, ComputedRef, defineComponent, PropType, provide, reactive, ref, TrainFilter } from 'vue';
 import { filteredTrainList } from '@/scripts/managers/trainFilterManager';
-import  { trainFilters } from "@/data/trainOptions";
+import { trainFilters } from '@/data/trainOptions';
 
 import Train from '@/scripts/interfaces/Train';
 import TrainTable from '@/components/TrainsView/TrainTable.vue';
 import TrainStats from '@/components/TrainsView/TrainStats.vue';
 import TrainOptions from '@/components/TrainsView/TrainOptions.vue';
 
-import { useStore } from '@/store';
+import { useStore } from '@/store/store';
-import { GETTERS } from '@/constants/storeConstants';
 
 export default defineComponent({
   components: {
@@ -35,13 +34,13 @@ export default defineComponent({
   props: {
     train: {
       type: String,
-      required: false
+      required: false,
     },
 
     driver: {
       type: String,
-      required: false
+      required: false,
-    }
+    },
   },
 
   data: () => ({
@@ -52,7 +51,7 @@ export default defineComponent({
   setup() {
     const store = useStore();
 
-    const trainList: ComputedRef<Train[]> = computed(() => store.getters[GETTERS.trainList]);
+    const trainList = store.trainList;
 
     const sorterActive = ref({ id: 'distance', dir: -1 });
     const filterList = reactive([...trainFilters]) as TrainFilter[];
@@ -68,16 +67,9 @@ export default defineComponent({
     provide('isTrainOptionsCardVisible', isTrainOptionsCardVisible);
 
     const computedTrains: ComputedRef<Train[]> = computed(() => {
-      return filteredTrainList(
+      return filteredTrainList(trainList, searchedTrain.value, searchedDriver.value, sorterActive.value, filterList);
-        trainList.value,
-        searchedTrain.value,
-        searchedDriver.value,
-        sorterActive.value,
-        filterList
-      );
     });
 
-
     return {
       trainList,
       computedTrains,
@@ -88,9 +80,9 @@ export default defineComponent({
   },
 
   activated() {
-    if(this.train) {
+    if (this.train) {
       this.searchedTrain = this.train;
-      this.searchedDriver = this.driver || "";
+      this.searchedDriver = this.driver || '';
     }
     // if (this.train) {
     //   this.searchedTrain = this.train;