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

Cleanup kodu; poprawki funkcjonalności

Browse Source
This commit is contained in:
Spythere
2022-09-05 23:32:27 +02:00
parent 2a64b8f10d
commit b0a9939446
10 changed files with 582 additions and 573 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/JournalView/JournalDispatchers.vue
+49 -212
View File
@@ -1,75 +1,39 @@
<template>
<section class="journal-timetables">
<div class="journal-wrapper">
<div class="journal_top-bar">
<JournalOptions
@on-filter-change="search"
@on-input-change="search"
@on-sorter-change="search"
:sorter-option-ids="['timestampFrom', 'duration']"
/>
<div class="journal_wrapper">
<JournalOptions
@on-filter-change="search"
@on-input-change="search"
@on-sorter-change="search"
:sorter-option-ids="['timestampFrom', 'duration']"
/>
<!-- <DispatcherStats /> -->
</div>
<div class="timetables_wrapper" ref="scrollElement">
<transition name="warning" mode="out-in">
<div :key="dataStatus">
<Loading v-if="dataStatus == (DataStatus.Loading || DataStatus.Initialized)" />
<div class="journal-list">
<div class="list-wrapper" ref="scrollElement">
<transition name="warning" mode="out-in">
<div :key="historyDataStatus.status">
<Loading v-if="isDataLoading || isDataInit" />
<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> &bull; <b>{{ doc.stationName }}</b>
<span class="text--grayed">&nbsp;#{{ doc.stationHash }}&nbsp;</span>
<span class="region-badge" :class="doc.region">PL1</span>
</span>
<span>
<span :data-status="doc.isOnline">
{{ doc.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp;
</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">
&gt;
{{ new Date(doc.timestampTo).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
({{ $t('journal.duty-lasted') }} {{ calculateDuration(doc.currentDuration!) }})
</span>
</span>
</div>
</li>
</transition-group>
</ul>
<div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
{{ $t('app.error') }}
</div>
</transition>
</div>
<div class="journal_warning" v-else-if="historyList.length == 0">
{{ $t('app.no-result') }}
</div>
<div v-else>
<JournalDispatchersList :dispatcherHistory="computedHistoryList" />
<button
class="btn btn--option btn--load-data"
v-if="!scrollNoMoreData && scrollDataLoaded"
@click="addHistoryData"
>
{{ $t('journal.load-data') }}
</button>
</div>
</div>
</transition>
</div>
<div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
@@ -79,7 +43,7 @@
</template>
<script lang="ts">
import { computed, defineComponent, JournalFilter, provide, reactive, Ref, ref } from 'vue';
import { defineComponent, JournalFilter, provide, reactive, Ref, ref } from 'vue';
import axios from 'axios';
import ActionButton from '../../components/Global/ActionButton.vue';
@@ -89,38 +53,16 @@ import SearchBox from '../Global/SearchBox.vue';
import Loading from '../Global/Loading.vue';
import { URLs } from '../../scripts/utils/apiURLs';
import dateMixin from '../../mixins/dateMixin';
import { DataStatus } from '../../scripts/enums/DataStatus';
import { useStore } from '../../store/store';
import JournalDispatchersList from './JournalDispatchersList.vue';
import { JournalDispatcherSearcher } from '../../types/JournalDispatcherTypes';
import { DispatcherHistory } from '../../scripts/interfaces/api/DispatchersAPIData';
const DISPATCHERS_API_URL = `${URLs.stacjownikAPI}/api/getDispatchers`;
interface DispatcherHistoryItem {
id: string;
stationName: string;
stationHash: string;
region: string;
dispatcherName: string;
dispatcherId: number;
timestampFrom: number;
timestampTo?: number;
currentDuration?: number;
lastOnlineTimestamp: number;
isOnline: boolean;
}
type JournalDispatcherSearcher = {
[key in 'search-dispatcher' | 'search-station']: string;
};
export default defineComponent({
components: { SearchBox, ActionButton, JournalOptions, DispatcherStats, Loading },
mixins: [dateMixin],
components: { SearchBox, ActionButton, JournalOptions, DispatcherStats, Loading, JournalDispatchersList },
name: 'JournalDispatchers',
props: {
@@ -142,16 +84,17 @@ export default defineComponent({
showReturnButton: false,
statsCardOpen: false,
dataStatus: DataStatus.Initialized,
DataStatus,
historyList: [] as DispatcherHistory[],
}),
setup() {
const historyDataStatus: Ref<{ status: DataStatus; error: string | null }> = ref({
status: DataStatus.Loading,
error: null,
});
const sorterActive = ref({ id: 'timestampFrom', dir: -1 });
const journalFilterActive = ref({});
const searchersValues = reactive({
'search-dispatcher': '',
'search-station': '',
@@ -169,13 +112,6 @@ export default defineComponent({
return {
store: useStore(),
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),
sorterActive,
searchersValues,
@@ -220,21 +156,6 @@ export default defineComponent({
this.statsCardOpen = false;
},
navigateToScenery(name: string, isOnline: boolean) {
if (!isOnline) return;
this.$router.push(`/scenery?station=${name.trim().replace(/ /g, '_')}`);
},
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;
@@ -244,15 +165,11 @@ export default defineComponent({
element.getBoundingClientRect().bottom * 0.85 < window.innerHeight &&
this.scrollDataLoaded &&
!this.scrollNoMoreData &&
this.historyDataStatus.status == DataStatus.Loaded
this.dataStatus == DataStatus.Loaded
)
this.addHistoryData();
},
scrollToTop() {
window.scrollTo({ top: 0 });
},
search() {
this.fetchHistoryData({
searchers: this.searchersValues,
@@ -267,7 +184,7 @@ export default defineComponent({
const countFrom = this.historyList.length;
const responseData: DispatcherHistoryItem[] = await (
const responseData: DispatcherHistory[] = await (
await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
).data;
@@ -288,7 +205,7 @@ export default defineComponent({
filter?: JournalFilter;
} = {}
) {
this.historyDataStatus.status = DataStatus.Loading;
this.dataStatus = DataStatus.Loading;
const queries: string[] = [];
@@ -311,13 +228,12 @@ export default defineComponent({
this.currentQuery = queries.join('&');
try {
const responseData: DispatcherHistoryItem[] = await (
const responseData: DispatcherHistory[] = await (
await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}`)
).data;
if (!responseData) {
this.historyDataStatus.status = DataStatus.Error;
this.historyDataStatus.error = 'Brak danych!';
this.dataStatus = DataStatus.Error;
return;
}
@@ -332,10 +248,9 @@ export default defineComponent({
? this.historyList[0].dispatcherName
: '';
this.historyDataStatus.status = DataStatus.Loaded;
this.dataStatus = DataStatus.Loaded;
} catch (error) {
this.historyDataStatus.status = DataStatus.Error;
this.historyDataStatus.error = 'Ups! Coś poszło nie tak!';
this.dataStatus = DataStatus.Error;
}
},
},
@@ -344,82 +259,4 @@ export default defineComponent({
<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;
}
}
.list-wrapper {
margin-top: 1em;
}
.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_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;
text-align: center;
}
}
}
</style>