diff --git a/src/components/JournalView/JournalOptions.vue b/src/components/JournalView/JournalOptions.vue index 9fee8cc..28a2d58 100644 --- a/src/components/JournalView/JournalOptions.vue +++ b/src/components/JournalView/JournalOptions.vue @@ -74,16 +74,23 @@

{{ $t('options.filter-title') }}

-
- + +
+
+

{{ $t(`options.filter-section-${section}`) }}

+ +
+ +
+
@@ -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, + type: Array as PropType, 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'); }, diff --git a/src/constants/Journal/JournalTimetablesConsts.ts b/src/constants/Journal/JournalTimetablesConsts.ts index 95eff87..86b8182 100644 --- a/src/constants/Journal/JournalTimetablesConsts.ts +++ b/src/constants/Journal/JournalTimetablesConsts.ts @@ -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, }, ]; diff --git a/src/locales/en.json b/src/locales/en.json index 8455ec8..bd99ee2 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -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", diff --git a/src/locales/pl.json b/src/locales/pl.json index 5b4423c..55af03a 100644 --- a/src/locales/pl.json +++ b/src/locales/pl.json @@ -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", diff --git a/src/scripts/enums/JournalFilterType.ts b/src/scripts/enums/JournalFilterType.ts index f910b83..95360ba 100644 --- a/src/scripts/enums/JournalFilterType.ts +++ b/src/scripts/enums/JournalFilterType.ts @@ -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', -} \ No newline at end of file + TWRSKR = 'twrskr', +} diff --git a/src/scripts/interfaces/api/TimetablesQueryParams.ts b/src/scripts/interfaces/api/TimetablesQueryParams.ts index 125ab49..45298e9 100644 --- a/src/scripts/interfaces/api/TimetablesQueryParams.ts +++ b/src/scripts/interfaces/api/TimetablesQueryParams.ts @@ -14,5 +14,8 @@ export interface TimetablesQueryParams { fulfilled?: number; terminated?: number; + twr?: number; + skr?: number; + sortBy?: JournalTimetableSorter['id']; } diff --git a/src/scripts/managers/trainFilterManager.ts b/src/scripts/managers/trainFilterManager.ts index efde499..89ddab6 100644 --- a/src/scripts/managers/trainFilterManager.ts +++ b/src/scripts/managers/trainFilterManager.ts @@ -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; diff --git a/src/scripts/types/JournalTimetablesTypes.ts b/src/scripts/types/JournalTimetablesTypes.ts index 0d6ddd7..be5519b 100644 --- a/src/scripts/types/JournalTimetablesTypes.ts +++ b/src/scripts/types/JournalTimetablesTypes.ts @@ -13,7 +13,7 @@ export type JournalTimetableSearchType = { [key in JournalTimetableSearchKey]: string; }; -export interface JournalTimetableFilter { +export interface JournalFilter { id: JournalFilterType; filterSection: string; isActive: boolean; diff --git a/src/store/journalFiltersStore.ts b/src/store/journalFiltersStore.ts index 892f528..0a7e033 100644 --- a/src/store/journalFiltersStore.ts +++ b/src/store/journalFiltersStore.ts @@ -1,6 +1,9 @@ import { defineStore } from 'pinia'; export const useJournalFiltersStore = defineStore('journalFiltersStore', { - state: () => ({}), - + state: () => ({ + timetableFilters: { + + }, + }), }); diff --git a/src/styles/filters_options.scss b/src/styles/filters_options.scss index 154de89..fb92009 100644 --- a/src/styles/filters_options.scss +++ b/src/styles/filters_options.scss @@ -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; + } } diff --git a/src/views/JournalTimetables.vue b/src/views/JournalTimetables.vue index 3648d43..5d47499 100644 --- a/src/views/JournalTimetables.vue +++ b/src/views/JournalTimetables.vue @@ -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 = 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; diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue index e7a41b8..99ab20a 100644 --- a/src/views/TrainsView.vue +++ b/src/views/TrainsView.vue @@ -2,7 +2,7 @@
@@ -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);