Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-03 05:18:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix błędów z reaktywnością danych

Browse Source
This commit is contained in:
Spythere
2022-06-12 22:49:55 +02:00
parent ed4c5a649e
commit 6167ab5826
8 changed files with 67 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.scss
+4 -3
View File
@@ -69,7 +69,7 @@
padding: 0.5em 0.4em;
max-width: 1100px;
margin: 0 auto;
border-radius: 0 0 1em 1em;
}
@@ -180,7 +180,7 @@
@include smallScreen() {
flex-direction: column;
a {
margin: 0.25em 0;
}
@@ -201,8 +201,9 @@
width: 1.35em;
}
& > .region {
.region {
color: paleturquoise;
font-weight: bold;
}
}
src/App.vue
+12 -15
View File
@@ -33,13 +33,13 @@
<span class="header_info">
<Clock />
<div class="info_counter">
<span class="region" @click="openFilterCard">
{{ currentRegion.value }}
<span class="region" @click="changeRegion">
{{ store.region.value }}
</span>
<img src="@/assets/icon-dispatcher.svg" alt="icon dispatcher" />
<span class="text--primary">{{ dispatcherCount }}</span>
<span class="text--primary">{{ onlineDispatchers.length }}</span>
<span class="text--grayed">|</span>
<span class="text--primary">{{ trainCount }}</span>
<span class="text--primary">{{ store.trainList.length }}</span>
<img src="@/assets/icon-train.svg" alt="icon train" />
</div>
</span>
@@ -99,8 +99,6 @@ export default defineComponent({
const store = useStore();
store.connectToAPI();
const currentRegion = store.region;
// const sceneryDataStatus = computed(() => data.value.sceneryDataStatus);
const isFilterCardVisible = ref(false);
@@ -108,18 +106,13 @@ export default defineComponent({
provide('isFilterCardVisible', isFilterCardVisible);
return {
currentRegion,
store,
isFilterCardVisible,
onlineDispatchers: computed(() =>
store.stationList.filter((station) => station.onlineInfo && station.onlineInfo.region == store.region.id)
),
dispatcherDataStatus: store.dataStatuses.dispatchers,
trainCount: store.trainCount,
dispatcherCount: store.stationList.filter((station) => station.onlineInfo).length,
openFilterCard() {
isFilterCardVisible.value = true;
},
};
},
@@ -163,6 +156,10 @@ export default defineComponent({
StorageManager.setBooleanValue('version_notes_read', true);
},
changeRegion() {
this.store.changeRegion({ id: 'cae', value: 'PL2' });
},
changeLang(lang: string) {
this.$i18n.locale = lang;
this.currentLang = lang;
src/components/StationsView/StationFilterCard.vue
+3 -8
View File
@@ -13,7 +13,7 @@
<div class="card_content">
<div class="card_title flex">{{ $t('filters.title') }}</div>
<section class="card_regions">
<!-- <section class="card_regions">
<div class="regions_content">
<span v-for="region in inputs.regions" :key="region.id" :class="`region-${region.id}`">
<label>
@@ -31,7 +31,7 @@
</label>
</span>
</div>
</section>
</section> -->
<section class="card_options">
<filter-option
v-for="(option, i) in inputs.options"
@@ -190,11 +190,6 @@ export default defineComponent({
}, 400);
},
handleChangeRegion() {
this.store.region = this.currentRegion;
this.closeCard();
},
changeNumericFilterValue(name: string, value: number, saveToStorage = false) {
this.$emit('changeFilterValue', {
name,
@@ -314,7 +309,7 @@ export default defineComponent({
&_content {
display: grid;
grid-template-rows: 70px 35px 1fr 100px 50px auto;
grid-template-rows: 70px 1fr 100px 50px auto;
min-height: 0;
max-height: 100vh;
}
src/scripts/interfaces/Station.ts
+1 -34
View File
@@ -33,6 +33,7 @@ export default interface Station {
onlineInfo?: {
hash: string;
name: string;
region: string;
maxUsers: number;
currentUsers: number;
@@ -57,38 +58,4 @@ export default interface Station {
scheduledTrains?: ScheduledTrain[];
}
// stationName: string;
// stationHash: string;
// stationURL: string;
// maxUsers: number;
// currentUsers: number;
// stationLines: string;
// stationProject: string;
// reqLevel: number;
// supportersOnly: boolean;
// SBL: string;
// TWB: string;
// signalType: string;
// controlType: string;
// default: boolean;
// nonPublic: boolean;
// unavailable: boolean;
// routes: {
// oneWay: { catenary: number; noCatenary: number };
// twoWay: { catenary: number; noCatenary: number };
// };
// checkpoints: {
// checkpointName: string;
// scheduledTrains: ScheduledTrain[];
// }[];
}
src/store/store.ts
+35 -17
View File
@@ -22,6 +22,8 @@ import { APIData, StationJSONData, StoreState } from './storeTypes';
export const useStore = defineStore('store', {
state: () =>
({
apiData: {} as unknown,
stationList: [],
trainList: [],
@@ -47,7 +49,9 @@ export const useStore = defineStore('store', {
} as StoreState),
actions: {
setTrainsOnlineData(trains?: TrainAPIData[]) {
setTrainsOnlineData() {
const { trains } = this.apiData;
if (!trains) return [];
this.trainList = trains
@@ -93,15 +97,17 @@ export const useStore = defineStore('store', {
}) as Train[];
},
getDispatcherStatus(dispatchers: any[][] | undefined, stationAPIData: StationAPIData) {
getDispatcherStatus(onlineStationData: StationAPIData) {
const { dispatchers } = this.apiData;
const prevDispatcherStatus = this.lastDispatcherStatuses.find(
(dispatcher) => dispatcher.hash === stationAPIData.stationHash
(dispatcher) => dispatcher.hash === onlineStationData.stationHash
);
const stationStatus = !dispatchers
? undefined
: dispatchers.find(
(status: string[]) => status[0] == stationAPIData.stationHash && status[1] == this.region.id
(status: string[]) => status[0] == onlineStationData.stationHash && status[1] == this.region.id
) || -1;
const statusTimestamp =
@@ -110,7 +116,7 @@ export const useStore = defineStore('store', {
prevDispatcherStatus && !dispatchers ? prevDispatcherStatus.statusID : getStatusID(stationStatus);
return {
hash: stationAPIData.stationHash,
hash: onlineStationData.stationHash,
statusID,
statusTimestamp,
};
@@ -188,17 +194,17 @@ export const useStore = defineStore('store', {
.map((train) => ({ driverName: train.driverName, driverId: train.driverId, trainNo: train.trainNo }));
},
setStationsOnlineInfo(data: APIData) {
setStationsOnlineInfo() {
const onlineStationNames: string[] = [];
const prevDispatcherStatuses: StoreState['lastDispatcherStatuses'] = [];
const prevDispatcherStatuses: StoreState['lastDispatcherStatuses'] = [];
data.stations?.forEach((stationAPIData) => {
this.apiData.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);
const dispatcherStatus = this.getDispatcherStatus(stationAPIData);
prevDispatcherStatuses.push(dispatcherStatus);
const stationTrains = this.getStationTrains(stationAPIData);
@@ -207,6 +213,7 @@ export const useStore = defineStore('store', {
const onlineInfo = {
name: stationAPIData.stationName,
hash: stationAPIData.stationHash,
region: stationAPIData.region,
maxUsers: stationAPIData.maxUsers,
currentUsers: stationAPIData.currentUsers,
spawns: parseSpawns(stationAPIData.spawnString),
@@ -239,7 +246,7 @@ export const useStore = defineStore('store', {
});
});
if (data.dispatchers != null) this.lastDispatcherStatuses = prevDispatcherStatuses;
if (this.apiData.dispatchers != null) this.lastDispatcherStatuses = prevDispatcherStatuses;
},
async fetchStationsGeneralInfo() {
@@ -324,7 +331,9 @@ export const useStore = defineStore('store', {
);
socket.on('UPDATE', (data: APIData) => {
this.fetchOnlineData(data);
this.apiData = data;
this.setOnlineData();
});
socket.emit('connection');
@@ -337,8 +346,14 @@ export const useStore = defineStore('store', {
this.connectToWebsocket();
},
async fetchOnlineData(data: APIData) {
if (!data.stations) {
async changeRegion(region: StoreState['region']) {
this.region = region;
await this.setOnlineData();
},
async setOnlineData() {
if (!this.apiData.stations) {
this.dataStatuses.sceneries = DataStatus.Error;
this.dataStatuses.trains = DataStatus.Error;
this.dataStatuses.dispatchers = DataStatus.Error;
@@ -347,11 +362,14 @@ export const useStore = defineStore('store', {
}
this.dataStatuses.sceneries = DataStatus.Loaded;
this.dataStatuses.trains = !data.trains ? DataStatus.Warning : DataStatus.Loaded;
this.dataStatuses.dispatchers = !data.dispatchers ? DataStatus.Warning : DataStatus.Loaded;
this.dataStatuses.trains = !this.apiData.trains ? DataStatus.Warning : DataStatus.Loaded;
this.dataStatuses.dispatchers = !this.apiData.dispatchers ? DataStatus.Warning : DataStatus.Loaded;
this.setStationsOnlineInfo(data);
this.setTrainsOnlineData(data.trains);
this.setTrainsOnlineData();
this.setStationsOnlineInfo();
console.log("Loading");
},
},
});
src/store/storeTypes.ts
+1
View File
@@ -10,6 +10,7 @@ export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned'
export interface StoreState {
stationList: Station[];
trainList: Train[];
apiData: APIData;
lastDispatcherStatuses: { hash: string; statusTimestamp: number; statusID: string }[];
src/views/StationsView.vue
+4 -7
View File
@@ -71,19 +71,16 @@ export default defineComponent({
const filterManager = reactive(new StationFilterManager());
const focusedStationName = '';
const computedStations: ComputedRef<Station[]> = computed(() => {
return filterManager.getFilteredStationList(store.stationList);
});
const focusedStationInfo = computed(() =>
computedStations.value.find((station) => station.name === focusedStationName)
const computedStations: ComputedRef<Station[]> = computed(() =>
filterManager
.getFilteredStationList(store.stationList)
.filter((station) => !station.onlineInfo || station.onlineInfo.region == store.region.id)
);
return {
computedStations,
filterManager,
focusedStationName,
focusedStationInfo,
};
},
mounted() {
src/views/TrainsView.vue
+7 -6
View File
@@ -2,8 +2,6 @@
<section class="trains-view">
<div class="wrapper">
<div class="options-bar">
<!-- <TrainStats :trains="trainList" :trainStatsOpen="trainStatsOpen" /> -->
<train-options />
</div>
@@ -51,8 +49,6 @@ export default defineComponent({
setup() {
const store = useStore();
const trainList = store.trainList;
const sorterActive = ref({ id: 'distance', dir: -1 });
const filterList = reactive([...trainFilters]) as TrainFilter[];
const isTrainOptionsCardVisible = ref(false);
@@ -67,11 +63,16 @@ export default defineComponent({
provide('isTrainOptionsCardVisible', isTrainOptionsCardVisible);
const computedTrains: ComputedRef<Train[]> = computed(() => {
return filteredTrainList(trainList, searchedTrain.value, searchedDriver.value, sorterActive.value, filterList);
return filteredTrainList(
store.trainList,
searchedTrain.value,
searchedDriver.value,
sorterActive.value,
filterList
);
});
return {
trainList,
computedTrains,
searchedTrain,
searchedDriver,