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: filtrowanie pociągów offline

Browse Source
This commit is contained in:
Spythere
2023-01-05 15:58:17 +01:00
parent 0e45bca5da
commit b81d98cab7
7 changed files with 125 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/TrainsView/TrainInfo.vue
+27 -30
View File
@@ -2,26 +2,24 @@
<div class="train-info" tabindex="0"> <div class="train-info" tabindex="0">
<section class="train-route"> <section class="train-route">
<div class="train_general"> <div class="train_general">
<span> <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
<span class="timetable-id" v-if="train.timetableData">#{{ train.timetableData.timetableId }}</span> <span class="timetable-id" v-if="train.timetableData">#{{ train.timetableData.timetableId }}</span>
<span class="timetable_warnings"> <span class="timetable_warnings" v-if="train.timetableData?.TWR || train.timetableData?.SKR">
<span class="train-badge twr" v-if="train.timetableData?.TWR">TWR</span> <span class="train-badge twr" v-if="train.timetableData?.TWR">TWR</span>
<span class="train-badge skr" v-if="train.timetableData?.SKR">SKR</span> <span class="train-badge skr" v-if="train.timetableData?.SKR">SKR</span>
</span>
<strong class="timetable-category" v-if="train.timetableData">
{{ train.timetableData.category }}
</strong>
<strong class="train-number">&nbsp;{{ train.trainNo }}</strong>
|
<!-- <span class="train-driver" :class="{ supporter: train.isSupporter }">{{ train.driverName }}</span> -->
{{ train.driverName }} |
<b :style="calculateTextExpStyle(train.driverLevel)">
{{ train.driverLevel < 2 ? 'L' : `${train.driverLevel} lvl` }}
</b>
<b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
</span> </span>
<strong>
<span v-if="train.timetableData">{{ train.timetableData.category }}&nbsp;</span>
<span class="train-number">{{ train.trainNo }}</span>
</strong>
<span>|</span>
<span>{{ train.driverName }}</span>
<span>|</span>
<b :style="calculateTextExpStyle(train.driverLevel, train.isSupporter)">
{{ train.driverLevel < 2 ? 'L' : `${train.driverLevel} lvl` }}
</b>
</div> </div>
<div class="timetable_route" v-if="train.timetableData"> <div class="timetable_route" v-if="train.timetableData">
@@ -44,9 +42,7 @@
</div> </div>
<div class="timetable_progress" style="margin-top: 0.5em" v-if="train.timetableData"> <div class="timetable_progress" style="margin-top: 0.5em" v-if="train.timetableData">
<!-- <span> </span> -->
<span class="timetable_progress-bar"> <span class="timetable_progress-bar">
<!-- {{ confirmedPercentage(train.timetableData.followingStops) }}%&nbsp; -->
<span class="bar-bg"></span> <span class="bar-bg"></span>
<span <span
class="bar-fg" class="bar-fg"
@@ -154,7 +150,6 @@ export default defineComponent({
} }
.timetable-id { .timetable-id {
margin-right: 0.3em;
color: #d2d2d2; color: #d2d2d2;
} }
@@ -164,11 +159,7 @@ export default defineComponent({
display: inline-block; display: inline-block;
text-align: center; text-align: center;
width: 1.25em; padding: 0 0.25em;
height: 1.25em;
border-radius: 50%;
margin-left: 0.25em;
} }
.timetable_stops { .timetable_stops {
@@ -179,16 +170,19 @@ export default defineComponent({
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.25em;
} }
.train-status-badges { .train-status-badges {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.25em;
} }
.train-badge { .train-badge {
padding: 0.15em 0.35em; padding: 0.1em 0.2em;
margin-right: 0.3em; border-radius: 0.2em;
font-weight: bold; font-weight: bold;
font-size: 0.9em; font-size: 0.9em;
@@ -202,7 +196,7 @@ export default defineComponent({
} }
&.offline { &.offline {
background-color: #b83b2d; background-color: #9c362b;
} }
} }
@@ -221,6 +215,9 @@ export default defineComponent({
} }
.timetable_warnings { .timetable_warnings {
display: flex;
gap: 0.2em;
color: black; color: black;
} }
src/constants/Trains/TrainOptionsConsts.ts
+4
View File
@@ -37,6 +37,10 @@ export const sorterOptions = [
id: 'distance', id: 'distance',
value: 'kilometraż', value: 'kilometraż',
}, },
{
id: 'id',
value: 'id rozkładu',
},
{ {
id: 'progress', id: 'progress',
value: 'przebyta trasa', value: 'przebyta trasa',
src/locales/en.json
+1
View File
@@ -103,6 +103,7 @@
"sort-timetable": "train no.", "sort-timetable": "train no.",
"sort-progress": "route progress", "sort-progress": "route progress",
"sort-delay": "current delay", "sort-delay": "current delay",
"sort-id": "timetable id",
"sort-total-stops": "total stops", "sort-total-stops": "total stops",
"sort-beginDate": "date", "sort-beginDate": "date",
src/locales/pl.json
+1
View File
@@ -104,6 +104,7 @@
"sort-timetableId": "ID rozkładu", "sort-timetableId": "ID rozkładu",
"sort-timestampFrom": "data", "sort-timestampFrom": "data",
"sort-duration": "czas dyżuru", "sort-duration": "czas dyżuru",
"sort-id": "id rozkładu",
"sort-mass": "masa", "sort-mass": "masa",
"sort-speed": "prędkość", "sort-speed": "prędkość",
src/mixins/styleMixin.ts
+2 -2
View File
@@ -11,10 +11,10 @@ export default defineComponent({
return `background-color: ${bgColor}; color: ${fontColor}; ${boxShadow};`; return `background-color: ${bgColor}; color: ${fontColor}; ${boxShadow};`;
}, },
calculateTextExpStyle(exp: number): string { calculateTextExpStyle(exp: number, isSupporter = false): string {
const textColor = exp > -1 ? (exp < 2 ? '#26B0D9' : `hsl(${-exp * 5 + 100}, 75%, 50%)`) : '#666'; const textColor = exp > -1 ? (exp < 2 ? '#26B0D9' : `hsl(${-exp * 5 + 100}, 75%, 50%)`) : '#666';
return `color: ${textColor};`; return `color: ${textColor}; ${isSupporter ? 'text-shadow: 0 0 10px ' + textColor : ''};`;
}, },
statusClasses(occupiedTo: string) { statusClasses(occupiedTo: string) {
src/scripts/managers/trainFilterManager.ts
+83 -78
View File
@@ -1,115 +1,120 @@
import { TrainFilter } from "../../types/Trains/TrainOptionsTypes"; import { TrainFilter } from '../../types/Trains/TrainOptionsTypes';
import { TrainFilterType } from "../enums/TrainFilterType"; import { TrainFilterType } from '../enums/TrainFilterType';
import Train from "../interfaces/Train"; import Train from '../interfaces/Train';
import TrainStop from "../interfaces/TrainStop"; import TrainStop from '../interfaces/TrainStop';
function confirmedPercentage(stops: TrainStop[] | undefined) { function confirmedPercentage(stops: TrainStop[] | undefined) {
if (!stops) return -1; if (!stops) return -1;
return Number(((stops.filter((stop) => stop.confirmed).length / stops.length) * 100).toFixed(0)); return Number(((stops.filter((stop) => stop.confirmed).length / stops.length) * 100).toFixed(0));
}; }
function currentDelay(stops: TrainStop[] | undefined) { function currentDelay(stops: TrainStop[] | undefined) {
if (!stops) return -Infinity; if (!stops) return -Infinity;
const delay = const delay =
stops.find((stop, i) => (i == 0 && !stop.confirmed) || (i > 0 && stops[i - 1].confirmed && !stop.confirmed)) stops.find((stop, i) => (i == 0 && !stop.confirmed) || (i > 0 && stops[i - 1].confirmed && !stop.confirmed))
?.departureDelay || 0; ?.departureDelay || 0;
return delay; return delay;
}; }
function filterTrainList(trainList: Train[], searchedTrain: string, searchedDriver: string, filters: TrainFilter[]) { function filterTrainList(trainList: Train[], searchedTrain: string, searchedDriver: string, filters: TrainFilter[]) {
return trainList.filter( return trainList.filter((train) => {
(train) => { const isFiltered = filters.every((f) => {
const isFiltered = filters.every(f => { if (f.isActive) return true;
if (f.isActive) return true;
if (!train.timetableData) return filters.find(filter => filter.id == TrainFilterType.noTimetable)!.isActive; if (!train.timetableData) return filters.find((filter) => filter.id == TrainFilterType.noTimetable)!.isActive;
switch (f.id) { switch (f.id) {
case TrainFilterType.comments: case TrainFilterType.comments:
return !train.timetableData.followingStops.some(stop => stop.comments); return !train.timetableData.followingStops.some((stop) => stop.comments);
case TrainFilterType.twr: case TrainFilterType.twr:
return !train.timetableData.TWR; return !train.timetableData.TWR;
case TrainFilterType.skr: case TrainFilterType.skr:
return !train.timetableData.SKR; return !train.timetableData.SKR;
case TrainFilterType.passenger: case TrainFilterType.passenger:
return !/^[AMRE]\D{2}$/.test(train.timetableData.category); return !/^[AMRE]\D{2}$/.test(train.timetableData.category);
case TrainFilterType.freight: case TrainFilterType.freight:
return !train.timetableData.category.startsWith('T'); return !train.timetableData.category.startsWith('T');
case TrainFilterType.other: case TrainFilterType.other:
return !/^[PXZL]\D{2}$/.test(train.timetableData.category); return !/^[PXZL]\D{2}$/.test(train.timetableData.category);
default: default:
return true; return true;
} }
}) });
return (searchedTrain.length > 0 ? train.trainNo.toString().startsWith(searchedTrain) : true) &&
(searchedDriver.length > 0 ? train.driverName.toLowerCase().startsWith(searchedDriver.toLowerCase()) : true) && isFiltered
}
return (
(searchedTrain.length > 0 ? train.trainNo.toString().startsWith(searchedTrain) : true) &&
(searchedDriver.length > 0 ? train.driverName.toLowerCase().startsWith(searchedDriver.toLowerCase()) : true) &&
(!train.timetableData ? !train.online : true) &&
isFiltered
); );
});
} }
function sortTrainList(trainList: Train[], sorterActive: { id: string; dir: number }) { function sortTrainList(trainList: Train[], sorterActive: { id: string; dir: number }) {
return trainList.sort((a: Train, b: Train) => { return trainList.sort((a: Train, b: Train) => {
switch (sorterActive.id) { switch (sorterActive.id) {
case 'mass': case 'id':
if (a.mass > b.mass) return sorterActive.dir; if ((a.timetableData?.timetableId || -1) > (b.timetableData?.timetableId || -1)) return sorterActive.dir;
return -sorterActive.dir;
case 'distance': return -sorterActive.dir;
if ((a.timetableData?.routeDistance || -1) > (b.timetableData?.routeDistance || -1)) return sorterActive.dir;
return -sorterActive.dir; case 'mass':
if (a.mass > b.mass) return sorterActive.dir;
return -sorterActive.dir;
case 'progress': case 'distance':
if (confirmedPercentage(a.timetableData?.followingStops) > confirmedPercentage(b.timetableData?.followingStops)) if ((a.timetableData?.routeDistance || -1) > (b.timetableData?.routeDistance || -1)) return sorterActive.dir;
return sorterActive.dir;
return -sorterActive.dir; return -sorterActive.dir;
case 'delay': case 'progress':
if (currentDelay(a.timetableData?.followingStops) > currentDelay(b.timetableData?.followingStops)) if (confirmedPercentage(a.timetableData?.followingStops) > confirmedPercentage(b.timetableData?.followingStops))
return sorterActive.dir; return sorterActive.dir;
return -sorterActive.dir; return -sorterActive.dir;
case 'speed': case 'delay':
if (a.speed > b.speed) return sorterActive.dir; if (currentDelay(a.timetableData?.followingStops) > currentDelay(b.timetableData?.followingStops))
return -sorterActive.dir; return sorterActive.dir;
case 'timetable': return -sorterActive.dir;
if (a.trainNo > b.trainNo) return sorterActive.dir;
return -sorterActive.dir;
case 'length': case 'speed':
if (a.length > b.length) return sorterActive.dir; if (a.speed > b.speed) return sorterActive.dir;
return -sorterActive.dir; return -sorterActive.dir;
default: case 'timetable':
break; if (a.trainNo > b.trainNo) return sorterActive.dir;
} return -sorterActive.dir;
return 0; case 'length':
}); if (a.length > b.length) return sorterActive.dir;
return -sorterActive.dir;
default:
break;
}
return 0;
});
} }
export function filteredTrainList( export function filteredTrainList(
trainList: Train[], trainList: Train[],
searchedTrain: string, searchedTrain: string,
searchedDriver: string, searchedDriver: string,
sorterActive: { id: string; dir: number }, sorterActive: { id: string; dir: number },
filters: TrainFilter[] filters: TrainFilter[]
) { ) {
const filtered = filterTrainList(trainList, searchedTrain, searchedDriver, filters);
const filtered = filterTrainList(trainList, searchedTrain, searchedDriver, filters); return [...sortTrainList(filtered, sorterActive)];
return [...sortTrainList(filtered, sorterActive)]; }
};
src/views/TrainsView.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<section class="trains-view"> <section class="trains-view">
<div class="trains_wrapper"> <div class="trains_wrapper">
<TrainOptions <TrainOptions
:sorter-option-ids="['distance', 'progress', 'delay', 'mass', 'speed', 'length']" :sorter-option-ids="['distance', 'id', 'progress', 'delay', 'mass', 'speed', 'length']"
:current-options-active="currentOptionsActive" :current-options-active="currentOptionsActive"
/> />