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

Wyświetlanie statystyk dyżurnego w karcie

Browse Source
This commit is contained in:
Spythere
2022-06-17 17:27:59 +02:00
parent f513ee8d07
commit 9f24c439c5
7 changed files with 216 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/JournalView/DispatcherStats.vue
+108 -84
View File
@@ -1,89 +1,93 @@
<template>
<div class="card-dimmer"></div>
<div class="card-dimmer" @click="closeCard"></div>
<div class="dispatcher-stats-card card">
<h2 class="card-title">STATYSTYKI DYŻURNEGO <span class="text--primary">SPYTHERE</span></h2>
<div>
<h2 class="card-title">
STATYSTYKI DYŻURNEGO <span class="text--primary">{{ store.dispatcherStatsName.toUpperCase() }}</span>
</h2>
<h3>Rozkłady jazdy dyżurnego</h3>
<div class="info-stats">
<span class="stat-badge">
<span>SUMA</span>
<span>15</span>
</span>
<span class="stat-badge">
<span>REKORD</span>
<span>322km</span>
</span>
<span class="stat-badge">
<span>ŚREDNIO</span>
<span>72km</span>
</span>
<span class="stat-badge">
<span>NAJKRÓTSZY</span>
<span>8.5km</span>
</span>
</div>
<div class="loading" v-if="!store.dispatcherStatsData">Ładowanie...</div>
<div v-else>
<h3>STATYSTYKI WYSTAWIONYCH ROZKŁADÓW</h3>
<div class="info-stats">
<span class="stat-badge">
<span>LICZBA</span>
<span>{{ store.dispatcherStatsData.count }}</span>
</span>
<span class="stat-badge">
<span>SUMA (KM)</span>
<span>{{ store.dispatcherStatsData.sumDistance.toFixed(2) }}km</span>
</span>
<span class="stat-badge">
<span>NAJDŁUŻSZY</span>
<span>{{ store.dispatcherStatsData.maxTimetableDistance }}km</span>
</span>
<span class="stat-badge">
<span>ŚREDNIO</span>
<span>{{ store.dispatcherStatsData.avgTimetableDistance }}km</span>
</span>
</div>
<h3>Historia wystawionych rozkładów</h3>
<div class="last-timetables">
<div class="timetable-row">
<span>213000&nbsp;<b>lolz12345</b></span>
<span>#333331</span>
<span>Grabów Miasto - Aleksandrów Kujawski</span>
<span>14/06 23:09</span>
<h3>OSTATNIE WYSTAWIONE ROZKŁADY</h3>
<div class="last-timetables">
<div class="timetable-row" v-for="timetable in store.dispatcherStatsData.timetables">
<span>#{{ timetable.timetableId }}</span>
<span>{{ timetable.routeDistance }}km</span>
<span>
<b>{{ timetable.trainNo }}</b
>&nbsp;{{ timetable.driverName }}
</span>
<span>{{ timetable.route.replace('|', ' > ') }}</span>
</div>
</div>
</div>
<div class="timetable-row">
<span>213000&nbsp;<b>Waffel</b></span>
<span>#333327</span>
<span>STARE LIPOWO - Testowo</span>
<span>14/06 22:57</span>
</div>
<div class="timetable-row">
<span>213000&nbsp;<b>Waffel</b></span>
<span>#333327</span>
<span>STARE LIPOWO - Testowo</span>
<span>14/06 22:57</span>
</div>
<div class="timetable-row">
<span>213000&nbsp;<b>Waffel</b></span>
<span>#333327</span>
<span>STARE LIPOWO - Testowo</span>
<span>14/06 22:57</span>
</div>
<div class="timetable-row">
<span>213000&nbsp;<b>Waffel</b></span>
<span>#333327</span>
<span>STARE LIPOWO - Testowo</span>
<span>14/06 22:57</span>
</div>
<div class="timetable-row">
<span>213000&nbsp;<b>Waffel</b></span>
<span>#333327</span>
<span>STARE LIPOWO - Testowo</span>
<span>14/06 22:57</span>
</div>
<!-- <div class="timetable-row">
<span>21370</span>
<span>nwm12345t6</span>
<span>Grabów Miasto - Aleksandrów Kujawski</span>
<span>23:09</span>
</div> -->
</div>
</div>
</template>
<script lang="ts">
import { DispatcherStatsAPIData } from '@/scripts/interfaces/api/DispatcherStatsAPIData';
import { URLs } from '@/scripts/utils/apiURLs';
import { useStore } from '@/store/store';
import axios from 'axios';
import { defineComponent } from 'vue';
export default defineComponent({
emits: ['closeCard'],
setup() {
return {};
const store = useStore();
return {
store,
};
},
data() {
return {
lastDispatcherName: ''
}
},
activated() {
this.fetchDispatcherStats();
},
methods: {
async fetchDispatcherStats() {
this.store.dispatcherStatsData = undefined;
const statsData: DispatcherStatsAPIData = await (
await axios.get(`${URLs.stacjownikAPI}/api/getDispatcherInfo?name=${this.store.dispatcherStatsName}`)
).data;
this.store.dispatcherStatsData = statsData.response;
},
closeCard() {
this.$emit('closeCard');
}
},
});
</script>
@@ -95,25 +99,45 @@ export default defineComponent({
.dispatcher-stats-card {
padding: 1em;
max-width: 800px;
max-width: 850px;
width: 100vw;
max-height: 750px;
min-height: 600px;
}
.loading {
font-size: 1.4em;
padding: 0.6em;
text-align: center;
margin: 1em 0 400px 0;
background-color: #4d4d4d;
}
h2.card-title {
text-align: center;
font-size: 1.8em;
}
h3 {
margin: 0.5em 0;
margin-top: 1em;
}
h2,
h3 {
text-align: center;
}
.info-stats {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 1em;
}
.last-timetables {
overflow-y: scroll;
}
.stat-badge {
margin-right: 0.5em;
padding-bottom: 1em;
@@ -135,15 +159,15 @@ h3 {
.timetable-row {
display: grid;
grid-template-columns: 2fr 1fr 3fr 1fr;
grid-template-columns: 1fr 1fr 3fr 4fr;
gap: 0.2em;
margin: 0.5em 0;
text-align: center;
span {
display: flex;
justify-content: center;
align-items: center;
min-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
background-color: #4d4d4d;
padding: 0.5em 0.2em;
@@ -153,15 +177,15 @@ h3 {
@include smallScreen() {
.dispatcher-stats-card {
text-align: center;
}
.info-stats {
justify-content: center;
font-size: 1.2em;
}
.timetable-row {
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 0;
// display: flex;
// flex-wrap: wrap;
// justify-content: center;
grid-template-columns: 1fr 1fr;
background-color: #4d4d4d;
}
}
</style>
src/components/JournalView/JournalDispatchers.vue
+38 -19
View File
@@ -1,18 +1,33 @@
<template>
<section class="journal-timetables">
<keep-alive>
<DispatcherStats v-if="statsCardOpen" @close-card="closeDispatcherStatsCard" />
</keep-alive>
<div class="journal-wrapper">
<journal-options
@on-filter-change="search"
@on-input-change="search"
@on-sorter-change="search"
:sorter-option-ids="['timestampFrom', 'duration']"
/>
<div class="journal_top-bar">
<journal-options
@on-filter-change="search"
@on-input-change="search"
@on-sorter-change="search"
:sorter-option-ids="['timestampFrom', 'duration']"
/>
<DispatcherStats />
<button
class="btn btn--option"
:disabled="store.dispatcherStatsName == ''"
@click="() => (statsCardOpen = !statsCardOpen)"
>
<span v-if="store.dispatcherStatsName">
Statystyki dyżurnego <b>{{ store.dispatcherStatsName }}</b>
</span>
<span v-else>Statystyki dyżurnego niedostępne</span>
</button>
</div>
<button class="return-btn" @click="scrollToTop" v-if="showReturnButton">
<!-- <button class="return-btn" @click="scrollToTop" v-if="showReturnButton">
<img :src="icons.arrow" alt="return arrow" />
</button>
</button> -->
<div class="journal-list">
<div class="list-wrapper" ref="scrollElement">
@@ -68,12 +83,6 @@
</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>
@@ -101,6 +110,8 @@ import JournalOptions from '@/components/JournalView/JournalOptions.vue';
import DispatcherStats from '@/components/JournalView/DispatcherStats.vue';
import { URLs } from '@/scripts/utils/apiURLs';
import { useStore } from '@/store/store';
import { DispatcherStatsAPIData } from '@/scripts/interfaces/api/DispatcherStatsAPIData';
const PROD_MODE = process.env.VUE_APP_JORUNAL_DISPATCHERS_DEV != '1' || process.env.NODE_ENV === 'production';
@@ -156,6 +167,7 @@ export default defineComponent({
scrollNoMoreData: false,
showReturnButton: false,
statsCardOpen: false,
}),
setup() {
@@ -181,6 +193,8 @@ export default defineComponent({
const scrollElement: Ref<HTMLElement | null> = ref(null);
return {
store: useStore(),
historyList: ref([]) as Ref<DispatcherHistoryItem[]>,
historyDataStatus,
@@ -210,8 +224,6 @@ export default defineComponent({
mounted() {
const query = this.$route.query;
console.log('Mounted');
if (query.sceneryName || query.dispatcherName) {
this.searchersValues[1].value = query.sceneryName?.toString() || '';
this.searchersValues[0].value = query.dispatcherName?.toString() || '';
@@ -233,6 +245,10 @@ export default defineComponent({
},
methods: {
closeDispatcherStatsCard() {
this.statsCardOpen = false;
},
navigateToScenery(name: string, isOnline: boolean) {
if (!isOnline) return;
@@ -261,8 +277,6 @@ export default defineComponent({
handleScroll() {
this.showReturnButton = window.scrollY > window.innerHeight;
console.log(window.scrollY > window.innerHeight);
const element = this.$refs.scrollElement as HTMLElement;
if (
@@ -355,6 +369,10 @@ export default defineComponent({
// Response data exists
this.historyList = responseData.response;
// Stats display
this.store.dispatcherStatsName =
this.historyList.length > 0 && this.searchersValues[0].value.trim() ? this.historyList[0].dispatcherName : '';
this.historyDataStatus.status = DataStatus.Loaded;
} catch (error) {
this.historyDataStatus.status = DataStatus.Error;
@@ -440,6 +458,7 @@ export default defineComponent({
span {
margin-top: 0.25em;
text-align: center;
}
}
}