filtry pociągów

This commit is contained in:
2023-03-15 15:19:50 +01:00
parent 021474cfb0
commit 9e1df1fb61
8 changed files with 96 additions and 56 deletions
+25 -14
View File
@@ -55,17 +55,23 @@
</div>
<h1 class="option-title" v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
<div class="options_filters">
<div class="filter-option" v-for="filter in trainFilterList">
<button class="btn--option" :data-inactive="!filter.isActive" @click="onFilterChange(filter)">
<div v-for="section in Object.keys(TrainFilterSection)">
<button
class="btn--option"
v-for="filter in trainFilterList.filter((f) => f.section == section)"
:data-inactive="!filter.isActive"
@click="onFilterChange(filter)"
>
{{ $t(`options.filter-${filter.id}`) }}
</button>
</div>
</div>
<div class="filter-actions">
<button class="btn--action" @click="clearAllFilters">{{ $t('options.filter-clear') }}</button>
<button class="btn--action" @click="resetAllFilters">{{ $t('options.filter-reset') }}</button>
</div>
<div class="filter-actions">
<div></div>
<button class="btn--action" @click="resetAllFilters">{{ $t('options.filter-reset') }}</button>
</div>
</div>
</div>
@@ -80,6 +86,7 @@ import keyMixin from '../../mixins/keyMixin';
import { TrainFilter } from '../../types/Trains/TrainOptionsTypes';
import ActionButton from '../Global/ActionButton.vue';
import SelectBox from '../Global/SelectBox.vue';
import { TrainFilterSection } from '../../scripts/enums/TrainFilterType';
export default defineComponent({
components: { SelectBox, ActionButton },
@@ -101,6 +108,7 @@ export default defineComponent({
return {
showOptions: false,
lastSelectedFilter: null as TrainFilter | null,
TrainFilterSection,
};
},
@@ -183,14 +191,17 @@ export default defineComponent({
margin: 0 auto;
}
.filter-option {
button {
color: white;
font-weight: bold;
.options_filters div {
display: flex;
width: 100%;
&[data-disabled='true'] {
color: #888;
}
gap: 0.25em;
margin-bottom: 0.5em;
button {
width: 100%;
color: $accentCol;
font-weight: bold;
}
}
@@ -201,7 +212,7 @@ export default defineComponent({
margin-top: 1em;
button {
> * {
width: 100%;
}
}
+1 -14
View File
@@ -12,10 +12,6 @@
{{ $t('trains.no-trains') }}
</div>
<!-- <div class="timeouts-warning" v-if="trainNumbersWithTimeouts.length == 0">
<b class="warning-timeout">?</b>
{{ $t('trains.timeout') }}
</div> -->
<transition-group name="list-anim" tag="ul" class="train-list" v-else>
<li
class="train-row"
@@ -70,18 +66,9 @@ export default defineComponent({
id: string | number;
dir: number;
},
distanceLimitExceeded: computed(
() => props.trains.findIndex(({ timetableData }) => timetableData && timetableData.routeDistance > 200) != -1
),
};
},
computed: {
trainNumbersWithTimeouts() {
return this.store.trainList.filter((train) => train.isTimeout).map((train) => train.trainNo);
},
},
activated() {
const query = this.$route.query;
if (query.trainNo && query.driverName) {
@@ -159,7 +146,7 @@ img.train-image {
.train {
&-list {
position: relative;
@include smallScreen() {
width: 100%;
}
+22 -2
View File
@@ -1,33 +1,53 @@
import { TrainFilterType } from '../../scripts/enums/TrainFilterType';
import { TrainFilterSection, TrainFilterType } from '../../scripts/enums/TrainFilterType';
import { TrainFilter } from '../../types/Trains/TrainOptionsTypes';
export const trainFilters: TrainFilter[] = [
{
id: TrainFilterType.twr,
section: TrainFilterSection.TRAIN_TYPE,
isActive: true,
},
{
id: TrainFilterType.skr,
section: TrainFilterSection.TRAIN_TYPE,
isActive: true,
},
{
id: TrainFilterType.passenger,
section: TrainFilterSection.TIMETABLE_TYPE,
isActive: true,
},
{
id: TrainFilterType.freight,
section: TrainFilterSection.TIMETABLE_TYPE,
isActive: true,
},
{
id: TrainFilterType.other,
section: TrainFilterSection.TIMETABLE_TYPE,
isActive: true,
},
{
id: TrainFilterType.withComments,
section: TrainFilterSection.COMMENTS,
isActive: true,
},
{
id: TrainFilterType.comments,
id: TrainFilterType.noComments,
section: TrainFilterSection.COMMENTS,
isActive: true,
},
{
id: TrainFilterType.withTimetable,
section: TrainFilterSection.TIMETABLE,
isActive: true,
},
{
id: TrainFilterType.noTimetable,
section: TrainFilterSection.TIMETABLE,
isActive: true,
},
];
+6 -4
View File
@@ -112,13 +112,15 @@
"sort-timestampFrom": "date",
"sort-duration": "duration",
"filter-comments": "COMMENTS",
"filter-twr": "TWR",
"filter-skr": "SKR",
"filter-noComments": "NO COMMENTS",
"filter-withComments": "COMMENTS",
"filter-twr": "HIGH RISK CARGO",
"filter-skr": "EXCEEDED GAUGE",
"filter-passenger": "PASSENGER",
"filter-freight": "FREIGHT",
"filter-other": "OTHER",
"filter-noTimetable": "NO TIMETABLE",
"filter-withTimetable": "TIMETABLE",
"filter-reset": "RESET FILTERS",
"filter-clear": "CLEAR FILTERS",
@@ -211,7 +213,7 @@
"no-stations": "No stations to show here!",
"scenery-search": "Search for scenery..."
},
"trains": {
"trains": {
"no-trains": "No trains to show here!",
"loading": "Loading train data...",
"offline": "Offline ride",
+4 -2
View File
@@ -115,13 +115,15 @@
"sort-delay": "opóźnienie",
"sort-comments": "uwagi ekspl.",
"filter-comments": "UWAGI EKSPLOATACYJNE",
"filter-twr": "TWR",
"filter-withComments": "UWAGI EKSPLOATACYJNE",
"filter-noComments": "BEZ UWAG",
"filter-twr": "WYSOKIEGO RYZYKA",
"filter-skr": "PRZEKR. SKRAJNIA",
"filter-passenger": "PASAŻERSKIE",
"filter-freight": "TOWAROWE",
"filter-other": "INNE",
"filter-noTimetable": "BEZ RJ",
"filter-withTimetable": "ROZKŁAD JAZDY",
"filter-reset": "ZRESETUJ FILTRY",
"filter-clear": "WYŁĄCZ FILTRY",
+18 -8
View File
@@ -1,9 +1,19 @@
export const enum TrainFilterType {
comments = "comments",
twr = "twr",
skr = "skr",
passenger = "passenger",
freight = "freight",
other = "other",
noTimetable = "noTimetable"
export enum TrainFilterSection {
TRAIN_TYPE = 'TRAIN_TYPE',
TIMETABLE_TYPE = 'TIMETABLE_TYPE',
COMMENTS = 'COMMENTS',
TIMETABLE = 'TIMETABLE',
}
export const enum TrainFilterType {
noComments = 'noComments',
withComments = 'withComments',
twr = 'twr',
skr = 'skr',
passenger = 'passenger',
freight = 'freight',
other = 'other',
noTimetable = 'noTimetable',
withTimetable = 'withTimetable',
}
+17 -10
View File
@@ -24,26 +24,33 @@ function filterTrainList(trainList: Train[], searchedTrain: string, searchedDriv
const isFiltered = filters.every((f) => {
if (f.isActive) return true;
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.noTimetable:
return train.timetableData;
case TrainFilterType.withTimetable:
return !train.timetableData;
case TrainFilterType.noComments:
return train.timetableData?.followingStops.some((stop) => stop.comments) || false;
case TrainFilterType.withComments:
return train.timetableData?.followingStops.every((stop) => stop.comments) || true;
case TrainFilterType.twr:
return !train.timetableData.TWR;
return !train.timetableData?.TWR || true;
case TrainFilterType.skr:
return !train.timetableData.SKR;
return !train.timetableData?.SKR || true;
case TrainFilterType.passenger:
return !/^[AMRE]\D{2}$/.test(train.timetableData.category);
return !/^[AMRE]\D{2}$/.test(train.timetableData?.category || '');
case TrainFilterType.freight:
return !train.timetableData.category.startsWith('T');
return !train.timetableData?.category.startsWith('T');
case TrainFilterType.other:
return !/^[PXZL]\D{2}$/.test(train.timetableData.category);
return !/^[PXZL]\D{2}$/.test(train.timetableData?.category || '');
default:
return true;
@@ -53,7 +60,7 @@ function filterTrainList(trainList: Train[], searchedTrain: string, searchedDriv
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) &&
(!train.timetableData ? train.online : train.timetableData) &&
isFiltered
);
});
+3 -2
View File
@@ -1,6 +1,7 @@
import { TrainFilterType } from "../../scripts/enums/TrainFilterType";
import { TrainFilterSection, TrainFilterType } from '../../scripts/enums/TrainFilterType';
export interface TrainFilter {
id: TrainFilterType;
section: TrainFilterSection;
isActive: boolean;
}
}