PWA: tryb offline

src/store/stationFiltersStore.ts

@@ -3,6 +3,7 @@ import inputData from '../data/options.json';
 import Filter from '../scripts/interfaces/Filter';
 import Station from '../scripts/interfaces/Station';
 import StorageManager from '../scripts/managers/storageManager';
+import { useStore } from './store';
 
 const sortStations = (a: Station, b: Station, sorter: { index: number; dir: number }) => {
   switch (sorter.index) {
@@ -58,7 +59,7 @@ const sortStations = (a: Station, b: Station, sorter: { index: number; dir: numb
   return a.name.localeCompare(b.name);
 };
 
-const filterStations = (station: Station, filters: Filter) => {
+const filterStations = (station: Station, filters: Filter, isOffline = false) => {
   const returnMode = false;
 
   if ((station.generalInfo?.availability == 'nonPublic' || !station.generalInfo) && filters['nonPublic'])
@@ -236,6 +237,7 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
       inputs: inputData,
       filters: { ...filterInitStates },
       sorterActive: { index: 0, dir: 1 },
+      store: useStore(),
     };
   },
 
@@ -249,7 +251,7 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
 
           return station;
         })
-        .filter((station) => filterStations(station, this.filters))
+        .filter((station) => filterStations(station, this.filters, this.store.isOffline))
         .sort((a, b) => sortStations(a, b, this.sorterActive));
     },
 
@@ -303,3 +305,4 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
     },
   },
 });
+

src/store/store.ts

@@ -17,7 +17,6 @@ import {
 } from '../scripts/utils/storeUtils';
 import { APIData, StationJSONData, StoreState } from './storeTypes';
 
-
 export const useStore = defineStore('store', {
   state: () =>
     ({
@@ -35,6 +34,7 @@ export const useStore = defineStore('store', {
       stationCount: 0,
 
       webSocket: undefined,
+      isOffline: false,
 
       dispatcherStatsName: '',
       dispatcherStatsData: undefined,
@@ -57,7 +57,6 @@ export const useStore = defineStore('store', {
 
       blockScroll: false,
       listenerLaunched: false,
-
     } as StoreState),
 
   actions: {
@@ -225,6 +224,14 @@ export const useStore = defineStore('store', {
       const onlineStationNames: string[] = [];
       const prevDispatcherStatuses: StoreState['lastDispatcherStatuses'] = [];
 
+      if (this.isOffline) {
+        this.stationList.forEach((station) => {
+          station.onlineInfo = undefined;
+        });
+
+        return;
+      }
+
       this.apiData.stations?.forEach((stationAPIData) => {
         if (stationAPIData.region !== this.region.id || !stationAPIData.isOnline) return;
         const station = this.stationList.find((s) => s.name === stationAPIData.stationName);
@@ -352,12 +359,11 @@ export const useStore = defineStore('store', {
         transports: ['websocket', 'polling'],
         rememberUpgrade: true,
         reconnection: true,
-        timeout: 10000,
+        timeout: 2000,
       });
 
       socket.on('connect_error', (err) => {
         this.dataStatuses.connection = DataStatus.Error;
-        this.webSocket = undefined;
       });
 
       socket.on('UPDATE', (data: APIData) => {
@@ -368,6 +374,7 @@ export const useStore = defineStore('store', {
 
       socket.emit('FETCH_DATA', {}, (data: APIData) => {
         this.apiData = data;
+        this.dataStatuses.connection = DataStatus.Loaded;
         this.setOnlineData();
       });
 

src/store/storeTypes.ts

@@ -23,6 +23,7 @@ export interface StoreState {
   stationCount: number;
 
   webSocket?: Socket;
+  isOffline: boolean;
 
   dispatcherStatsName: string;
   dispatcherStatsData?: DispatcherStatsAPIData;