mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 13:28:11 +00:00
Merge branch 'feature/journal-dispatchers' into development
This commit is contained in:
@@ -0,0 +1,406 @@
|
||||
<template>
|
||||
<section class="journal-timetables">
|
||||
<div class="journal-wrapper">
|
||||
<button class="return-btn" @click="scrollToTop" v-if="showReturnButton">
|
||||
<img :src="icons.arrow" alt="return arrow" />
|
||||
</button>
|
||||
|
||||
<div class="journal-list">
|
||||
<div class="list-wrapper" ref="scrollElement">
|
||||
<transition name="warning" mode="out-in">
|
||||
<div :key="historyDataStatus.status">
|
||||
<div class="journal_loading" v-if="isDataLoading || isDataInit">
|
||||
<img :src="icons.loading" alt="loading icon" />
|
||||
<span class="loading-label">{{ $t('app.loading') }}</span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="isDataError" class="journal_warning error">
|
||||
{{ $t('app.error') }}
|
||||
</div>
|
||||
|
||||
<div class="journal_warning" v-else-if="historyList.length == 0">
|
||||
{{ $t('app.no-result') }}
|
||||
</div>
|
||||
|
||||
<ul v-else>
|
||||
<transition-group name="journal-list-anim">
|
||||
<li v-for="(doc, i) in computedHistoryList" :key="doc._id">
|
||||
<div class="journal_day" v-if="isAnotherDay(i - 1, i)">
|
||||
<span>{{ new Date(doc.timestampFrom).toLocaleDateString('pl-PL') }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="journal_item"
|
||||
:class="{ online: doc.isOnline }"
|
||||
@click="navigateToScenery(doc.stationName, doc.isOnline)"
|
||||
@keydown.enter="navigateToScenery(doc.stationName, doc.isOnline)"
|
||||
tabindex="0"
|
||||
>
|
||||
<span>
|
||||
<b class="text--primary">{{ doc.dispatcherName }}</b> • <b>{{ doc.stationName }}</b>
|
||||
<span class="text--grayed"> #{{ doc.stationHash }} </span>
|
||||
<span class="region-badge" :class="doc.region">PL1</span>
|
||||
</span>
|
||||
<span>
|
||||
<span :data-status="doc.isOnline"
|
||||
>{{ doc.isOnline ? $t('history.online-since') : 'OFFLINE' }} </span
|
||||
>
|
||||
<span>
|
||||
{{ new Date(doc.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
|
||||
</span>
|
||||
|
||||
<span v-if="doc.currentDuration && doc.isOnline">
|
||||
({{ calculateDuration(doc.currentDuration) }})
|
||||
</span>
|
||||
|
||||
<span v-if="doc.timestampTo">
|
||||
>
|
||||
{{ new Date(doc.timestampTo).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
|
||||
({{ $t('history.duty-lasted') }} {{ calculateDuration(doc.currentDuration!) }})
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- <div>{{ new Date(doc.timestampFrom).toLocaleDateString('pl-PL') }}</div> -->
|
||||
|
||||
<!-- <div v-if="doc.timestampTo && doc.currentDuration && doc.currentDuration <= 30*60*1000">
|
||||
Wpis zostanie usunięty za {{ ~~((Date.now() - doc.currentDuration)) }} min.
|
||||
</div> -->
|
||||
</li>
|
||||
</transition-group>
|
||||
</ul>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
|
||||
<div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, provide, Ref, ref } from 'vue';
|
||||
import axios from 'axios';
|
||||
|
||||
import SearchBox from '@/components/Global/SearchBox.vue';
|
||||
import dateMixin from '@/mixins/dateMixin';
|
||||
import { DataStatus } from '@/scripts/enums/DataStatus';
|
||||
|
||||
import ActionButton from '@/components/Global/ActionButton.vue';
|
||||
import JournalOptions from '@/components/JournalView/JournalOptions.vue';
|
||||
|
||||
import { URLs } from '@/scripts/utils/apiURLs';
|
||||
import { journalFilters } from '@/data/journalFilters';
|
||||
|
||||
const DEV_MODE = true;
|
||||
const PROD_MODE = !DEV_MODE || process.env.NODE_ENV === 'production';
|
||||
|
||||
const DISPATCHERS_API_URL = (PROD_MODE ? `${URLs.stacjownikAPI}/api` : 'http://localhost:3001/api') + '/getDispatchers';
|
||||
|
||||
interface APIResponse {
|
||||
errorMessage: string | null;
|
||||
response: DispatcherHistoryItem[] | null;
|
||||
}
|
||||
|
||||
interface DispatcherHistoryItem {
|
||||
_id: string;
|
||||
|
||||
stationName: string;
|
||||
stationHash: string;
|
||||
region: string;
|
||||
|
||||
dispatcherName: string;
|
||||
dispatcherId: number;
|
||||
|
||||
timestampFrom: number;
|
||||
timestampTo?: number;
|
||||
currentDuration?: number;
|
||||
|
||||
lastOnlineTimestamp: number;
|
||||
|
||||
isOnline: boolean;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
components: { SearchBox, ActionButton, JournalOptions },
|
||||
mixins: [dateMixin],
|
||||
|
||||
data: () => ({
|
||||
icons: {
|
||||
loading: require('@/assets/icon-loading.svg'),
|
||||
arrow: require('@/assets/icon-arrow-asc.svg'),
|
||||
},
|
||||
|
||||
currentQuery: '',
|
||||
scrollDataLoaded: true,
|
||||
scrollNoMoreData: false,
|
||||
|
||||
showReturnButton: false,
|
||||
}),
|
||||
|
||||
setup() {
|
||||
const historyDataStatus: Ref<{ status: DataStatus; error: string | null }> = ref({
|
||||
status: DataStatus.Loading,
|
||||
error: null,
|
||||
});
|
||||
|
||||
const sorterActive = ref({ id: 'timetableId', dir: -1 });
|
||||
const journalFilterActive = ref(journalFilters[0]);
|
||||
|
||||
const searchedDriver = ref('');
|
||||
const searchedTrain = ref('');
|
||||
const countFromIndex = ref(0);
|
||||
const countLimit = 15;
|
||||
|
||||
provide('searchedTrain', searchedTrain);
|
||||
provide('searchedDriver', searchedDriver);
|
||||
provide('sorterActive', sorterActive);
|
||||
provide('journalFilterActive', journalFilterActive);
|
||||
|
||||
const scrollElement: Ref<HTMLElement | null> = ref(null);
|
||||
|
||||
return {
|
||||
historyList: ref([]) as Ref<DispatcherHistoryItem[]>,
|
||||
historyDataStatus,
|
||||
|
||||
isDataLoading: computed(() => historyDataStatus.value.status === DataStatus.Loading),
|
||||
isDataError: computed(() => historyDataStatus.value.status === DataStatus.Error),
|
||||
isDataInit: computed(() => historyDataStatus.value.status === DataStatus.Initialized),
|
||||
|
||||
searchedDriver,
|
||||
searchedTrain,
|
||||
sorterActive,
|
||||
journalFilterActive,
|
||||
|
||||
countFromIndex,
|
||||
countLimit,
|
||||
|
||||
scrollElement,
|
||||
maxCount: ref(15),
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
computedHistoryList() {
|
||||
return this.historyList.filter(
|
||||
(doc) => doc.isOnline || (doc.currentDuration && doc.currentDuration > 10 * 60000)
|
||||
); //.sort((a, b) => (b.isOnline ? 1 : 0) - (a.isOnline ? 1 : 0));
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.fetchHistoryData();
|
||||
},
|
||||
|
||||
activated() {
|
||||
window.addEventListener('scroll', this.handleScroll);
|
||||
},
|
||||
|
||||
deactivated() {
|
||||
window.removeEventListener('scroll', this.handleScroll);
|
||||
},
|
||||
|
||||
methods: {
|
||||
navigateToScenery(name: string, isOnline: boolean) {
|
||||
if (!isOnline) return;
|
||||
|
||||
this.$router.push(`/scenery?station=${name.trim().replace(/ /g, '_')}`);
|
||||
},
|
||||
|
||||
calculateDuration(timestampMs: number) {
|
||||
const minsTotal = Math.round(timestampMs / 60000);
|
||||
const hoursTotal = Math.floor(minsTotal / 60);
|
||||
const minsInHour = minsTotal % 60;
|
||||
|
||||
return minsTotal > 60
|
||||
? this.$t('history.hours', { hours: hoursTotal, minutes: minsInHour })
|
||||
: this.$t('history.minutes', { minutes: minsTotal });
|
||||
},
|
||||
|
||||
isAnotherDay(prevIndex: number, currIndex: number) {
|
||||
if (currIndex == 0) return true;
|
||||
|
||||
return (
|
||||
new Date(this.computedHistoryList[prevIndex].timestampFrom).getDate() !=
|
||||
new Date(this.computedHistoryList[currIndex].timestampFrom).getDate()
|
||||
);
|
||||
},
|
||||
|
||||
handleScroll() {
|
||||
this.showReturnButton = window.scrollY > window.innerHeight;
|
||||
|
||||
const element = this.$refs.scrollElement as HTMLElement;
|
||||
|
||||
if (
|
||||
element.getBoundingClientRect().bottom * 0.85 < window.innerHeight &&
|
||||
this.scrollDataLoaded &&
|
||||
!this.scrollNoMoreData
|
||||
)
|
||||
this.addHistoryData();
|
||||
},
|
||||
|
||||
scrollToTop() {
|
||||
window.scrollTo({ top: 0 });
|
||||
},
|
||||
|
||||
search() {
|
||||
this.fetchHistoryData();
|
||||
|
||||
this.scrollNoMoreData = false;
|
||||
this.scrollDataLoaded = true;
|
||||
},
|
||||
|
||||
async addHistoryData() {
|
||||
this.scrollDataLoaded = false;
|
||||
|
||||
const countFrom = this.historyList.length;
|
||||
|
||||
const responseData: APIResponse | null = await (
|
||||
await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
|
||||
).data;
|
||||
|
||||
if (!responseData?.response) return;
|
||||
|
||||
if (responseData.response.length == 0) {
|
||||
this.scrollNoMoreData = true;
|
||||
return;
|
||||
}
|
||||
|
||||
this.historyList.push(...responseData.response);
|
||||
this.scrollDataLoaded = true;
|
||||
},
|
||||
|
||||
async fetchHistoryData() {
|
||||
this.historyDataStatus.status = DataStatus.Loading;
|
||||
|
||||
const queries: string[] = [];
|
||||
queries.push('countLimit=15');
|
||||
|
||||
this.currentQuery = queries.join('&');
|
||||
|
||||
// sorters; sortBy: duration, timestampFrom (default)
|
||||
// filters; dispatcherName, stationName
|
||||
|
||||
try {
|
||||
const responseData: APIResponse | null = await (
|
||||
await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}`)
|
||||
).data;
|
||||
|
||||
if (!responseData) {
|
||||
this.historyDataStatus.status = DataStatus.Error;
|
||||
this.historyDataStatus.error = 'Brak danych!';
|
||||
return;
|
||||
}
|
||||
|
||||
if (responseData.errorMessage) {
|
||||
this.historyDataStatus.status = DataStatus.Error;
|
||||
this.historyDataStatus.error = responseData.errorMessage;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (!responseData.response) return;
|
||||
|
||||
// Response data exists
|
||||
this.historyList = responseData.response;
|
||||
|
||||
this.historyDataStatus.status = DataStatus.Loaded;
|
||||
} catch (error) {
|
||||
this.historyDataStatus.status = DataStatus.Error;
|
||||
this.historyDataStatus.error = 'Ups! Coś poszło nie tak!';
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/JournalSection.scss';
|
||||
@import '../../styles/responsive.scss';
|
||||
|
||||
.region-badge {
|
||||
padding: 0.1em 0.5em;
|
||||
border-radius: 0.5em;
|
||||
font-weight: bold;
|
||||
|
||||
&.eu {
|
||||
background-color: forestgreen;
|
||||
}
|
||||
}
|
||||
|
||||
.journal-wrapper {
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
.journal_item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
flex-wrap: wrap;
|
||||
|
||||
&.online {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span[data-status='true'] {
|
||||
color: springgreen;
|
||||
}
|
||||
|
||||
span[data-status='false'] {
|
||||
color: salmon;
|
||||
}
|
||||
}
|
||||
|
||||
.journal-current-day {
|
||||
position: sticky;
|
||||
top: -1px;
|
||||
|
||||
padding: 0.5em 0;
|
||||
background-color: salmon;
|
||||
}
|
||||
|
||||
.journal_day {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
background-color: #4d4d4d;
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
background-color: #4d4d4d;
|
||||
z-index: 10;
|
||||
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
|
||||
z-index: 0;
|
||||
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
height: 3px;
|
||||
width: 60%;
|
||||
min-width: 200px;
|
||||
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen() {
|
||||
.journal_item {
|
||||
flex-direction: column;
|
||||
|
||||
span {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,440 @@
|
||||
<template>
|
||||
<section class="journal-timetables">
|
||||
<div class="journal-wrapper">
|
||||
<JournalOptions @changedOptions="search" @changedFilter="search" />
|
||||
|
||||
<button class="return-btn" @click="scrollToTop" v-if="showReturnButton">
|
||||
<img :src="icons.arrow" alt="return arrow" />
|
||||
</button>
|
||||
|
||||
<div class="journal-list">
|
||||
<div class="list-wrapper" ref="scrollElement">
|
||||
<transition name="warning" mode="out-in">
|
||||
<div :key="historyDataStatus.status">
|
||||
<div class="journal_loading" v-if="isDataLoading || isDataInit">
|
||||
<img :src="icons.loading" alt="loading icon" />
|
||||
<span class="loading-label">{{ $t('app.loading') }}</span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="isDataError" class="journal_warning error">
|
||||
{{ $t('app.error') }}
|
||||
</div>
|
||||
|
||||
<div class="journal_warning" v-else-if="historyList.length == 0">
|
||||
{{ $t('app.no-result') }}
|
||||
</div>
|
||||
|
||||
<ul v-else>
|
||||
<transition-group name="journal-list-anim">
|
||||
<li v-for="(item, i) in historyList" class="journal_item" :key="item.timetableId">
|
||||
<div class="journal_item-top">
|
||||
<span>
|
||||
<span
|
||||
tabindex="0"
|
||||
@click="navigateToTrain(!item.terminated ? item.trainNo : null)"
|
||||
@keydown.enter="navigateToTrain(!item.terminated ? item.trainNo : null)"
|
||||
style="cursor: pointer"
|
||||
>
|
||||
<b class="text--primary">{{ item.trainCategoryCode }} </b>
|
||||
<b>{{ item.trainNo }}</b>
|
||||
| <span>{{ item.driverName }}</span> |
|
||||
<span class="text--grayed">#{{ item.timetableId }}</span>
|
||||
</span>
|
||||
|
||||
<div>
|
||||
<b>{{ item.route.replace('|', ' - ') }}</b>
|
||||
</div>
|
||||
|
||||
<hr style="margin: 0.25em 0" />
|
||||
|
||||
<div class="scenery-list">
|
||||
<span
|
||||
v-for="(scenery, i) in getSceneryList(item)"
|
||||
:key="scenery.name"
|
||||
:class="{ confirmed: scenery.confirmed }"
|
||||
>
|
||||
{{ i > 0 ? ' > ' : '' }} {{ scenery.name }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="schedule-dates">
|
||||
<!-- Data odjazdu ze stacji początkowej -->
|
||||
<b>{{ item.route.split('|')[0] }}:</b>
|
||||
<s v-if="item.beginDate != item.scheduledBeginDate" class="text--grayed">
|
||||
{{ localeTime(item.beginDate, $i18n.locale) }}
|
||||
</s>
|
||||
<span>{{ localeTime(item.scheduledBeginDate, $i18n.locale) }} </span>•
|
||||
|
||||
<!-- Data przyjazdu na stację końcową / porzucenia -->
|
||||
<b v-if="(item.fulfilled && item.terminated) || !item.terminated">
|
||||
{{ item.route.split('|').slice(-1)[0] }}:
|
||||
</b>
|
||||
<i v-else>{{ $t('history.timetable-abandoned') }} </i>
|
||||
|
||||
<s v-if="item.endDate != item.scheduledEndDate && item.terminated" class="text--grayed">
|
||||
{{ localeTime(item.fulfilled ? item.endDate : item.scheduledEndDate, $i18n.locale) }}
|
||||
</s>
|
||||
<span
|
||||
>{{ localeTime(item.fulfilled ? item.scheduledEndDate : item.endDate, $i18n.locale) }}
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<b
|
||||
class="journal_item-status"
|
||||
:class="{
|
||||
fulfilled: item.fulfilled || item.currentDistance >= item.routeDistance * 0.9,
|
||||
terminated: item.terminated && !item.fulfilled,
|
||||
active: !item.terminated,
|
||||
}"
|
||||
>
|
||||
{{
|
||||
!item.terminated
|
||||
? $t('history.timetable-active')
|
||||
: item.fulfilled || item.currentDistance >= item.routeDistance * 0.9
|
||||
? $t('history.timetable-fulfilled')
|
||||
: $t('history.timetable-abandoned')
|
||||
}}
|
||||
</b>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 1em;">
|
||||
<div>
|
||||
{{ $t('history.timetable-day') }} <b>{{ localeDay(item.beginDate, $i18n.locale) }}</b>
|
||||
</div>
|
||||
|
||||
<!-- Nick dyżurnego -->
|
||||
<div v-if="item.authorName">
|
||||
<b class="text--grayed">{{ $t('history.dispatcher-name') }} </b>
|
||||
<b>{{ item.authorName }}</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 1em;">
|
||||
<div>
|
||||
<b>{{ $t('history.route-length') }}</b>
|
||||
{{ !item.fulfilled ? item.currentDistance + ' /' : '' }}
|
||||
{{ item.routeDistance }} km
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<b>{{ $t('history.station-count') }}</b>
|
||||
{{ item.confirmedStopsCount }} /
|
||||
{{ item.allStopsCount }}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</transition-group>
|
||||
</ul>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
|
||||
<div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, JournalFilter, provide, Ref, ref } from 'vue';
|
||||
import axios from 'axios';
|
||||
|
||||
import SearchBox from '@/components/Global/SearchBox.vue';
|
||||
import dateMixin from '@/mixins/dateMixin';
|
||||
import { DataStatus } from '@/scripts/enums/DataStatus';
|
||||
|
||||
import ActionButton from '@/components/Global/ActionButton.vue';
|
||||
import JournalOptions from '@/components/JournalView/JournalOptions.vue';
|
||||
|
||||
import { URLs } from '@/scripts/utils/apiURLs';
|
||||
import { journalFilters } from '@/data/journalFilters';
|
||||
import { JournalFilterType } from '@/scripts/enums/JournalFilterType';
|
||||
|
||||
const PROD_MODE = true;
|
||||
|
||||
const API_URL = PROD_MODE ? `${URLs.stacjownikAPI}/api/getTimetables` : 'http://localhost:3001/api/getTimetables';
|
||||
|
||||
interface APIResponse {
|
||||
errorMessage: string | null;
|
||||
response: TimetableHistory[] | null;
|
||||
}
|
||||
|
||||
interface TimetableHistory {
|
||||
timetableId: number;
|
||||
trainNo: number;
|
||||
trainCategoryCode: string;
|
||||
driverId: number;
|
||||
driverName: string;
|
||||
route: string;
|
||||
twr: number;
|
||||
skr: number;
|
||||
sceneriesString: string;
|
||||
|
||||
routeDistance: number;
|
||||
currentDistance: number;
|
||||
|
||||
confirmedStopsCount: number;
|
||||
allStopsCount: number;
|
||||
|
||||
beginDate: string;
|
||||
endDate: string;
|
||||
|
||||
scheduledBeginDate: string;
|
||||
scheduledEndDate: string;
|
||||
|
||||
terminated: boolean;
|
||||
fulfilled: boolean;
|
||||
|
||||
authorName?: string;
|
||||
authorId?: number;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
components: { SearchBox, ActionButton, JournalOptions },
|
||||
mixins: [dateMixin],
|
||||
|
||||
data: () => ({
|
||||
icons: {
|
||||
loading: require('@/assets/icon-loading.svg'),
|
||||
arrow: require('@/assets/icon-arrow-asc.svg'),
|
||||
},
|
||||
|
||||
currentQuery: '',
|
||||
scrollDataLoaded: true,
|
||||
scrollNoMoreData: false,
|
||||
|
||||
showReturnButton: false,
|
||||
}),
|
||||
|
||||
setup() {
|
||||
const historyDataStatus: Ref<{ status: DataStatus; error: string | null }> = ref({
|
||||
status: DataStatus.Loading,
|
||||
error: null,
|
||||
});
|
||||
|
||||
const sorterActive = ref({ id: 'timetableId', dir: -1 });
|
||||
const journalFilterActive = ref(journalFilters[0]);
|
||||
|
||||
const searchedDriver = ref('');
|
||||
const searchedTrain = ref('');
|
||||
const countFromIndex = ref(0);
|
||||
const countLimit = 15;
|
||||
|
||||
provide('searchedTrain', searchedTrain);
|
||||
provide('searchedDriver', searchedDriver);
|
||||
provide('sorterActive', sorterActive);
|
||||
provide('journalFilterActive', journalFilterActive);
|
||||
|
||||
const scrollElement: Ref<HTMLElement | null> = ref(null);
|
||||
|
||||
return {
|
||||
historyList: ref([]) as Ref<TimetableHistory[]>,
|
||||
historyDataStatus,
|
||||
|
||||
isDataLoading: computed(() => historyDataStatus.value.status === DataStatus.Loading),
|
||||
isDataError: computed(() => historyDataStatus.value.status === DataStatus.Error),
|
||||
isDataInit: computed(() => historyDataStatus.value.status === DataStatus.Initialized),
|
||||
|
||||
searchedDriver,
|
||||
searchedTrain,
|
||||
sorterActive,
|
||||
journalFilterActive,
|
||||
|
||||
countFromIndex,
|
||||
countLimit,
|
||||
|
||||
scrollElement,
|
||||
maxCount: ref(15),
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.fetchHistoryData();
|
||||
},
|
||||
|
||||
activated() {
|
||||
window.addEventListener('scroll', this.handleScroll);
|
||||
},
|
||||
|
||||
deactivated() {
|
||||
window.removeEventListener('scroll', this.handleScroll);
|
||||
},
|
||||
|
||||
methods: {
|
||||
getSceneryList(historyItem: TimetableHistory) {
|
||||
return historyItem.sceneriesString
|
||||
.split('%')
|
||||
.map((name, i) => ({ name, confirmed: i < historyItem.confirmedStopsCount }));
|
||||
},
|
||||
|
||||
navigateToTrain(trainNo: number | null) {
|
||||
if (!trainNo) return;
|
||||
|
||||
this.$router.push({
|
||||
name: 'TrainsView',
|
||||
query: { train: trainNo.toString() },
|
||||
});
|
||||
},
|
||||
|
||||
handleScroll() {
|
||||
this.showReturnButton = window.scrollY > window.innerHeight;
|
||||
|
||||
const element = this.$refs.scrollElement as HTMLElement;
|
||||
|
||||
if (
|
||||
element.getBoundingClientRect().bottom * 0.85 < window.innerHeight &&
|
||||
this.scrollDataLoaded &&
|
||||
!this.scrollNoMoreData
|
||||
)
|
||||
this.addHistoryData();
|
||||
},
|
||||
|
||||
scrollToTop() {
|
||||
window.scrollTo({ top: 0 });
|
||||
},
|
||||
|
||||
search() {
|
||||
this.fetchHistoryData({
|
||||
searchedDriver: this.searchedDriver,
|
||||
searchedTrain: this.searchedTrain,
|
||||
filter: this.journalFilterActive,
|
||||
});
|
||||
|
||||
this.scrollNoMoreData = false;
|
||||
this.scrollDataLoaded = true;
|
||||
},
|
||||
|
||||
async addHistoryData() {
|
||||
this.scrollDataLoaded = false;
|
||||
|
||||
const countFrom = this.historyList.length;
|
||||
|
||||
const responseData: APIResponse | null = await (
|
||||
await axios.get(`${API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
|
||||
).data;
|
||||
|
||||
console.log('Loading...');
|
||||
|
||||
if (!responseData?.response) return;
|
||||
|
||||
if (responseData.response.length == 0) {
|
||||
this.scrollNoMoreData = true;
|
||||
return;
|
||||
}
|
||||
|
||||
this.historyList.push(...responseData.response);
|
||||
this.scrollDataLoaded = true;
|
||||
},
|
||||
|
||||
async fetchHistoryData(
|
||||
props: {
|
||||
searchedDriver?: string;
|
||||
searchedTrain?: string;
|
||||
filter?: JournalFilter;
|
||||
} = {}
|
||||
) {
|
||||
this.historyDataStatus.status = DataStatus.Loading;
|
||||
|
||||
const queries: string[] = [];
|
||||
|
||||
if (props.searchedDriver) queries.push(`driver=${props.searchedDriver}`);
|
||||
if (props.searchedTrain) queries.push(`train=${props.searchedTrain}`);
|
||||
|
||||
// Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
|
||||
if (this.sorterActive.id == 'distance') queries.push('sortBy=routeDistance');
|
||||
else if (this.sorterActive.id == 'total-stops') queries.push('sortBy=allStopsCount');
|
||||
else if (this.sorterActive.id == 'beginDate') queries.push('sortBy=beginDate');
|
||||
else queries.push('sortBy=timetableId');
|
||||
|
||||
queries.push('countLimit=15');
|
||||
|
||||
switch (props.filter?.id) {
|
||||
case JournalFilterType.abandoned:
|
||||
queries.push('fulfilled=0', 'terminated=1');
|
||||
break;
|
||||
|
||||
case JournalFilterType.active:
|
||||
queries.push('terminated=0');
|
||||
break;
|
||||
|
||||
case JournalFilterType.fulfilled:
|
||||
queries.push('fulfilled=1');
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
this.currentQuery = queries.join('&');
|
||||
|
||||
try {
|
||||
const responseData: APIResponse | null = await (await axios.get(`${API_URL}?${this.currentQuery}`)).data;
|
||||
|
||||
if (!responseData) {
|
||||
this.historyDataStatus.status = DataStatus.Error;
|
||||
this.historyDataStatus.error = 'Brak danych!';
|
||||
return;
|
||||
}
|
||||
|
||||
if (responseData.errorMessage) {
|
||||
this.historyDataStatus.status = DataStatus.Error;
|
||||
this.historyDataStatus.error = responseData.errorMessage;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (!responseData.response) return;
|
||||
|
||||
// Response data exists
|
||||
this.historyList = responseData.response;
|
||||
|
||||
this.historyDataStatus.status = DataStatus.Loaded;
|
||||
} catch (error) {
|
||||
this.historyDataStatus.status = DataStatus.Error;
|
||||
this.historyDataStatus.error = 'Ups! Coś poszło nie tak!';
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/JournalSection.scss';
|
||||
|
||||
.journal_item {
|
||||
&-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
padding: 0.2em 0;
|
||||
|
||||
.scenery-list {
|
||||
span {
|
||||
color: #adadad;
|
||||
|
||||
&.confirmed {
|
||||
color: #a3eba3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-status {
|
||||
&.terminated {
|
||||
color: salmon;
|
||||
}
|
||||
|
||||
&.fulfilled {
|
||||
color: lightgreen;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: lightblue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user