Zmiana instancji store'a na Pinia

2026-05-03 13:28:11 +00:00 · 2022-06-12 18:00:06 +02:00
parent 3a50609488
commit dbad518d55
19 changed files with 588 additions and 629 deletions
@@ -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: ComputedRef<{ id: string; value: string }> = computed(
-      () => store.getters[GETTERS.currentRegion]
-    );
+    const currentRegion = store.region;

    // 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;
@@ -154,25 +154,20 @@
      </svg>

      <transition name="tooltip-anim">
-        <div v-html="$t(indicator.message)" class="indicator-tooltip" v-if="tooltipActive">
-          
-        </div>
+        <div v-html="$t(indicator.message)" class="indicator-tooltip" v-if="tooltipActive"></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 { State } from '@/store/types';
-import { computed, defineComponent } from 'vue';
-import { Store } from 'vuex';
+import { useStore } from '@/store/store';
+import { StoreState } from '@/store/storeTypes';
+import { computed, defineComponent, watch } from 'vue';

 export default defineComponent({
-
  data() {
    return {
      icons: {
@@ -197,46 +192,50 @@ export default defineComponent({
  },

  setup() {
-      const store: Store<State> = useStore();
+    const store = useStore();

-      return {
-        dataStatus: computed(() => store.getters[GETTERS.allData] as StoreData)
-      }
+    return {
+      dataStatus: store.dataStatuses,
+    };
  },

  watch: {
-    dataStatus(storeData: StoreData) {
-      const sceneryDataStatus = storeData.sceneryDataStatus;
-      const trainsDataStatus = storeData.trainsDataStatus;
-      const dispatcherDataStatus = storeData.dispatcherDataStatus;            
+    dataStatus: {
+      deep: true,

-      if (sceneryDataStatus == DataStatus.Error) {
-        this.setSignalStatus(sceneryDataStatus);
-        this.indicator.status = sceneryDataStatus;
-        this.indicator.message = 'data-status.S1a-sceneries';
-        return;
-      }
+      handler(statuses: StoreState['dataStatuses']) {
+        const sceneryDataStatus = statuses.sceneries;
+        const trainsDataStatus = statuses.trains;
+        const dispatcherDataStatus = statuses.dispatchers;

-      if (trainsDataStatus == DataStatus.Warning) {
-        this.setSignalStatus(trainsDataStatus);
-        this.indicator.status = trainsDataStatus;
-        this.indicator.message = 'data-status.S5-trains';
-        return;
-      }
+        if (sceneryDataStatus == DataStatus.Error) {
+          this.setSignalStatus(sceneryDataStatus);
+          this.indicator.status = sceneryDataStatus;
+          this.indicator.message = 'data-status.S1a-sceneries';
+          return;
+        }

-      if (dispatcherDataStatus == DataStatus.Warning) {
-        this.setSignalStatus(dispatcherDataStatus);
-        this.indicator.status = dispatcherDataStatus;
-        this.indicator.message = 'data-status.S5-dispatchers';
-        return;
-      }
+        if (trainsDataStatus == DataStatus.Warning) {
+          this.setSignalStatus(trainsDataStatus);
+          this.indicator.status = trainsDataStatus;
+          this.indicator.message = 'data-status.S5-trains';
+          return;
+        }

-      if (sceneryDataStatus == DataStatus.Loaded) {
-        this.setSignalStatus(DataStatus.Loaded);
-  
-        this.indicator.status = DataStatus.Loaded;
-        this.indicator.message = 'data-status.S2';
-      }
+        if (dispatcherDataStatus == DataStatus.Warning) {
+          this.setSignalStatus(dispatcherDataStatus);
+          this.indicator.status = dispatcherDataStatus;
+          this.indicator.message = 'data-status.S5-dispatchers';
+          return;
+        }
+
+        if (sceneryDataStatus == DataStatus.Loaded) {
+          this.setSignalStatus(DataStatus.Loaded);
+
+          this.indicator.status = DataStatus.Loaded;
+          this.indicator.message = 'data-status.S2';
+        }
+      },
    },
  },

@@ -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
@@ -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();
    },

@@ -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>
@@ -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();

@@ -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"
-}
@@ -1,13 +1,12 @@
-import { createApp, Directive, ref } from 'vue'
-import App from './App.vue'
-import router from './router'
-import { store, key } from './store'
+import { createApp, Directive, ref } from 'vue';
+import App from './App.vue';
+import router from './router';

 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))
-  .use(store, key)
+  .provide('isFilterCardVisible', ref(false))
+  .use(createPinia())
  .use(router)
  .use(i18n)
  .directive('click-outside', clickOutsideDirective)
-  .mount('#app')
+  .mount('#app');
@@ -1,4 +1,4 @@
-import { Availability } from "@/store/types";
+import { Availability } from "@/store/storeTypes";
 import ScheduledTrain from "./ScheduledTrain";
 import StationRoutes from "./StationRoutes";

@@ -1,13 +1,13 @@
-import { DataStatus } from "../enums/DataStatus";
-import Station from "./Station";
-import Train from "./Train";
+import { DataStatus } from '../enums/DataStatus';
+import Station from './Station';
+import Train from './Train';

 export interface StoreData {
  stationList: Station[];
  trainList: Train[];
-
+  dispatcherCount: number;

  sceneryDataStatus: DataStatus;
  dispatcherDataStatus: DataStatus;
-  trainsDataStatus: DataStatus;  
+  trainsDataStatus: DataStatus;
 }
@@ -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);
-}
@@ -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);
+    },
+  },
+});
@@ -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;
+}
@@ -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;
-}
@@ -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(
-        (station) => station.name === route.query.station?.toString().replace(/_/g, ' ')
-      );
+      return store.stationList.find((station) => station.name === route.query.station?.toString().replace(/_/g, ' '));
    });

    provide('savedSceneryHistory', savedSceneryHistory);
@@ -98,8 +94,7 @@ export default defineComponent({
    // });

    return {
-      data,
-      currentRegion: computed(() => store.getters[GETTERS.currentRegion]),
+      currentRegion: store.region,
      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';

@@ -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 { GETTERS } from '@/constants/storeConstants';
+import { useStore } from '@/store/store';

 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,
@@ -111,7 +106,7 @@ export default defineComponent({
  methods: {
    toggleCardsState(name: string): void {
      if (name == 'filter') {
-        this.filterCardOpen = !this.filterCardOpen;        
+        this.filterCardOpen = !this.filterCardOpen;
      }
    },
    changeSorter(index: number) {
@@ -187,7 +182,6 @@ export default defineComponent({
  margin-bottom: 0.5em;
 }

-
@include smallScreen {
  .options-bar {
    font-size: 1.1em;
@@ -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 { GETTERS } from '@/constants/storeConstants';
+import { useStore } from '@/store/store';

 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(
-        trainList.value,
-        searchedTrain.value,
-        searchedDriver.value,
-        sorterActive.value,
-        filterList
-      );
+      return filteredTrainList(trainList, 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;