mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 13:28:11 +00:00
filtry pociągów
This commit is contained in:
@@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
|
||||
@@ -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
@@ -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
@@ -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",
|
||||
|
||||
@@ -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',
|
||||
}
|
||||
|
||||
@@ -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
|
||||
);
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user