mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 05:18:11 +00:00
usprawnienia pobierania danych; statusy SWDR na semaforze
This commit is contained in:
+3
-47
@@ -47,8 +47,6 @@ import TrainModal from './components/TrainsView/TrainModal.vue';
|
||||
import StorageManager from './managers/storageManager';
|
||||
import { useApiStore } from './store/apiStore';
|
||||
import { Status } from './typings/common';
|
||||
import { Websocket } from './typings/api';
|
||||
import socket from './websocket';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
@@ -88,39 +86,7 @@ export default defineComponent({
|
||||
this.setReleaseURL();
|
||||
this.setupOfflineHandling();
|
||||
|
||||
this.apiStore.setupStaticAPIData();
|
||||
this.connectToWebsocket();
|
||||
},
|
||||
|
||||
async connectToWebsocket() {
|
||||
this.apiStore.dataStatuses.connection = Status.Data.Loading;
|
||||
|
||||
console.log('ws connecting');
|
||||
|
||||
socket.on('connect_error', (err) => {
|
||||
console.error(`WS connection error: ${err.message}`);
|
||||
|
||||
this.apiStore.dataStatuses.connection = Status.Data.Error;
|
||||
this.apiStore.websocketData = undefined;
|
||||
});
|
||||
|
||||
let timeFrom = Date.now();
|
||||
socket.on('connect', () => {
|
||||
socket.emit('CONNECTION', { version: packageInfo.version }, () => {
|
||||
console.log(`Connection time: ${Date.now() - timeFrom}ms`);
|
||||
});
|
||||
|
||||
console.log('ws connected');
|
||||
});
|
||||
|
||||
socket.on('UPDATE', (data: Websocket.Payload) => {
|
||||
console.log('ws update');
|
||||
|
||||
this.apiStore.websocketData = data;
|
||||
this.apiStore.dataStatuses.connection = Status.Data.Loaded;
|
||||
});
|
||||
|
||||
this.fetchWebsocketData();
|
||||
this.apiStore.setupAPIData();
|
||||
},
|
||||
|
||||
setupOfflineHandling() {
|
||||
@@ -135,24 +101,14 @@ export default defineComponent({
|
||||
handleOfflineMode() {
|
||||
this.store.isOffline = true;
|
||||
|
||||
this.apiStore.websocketData = undefined;
|
||||
this.apiStore.activeData = undefined;
|
||||
this.apiStore.dataStatuses.connection = Status.Data.Offline;
|
||||
},
|
||||
|
||||
handleOnlineMode() {
|
||||
this.store.isOffline = false;
|
||||
|
||||
this.apiStore.setupStaticAPIData();
|
||||
this.connectToWebsocket();
|
||||
},
|
||||
|
||||
fetchWebsocketData() {
|
||||
socket.emit('FETCH_DATA', (data: Websocket.Payload) => {
|
||||
console.log('ws fetch data');
|
||||
|
||||
this.apiStore.websocketData = data;
|
||||
this.apiStore.dataStatuses.connection = Status.Data.Loaded;
|
||||
});
|
||||
this.apiStore.setupAPIData();
|
||||
},
|
||||
|
||||
changeLang(lang: string) {
|
||||
|
||||
@@ -36,11 +36,11 @@
|
||||
<circle id="Ellipse 18" cx="15" cy="17" r="7" fill="#393838" />
|
||||
</g>
|
||||
|
||||
<g v-if="greenLight" filter="url(#filter0_d_843_28)">
|
||||
<g v-if="indicator.lights.greenLight" filter="url(#filter0_d_843_28)">
|
||||
<circle cx="15" cy="17" r="7" fill="#00FF0A" />
|
||||
</g>
|
||||
|
||||
<g v-if="greenBlinkLight" filter="url(#filter0_d_843_28)">
|
||||
<g v-if="indicator.lights.greenBlinkLight" filter="url(#filter0_d_843_28)">
|
||||
<circle cx="15" cy="17" r="7" fill="#00FF0A" />
|
||||
|
||||
<animate
|
||||
@@ -52,14 +52,14 @@
|
||||
/>
|
||||
</g>
|
||||
|
||||
<g v-if="redTopLight" filter="url(#filter1_d_843_28)">
|
||||
<g v-if="indicator.lights.redTopLight" filter="url(#filter1_d_843_28)">
|
||||
<circle cx="15" cy="36" r="7" fill="#F40000" />
|
||||
</g>
|
||||
|
||||
<g v-if="orangeLight" filter="url(#filter2_d_843_28)">
|
||||
<g v-if="indicator.lights.orangeLight" filter="url(#filter2_d_843_28)">
|
||||
<circle cx="15" cy="55" r="7" fill="#FFB800" />
|
||||
</g>
|
||||
<g v-if="redBottomLight" filter="url(#filter3_d_843_28)">
|
||||
<g v-if="indicator.lights.redBottomLight" filter="url(#filter3_d_843_28)">
|
||||
<circle cx="15" cy="74" r="7" fill="#F40000" />
|
||||
|
||||
<animate
|
||||
@@ -186,7 +186,11 @@
|
||||
</svg>
|
||||
|
||||
<transition name="tooltip-anim">
|
||||
<div v-html="$t(indicator.message)" class="indicator-tooltip" v-if="tooltipActive"></div>
|
||||
<div
|
||||
v-html="$t('data-status.' + indicator.message)"
|
||||
class="indicator-tooltip"
|
||||
v-if="tooltipActive"
|
||||
></div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
@@ -194,125 +198,120 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { useMainStore } from '../../store/mainStore';
|
||||
import { Status } from '../../typings/common';
|
||||
import { useApiStore } from '../../store/apiStore';
|
||||
import { APIDataStatus } from '../../typings/api';
|
||||
|
||||
interface Indicator {
|
||||
// status: Status.Data;
|
||||
message: string;
|
||||
|
||||
lights: {
|
||||
greenLight: boolean;
|
||||
greenBlinkLight: boolean;
|
||||
redTopLight: boolean;
|
||||
orangeLight: boolean;
|
||||
redBottomLight: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
tooltipActive: false,
|
||||
indicator: {
|
||||
offline: false,
|
||||
status: Status.Data.Loading,
|
||||
message: 'data-status.S3'
|
||||
},
|
||||
|
||||
greenLight: false,
|
||||
greenBlinkLight: false,
|
||||
redTopLight: false,
|
||||
orangeLight: false,
|
||||
redBottomLight: false
|
||||
apiStore: useApiStore()
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.setSignalStatus(Status.Data.Loading);
|
||||
},
|
||||
|
||||
setup() {
|
||||
const store = useMainStore();
|
||||
const apiStore = useApiStore();
|
||||
|
||||
return {
|
||||
dataStatus: apiStore.dataStatuses,
|
||||
store
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
dataStatus: {
|
||||
deep: true,
|
||||
|
||||
handler(statuses: any) {
|
||||
const connectionStatus = statuses.connection;
|
||||
const sceneryDataStatus = statuses.sceneries;
|
||||
const trainsDataStatus = statuses.trains;
|
||||
const dispatcherDataStatus = statuses.dispatchers;
|
||||
|
||||
if (connectionStatus == Status.Data.Offline) {
|
||||
this.setSignalStatus(Status.Data.Offline);
|
||||
this.indicator.status = Status.Data.Offline;
|
||||
this.indicator.message = 'data-status.S1-offline';
|
||||
return;
|
||||
}
|
||||
|
||||
if (connectionStatus == Status.Data.Error) {
|
||||
this.setSignalStatus(connectionStatus);
|
||||
this.indicator.status = connectionStatus;
|
||||
this.indicator.message = 'data-status.S1a-connection';
|
||||
return;
|
||||
}
|
||||
|
||||
if (sceneryDataStatus == Status.Data.Error) {
|
||||
this.setSignalStatus(sceneryDataStatus);
|
||||
this.indicator.status = sceneryDataStatus;
|
||||
this.indicator.message = 'data-status.S1a-sceneries';
|
||||
return;
|
||||
}
|
||||
|
||||
if (trainsDataStatus == Status.Data.Warning) {
|
||||
this.setSignalStatus(trainsDataStatus);
|
||||
this.indicator.status = trainsDataStatus;
|
||||
this.indicator.message = 'data-status.S5-trains';
|
||||
return;
|
||||
}
|
||||
|
||||
if (dispatcherDataStatus == Status.Data.Warning) {
|
||||
this.setSignalStatus(dispatcherDataStatus);
|
||||
this.indicator.status = dispatcherDataStatus;
|
||||
this.indicator.message = 'data-status.S5-dispatchers';
|
||||
return;
|
||||
}
|
||||
|
||||
if (sceneryDataStatus == Status.Data.Loaded) {
|
||||
this.setSignalStatus(Status.Data.Loaded);
|
||||
|
||||
this.indicator.status = Status.Data.Loaded;
|
||||
this.indicator.message = 'data-status.S2';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
setSignalStatus(status: Status.Data) {
|
||||
this.greenLight = false;
|
||||
this.greenBlinkLight = false;
|
||||
this.redTopLight = false;
|
||||
this.orangeLight = false;
|
||||
this.redBottomLight = false;
|
||||
setLights(message: string) {
|
||||
let lights = {
|
||||
greenBlinkLight: false,
|
||||
greenLight: false,
|
||||
orangeLight: false,
|
||||
redBottomLight: false,
|
||||
redTopLight: false
|
||||
};
|
||||
|
||||
if (status == Status.Data.Initialized || status == Status.Data.Offline) {
|
||||
this.redTopLight = true;
|
||||
switch (message) {
|
||||
case 'S3':
|
||||
lights.greenBlinkLight = true;
|
||||
break;
|
||||
|
||||
case 'S2':
|
||||
lights.greenLight = true;
|
||||
break;
|
||||
|
||||
case 'S1-offline':
|
||||
lights.redTopLight = true;
|
||||
break;
|
||||
|
||||
case 'S1a-connection':
|
||||
case 'S1a-sceneries':
|
||||
lights.redTopLight = true;
|
||||
lights.redBottomLight = true;
|
||||
break;
|
||||
|
||||
case 'S5-dispatchers':
|
||||
case 'S5-trains':
|
||||
lights.orangeLight = true;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
if (status == Status.Data.Loaded) {
|
||||
this.greenLight = true;
|
||||
return lights;
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
indicator(): Indicator {
|
||||
const dataStatuses = this.apiStore.dataStatuses;
|
||||
const swdrStatuses = this.apiStore.activeData?.apiStatuses;
|
||||
|
||||
let lights = {
|
||||
greenBlinkLight: false,
|
||||
greenLight: false,
|
||||
orangeLight: false,
|
||||
redBottomLight: false,
|
||||
redTopLight: false
|
||||
};
|
||||
|
||||
let message = 'S3';
|
||||
|
||||
switch (dataStatuses.connection) {
|
||||
case Status.Data.Loading:
|
||||
message = 'S3';
|
||||
break;
|
||||
case Status.Data.Loaded:
|
||||
message = 'S2';
|
||||
break;
|
||||
case Status.Data.Offline:
|
||||
message = 'S1-offline';
|
||||
break;
|
||||
case Status.Data.Error:
|
||||
message = 'S1a-connection';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
if (status == Status.Data.Warning) {
|
||||
this.orangeLight = true;
|
||||
if (swdrStatuses?.dispatchersAPI == APIDataStatus.WARNING) {
|
||||
message = 'S5-dispatchers';
|
||||
}
|
||||
|
||||
if (status == Status.Data.Error) {
|
||||
this.redTopLight = true;
|
||||
this.redBottomLight = true;
|
||||
if (swdrStatuses?.trainsAPI == APIDataStatus.WARNING) {
|
||||
message = 'S5-trains';
|
||||
}
|
||||
|
||||
if (status == Status.Data.Loading) {
|
||||
this.greenBlinkLight = true;
|
||||
if (swdrStatuses?.stationsAPI == APIDataStatus.WARNING) {
|
||||
message = 'S1a-sceneries';
|
||||
}
|
||||
|
||||
return {
|
||||
lights: this.setLights(message),
|
||||
message
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
+37
-9
@@ -1,18 +1,18 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import http from '../http';
|
||||
import { API, Websocket } from '../typings/api';
|
||||
import { API, APIDataStatus } from '../typings/api';
|
||||
import axios from 'axios';
|
||||
import { Status } from '../typings/common';
|
||||
import { StationJSONData } from './typings';
|
||||
|
||||
// Update seconds cron for active data scheduler
|
||||
const UPDATE_SECONDS = [3, 23, 43];
|
||||
|
||||
export const useApiStore = defineStore('apiStore', {
|
||||
state: () => ({
|
||||
dataStatuses: {
|
||||
connection: Status.Data.Loading,
|
||||
sceneries: Status.Data.Loading,
|
||||
timetables: Status.Data.Loading,
|
||||
dispatchers: Status.Data.Loading,
|
||||
trains: Status.Data.Loading
|
||||
sceneries: Status.Data.Loading
|
||||
},
|
||||
|
||||
activeData: undefined as API.ActiveData.Response | undefined,
|
||||
@@ -20,17 +20,45 @@ export const useApiStore = defineStore('apiStore', {
|
||||
donatorsData: [] as API.Donators.Response,
|
||||
sceneryData: [] as StationJSONData[],
|
||||
|
||||
websocketData: undefined as Websocket.Payload | undefined
|
||||
|
||||
// activeDataTimeout: undefined as number | undefined
|
||||
activeDataScheduler: undefined as number | undefined
|
||||
}),
|
||||
|
||||
actions: {
|
||||
async setupStaticAPIData() {
|
||||
async setupAPIData() {
|
||||
// Static data
|
||||
this.fetchStockInfoData();
|
||||
this.fetchDonatorsData();
|
||||
this.fetchStationsGeneralInfo();
|
||||
|
||||
// Active data schedueler
|
||||
this.fetchActiveData();
|
||||
this.setupActiveDataFetcher();
|
||||
},
|
||||
|
||||
async setupActiveDataFetcher() {
|
||||
if (this.activeDataScheduler) return;
|
||||
|
||||
this.dataStatuses.connection = Status.Data.Loading;
|
||||
|
||||
this.activeDataScheduler = window.setInterval(() => {
|
||||
if (UPDATE_SECONDS.includes(new Date().getSeconds())) {
|
||||
this.fetchActiveData();
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
async fetchActiveData() {
|
||||
try {
|
||||
const response = await http.get<API.ActiveData.Response>('api/getActiveData');
|
||||
|
||||
this.activeData = response.data;
|
||||
this.dataStatuses.connection = Status.Data.Loaded;
|
||||
|
||||
console.log('Fetching active data at ' + new Date().toLocaleTimeString('pl-PL'));
|
||||
} catch (error) {
|
||||
this.dataStatuses.connection = Status.Data.Error;
|
||||
console.error('Ups! Wystąpił błąd podczas pobierania danych online:', error);
|
||||
}
|
||||
},
|
||||
|
||||
async fetchDonatorsData() {
|
||||
|
||||
@@ -7,7 +7,6 @@ import { OnlineScenery, ScheduledTrain, StoreState } from './typings';
|
||||
import { Status } from '../typings/common';
|
||||
import Station from '../scripts/interfaces/Station';
|
||||
import { useApiStore } from './apiStore';
|
||||
import { API } from '../typings/api';
|
||||
import { StationRoutes } from '../scripts/interfaces/StationRoutes';
|
||||
|
||||
export const useMainStore = defineStore('store', {
|
||||
@@ -34,7 +33,7 @@ export const useMainStore = defineStore('store', {
|
||||
trainList(): Train[] {
|
||||
const apiStore = useApiStore();
|
||||
|
||||
return (apiStore.websocketData?.activeTrains ?? [])
|
||||
return (apiStore.activeData?.trains ?? [])
|
||||
.filter((train) => train.timetable || train.online)
|
||||
.map((train) => {
|
||||
const stock = train.stockString.split(';');
|
||||
@@ -88,9 +87,9 @@ export const useMainStore = defineStore('store', {
|
||||
const apiStore = useApiStore();
|
||||
|
||||
if (state.isOffline) return [];
|
||||
if (!apiStore.websocketData?.activeSceneries) return [];
|
||||
if (!apiStore.activeData?.activeSceneries) return [];
|
||||
|
||||
return apiStore.websocketData?.activeSceneries.reduce((list, scenery) => {
|
||||
return apiStore.activeData?.activeSceneries.reduce((list, scenery) => {
|
||||
if (scenery.isOnline !== 1 && Date.now() - scenery.lastSeen > 1000 * 60 * 2) return list;
|
||||
if (scenery.dispatcherStatus == Status.ActiveDispatcher.UNKNOWN) return list;
|
||||
|
||||
|
||||
@@ -1,10 +1,22 @@
|
||||
import { Status } from './common';
|
||||
|
||||
export enum APIDataStatus {
|
||||
OK = 'OK',
|
||||
WARNING = 'WARNING'
|
||||
}
|
||||
export namespace API {
|
||||
export namespace ActiveData {
|
||||
export interface APIStatuses {
|
||||
stationsAPI: APIDataStatus;
|
||||
trainsAPI: APIDataStatus;
|
||||
dispatchersAPI: APIDataStatus;
|
||||
sceneryRequirementsAPI: APIDataStatus;
|
||||
}
|
||||
|
||||
export interface Response {
|
||||
activeSceneries?: API.ActiveSceneries.Response;
|
||||
trains?: API.ActiveTrains.Response;
|
||||
apiStatuses?: APIStatuses;
|
||||
}
|
||||
}
|
||||
export namespace DispatcherHistory {
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
import { io } from 'socket.io-client';
|
||||
|
||||
const URL =
|
||||
import.meta.env.VITE_WS_MODE === 'development'
|
||||
? 'http://localhost:3001'
|
||||
: 'https://stacjownik.spythere.eu';
|
||||
|
||||
const socket = io(URL, {
|
||||
transports: ['websocket', 'polling'],
|
||||
rememberUpgrade: true,
|
||||
reconnection: true
|
||||
});
|
||||
|
||||
export default socket;
|
||||
Reference in New Issue
Block a user