chore: added api mocking

src/App.vue

@@ -238,13 +238,13 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useGlobalStore } from './stores/global.store';
 
 import sceneryCorrections from './data/corrections.json';
 import type { ActiveTrain } from './types/common.types';
 
 import { version } from '../package.json';
 import { PrinterIcon, ArrowPathIcon } from '@heroicons/vue/16/solid';
+import { useApiStore } from './stores/api.store';
 
 interface StopRow {
   pointName: string;
@@ -281,7 +281,7 @@ export default defineComponent({
   components: { PrinterIcon, ArrowPathIcon },
   data: () => ({
     selectedTrainId: '',
-    globalStore: useGlobalStore(),
+    apiStore: useApiStore(),
     selectedTrain: null as ActiveTrain | null,
 
     generatedMs: 0,
@@ -290,12 +290,12 @@ export default defineComponent({
   }),
 
   mounted() {
-    this.globalStore.setupData();
+    this.apiStore.setupAPIData();
   },
 
   methods: {
     selectTrain() {
-      if (!this.globalStore.activeData) return;
+      if (!this.apiStore.activeData) return;
 
       this.selectedTrain = this.activeTimetableTrains.find((train) => train.id == this.selectedTrainId) ?? null;
 
@@ -307,17 +307,16 @@ export default defineComponent({
     },
 
     refreshData() {
+      this.apiStore.fetchActiveData();
       this.selectTrain();
     },
   },
 
   computed: {
     activeTimetableTrains() {
-      if (!this.globalStore.activeData) return [];
+      if (!this.apiStore.activeData) return [];
 
-      return this.globalStore.activeData.trains
-        .filter((train) => train.timetable)
-        .sort((t1, t2) => t1.driverName.localeCompare(t2.driverName, 'pl-PL'));
+      return this.apiStore.activeData.trains.filter((train) => train.timetable).sort((t1, t2) => t1.driverName.localeCompare(t2.driverName, 'pl-PL'));
     },
 
     computedTimetable() {
@@ -343,7 +342,7 @@ export default defineComponent({
         const [arrivalLine, scenery, departureLine] = pathEl.split(',');
         const sceneryName = scenery.split(' ').slice(0, -1).join(' ');
 
-        const sceneryData = this.globalStore.sceneryData?.find((sc) => sc.name == sceneryName) ?? null;
+        const sceneryData = this.apiStore.sceneryData?.find((sc) => sc.name == sceneryName) ?? null;
         const arrivalLineData = arrivalLine ? sceneryData?.routesInfo.find((rt) => rt.routeName == arrivalLine) ?? null : null;
         const departureLineData = departureLine ? sceneryData?.routesInfo.find((rt) => rt.routeName == departureLine) ?? null : null;
 

src/stores/api.store.ts

@@ -0,0 +1,66 @@
+import type { AxiosInstance } from 'axios';
+import axios from 'axios';
+import { defineStore } from 'pinia';
+import type { ActiveDataResponse, SceneriesDataResponse } from '../types/api.types';
+import type { ActiveData, SceneryData } from '../types/common.types';
+
+export const useApiStore = defineStore('api', {
+  state() {
+    return {
+      client: null as AxiosInstance | null,
+      
+      activeData: null as ActiveData | null,
+      sceneryData: null as SceneryData[] | null,
+    };
+  },
+
+  actions: {
+    async setupAPIData() {
+      if (this.client != null) return;
+
+      let baseURL = 'https://stacjownik.spythere.eu';
+
+      switch (import.meta.env.VITE_API_MODE) {
+        case 'development':
+          baseURL = 'http://localhost:3001';
+          break;
+        case 'mocking':
+          baseURL = 'http://localhost:3123';
+          break;
+        default:
+          break;
+      }
+
+      this.client = axios.create({
+        baseURL,
+      });
+
+      this.fetchSceneriesData();
+      this.fetchActiveData();
+
+      setInterval(() => {
+        this.fetchActiveData();
+      }, 20000);
+    },
+
+    async fetchActiveData() {
+      try {
+        const response = (await this.client!.get<ActiveDataResponse>('/api/getActiveData')).data;
+
+        this.activeData = response;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+
+    async fetchSceneriesData() {
+      try {
+        const response = (await this.client!.get<SceneriesDataResponse>('/api/getSceneries')).data;
+
+        this.sceneryData = response;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+  },
+});

src/stores/global.store.ts

@@ -1,42 +1,7 @@
 import { defineStore } from 'pinia';
-import httpClient from '../utils/http';
-import type { ActiveDataResponse, SceneriesDataResponse } from '../types/api.types';
-import type { ActiveData, SceneryData } from '../types/common.types';
 
 export const useGlobalStore = defineStore('global', {
-  state: () => ({
-    activeData: null as ActiveData | null,
-    sceneryData: null as SceneryData[] | null,
-  }),
+  state: () => ({}),
   getters: {},
-  actions: {
-    async _fetchActiveData() {
-      try {
-        const response = (await httpClient.get<ActiveDataResponse>('/api/getActiveData')).data;
-
-        this.activeData = response;
-      } catch (error) {
-        console.error(error);
-      }
-    },
-
-    async _fetchSceneriesData() {
-      try {
-        const response = (await httpClient.get<SceneriesDataResponse>('/api/getSceneries')).data;
-
-        this.sceneryData = response;
-      } catch (error) {
-        console.error(error);
-      }
-    },
-
-    setupData() {
-      this._fetchActiveData();
-      this._fetchSceneriesData();
-      
-      setInterval(() => {
-        this._fetchActiveData();
-      }, 20000);
-    },
-  },
+  actions: {},
 });

src/utils/http.ts

@@ -1,8 +0,0 @@
-import axios from 'axios';
-
-const httpClient = axios.create({
-  baseURL: 'https://stacjownik.spythere.eu',
-  timeout: 3000,
-});
-
-export default httpClient;