mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 05:18:11 +00:00
fix: filtrowanie pociągów offline
This commit is contained in:
@@ -2,26 +2,24 @@
|
||||
<div class="train-info" tabindex="0">
|
||||
<section class="train-route">
|
||||
<div class="train_general">
|
||||
<span>
|
||||
<span class="timetable-id" v-if="train.timetableData">#{{ train.timetableData.timetableId }}</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_warnings">
|
||||
<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>
|
||||
<strong class="timetable-category" v-if="train.timetableData">
|
||||
{{ train.timetableData.category }}
|
||||
</strong>
|
||||
<strong class="train-number"> {{ 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 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 skr" v-if="train.timetableData?.SKR">SKR</span>
|
||||
</span>
|
||||
|
||||
<strong>
|
||||
<span v-if="train.timetableData">{{ train.timetableData.category }} </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 class="timetable_route" v-if="train.timetableData">
|
||||
@@ -44,9 +42,7 @@
|
||||
</div>
|
||||
|
||||
<div class="timetable_progress" style="margin-top: 0.5em" v-if="train.timetableData">
|
||||
<!-- <span> </span> -->
|
||||
<span class="timetable_progress-bar">
|
||||
<!-- {{ confirmedPercentage(train.timetableData.followingStops) }}% -->
|
||||
<span class="bar-bg"></span>
|
||||
<span
|
||||
class="bar-fg"
|
||||
@@ -154,7 +150,6 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
.timetable-id {
|
||||
margin-right: 0.3em;
|
||||
color: #d2d2d2;
|
||||
}
|
||||
|
||||
@@ -164,11 +159,7 @@ export default defineComponent({
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
border-radius: 50%;
|
||||
|
||||
margin-left: 0.25em;
|
||||
padding: 0 0.25em;
|
||||
}
|
||||
|
||||
.timetable_stops {
|
||||
@@ -179,16 +170,19 @@ export default defineComponent({
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
gap: 0.25em;
|
||||
}
|
||||
.train-status-badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.train-badge {
|
||||
padding: 0.15em 0.35em;
|
||||
margin-right: 0.3em;
|
||||
|
||||
padding: 0.1em 0.2em;
|
||||
border-radius: 0.2em;
|
||||
font-weight: bold;
|
||||
|
||||
font-size: 0.9em;
|
||||
@@ -202,7 +196,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
&.offline {
|
||||
background-color: #b83b2d;
|
||||
background-color: #9c362b;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -221,6 +215,9 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
.timetable_warnings {
|
||||
display: flex;
|
||||
gap: 0.2em;
|
||||
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
@@ -37,6 +37,10 @@ export const sorterOptions = [
|
||||
id: 'distance',
|
||||
value: 'kilometraż',
|
||||
},
|
||||
{
|
||||
id: 'id',
|
||||
value: 'id rozkładu',
|
||||
},
|
||||
{
|
||||
id: 'progress',
|
||||
value: 'przebyta trasa',
|
||||
|
||||
@@ -103,6 +103,7 @@
|
||||
"sort-timetable": "train no.",
|
||||
"sort-progress": "route progress",
|
||||
"sort-delay": "current delay",
|
||||
"sort-id": "timetable id",
|
||||
|
||||
"sort-total-stops": "total stops",
|
||||
"sort-beginDate": "date",
|
||||
|
||||
+2
-1
@@ -104,7 +104,8 @@
|
||||
"sort-timetableId": "ID rozkładu",
|
||||
"sort-timestampFrom": "data",
|
||||
"sort-duration": "czas dyżuru",
|
||||
|
||||
"sort-id": "id rozkładu",
|
||||
|
||||
"sort-mass": "masa",
|
||||
"sort-speed": "prędkość",
|
||||
"sort-length": "długość",
|
||||
|
||||
@@ -11,10 +11,10 @@ export default defineComponent({
|
||||
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';
|
||||
|
||||
return `color: ${textColor};`;
|
||||
return `color: ${textColor}; ${isSupporter ? 'text-shadow: 0 0 10px ' + textColor : ''};`;
|
||||
},
|
||||
|
||||
statusClasses(occupiedTo: string) {
|
||||
|
||||
@@ -1,115 +1,120 @@
|
||||
import { TrainFilter } from "../../types/Trains/TrainOptionsTypes";
|
||||
import { TrainFilterType } from "../enums/TrainFilterType";
|
||||
import Train from "../interfaces/Train";
|
||||
import TrainStop from "../interfaces/TrainStop";
|
||||
import { TrainFilter } from '../../types/Trains/TrainOptionsTypes';
|
||||
import { TrainFilterType } from '../enums/TrainFilterType';
|
||||
import Train from '../interfaces/Train';
|
||||
import TrainStop from '../interfaces/TrainStop';
|
||||
|
||||
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) {
|
||||
if (!stops) return -Infinity;
|
||||
if (!stops) return -Infinity;
|
||||
|
||||
const delay =
|
||||
stops.find((stop, i) => (i == 0 && !stop.confirmed) || (i > 0 && stops[i - 1].confirmed && !stop.confirmed))
|
||||
?.departureDelay || 0;
|
||||
const delay =
|
||||
stops.find((stop, i) => (i == 0 && !stop.confirmed) || (i > 0 && stops[i - 1].confirmed && !stop.confirmed))
|
||||
?.departureDelay || 0;
|
||||
|
||||
return delay;
|
||||
};
|
||||
return delay;
|
||||
}
|
||||
|
||||
function filterTrainList(trainList: Train[], searchedTrain: string, searchedDriver: string, filters: TrainFilter[]) {
|
||||
return trainList.filter(
|
||||
(train) => {
|
||||
const isFiltered = filters.every(f => {
|
||||
if (f.isActive) return true;
|
||||
return trainList.filter((train) => {
|
||||
const isFiltered = filters.every((f) => {
|
||||
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) {
|
||||
case TrainFilterType.comments:
|
||||
return !train.timetableData.followingStops.some(stop => stop.comments);
|
||||
|
||||
case TrainFilterType.twr:
|
||||
return !train.timetableData.TWR;
|
||||
|
||||
case TrainFilterType.skr:
|
||||
return !train.timetableData.SKR;
|
||||
|
||||
case TrainFilterType.passenger:
|
||||
return !/^[AMRE]\D{2}$/.test(train.timetableData.category);
|
||||
|
||||
case TrainFilterType.freight:
|
||||
return !train.timetableData.category.startsWith('T');
|
||||
|
||||
case TrainFilterType.other:
|
||||
return !/^[PXZL]\D{2}$/.test(train.timetableData.category);
|
||||
|
||||
default:
|
||||
return true;
|
||||
}
|
||||
})
|
||||
switch (f.id) {
|
||||
case TrainFilterType.comments:
|
||||
return !train.timetableData.followingStops.some((stop) => stop.comments);
|
||||
|
||||
return (searchedTrain.length > 0 ? train.trainNo.toString().startsWith(searchedTrain) : true) &&
|
||||
(searchedDriver.length > 0 ? train.driverName.toLowerCase().startsWith(searchedDriver.toLowerCase()) : true) && isFiltered
|
||||
}
|
||||
case TrainFilterType.twr:
|
||||
return !train.timetableData.TWR;
|
||||
|
||||
case TrainFilterType.skr:
|
||||
return !train.timetableData.SKR;
|
||||
|
||||
case TrainFilterType.passenger:
|
||||
return !/^[AMRE]\D{2}$/.test(train.timetableData.category);
|
||||
|
||||
case TrainFilterType.freight:
|
||||
return !train.timetableData.category.startsWith('T');
|
||||
|
||||
case TrainFilterType.other:
|
||||
return !/^[PXZL]\D{2}$/.test(train.timetableData.category);
|
||||
|
||||
default:
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
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 }) {
|
||||
return trainList.sort((a: Train, b: Train) => {
|
||||
switch (sorterActive.id) {
|
||||
case 'mass':
|
||||
if (a.mass > b.mass) return sorterActive.dir;
|
||||
return -sorterActive.dir;
|
||||
return trainList.sort((a: Train, b: Train) => {
|
||||
switch (sorterActive.id) {
|
||||
case 'id':
|
||||
if ((a.timetableData?.timetableId || -1) > (b.timetableData?.timetableId || -1)) return sorterActive.dir;
|
||||
|
||||
case 'distance':
|
||||
if ((a.timetableData?.routeDistance || -1) > (b.timetableData?.routeDistance || -1)) return sorterActive.dir;
|
||||
return -sorterActive.dir;
|
||||
|
||||
return -sorterActive.dir;
|
||||
case 'mass':
|
||||
if (a.mass > b.mass) return sorterActive.dir;
|
||||
return -sorterActive.dir;
|
||||
|
||||
case 'progress':
|
||||
if (confirmedPercentage(a.timetableData?.followingStops) > confirmedPercentage(b.timetableData?.followingStops))
|
||||
return sorterActive.dir;
|
||||
case 'distance':
|
||||
if ((a.timetableData?.routeDistance || -1) > (b.timetableData?.routeDistance || -1)) return sorterActive.dir;
|
||||
|
||||
return -sorterActive.dir;
|
||||
return -sorterActive.dir;
|
||||
|
||||
case 'delay':
|
||||
if (currentDelay(a.timetableData?.followingStops) > currentDelay(b.timetableData?.followingStops))
|
||||
return sorterActive.dir;
|
||||
case 'progress':
|
||||
if (confirmedPercentage(a.timetableData?.followingStops) > confirmedPercentage(b.timetableData?.followingStops))
|
||||
return sorterActive.dir;
|
||||
|
||||
return -sorterActive.dir;
|
||||
return -sorterActive.dir;
|
||||
|
||||
case 'speed':
|
||||
if (a.speed > b.speed) return sorterActive.dir;
|
||||
return -sorterActive.dir;
|
||||
case 'delay':
|
||||
if (currentDelay(a.timetableData?.followingStops) > currentDelay(b.timetableData?.followingStops))
|
||||
return sorterActive.dir;
|
||||
|
||||
case 'timetable':
|
||||
if (a.trainNo > b.trainNo) return sorterActive.dir;
|
||||
return -sorterActive.dir;
|
||||
return -sorterActive.dir;
|
||||
|
||||
case 'length':
|
||||
if (a.length > b.length) return sorterActive.dir;
|
||||
return -sorterActive.dir;
|
||||
case 'speed':
|
||||
if (a.speed > b.speed) return sorterActive.dir;
|
||||
return -sorterActive.dir;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
case 'timetable':
|
||||
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(
|
||||
trainList: Train[],
|
||||
searchedTrain: string,
|
||||
searchedDriver: string,
|
||||
sorterActive: { id: string; dir: number },
|
||||
filters: TrainFilter[]
|
||||
trainList: Train[],
|
||||
searchedTrain: string,
|
||||
searchedDriver: string,
|
||||
sorterActive: { id: string; dir: number },
|
||||
filters: TrainFilter[]
|
||||
) {
|
||||
|
||||
const filtered = filterTrainList(trainList, searchedTrain, searchedDriver, filters);
|
||||
return [...sortTrainList(filtered, sorterActive)];
|
||||
};
|
||||
const filtered = filterTrainList(trainList, searchedTrain, searchedDriver, filters);
|
||||
return [...sortTrainList(filtered, sorterActive)];
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<section class="trains-view">
|
||||
<div class="trains_wrapper">
|
||||
<TrainOptions
|
||||
:sorter-option-ids="['distance', 'progress', 'delay', 'mass', 'speed', 'length']"
|
||||
:sorter-option-ids="['distance', 'id', 'progress', 'delay', 'mass', 'speed', 'length']"
|
||||
:current-options-active="currentOptionsActive"
|
||||
/>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user