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

rozbudowane filtry dziennika RJ

Browse Source
This commit is contained in:
Spythere
2023-06-04 12:06:15 +02:00
parent c3f687d439
commit 99415c35d3
12 changed files with 138 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/JournalView/JournalOptions.vue
+26 -15
View File
@@ -74,16 +74,23 @@
</div>
<h1 class="option-title" v-if="filters.length != 0">{{ $t('options.filter-title') }}</h1>
<div class="options_filters">
<button
v-for="filter in filters"
class="filter-option btn--option"
:class="{ checked: journalFilterActive.id === filter.id }"
:id="filter.id"
@click="onFilterChange(filter)"
>
{{ $t(`options.filter-${filter.id}`) }}
</button>
<div class="options_filter-sections" v-if="filterList">
<section class="filter-section" v-for="section in JournalFilterSection">
<p>{{ $t(`options.filter-section-${section}`) }}</p>
<div class="options_filters">
<button
v-for="filter in filterList.filter((f) => f.filterSection == section)"
class="filter-option btn--option"
:class="{ checked: filter.isActive }"
:id="filter.id"
@click="onFilterChange(filter)"
>
{{ $t(`options.filter-${filter.id}`) }}
</button>
</div>
</section>
</div>
</div>
</div>
@@ -103,7 +110,7 @@ import { useStore } from '../../store/store';
import ActionButton from '../Global/ActionButton.vue';
import SelectBox from '../Global/SelectBox.vue';
import { JournalFilterSection } from '../../scripts/enums/JournalFilterType';
import { JournalTimetableFilter } from '../../scripts/types/JournalTimetablesTypes';
import { JournalFilter } from '../../scripts/types/JournalTimetablesTypes';
export default defineComponent({
components: { SelectBox, ActionButton },
@@ -117,7 +124,7 @@ export default defineComponent({
},
filters: {
type: Array as PropType<JournalTimetableFilter[]>,
type: Array as PropType<JournalFilter[]>,
default: [],
},
@@ -156,7 +163,8 @@ export default defineComponent({
return {
searchersValues: inject('searchersValues') as { [key: string]: string },
sorterActive: inject('sorterActive') as { id: string | number; dir: number },
journalFilterActive: inject('journalFilterActive') as JournalTimetableFilter,
// journalFilterActive: inject('journalFilterActive') as JournalFilter,
filterList: inject('filterList') as JournalFilter[] | undefined,
};
},
@@ -257,8 +265,11 @@ export default defineComponent({
this.$emit('onSearchConfirm');
},
onFilterChange(filter: JournalTimetableFilter) {
this.journalFilterActive = filter;
onFilterChange(filter: JournalFilter) {
// this.journalFilterActive = filter;
this.filterList?.filter((f) => f.filterSection === filter.filterSection).forEach((f) => (f.isActive = false));
filter.isActive = true;
this.$emit('onSearchConfirm');
},
src/constants/Journal/JournalTimetablesConsts.ts
+25 -7
View File
@@ -1,28 +1,46 @@
import { JournalFilterType } from '../../scripts/enums/JournalFilterType';
import { JournalTimetableFilter } from '../../scripts/types/JournalTimetablesTypes';
import { JournalFilterSection, JournalFilterType } from '../../scripts/enums/JournalFilterType';
import { JournalFilter } from '../../scripts/types/JournalTimetablesTypes';
export const journalTimetableFilters: JournalTimetableFilter[] = [
export const journalTimetableFilters: JournalFilter[] = [
{
id: JournalFilterType.ALL,
filterSection: 'timetable-status',
filterSection: JournalFilterSection.TIMETABLE_STATUS,
isActive: true,
},
{
id: JournalFilterType.ACTIVE,
filterSection: 'timetable-status',
filterSection: JournalFilterSection.TIMETABLE_STATUS,
isActive: false,
},
{
id: JournalFilterType.FULFILLED,
filterSection: 'timetable-status',
filterSection: JournalFilterSection.TIMETABLE_STATUS,
isActive: false,
},
{
id: JournalFilterType.ABANDONED,
filterSection: 'timetable-status',
filterSection: JournalFilterSection.TIMETABLE_STATUS,
isActive: false,
},
{
id: JournalFilterType.TWR_SKR,
filterSection: JournalFilterSection.TWRSKR,
isActive: true,
},
{
id: JournalFilterType.TWR,
filterSection: JournalFilterSection.TWRSKR,
isActive: false,
},
{
id: JournalFilterType.SKR,
filterSection: JournalFilterSection.TWRSKR,
isActive: false,
},
];
src/locales/en.json
+5 -1
View File
@@ -106,7 +106,7 @@
"sort-mass": "mass",
"sort-speed": "speed",
"sort-length": "length",
"sort-distance": "route distance",
"sort-routeDistance": "route distance",
"sort-timetable": "train no.",
"sort-progress": "route progress",
"sort-delay": "current delay",
@@ -122,6 +122,7 @@
"filter-withComments": "COMMENTS",
"filter-twr": "HIGH RISK CARGO",
"filter-skr": "EXCEEDED GAUGE",
"filter-twr-skr": "ALL TYPES",
"filter-common": "NO WARNINGS",
"filter-passenger": "PASSENGER",
"filter-freight": "FREIGHT",
@@ -132,6 +133,9 @@
"filter-reset": "RESET FILTERS",
"filter-clear": "CLEAR FILTERS",
"filter-section-timetable-status": "TIMETABLE STATUS",
"filter-section-twrskr": "WARNINGS",
"filter-all": "ALL ENTRIES",
"filter-abandoned": "ABANDONED",
"filter-fulfilled": "FULFILLED",
src/locales/pl.json
+5 -1
View File
@@ -103,7 +103,7 @@
"search-timetables-date": "Data rozkładu jazdy (czas polski)",
"search-dispatchers-date": "Data służby (czas polski)",
"sort-distance": "kilometraż",
"sort-routeDistance": "kilometraż",
"sort-allStopsCount": "stacje",
"sort-beginDate": "data",
"sort-timetableId": "ID rozkładu",
@@ -123,6 +123,7 @@
"filter-noComments": "BEZ UWAG",
"filter-twr": "WYS. RYZYKA",
"filter-skr": "SKRAJNIA",
"filter-twr-skr": "WSZYSTKIE",
"filter-common": "ZWYKŁE",
"filter-passenger": "PASAŻERSKIE",
"filter-freight": "TOWAROWE",
@@ -133,6 +134,9 @@
"filter-reset": "ZRESETUJ FILTRY",
"filter-clear": "WYŁĄCZ FILTRY",
"filter-section-timetable-status": "STATUS ROZKŁADU JAZDY",
"filter-section-twrskr": "UWAGI",
"filter-all": "WSZYSTKIE",
"filter-abandoned": "PORZUCONE",
"filter-fulfilled": "WYPEŁNIONE",
src/scripts/enums/JournalFilterType.ts
+3 -3
View File
@@ -5,10 +5,10 @@ export const enum JournalFilterType {
ALL = 'all',
TWR = 'twr',
SKR = 'skr',
TWR_SKR = 'twr-skr',
}
export enum JournalFilterSection {
TIMETABLE_STATUS = 'timetable-status',
TWR = 'twr',
SKR = 'skr',
}
TWRSKR = 'twrskr',
}
src/scripts/interfaces/api/TimetablesQueryParams.ts
+3
View File
@@ -14,5 +14,8 @@ export interface TimetablesQueryParams {
fulfilled?: number;
terminated?: number;
twr?: number;
skr?: number;
sortBy?: JournalTimetableSorter['id'];
}
src/scripts/managers/trainFilterManager.ts
+2 -2
View File
@@ -44,7 +44,7 @@ function filterTrainList(trainList: Train[], searchedTrain: string, searchedDriv
return !train.timetableData?.SKR;
case TrainFilterType.common:
return train.timetableData?.SKR || train.timetableData?.TWR;
return train.timetableData?.SKR || train.timetableData?.TWR;
case TrainFilterType.passenger:
return !/^[AMRE]\D{2}$/.test(train.timetableData?.category || '');
@@ -81,7 +81,7 @@ function sortTrainList(trainList: Train[], sorterActive: { id: string; dir: numb
if (a.mass > b.mass) return sorterActive.dir;
return -sorterActive.dir;
case 'distance':
case 'routeDistance':
if ((a.timetableData?.routeDistance || -1) > (b.timetableData?.routeDistance || -1)) return sorterActive.dir;
return -sorterActive.dir;
src/scripts/types/JournalTimetablesTypes.ts
+1 -1
View File
@@ -13,7 +13,7 @@ export type JournalTimetableSearchType = {
[key in JournalTimetableSearchKey]: string;
};
export interface JournalTimetableFilter {
export interface JournalFilter {
id: JournalFilterType;
filterSection: string;
isActive: boolean;
src/store/journalFiltersStore.ts
+5 -2
View File
@@ -1,6 +1,9 @@
import { defineStore } from 'pinia';
export const useJournalFiltersStore = defineStore('journalFiltersStore', {
state: () => ({}),
state: () => ({
timetableFilters: {
},
}),
});
src/styles/filters_options.scss
+9 -1
View File
@@ -82,12 +82,16 @@ h1.option-title {
padding: 0.25em 0.25em 0 0;
}
.options_filter-sections section {
margin: 0.5em 0;
}
.options_filters {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
margin: 0.5em 0 0 0;
margin: 0.25em 0;
}
.sort-option,
@@ -159,4 +163,8 @@ h1.option-title {
.options_sorters {
justify-content: center;
}
.filter-section {
text-align: center;
}
}
src/views/JournalTimetables.vue
+52 -26
View File
@@ -7,7 +7,7 @@
@on-search-confirm="fetchHistoryData"
@on-options-reset="resetOptions"
@on-refresh-data="fetchHistoryData"
:sorter-option-ids="['timetableId', 'beginDate', 'distance', 'allStopsCount']"
:sorter-option-ids="['timetableId', 'beginDate', 'routeDistance', 'allStopsCount']"
:filters="journalTimetableFilters"
:currentOptionsActive="currentOptionsActive"
:data-status="dataStatus"
@@ -78,7 +78,11 @@ import { useStore } from '../store/store';
import { LocationQuery } from 'vue-router';
import { TimetablesQueryParams } from '../scripts/interfaces/api/TimetablesQueryParams';
import { JournalFilterType } from '../scripts/enums/JournalFilterType';
import { JournalTimetableSearchType, JournalTimetableSorter } from '../scripts/types/JournalTimetablesTypes';
import {
JournalFilter,
JournalTimetableSearchType,
JournalTimetableSorter,
} from '../scripts/types/JournalTimetablesTypes';
import { journalTimetableFilters } from '../constants/Journal/JournalTimetablesConsts';
const TIMETABLES_API_URL = `${URLs.stacjownikAPI}/api/getTimetables`;
@@ -116,7 +120,9 @@ export default defineComponent({
setup() {
const sorterActive: JournalTimetableSorter = reactive({ id: 'timetableId', dir: 'desc' });
const journalFilterActive = ref(journalTimetableFilters[0]);
// const journalFilterActive = ref(journalTimetableFilters[0]);
const initFilters: readonly JournalFilter[] = JSON.parse(JSON.stringify(journalTimetableFilters));
const filterList = reactive([...initFilters]);
const searchersValues = reactive({
'search-train': '',
@@ -131,14 +137,14 @@ export default defineComponent({
provide('searchersValues', searchersValues);
provide('sorterActive', sorterActive);
provide('journalFilterActive', journalFilterActive);
provide('filterList', filterList);
const scrollElement: Ref<HTMLElement | null> = ref(null);
return {
sorterActive,
journalFilterActive,
searchersValues,
filterList,
countFromIndex,
countLimit,
@@ -194,7 +200,7 @@ export default defineComponent({
resetOptions() {
this.setSearchers('', '', '', '', '');
this.journalFilterActive = this.journalTimetableFilters[0];
// this.journalFilterActive = this.journalTimetableFilters[0];
this.sorterActive.id = 'timetableId';
this.fetchHistoryData();
@@ -234,29 +240,49 @@ export default defineComponent({
const queryParams: TimetablesQueryParams = {};
switch (this.journalFilterActive.id) {
case JournalFilterType.ABANDONED:
queryParams['fulfilled'] = 0;
queryParams['terminated'] = 1;
break;
this.filterList
.filter((f) => f.isActive)
.forEach((f) => {
switch (f.id) {
case JournalFilterType.ABANDONED:
queryParams['fulfilled'] = 0;
queryParams['terminated'] = 1;
break;
case JournalFilterType.ACTIVE:
queryParams['fulfilled'] = undefined;
queryParams['terminated'] = 0;
break;
case JournalFilterType.ACTIVE:
queryParams['fulfilled'] = undefined;
queryParams['terminated'] = 0;
break;
case JournalFilterType.FULFILLED:
queryParams['terminated'] = undefined;
queryParams['fulfilled'] = 1;
break;
case JournalFilterType.ALL:
queryParams['terminated'] = undefined;
queryParams['fulfilled'] = undefined;
break;
case JournalFilterType.FULFILLED:
queryParams['terminated'] = undefined;
queryParams['fulfilled'] = 1;
break;
default:
break;
}
case JournalFilterType.ALL:
queryParams['terminated'] = undefined;
queryParams['fulfilled'] = undefined;
break;
case JournalFilterType.TWR_SKR:
queryParams['twr'] = undefined;
queryParams['skr'] = undefined;
break;
case JournalFilterType.TWR:
queryParams['twr'] = 1;
queryParams['skr'] = undefined;
break;
case JournalFilterType.SKR:
queryParams['twr'] = undefined;
queryParams['skr'] = 1;
break;
default:
break;
}
});
queryParams['driverName'] = driverName;
queryParams['trainNo'] = trainNo;
src/views/TrainsView.vue
+2 -2
View File
@@ -2,7 +2,7 @@
<section class="trains-view">
<div class="trains_wrapper">
<TrainOptions
:sorter-option-ids="['distance', 'id', 'progress', 'delay', 'mass', 'speed', 'length']"
:sorter-option-ids="['routeDistance', 'id', 'progress', 'delay', 'mass', 'speed', 'length']"
:current-options-active="currentOptionsActive"
/>
@@ -57,7 +57,7 @@ export default defineComponent({
const store = useStore();
const initTrainFilters = [...trainFilters.map((f) => ({ ...f }))];
const sorterActive = reactive({ id: 'distance', dir: -1 });
const sorterActive = reactive({ id: 'routeDistance', dir: -1 });
const filterList = reactive([...trainFilters]) as TrainFilter[];
const currentOptionsActive = ref(false);