chore(api): improved fetching data from api; changed to new vehicles data endpoint

api-mock/fetchEndpoints.js

@@ -19,7 +19,7 @@ async function main() {
   if (!existsSync('endpoints')) await mkdir('endpoints');
 
   Promise.all(
-    ['getActiveData', 'getDonators', 'getSceneries', 'getVehicles'].map((endpointName) =>
+    ['getActiveData', 'getDonators', 'getSceneries', 'getVehiclesData'].map((endpointName) =>
       fetchJSONEndpointData(
         `https://stacjownik.spythere.eu/api/${endpointName}`,
         `${endpointName}.json`

api-mock/index.js

@@ -15,8 +15,8 @@ app.get('/api/getSceneries', (_, res) => {
   res.sendFile(path.join(cwd(), 'endpoints', 'getSceneries.json'));
 });
 
-app.get('/api/getVehicles', (_, res) => {
-  res.sendFile(path.join(cwd(), 'endpoints', 'getVehicles.json'));
+app.get('/api/getVehiclesData', (_, res) => {
+  res.sendFile(path.join(cwd(), 'endpoints', 'getVehiclesData.json'));
 });
 
 app.get('/api/getDonators', (_, res) => {

src/components/Timetable/TimetableContainer.vue

@@ -8,13 +8,30 @@
     <Minimize2Icon :size="22" />
   </button>
 
-  <!-- Timetable render based on current view mode -->
-  <CurrentTimetableView v-if="globalStore.currentTimetableData != null" />
-
   <!-- If there is no timetable chosen -->
-  <div class="overflow-auto text-center font-bold text-zinc-400 p-1 min-h-full" v-else>
+  <div
+    class="overflow-auto text-center font-bold text-zinc-400 p-2 min-h-full"
+    v-if="globalStore.currentTimetableData == null"
+  >
     <component :is="viewModes[globalStore.viewMode]" />
   </div>
+
+  <div
+    class="overflow-auto text-center font-bold text-white p-2 min-h-full"
+    v-else-if="apiStore.apiDataStatus == DataStatus.LOADING"
+  >
+    Pobieranie danych...
+  </div>
+
+  <div
+    class="overflow-auto text-center font-bold text-red-500 p-2 min-h-full"
+    v-else-if="apiStore.apiDataStatus == DataStatus.ERROR"
+  >
+    Ups! Coś poszło nie tak przy pobieraniu danych! :/
+  </div>
+
+  <!-- Timetable render based on current view mode -->
+  <CurrentTimetableView v-else />
 </template>
 
 <script setup lang="ts">
@@ -24,8 +41,11 @@ import JournalStorageView from '../TimetableViews/JournalStorageView.vue';
 import ActiveDataView from '../TimetableViews/ActiveDataView.vue';
 import CurrentTimetableView from '../TimetableViews/CurrentTimetableView.vue';
 import { Minimize2Icon } from 'lucide-vue-next';
+import { useApiStore } from '../../stores/api.store';
+import { DataStatus } from '../../types/api.types';
 
 const globalStore = useGlobalStore();
+const apiStore = useApiStore();
 
 const viewModes: Record<typeof globalStore.viewMode, any> = {
   active: ActiveDataView,

src/components/TimetableSearch/ActiveSearchInput.vue

@@ -5,12 +5,12 @@
     name="trains"
     id="trains-select"
     class="bg-zinc-800 p-1 rounded-md print:hidden w-full"
-    :disabled="apiStore.activeDataStatus != DataStatus.SUCCESS"
+    :disabled="apiStore.apiDataStatus != DataStatus.SUCCESS"
     aria-label="Active train select"
   >
     <option :value="null" disabled>
       {{
-        apiStore.activeDataStatus == DataStatus.LOADING
+        apiStore.apiDataStatus == DataStatus.LOADING
           ? $t('data-loading-text')
           : $t('train-select-placeholder')
       }}

src/stores/api.store.ts

@@ -42,7 +42,7 @@ export const useApiStore = defineStore('api', {
       outdatedTimerId: -1,
       isActiveDataOutdated: false,
 
-      activeDataStatus: DataStatus.LOADING,
+      apiDataStatus: DataStatus.LOADING,
       journalDataStatus: DataStatus.SUCCESS,
 
       connectionMode: 'online' as 'online' | 'offline'
@@ -53,14 +53,24 @@ export const useApiStore = defineStore('api', {
     async setupAPIData() {
       clearInterval(activeDataInterval);
 
+      try {
+        this.apiDataStatus = DataStatus.LOADING;
+
+        await Promise.all([
+          this.fetchSceneriesData(),
+          this.fetchVehiclesData(),
+          this.fetchActiveData()
+        ]);
+
+        this.apiDataStatus = DataStatus.SUCCESS;
+      } catch (error) {
+        this.apiDataStatus = DataStatus.ERROR;
+        console.log('Data fetching error: ', error);
+      }
+
       activeDataInterval = setInterval(() => {
         this.fetchActiveData();
       }, 25000);
-
-      this.fetchSceneriesData();
-      this.fetchVehiclesData();
-
-      await this.fetchActiveData();
     },
 
     async fetchActiveData() {
@@ -68,7 +78,6 @@ export const useApiStore = defineStore('api', {
         const response = await this.client.get<ActiveDataResponse>('api/getActiveData');
 
         this.activeData = response;
-        this.activeDataStatus = DataStatus.SUCCESS;
         this.isActiveDataOutdated = false;
 
         if (this.outdatedTimerId != -1) clearTimeout(this.outdatedTimerId);
@@ -77,7 +86,7 @@ export const useApiStore = defineStore('api', {
           this.isActiveDataOutdated = true;
         }, 60000);
       } catch (error) {
-        console.error(error);
+        throw error;
       }
     },
 
@@ -87,17 +96,20 @@ export const useApiStore = defineStore('api', {
 
         this.sceneryData = response;
       } catch (error) {
-        console.error(error);
+        throw error;
       }
     },
 
     async fetchVehiclesData() {
       try {
-        const response = await this.client.get<VehiclesDataResponse>('api/getVehicles');
+        const response = await this.client.get<VehiclesDataResponse>('api/getVehiclesData');
 
-        this.vehiclesData = response;
+        this.vehiclesData = response.vehicles.map((v) => ({
+          ...v,
+          group: response.vehicleGroups.find((g) => g.id == v.vehicleGroupsId)!
+        }));
       } catch (error) {
-        console.error(error);
+        throw error;
       }
     }
   }

src/types/api.types.ts

@@ -1,12 +1,15 @@
-import type { ActiveData, JournalTimetableShort, SceneryData, VehicleData } from './common.types';
+import type {
+  ActiveData,
+  JournalTimetableShort,
+  SceneryData,
+  VehicleGroup,
+  VehicleRestrictions
+} from './common.types';
 
-export type ActiveDataResponse = ActiveData;
+/***
+ * API Data Status
+ * */
 
-export type SceneriesDataResponse = SceneryData[];
-
-export type JournalTimetablesShortResponse = JournalTimetableShort[];
-
-export type VehiclesDataResponse = VehicleData[];
 
 export enum DataStatus {
   'INIT' = -1,
@@ -14,3 +17,41 @@ export enum DataStatus {
   'SUCCESS' = 1,
   'ERROR' = 2
 }
+
+/***
+ * Active Data API
+ * */
+
+export type ActiveDataResponse = ActiveData;
+
+/***
+ * Sceneries API
+ * */
+
+export type SceneriesDataResponse = SceneryData[];
+
+/***
+ * Journal API
+ * */
+
+export type JournalTimetablesShortResponse = JournalTimetableShort[];
+
+/***
+ * Vehicles API
+ * */
+
+export interface VehiclesDataResponse {
+  vehicles: VehicleDataAPI[];
+  vehicleGroups: VehicleGroupAPI[];
+}
+
+export interface VehicleDataAPI {
+  id: number;
+  name: string;
+  type: string;
+  cabinName?: string;
+  restrictions?: VehicleRestrictions;
+  vehicleGroupsId: number;
+}
+
+export interface VehicleGroupAPI extends VehicleGroup {}

src/types/common.types.ts

@@ -298,7 +298,6 @@ export interface VehicleData {
   group: VehicleGroup;
   cabinName?: string;
   restrictions?: VehicleRestrictions;
-  simulatorVersion: string;
 }
 
 export interface VehicleRestrictions {

vite.config.ts

@@ -14,8 +14,8 @@ export default defineConfig({
         cleanupOutdatedCaches: true,
         runtimeCaching: [
           {
-            urlPattern: /^https:\/\/stacjownik.spythere.eu\/api\/(getSceneries|getVehicles)/i,
-            handler: 'NetworkFirst',
+            urlPattern: /^https:\/\/stacjownik.spythere.eu\/api\/(getSceneries|getVehiclesData)/i,
+            handler: 'StaleWhileRevalidate',
             options: {
               expiration: {
                 maxAgeSeconds: 3600