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

reaktywne filtry URL w dzienniku RJ

Browse Source
This commit is contained in:
Spythere
2023-12-17 16:10:13 +01:00
parent f4be32aa39
commit e8ed36df16
7 changed files with 141 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/JournalView/JournalOptions.vue
+2 -1
View File
@@ -33,7 +33,7 @@
<h1 class="option-title">{{ $t('options.search-title') }}</h1>
<div class="search_content">
<div class="search" v-for="(_, propName) in searchersValues" :key="propName">
<label v-if="propName == 'search-date'" for="date">{{
<label v-if="propName == 'search-date'" for="search-date">{{
$t(`options.search-${optionsType}-date`)
}}</label>
@@ -47,6 +47,7 @@
:placeholder="$t(`options.${propName}`)"
:type="propName == 'search-date' ? 'date' : 'text'"
:min="propName == 'search-date' ? '2022-02-01' : undefined"
:id="`${propName}`"
:list="propName.toString()"
/>
src/components/JournalView/typings.ts
+4 -2
View File
@@ -20,10 +20,11 @@ export namespace Journal {
};
export const enum TimetableFilterId {
ALL_STATUSES = 'all-statuses',
ACTIVE = 'active',
FULFILLED = 'fulfilled',
ABANDONED = 'abandoned',
ALL = 'all',
ALL_SPECIALS = 'all-specials',
TWR = 'twr',
SKR = 'skr',
TWR_SKR = 'twr-skr'
@@ -31,13 +32,14 @@ export namespace Journal {
export enum FilterSection {
TIMETABLE_STATUS = 'timetable-status',
TWRSKR = 'twrskr'
SPECIAL = 'special'
}
export interface TimetableFilter {
id: TimetableFilterId;
filterSection: string;
isActive: boolean;
default: boolean;
}
export type TimetableSorterKey = 'timetableId' | 'beginDate' | 'distance' | 'total-stops';
src/components/SceneryView/SceneryTimetablesHistory.vue
+22 -12
View File
@@ -28,7 +28,7 @@
<tbody>
<tr v-for="historyItem in historyList" :key="historyItem.id">
<td>
<router-link :to="`/journal/timetables?timetableId=${historyItem.id}`">
<router-link :to="`/journal/timetables?search-train=%23${historyItem.id}`">
#{{ historyItem.id }}
</router-link>
</td>
@@ -37,11 +37,16 @@
{{ historyItem.trainNo }}
</td>
<td>{{ historyItem.route.replace('|', ' -> ') }}</td>
<td>{{ historyItem.driverName }}</td>
<td>
<router-link :to="`/journal/timetables?search-driver=${historyItem.driverName}`">
{{ historyItem.driverName }}
</router-link>
</td>
<td>
<router-link
v-if="historyItem.authorName"
:to="`/journal/timetables?authorName=${historyItem.authorName}`"
:to="`/journal/timetables?search-dispatcher=${historyItem.authorName}`"
>{{ historyItem.authorName }}
</router-link>
<i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
@@ -99,18 +104,20 @@ export default defineComponent({
},
methods: {
async fetchAPIData(countFrom = 0, countLimit = 15) {
async fetchAPIData() {
if (!this.station && !this.onlineScenery) {
this.dataStatus = Status.Data.Loaded;
return;
}
try {
const requestString = `api/getTimetables?issuedFrom=${
this.station?.name || this.onlineScenery?.name
}&countFrom=${countFrom}&countLimit=${countLimit}`;
const response: API.TimetableHistory.Response = await (await http.get(requestString)).data;
const response: API.TimetableHistory.Response = await (
await http.get('api/getTimetables', {
params: {
issuedFrom: this.station?.name
}
})
).data;
this.historyList = response;
@@ -121,9 +128,12 @@ export default defineComponent({
},
navigateToHistory() {
this.$router.push(
`/journal/timetables?issuedFrom=${this.station?.name || this.onlineScenery?.name}`
);
this.$router.push({
path: '/journal/timetables',
query: {
'search-issuedFrom': this.station?.name || this.onlineScenery?.name
}
});
}
},
components: { Loading }
src/locales/en.json
+4 -3
View File
@@ -144,7 +144,8 @@
"filter-withComments": "COMMENTS",
"filter-twr": "HIGH RISK CARGO",
"filter-skr": "EXCEEDED GAUGE",
"filter-twr-skr": "ALL TYPES",
"filter-twr-skr": "BOTH TYPES",
"filter-all-specials": "ALL",
"filter-common": "NO WARNINGS",
"filter-passenger": "PASSENGER",
"filter-freight": "FREIGHT",
@@ -156,9 +157,9 @@
"filter-clear": "CLEAR FILTERS",
"filter-section-timetable-status": "TIMETABLE STATUS",
"filter-section-twrskr": "WARNINGS",
"filter-section-special": "SPECIAL TYPE",
"filter-all": "ALL ENTRIES",
"filter-all-statuses": "ALL",
"filter-abandoned": "ABANDONED",
"filter-fulfilled": "FULFILLED",
"filter-active": "ACTIVE"
src/locales/pl.json
+4 -3
View File
@@ -133,7 +133,8 @@
"filter-noComments": "BEZ UWAG",
"filter-twr": "WYS. RYZYKA",
"filter-skr": "SKRAJNIA",
"filter-twr-skr": "WSZYSTKIE",
"filter-twr-skr": "TWR/SKR",
"filter-all-statuses": "WSZYSTKIE",
"filter-common": "ZWYKŁE",
"filter-passenger": "PASAŻERSKIE",
"filter-freight": "TOWAROWE",
@@ -145,9 +146,9 @@
"filter-clear": "WYŁĄCZ FILTRY",
"filter-section-timetable-status": "STATUS ROZKŁADU JAZDY",
"filter-section-twrskr": "UWAGI",
"filter-section-special": "TYPY SPECJALNE",
"filter-all": "WSZYSTKIE",
"filter-all-specials": "WSZYSTKIE",
"filter-abandoned": "PORZUCONE",
"filter-fulfilled": "WYPEŁNIONE",
"filter-active": "AKTYWNE"
src/views/JournalDispatchers.vue
+17 -10
View File
@@ -166,6 +166,15 @@ export default defineComponent({
},
methods: {
handleRouteParams() {
this.$router.push({
query: {
'search-date': this.searchersValues['search-date'] || undefined,
'search-station': this.searchersValues['search-station'] || undefined,
'search-dispatcher': this.searchersValues['search-dispatcher'] || undefined
}
});
},
handleScroll(e: Event) {
const listElement = e.target as HTMLElement;
const scrollTop = listElement.scrollTop;
@@ -178,21 +187,19 @@ export default defineComponent({
},
handleQueries(query: LocationQuery) {
const queryKeys = Object.keys(query);
if (queryKeys.includes('sceneryName')) this.setSearchers('', `${query.sceneryName}`, '');
if (queryKeys.includes('dispatcherName'))
this.setSearchers('', '', `${query.dispatcherName}`);
// if (queryKeys.includes('sceneryName')) this.setSearchers('', `${query.sceneryName}`, '');
// if (queryKeys.includes('dispatcherName'))
// this.setSearchers('', '', `${query.dispatcherName}`);
},
setSearchers(date: string, station: string, dispatcher: string) {
this.searchersValues['search-date'] = date;
this.searchersValues['search-station'] = station;
this.searchersValues['search-dispatcher'] = dispatcher;
setSearchers(searchers: { [key: string]: string }) {
this.searchersValues['search-date'] = searchers['search-date'] ?? '';
this.searchersValues['search-station'] = searchers['search-station'] ?? '';
this.searchersValues['search-dispatcher'] = searchers['search-dispatcher'] ?? '';
},
resetOptions() {
this.setSearchers('', '', '');
this.setSearchers({});
this.sorterActive.id = 'timestampFrom';
this.fetchHistoryData();
src/views/JournalTimetables.vue
+88 -40
View File
@@ -5,9 +5,9 @@
<div class="journal_wrapper">
<div class="journal_top-bar">
<JournalOptions
@on-search-confirm="fetchHistoryData"
@on-options-reset="resetOptions"
@on-refresh-data="fetchHistoryData"
@onSearchConfirm="onSearchConfirm"
@onOptionsReset="resetOptions"
@onRefreshData="fetchHistoryData"
:sorter-option-ids="['timetableId', 'beginDate', 'routeDistance', 'allStopsCount']"
:filters="journalTimetableFilters"
:currentOptionsActive="currentOptionsActive"
@@ -58,45 +58,58 @@ import http from '../http';
export const journalTimetableFilters: Journal.TimetableFilter[] = [
{
id: Journal.TimetableFilterId.ALL,
id: Journal.TimetableFilterId.ALL_STATUSES,
filterSection: Journal.FilterSection.TIMETABLE_STATUS,
isActive: true
isActive: true,
default: true
},
{
id: Journal.TimetableFilterId.ACTIVE,
filterSection: Journal.FilterSection.TIMETABLE_STATUS,
isActive: false
isActive: false,
default: false
},
{
id: Journal.TimetableFilterId.FULFILLED,
filterSection: Journal.FilterSection.TIMETABLE_STATUS,
isActive: false
isActive: false,
default: false
},
{
id: Journal.TimetableFilterId.ABANDONED,
filterSection: Journal.FilterSection.TIMETABLE_STATUS,
isActive: false
isActive: false,
default: false
},
{
id: Journal.TimetableFilterId.TWR_SKR,
filterSection: Journal.FilterSection.TWRSKR,
isActive: true
id: Journal.TimetableFilterId.ALL_SPECIALS,
filterSection: Journal.FilterSection.SPECIAL,
isActive: true,
default: true
},
{
id: Journal.TimetableFilterId.TWR,
filterSection: Journal.FilterSection.TWRSKR,
isActive: false
filterSection: Journal.FilterSection.SPECIAL,
isActive: false,
default: false
},
{
id: Journal.TimetableFilterId.SKR,
filterSection: Journal.FilterSection.TWRSKR,
isActive: false
filterSection: Journal.FilterSection.SPECIAL,
isActive: false,
default: false
},
{
id: Journal.TimetableFilterId.TWR_SKR,
filterSection: Journal.FilterSection.SPECIAL,
isActive: false,
default: false
}
];
@@ -176,10 +189,11 @@ export default defineComponent({
setup() {
const sorterActive: Journal.TimetableSorter = reactive({ id: 'timetableId', dir: 'desc' });
// const journalFilterActive = ref(journalTimetableFilters[0]);
const initFilters: readonly Journal.TimetableFilter[] = JSON.parse(
JSON.stringify(journalTimetableFilters)
);
const filterList: Journal.TimetableFilter[] = reactive(JSON.parse(JSON.stringify(initFilters)));
const searchersValues = reactive({
@@ -235,6 +249,38 @@ export default defineComponent({
},
methods: {
onSearchConfirm() {
this.handleRouteParams();
this.fetchHistoryData();
},
handleRouteParams() {
this.$router.push({
query: {
...this.$route.query,
'sorter-active': this.sorterActive.id != 'timetableId' ? this.sorterActive.id : undefined,
...Object.keys(this.searchersValues).reduce(
(acc, k) => {
const searchVal = this.searchersValues[k as Journal.TimetableSearchKey];
acc[k] = searchVal || undefined;
return acc;
},
{} as { [k: string]: string | undefined }
),
...this.filterList.reduce(
(acc, f) => {
if (f.isActive) acc[f.filterSection] = f.default ? undefined : f.id;
return acc;
},
{} as { [k: string]: string | undefined }
)
}
});
},
handleScroll(e: Event) {
const listElement = e.target as HTMLElement;
const scrollTop = listElement.scrollTop;
@@ -247,32 +293,28 @@ export default defineComponent({
},
handleQueries(query: LocationQuery) {
const queryKeys = Object.keys(query);
if (queryKeys.includes('timetableId'))
this.setSearchers('', '', `#${query.timetableId}`, '', '');
if (queryKeys.includes('issuedFrom'))
this.setSearchers('', '', '', '', `${query.issuedFrom}`);
if (queryKeys.includes('authorName'))
this.setSearchers('', '', '', `${query.authorName}`, '');
this.setOptions(query as any);
},
setSearchers(
date: string,
driver: string,
train: string,
dispatcher: string,
issuedFrom: string
) {
this.searchersValues['search-date'] = date;
this.searchersValues['search-driver'] = driver;
this.searchersValues['search-train'] = train;
this.searchersValues['search-dispatcher'] = dispatcher;
this.searchersValues['search-issuedFrom'] = issuedFrom;
setOptions(options: { [key: string]: string }) {
this.searchersValues['search-date'] = options['search-date'] ?? '';
this.searchersValues['search-driver'] = options['search-driver'] ?? '';
this.searchersValues['search-train'] = options['search-train'] ?? '';
this.searchersValues['search-dispatcher'] = options['search-dispatcher'] ?? '';
this.searchersValues['search-issuedFrom'] = options['search-issuedFrom'] ?? '';
this.sorterActive.id =
(options['sorter-active'] as Journal.TimetableSorterKey) ?? 'timetableId';
this.filterList.forEach((f) => {
f.isActive =
options[f.filterSection] === f.id ||
(options[f.filterSection] === undefined && f.default);
});
},
resetOptions() {
this.setSearchers('', '', '', '', '');
this.setOptions({});
this.sorterActive.id = 'timetableId';
@@ -282,6 +324,7 @@ export default defineComponent({
this.initFilters.find((initFilter) => initFilter.id == f.id)?.isActive || false)
);
this.handleRouteParams();
this.fetchHistoryData();
},
@@ -340,12 +383,12 @@ export default defineComponent({
queryParams['fulfilled'] = 1;
break;
case Journal.TimetableFilterId.ALL:
case Journal.TimetableFilterId.ALL_STATUSES:
queryParams['terminated'] = undefined;
queryParams['fulfilled'] = undefined;
break;
case Journal.TimetableFilterId.TWR_SKR:
case Journal.TimetableFilterId.ALL_SPECIALS:
queryParams['twr'] = undefined;
queryParams['skr'] = undefined;
break;
@@ -356,7 +399,12 @@ export default defineComponent({
break;
case Journal.TimetableFilterId.SKR:
queryParams['twr'] = undefined;
queryParams['twr'] = 0;
queryParams['skr'] = 1;
break;
case Journal.TimetableFilterId.TWR_SKR:
queryParams['twr'] = 1;
queryParams['skr'] = 1;
break;