filtry URL dziennika DR

This commit is contained in:
2023-12-17 19:51:52 +01:00
parent e8ed36df16
commit 1e705ea496
6 changed files with 54 additions and 55 deletions
@@ -33,7 +33,7 @@
<tr v-for="historyItem in dispatcherHistory" :key="historyItem.id"> <tr v-for="historyItem in dispatcherHistory" :key="historyItem.id">
<td> <td>
<router-link <router-link
:to="`/journal/dispatchers?sceneryName=${historyItem.stationName}`" :to="`/journal/dispatchers?search-station=${historyItem.stationName}`"
> >
<b>{{ historyItem.stationName }}</b> <b>{{ historyItem.stationName }}</b>
</router-link> </router-link>
@@ -41,7 +41,7 @@
<td>#{{ historyItem.stationHash }}</td> <td>#{{ historyItem.stationHash }}</td>
<td> <td>
<router-link <router-link
:to="`/journal/dispatchers?dispatcherName=${historyItem.dispatcherName}`" :to="`/journal/dispatchers?search-dispatcher=${historyItem.dispatcherName}`"
> >
<b <b
v-if="isDonator(historyItem.dispatcherName)" v-if="isDonator(historyItem.dispatcherName)"
@@ -167,8 +167,6 @@ export default defineComponent({
computed: { computed: {
computedDispatcherHistory() { computedDispatcherHistory() {
console.log(this.dispatcherHistory.length);
return this.dispatcherHistory.reduce( return this.dispatcherHistory.reduce(
(acc, historyItem, i) => { (acc, historyItem, i) => {
if (this.isAnotherDay(i - 1, i)) if (this.isAnotherDay(i - 1, i))
+38 -6
View File
@@ -41,7 +41,7 @@
<input <input
class="search-input" class="search-input"
v-model="searchersValues[propName]" v-model="searchersValues[propName]"
@keydown.enter="onSearchConfirm" @keydown.enter="searchConfirm"
@focus="preventKeyDown = true" @focus="preventKeyDown = true"
@blur="preventKeyDown = false" @blur="preventKeyDown = false"
:placeholder="$t(`options.${propName}`)" :placeholder="$t(`options.${propName}`)"
@@ -199,6 +199,36 @@ export default defineComponent({
}, },
methods: { methods: {
// filters & sorters from URL params
handleRouteParams() {
this.$router.push({
query: {
...this.$route.query,
'sorter-active':
this.sorterOptionIds.indexOf(`${this.sorterActive.id}`) != 0
? 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 }
)
}
});
},
refreshData() { refreshData() {
this.$emit('onRefreshData'); this.$emit('onRefreshData');
}, },
@@ -233,7 +263,7 @@ export default defineComponent({
onSorterChange(item: { id: string | number; value: string }) { onSorterChange(item: { id: string | number; value: string }) {
this.sorterActive.id = item.id; this.sorterActive.id = item.id;
this.sorterActive.dir = -1; this.sorterActive.dir = -1;
this.$emit('onSearchConfirm'); this.searchConfirm();
}, },
onFilterChange(filter: Journal.TimetableFilter) { onFilterChange(filter: Journal.TimetableFilter) {
@@ -243,25 +273,27 @@ export default defineComponent({
.forEach((f) => (f.isActive = false)); .forEach((f) => (f.isActive = false));
filter.isActive = true; filter.isActive = true;
this.$emit('onSearchConfirm'); this.searchConfirm();
}, },
onInputClear(id: any) { onInputClear(id: any) {
this.searchersValues[id] = ''; this.searchersValues[id] = '';
this.$emit('onSearchConfirm'); this.searchConfirm();
}, },
onSearchConfirm() { searchConfirm() {
this.$emit('onSearchConfirm'); this.$emit('onSearchConfirm');
this.handleRouteParams();
}, },
onSearchButtonConfirm() { onSearchButtonConfirm() {
this.showOptions = false; this.showOptions = false;
this.$emit('onSearchConfirm'); this.searchConfirm();
}, },
onResetButtonClick() { onResetButtonClick() {
this.$emit('onOptionsReset'); this.$emit('onOptionsReset');
this.handleRouteParams();
} }
} }
}); });
@@ -19,7 +19,9 @@
<tr v-for="historyItem in historyList" :key="historyItem.id"> <tr v-for="historyItem in historyList" :key="historyItem.id">
<td>#{{ historyItem.stationHash }}</td> <td>#{{ historyItem.stationHash }}</td>
<td> <td>
<router-link :to="`/journal/dispatchers?dispatcherName=${historyItem.dispatcherName}`"> <router-link
:to="`/journal/dispatchers?search-dispatcher=${historyItem.dispatcherName}`"
>
<b>{{ historyItem.dispatcherName }}</b> <b>{{ historyItem.dispatcherName }}</b>
</router-link> </router-link>
</td> </td>
-2
View File
@@ -10,8 +10,6 @@ export default defineComponent({
mountObserver(actionFunction: () => void, target: Element) { mountObserver(actionFunction: () => void, target: Element) {
this.observer = new IntersectionObserver( this.observer = new IntersectionObserver(
(entries) => { (entries) => {
console.log(entries);
if (entries[0].intersectionRatio > 0.5) actionFunction(); if (entries[0].intersectionRatio > 0.5) actionFunction();
}, },
{ threshold: 0.2 } { threshold: 0.2 }
+4 -7
View File
@@ -140,8 +140,6 @@ export default defineComponent({
}, },
'mainStore.dispatcherStatsData'(stats) { 'mainStore.dispatcherStatsData'(stats) {
console.log('dispatcher stats', stats);
this.statsButtons.find((sb) => sb.tab == Journal.StatsTab.DISPATCHER_STATS)!.disabled = this.statsButtons.find((sb) => sb.tab == Journal.StatsTab.DISPATCHER_STATS)!.disabled =
stats === undefined; stats === undefined;
} }
@@ -175,6 +173,7 @@ export default defineComponent({
} }
}); });
}, },
handleScroll(e: Event) { handleScroll(e: Event) {
const listElement = e.target as HTMLElement; const listElement = e.target as HTMLElement;
const scrollTop = listElement.scrollTop; const scrollTop = listElement.scrollTop;
@@ -187,19 +186,17 @@ export default defineComponent({
}, },
handleQueries(query: LocationQuery) { handleQueries(query: LocationQuery) {
// if (queryKeys.includes('sceneryName')) this.setSearchers('', `${query.sceneryName}`, ''); this.setOptions(query as any);
// if (queryKeys.includes('dispatcherName'))
// this.setSearchers('', '', `${query.dispatcherName}`);
}, },
setSearchers(searchers: { [key: string]: string }) { setOptions(searchers: { [key: string]: string }) {
this.searchersValues['search-date'] = searchers['search-date'] ?? ''; this.searchersValues['search-date'] = searchers['search-date'] ?? '';
this.searchersValues['search-station'] = searchers['search-station'] ?? ''; this.searchersValues['search-station'] = searchers['search-station'] ?? '';
this.searchersValues['search-dispatcher'] = searchers['search-dispatcher'] ?? ''; this.searchersValues['search-dispatcher'] = searchers['search-dispatcher'] ?? '';
}, },
resetOptions() { resetOptions() {
this.setSearchers({}); this.setOptions({});
this.sorterActive.id = 'timestampFrom'; this.sorterActive.id = 'timestampFrom';
this.fetchHistoryData(); this.fetchHistoryData();
+7 -35
View File
@@ -250,37 +250,9 @@ export default defineComponent({
methods: { methods: {
onSearchConfirm() { onSearchConfirm() {
this.handleRouteParams();
this.fetchHistoryData(); 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) { handleScroll(e: Event) {
const listElement = e.target as HTMLElement; const listElement = e.target as HTMLElement;
const scrollTop = listElement.scrollTop; const scrollTop = listElement.scrollTop;
@@ -316,15 +288,15 @@ export default defineComponent({
resetOptions() { resetOptions() {
this.setOptions({}); this.setOptions({});
this.sorterActive.id = 'timetableId'; // this.sorterActive.id = 'timetableId';
this.filterList.forEach( // this.filterList.forEach(
(f) => // (f) =>
(f.isActive = // (f.isActive =
this.initFilters.find((initFilter) => initFilter.id == f.id)?.isActive || false) // this.initFilters.find((initFilter) => initFilter.id == f.id)?.isActive || false)
); // );
this.handleRouteParams(); // this.handleRouteParams();
this.fetchHistoryData(); this.fetchHistoryData();
}, },