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

Poprawki w filtrach i ustawieniach dzienników

Browse Source
This commit is contained in:
Spythere
2022-09-10 22:49:56 +02:00
parent 065143c359
commit a81cc4559b
7 changed files with 107 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/JournalView/JournalDispatchers.vue
+48 -28
View File
@@ -1,37 +1,49 @@
<template> <template>
<section class="journal-timetables"> <section class="journal-timetables">
<div class="journal_wrapper"> <div class="journal_wrapper">
<JournalOptions @on-search-confirm="searchHistory" :sorter-option-ids="['timestampFrom', 'duration']" /> <JournalOptions
@on-search-confirm="searchHistory"
@on-options-reset="resetOptions"
:sorter-option-ids="['timestampFrom', 'duration']"
:data-status="dataStatus"
/>
<div class="list_wrapper" @scroll="handleScroll"> <div class="list_wrapper" @scroll="handleScroll">
<transition name="warning" mode="out-in"> <!-- <transition name="warning" mode="out-in"> -->
<div :key="dataStatus"> <!-- <div :key="dataStatus"> -->
<Loading v-if="dataStatus == (DataStatus.Loading || DataStatus.Initialized)" /> <Loading
v-if="dataStatus == DataStatus.Initialized || (dataStatus == DataStatus.Loading && historyList.length == 0)"
/>
<div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error"> <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
{{ $t('app.error') }} {{ $t('app.error') }}
</div> </div>
<div class="journal_warning" v-else-if="historyList.length == 0"> <div class="journal_warning" v-else-if="historyList.length == 0 && dataStatus != DataStatus.Loading">
{{ $t('app.no-result') }} {{ $t('app.no-result') }}
</div> </div>
<div v-else> <div v-else>
<JournalDispatchersList :dispatcherHistory="computedHistoryList" /> <JournalDispatchersList :dispatcherHistory="computedHistoryList" />
<button <button
class="btn btn--option btn--load-data" class="btn btn--option btn--load-data"
v-if="!scrollNoMoreData && scrollDataLoaded" v-if="!scrollNoMoreData && scrollDataLoaded && computedHistoryList.length > 15"
@click="addHistoryData" @click="addHistoryData"
> >
{{ $t('journal.load-data') }} {{ $t('journal.load-data') }}
</button> </button>
</div> </div>
</div> <!-- </div>
</transition> </transition> -->
<div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div> <div class="journal_warning" v-if="scrollNoMoreData">
<div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div> {{ $t('journal.no-further-data') }}
</div>
<div class="journal_warning" v-else-if="!scrollDataLoaded">
{{ $t('journal.loading-further-data') }}
</div>
</div> </div>
</div> </div>
</section> </section>
@@ -51,9 +63,9 @@ import { URLs } from '../../scripts/utils/apiURLs';
import { DataStatus } from '../../scripts/enums/DataStatus'; import { DataStatus } from '../../scripts/enums/DataStatus';
import { useStore } from '../../store/store'; import { useStore } from '../../store/store';
import JournalDispatchersList from './JournalDispatchersList.vue'; import JournalDispatchersList from './JournalDispatchersList.vue';
import { JournalDispatcherSearcher } from '../../types/Journal/JournalDispatcherTypes'; import { JournalDispatcherSearcher, JournalDispatcherSorter } from '../../types/Journal/JournalDispatcherTypes';
import { DispatcherHistory } from '../../scripts/interfaces/api/DispatchersAPIData'; import { DispatcherHistory } from '../../scripts/interfaces/api/DispatchersAPIData';
import { JournalFilter } from '../../types/Journal/JournalTimetablesTypes'; import { JournalTimetableFilter } from '../../types/Journal/JournalTimetablesTypes';
const DISPATCHERS_API_URL = `${URLs.stacjownikAPI}/api/getDispatchers`; const DISPATCHERS_API_URL = `${URLs.stacjownikAPI}/api/getDispatchers`;
@@ -88,7 +100,7 @@ export default defineComponent({
}), }),
setup() { setup() {
const sorterActive = ref({ id: 'timestampFrom', dir: -1 }); const sorterActive: JournalDispatcherSorter = reactive({ id: 'timestampFrom', dir: -1 });
const journalFilterActive = ref({}); const journalFilterActive = ref({});
const searchersValues = reactive({ const searchersValues = reactive({
@@ -152,6 +164,14 @@ export default defineComponent({
if (scrollTop > elementHeight * 0.85) this.addHistoryData(); if (scrollTop > elementHeight * 0.85) this.addHistoryData();
}, },
resetOptions() {
this.searchersValues['search-station'] = '';
this.searchersValues['search-dispatcher'] = '';
this.sorterActive.id = 'timestampFrom';
this.searchHistory();
},
searchHistory() { searchHistory() {
this.fetchHistoryData({ this.fetchHistoryData({
searchers: this.searchersValues, searchers: this.searchersValues,
@@ -184,7 +204,7 @@ export default defineComponent({
async fetchHistoryData( async fetchHistoryData(
props: { props: {
searchers?: JournalDispatcherSearcher; searchers?: JournalDispatcherSearcher;
filter?: JournalFilter; filter?: JournalTimetableFilter;
} = {} } = {}
) { ) {
this.dataStatus = DataStatus.Loading; this.dataStatus = DataStatus.Loading;
src/components/JournalView/JournalOptions.vue
+33 -12
View File
@@ -64,25 +64,31 @@
</div> </div>
<div class="search_actions"> <div class="search_actions">
<action-button class="search-button" @click="onSearchConfirm">
{{ $t('options.search-button') }}
</action-button>
<action-button class="search-button" @click="onResetButtonClick"> <action-button class="search-button" @click="onResetButtonClick">
{{ $t('options.reset-button') }} {{ $t('options.reset-button') }}
</action-button> </action-button>
<action-button class="search-button" @click="onSearchConfirm">
{{ $t('options.search-button') }}
</action-button>
</div> </div>
</div> </div>
</div> </div>
<div class="data-status">
<span v-if="dataStatus == DataStatus.Loading"> Pobieranie danych...</span>
<span v-if="dataStatus == DataStatus.Loaded"> Pobrano dane </span>
</div>
</div> </div>
</transition> </transition>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, inject, PropType } from 'vue'; import { defineComponent, inject, Prop, PropType } from 'vue';
import imageMixin from '../../mixins/imageMixin'; import imageMixin from '../../mixins/imageMixin';
import { JournalFilter } from '../../types/Journal/JournalTimetablesTypes'; import { DataStatus } from '../../scripts/enums/DataStatus';
import { JournalTimetableFilter } from '../../types/Journal/JournalTimetablesTypes';
import ActionButton from '../Global/ActionButton.vue'; import ActionButton from '../Global/ActionButton.vue';
import SelectBox from '../Global/SelectBox.vue'; import SelectBox from '../Global/SelectBox.vue';
@@ -98,14 +104,20 @@ export default defineComponent({
}, },
filters: { filters: {
type: Array as PropType<JournalFilter[]>, type: Array as PropType<JournalTimetableFilter[]>,
default: [], default: [],
}, },
dataStatus: {
type: Number as PropType<DataStatus>,
default: DataStatus.Initialized,
},
}, },
data() { data() {
return { return {
showOptions: false, showOptions: false,
DataStatus,
}; };
}, },
@@ -113,7 +125,7 @@ export default defineComponent({
return { return {
searchersValues: inject('searchersValues') as { [key: string]: string }, searchersValues: inject('searchersValues') as { [key: string]: string },
sorterActive: inject('sorterActive') as { id: string | number; dir: number }, sorterActive: inject('sorterActive') as { id: string | number; dir: number },
journalFilterActive: inject('journalFilterActive') as JournalFilter, journalFilterActive: inject('journalFilterActive') as JournalTimetableFilter,
}; };
}, },
@@ -133,7 +145,7 @@ export default defineComponent({
this.$emit('onSearchConfirm'); this.$emit('onSearchConfirm');
}, },
onFilterChange(filter: JournalFilter) { onFilterChange(filter: JournalTimetableFilter) {
this.journalFilterActive = filter; this.journalFilterActive = filter;
this.$emit('onSearchConfirm'); this.$emit('onSearchConfirm');
}, },
@@ -255,7 +267,7 @@ h1 {
} }
} }
.search_content > div { .search_content > .search {
margin: 0.5em auto; margin: 0.5em auto;
} }
@@ -265,14 +277,23 @@ h1 {
margin: 0 auto; margin: 0 auto;
} }
.search_actions { .search_content > .search_actions {
display: flex; display: flex;
margin: 1em 0 0.5em 0;
button { button {
margin: 0.25em 0.5em; margin: 0.25em 0.5em;
} }
} }
.data-status {
display: flex;
justify-content: center;
font-size: 1.1em;
height: 1.5em;
}
@include smallScreen() { @include smallScreen() {
h1 { h1 {
text-align: center; text-align: center;
@@ -302,4 +323,4 @@ h1 {
justify-content: center; justify-content: center;
} }
} }
</style> </style>
src/components/JournalView/JournalTimetables.vue
+10 -5
View File
@@ -10,18 +10,23 @@
@on-options-reset="resetOptions" @on-options-reset="resetOptions"
:sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']" :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
:filters="journalTimetableFilters" :filters="journalTimetableFilters"
:data-status="dataStatus"
/> />
<div class="list_wrapper" @scroll="handleScroll"> <div class="list_wrapper" @scroll="handleScroll">
<!-- <transition name="warning" mode="out-in"> --> <!-- <transition name="warning" mode="out-in"> -->
<!-- <div :key="dataStatus"> --> <!-- <div :key="dataStatus"> -->
<Loading v-if="dataStatus == DataStatus.Loading || dataStatus == DataStatus.Initialized" /> <Loading
v-if="
dataStatus == DataStatus.Initialized || (dataStatus == DataStatus.Loading && timetableHistory.length == 0)
"
/>
<div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error"> <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
{{ $t('app.error') }} {{ $t('app.error') }}
</div> </div>
<div v-else-if="timetableHistory.length == 0" class="journal_warning"> <div v-else-if="timetableHistory.length == 0 && dataStatus != DataStatus.Loading" class="journal_warning">
{{ $t('app.no-result') }} {{ $t('app.no-result') }}
</div> </div>
@@ -52,7 +57,7 @@ import axios from 'axios';
import DriverStats from './DriverStats.vue'; import DriverStats from './DriverStats.vue';
import Loading from '../Global/Loading.vue'; import Loading from '../Global/Loading.vue';
import { JournalFilter, JournalSorter } from '../../types/Journal/JournalTimetablesTypes'; import { JournalTimetableFilter, JournalTimetableSorter } from '../../types/Journal/JournalTimetablesTypes';
import dateMixin from '../../mixins/dateMixin'; import dateMixin from '../../mixins/dateMixin';
import routerMixin from '../../mixins/routerMixin'; import routerMixin from '../../mixins/routerMixin';
import { DataStatus } from '../../scripts/enums/DataStatus'; import { DataStatus } from '../../scripts/enums/DataStatus';
@@ -99,7 +104,7 @@ export default defineComponent({
}), }),
setup() { setup() {
const sorterActive: JournalSorter = reactive({ id: 'timetableId', dir: 1 }); const sorterActive: JournalTimetableSorter = reactive({ id: 'timetableId', dir: 1 });
const journalFilterActive = ref(journalTimetableFilters[0]); const journalFilterActive = ref(journalTimetableFilters[0]);
const searchersValues = reactive({ const searchersValues = reactive({
@@ -196,7 +201,7 @@ export default defineComponent({
async fetchHistoryData( async fetchHistoryData(
props: { props: {
searchers?: JorunalTimetableSearchType; searchers?: JorunalTimetableSearchType;
filter?: JournalFilter; filter?: JournalTimetableFilter;
} = {} } = {}
) { ) {
this.dataStatus = DataStatus.Loading; this.dataStatus = DataStatus.Loading;
src/constants/Journal/JournalTimetablesConsts.ts
+2 -2
View File
@@ -1,7 +1,7 @@
import { JournalFilterType } from "../../scripts/enums/JournalFilterType"; import { JournalFilterType } from "../../scripts/enums/JournalFilterType";
import { JournalFilter } from "../../types/Journal/JournalTimetablesTypes"; import { JournalTimetableFilter } from "../../types/Journal/JournalTimetablesTypes";
export const journalTimetableFilters: JournalFilter[] = [ export const journalTimetableFilters: JournalTimetableFilter[] = [
{ {
id: JournalFilterType.all, id: JournalFilterType.all,
filterSection: 'timetable-status', filterSection: 'timetable-status',
src/styles/JournalSection.scss
+7
View File
@@ -21,6 +21,7 @@
.list_wrapper { .list_wrapper {
overflow-y: scroll; overflow-y: scroll;
height: 90vh; height: 90vh;
min-height: 550px;
padding-right: 0.2em; padding-right: 0.2em;
} }
@@ -76,3 +77,9 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
} }
@media (orientation: landscape) {
.journal_wrapper {
font-size: 1em;
}
}
src/types/Journal/JournalDispatcherTypes.ts
+5
View File
@@ -1,3 +1,8 @@
export type JournalDispatcherSearcher = { export type JournalDispatcherSearcher = {
[key in 'search-dispatcher' | 'search-station']: string; [key in 'search-dispatcher' | 'search-station']: string;
}; };
export interface JournalDispatcherSorter {
id: 'timestampFrom' | 'duration';
dir: -1 | 1;
}
src/types/Journal/JournalTimetablesTypes.ts
+2 -2
View File
@@ -4,13 +4,13 @@ export type JorunalTimetableSearchType = {
[key in 'search-driver' | 'search-train' | 'search-date']: string; [key in 'search-driver' | 'search-train' | 'search-date']: string;
}; };
export interface JournalFilter { export interface JournalTimetableFilter {
id: JournalFilterType; id: JournalFilterType;
filterSection: string; filterSection: string;
isActive: boolean; isActive: boolean;
} }
export interface JournalSorter { export interface JournalTimetableSorter {
id: 'timetableId' | 'beginDate' | 'distance' | 'total-stops'; id: 'timetableId' | 'beginDate' | 'distance' | 'total-stops';
dir: -1 | 1; dir: -1 | 1;
} }