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

refactor: journal dispatcher filters

Browse Source
This commit is contained in:
Spythere
2024-10-01 16:40:11 +02:00
parent 52d1771c21
commit c33b5ef8c1
7 changed files with 100 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/JournalView/JournalDispatchers/JournalDispatchersList.vue
+43 -32
View File
@@ -1,43 +1,45 @@
<template> <template>
<div class="journal_warning" v-if="store.isOffline"> <div>
{{ $t('app.offline') }} <div class="journal_warning" v-if="store.isOffline">
</div> {{ $t('app.offline') }}
</div>
<Loading v-else-if="dataStatus == Status.Data.Loading" /> <Loading v-else-if="dataStatus == Status.Data.Loading" />
<div v-else-if="dataStatus == Status.Data.Error" class="journal_warning error"> <div v-else-if="dataStatus == Status.Data.Error" class="journal_warning error">
{{ $t('app.error') }} {{ $t('app.error') }}
</div> </div>
<div class="journal_warning" v-else-if="dispatcherHistory.length == 0"> <div class="journal_warning" v-else-if="dispatcherHistory.length == 0">
{{ $t('app.no-result') }} {{ $t('app.no-result') }}
</div> </div>
<div v-else> <div v-else>
<transition-group name="list-anim" class="journal-list" tag="ul"> <transition-group name="list-anim" class="journal-list" tag="ul">
<JournalDispatcherEntry <JournalDispatcherEntry
v-for="entry in dispatcherHistory" v-for="entry in dispatcherHistory"
:key="entry.id" :key="entry.id"
:entry="entry" :entry="entry"
:onToggleShowExtraInfo="toggleExtraInfo" :onToggleShowExtraInfo="toggleExtraInfo"
:showExtraInfo="extraInfoIndexes.includes(entry.id)" :showExtraInfo="extraInfoIndexes.includes(entry.id)"
/>
</transition-group>
<AddDataButton
:list="dispatcherHistory"
:scrollDataLoaded="scrollDataLoaded"
:scrollNoMoreData="scrollNoMoreData"
@addHistoryData="addHistoryData"
/> />
</transition-group> </div>
<AddDataButton <div class="journal_warning" v-if="scrollNoMoreData">
:list="dispatcherHistory" {{ $t('journal.no-further-data') }}
:scrollDataLoaded="scrollDataLoaded" </div>
:scrollNoMoreData="scrollNoMoreData"
@addHistoryData="addHistoryData"
/>
</div>
<div class="journal_warning" v-if="scrollNoMoreData"> <div class="journal_warning" v-else-if="!scrollDataLoaded">
{{ $t('journal.no-further-data') }} {{ $t('journal.loading-further-data') }}
</div> </div>
<div class="journal_warning" v-else-if="!scrollDataLoaded">
{{ $t('journal.loading-further-data') }}
</div> </div>
</template> </template>
@@ -81,6 +83,15 @@ export default defineComponent({
}; };
}, },
watch: {
'$route.query': {
deep: true,
handler() {
this.extraInfoIndexes.length = 0;
}
}
},
methods: { methods: {
toggleExtraInfo(id: number) { toggleExtraInfo(id: number) {
const existingIdx = this.extraInfoIndexes.indexOf(id); const existingIdx = this.extraInfoIndexes.indexOf(id);
src/components/JournalView/JournalTimetables/JournalTimetablesList.vue
+1
View File
@@ -94,6 +94,7 @@ export default defineComponent({
} }
} }
}, },
methods: { methods: {
toggleExtraInfo(id: number) { toggleExtraInfo(id: number) {
const existingIdx = this.extraInfoIndexes.indexOf(id); const existingIdx = this.extraInfoIndexes.indexOf(id);
src/components/JournalView/typings.ts
+1 -1
View File
@@ -19,7 +19,7 @@ export namespace Journal {
}; };
export type TimetableSorterKey = 'timetableId' | 'beginDate' | 'distance' | 'total-stops'; export type TimetableSorterKey = 'timetableId' | 'beginDate' | 'distance' | 'total-stops';
export type DispatcherSorterKey = 'timestampFrom' | 'duration'; export type DispatcherSorterKey = 'timestampFrom' | 'currentDuration';
export interface DispatcherSorter { export interface DispatcherSorter {
id: DispatcherSorterKey; id: DispatcherSorterKey;
src/locales/en.json
+1 -1
View File
@@ -193,7 +193,7 @@
"sort-beginDate": "date", "sort-beginDate": "date",
"sort-timetableId": "timetable ID", "sort-timetableId": "timetable ID",
"sort-timestampFrom": "date", "sort-timestampFrom": "date",
"sort-duration": "duration", "sort-currentDuration": "duration",
"filter-noComments": "NO COMMENTS", "filter-noComments": "NO COMMENTS",
"filter-withComments": "COMMENTS", "filter-withComments": "COMMENTS",
src/locales/pl.json
+1 -1
View File
@@ -182,7 +182,7 @@
"sort-beginDate": "data", "sort-beginDate": "data",
"sort-timetableId": "ID rozkładu", "sort-timetableId": "ID rozkładu",
"sort-timestampFrom": "data", "sort-timestampFrom": "data",
"sort-duration": "czas dyżuru", "sort-currentDuration": "czas dyżuru",
"sort-id": "id rozkładu", "sort-id": "id rozkładu",
"sort-mass": "masa", "sort-mass": "masa",
src/views/JournalDispatchers.vue
+52 -44
View File
@@ -7,8 +7,8 @@
<JournalOptions <JournalOptions
@on-search-confirm="fetchHistoryData" @on-search-confirm="fetchHistoryData"
@on-options-reset="resetOptions" @on-options-reset="resetOptions"
@on-refresh-data="fetchHistoryData(true)" @on-refresh-data="fetchHistoryData"
:sorter-option-ids="['timestampFrom', 'duration']" :sorter-option-ids="['timestampFrom', 'currentDuration']"
:data-status="dataStatus" :data-status="dataStatus"
:current-options-active="currentOptionsActive" :current-options-active="currentOptionsActive"
optionsType="dispatchers" optionsType="dispatchers"
@@ -59,6 +59,28 @@ const statsButtons: Journal.StatsButton[] = [
} }
]; ];
interface DispatchersQueryParams {
dispatcherName?: string;
stationName?: string;
stationHash?: string;
timestampFrom?: number;
timestampTo?: number;
countFrom?: number;
countLimit?: number;
sortBy?: Journal.DispatcherSorter['id'];
}
const defaultQueryParams: DispatchersQueryParams = {
countLimit: 30,
sortBy: 'timestampFrom',
countFrom: undefined,
dispatcherName: undefined,
stationHash: undefined,
stationName: undefined,
timestampFrom: undefined,
timestampTo: undefined
};
export default defineComponent({ export default defineComponent({
components: { components: {
JournalOptions, JournalOptions,
@@ -83,9 +105,8 @@ export default defineComponent({
data: () => ({ data: () => ({
statsButtons, statsButtons,
currentQuery: '',
currentQueryArray: [] as string[],
dataRefreshedAt: null as Date | null, dataRefreshedAt: null as Date | null,
currentQueryParams: {} as DispatchersQueryParams,
scrollDataLoaded: true, scrollDataLoaded: true,
scrollNoMoreData: false, scrollNoMoreData: false,
@@ -109,9 +130,6 @@ export default defineComponent({
'search-date': '' 'search-date': ''
} as Journal.DispatcherSearchType); } as Journal.DispatcherSearchType);
const countFromIndex = ref(0);
const countLimit = 15;
provide('sorterActive', sorterActive); provide('sorterActive', sorterActive);
provide('journalFilterActive', journalFilterActive); provide('journalFilterActive', journalFilterActive);
provide('searchersValues', searchersValues); provide('searchersValues', searchersValues);
@@ -126,19 +144,17 @@ export default defineComponent({
sorterActive, sorterActive,
searchersValues, searchersValues,
countFromIndex, scrollElement
countLimit,
scrollElement,
maxCount: ref(15)
}; };
}, },
watch: { watch: {
currentQueryArray(q: string[]) { currentQueryParams(queryParams: DispatchersQueryParams) {
this.currentOptionsActive = this.currentOptionsActive = Object.keys(queryParams).some(
q.length > 2 || (k) =>
q.some((qv) => qv.startsWith('sortBy=') && qv.split('=')[1] != 'timestampFrom'); queryParams[k as keyof DispatchersQueryParams] !=
defaultQueryParams[k as keyof DispatchersQueryParams]
);
}, },
'mainStore.dispatcherStatsData'(stats) { 'mainStore.dispatcherStatsData'(stats) {
@@ -234,13 +250,10 @@ export default defineComponent({
async addHistoryData() { async addHistoryData() {
this.scrollDataLoaded = false; this.scrollDataLoaded = false;
this.currentQueryParams['countFrom'] = this.historyList.length;
this.countFromIndex = this.historyList.length;
const responseData: API.DispatcherHistory.Response = await ( const responseData: API.DispatcherHistory.Response = await (
await this.apiStore.client!.get( await this.apiStore.client!.get(`api/getDispatchers`, { params: this.currentQueryParams })
`api/getDispatchers?${this.currentQuery}&countFrom=${this.countFromIndex}`
)
).data; ).data;
if (!responseData) return; if (!responseData) return;
@@ -254,43 +267,38 @@ export default defineComponent({
this.scrollDataLoaded = true; this.scrollDataLoaded = true;
}, },
async fetchHistoryData(reset = false) { async fetchHistoryData() {
const queries: string[] = []; const queryParams: DispatchersQueryParams = {};
const dispatcher = this.searchersValues['search-dispatcher'].trim(); const dispatcherName = this.searchersValues['search-dispatcher'].trim() || undefined;
const station = this.searchersValues['search-station'].trim(); const stationName = this.searchersValues['search-station'].trim() || undefined;
const dateString = this.searchersValues['search-date'].trim(); const dateString = this.searchersValues['search-date'].trim() || undefined;
const timestampFrom = dateString const timestampFrom = dateString
? Date.parse(new Date(dateString).toISOString()) - 120 * 60 * 1000 ? Date.parse(new Date(dateString).toISOString()) - 120 * 60 * 1000
: undefined; : undefined;
const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined; const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
if (dispatcher) queries.push(`dispatcherName=${dispatcher}`); queryParams['dispatcherName'] = dispatcherName;
queryParams['timestampFrom'] = timestampFrom;
queryParams['timestampTo'] = timestampTo;
queryParams['countLimit'] = 30;
if (station.startsWith("#")) queries.push(`stationHash=${station.slice(1)}`); if (stationName && stationName.startsWith('#'))
else if (station.length > 0) queries.push(`stationName=${station}`); queryParams['stationHash'] = stationName.slice(1);
else queryParams['stationName'] = stationName;
if (timestampFrom && timestampTo) queryParams['sortBy'] = this.sorterActive.id;
queries.push(`timestampFrom=${timestampFrom}`, `timestampTo=${timestampTo}`);
// API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance']; if (JSON.stringify(this.currentQueryParams) != JSON.stringify(queryParams))
if (this.sorterActive.id == 'timestampFrom') queries.push('sortBy=timestampFrom'); this.dataStatus = Status.Data.Loading;
else if (this.sorterActive.id == 'duration') queries.push('sortBy=currentDuration');
else queries.push('sortBy=timestampFrom');
queries.push('countLimit=30'); this.currentQueryParams = queryParams;
if (this.currentQuery != queries.join('&')) this.dataStatus = Status.Data.Loading;
this.currentQuery = queries.join('&');
this.currentQueryArray = queries;
try { try {
if (reset) this.dataStatus = Status.Data.Loading;
const responseData: API.DispatcherHistory.Response = await ( const responseData: API.DispatcherHistory.Response = await (
await this.apiStore.client!.get(`api/getDispatchers?${this.currentQuery}`) await this.apiStore.client!.get(`api/getDispatchers`, { params: this.currentQueryParams })
).data; ).data;
if (!responseData) { if (!responseData) {
src/views/JournalTimetables.vue
+1 -3
View File
@@ -124,8 +124,6 @@ interface TimetablesQueryParams {
timetableId?: string; timetableId?: string;
authorName?: string; authorName?: string;
// timestampFrom?: number;
// timestampTo?: number;
dateFrom?: string; dateFrom?: string;
dateTo?: string; dateTo?: string;
@@ -335,7 +333,7 @@ export default defineComponent({
const responseData: API.TimetableHistory.Response = await ( const responseData: API.TimetableHistory.Response = await (
await this.apiStore.client!.get('api/getTimetables', { await this.apiStore.client!.get('api/getTimetables', {
params: { ...this.currentQueryParams } params: this.currentQueryParams
}) })
).data; ).data;