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 wyglądu; cleanup kodu

Browse Source
This commit is contained in:
Spythere
2022-09-22 13:59:19 +02:00
parent 8eb0266874
commit 0f19bc767a
11 changed files with 432 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/JournalView/DriverStats.vue
+148 -141
View File
@@ -1,141 +1,148 @@
<template>
<div class="card-dimmer" @click="closeCard"></div>
<div class="stats-card card">
<div>
<h2 class="card-title">
STATYSTYKI MASZYNISTY <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
</h2>
<div class="loading" v-if="!store.driverStatsData">Ładowanie...</div>
<div v-else>
<div class="info-stats" v-if="store.driverStatsData._sum.routeDistance != null">
<span class="stat-badge">
<span>PRZEBYTO</span>
<span>{{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km</span>
</span>
<span class="stat-badge">
<span>PORZUCONO</span>
<span>
{{ (store.driverStatsData._sum.routeDistance - store.driverStatsData._sum.currentDistance).toFixed(2) }}km
</span>
</span>
<span class="stat-badge">
<span>WYPEŁNIONO</span>
<span>{{ store.driverStatsData._count.fulfilled }} RJ</span>
</span>
<span class="stat-badge">
<span>PORZUCONO</span>
<span>{{ store.driverStatsData._count._all - store.driverStatsData._count.fulfilled }} RJ</span>
</span>
<span class="stat-badge">
<span>ZATWIERDZONO</span>
<span>{{ store.driverStatsData._sum.confirmedStopsCount }} stacji</span>
</span>
<span class="stat-badge">
<span>PORZUCONO</span>
<span>
{{ store.driverStatsData._sum.allStopsCount - store.driverStatsData._sum.confirmedStopsCount }}
stacji
</span>
</span>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import axios from 'axios';
import { defineComponent } from 'vue';
import { DriverStatsAPIData } from '../../scripts/interfaces/api/DriverStatsAPIData';
import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
import { URLs } from '../../scripts/utils/apiURLs';
import { useStore } from '../../store/store';
export default defineComponent({
emits: ['closeCard'],
setup() {
const store = useStore();
return {
store,
};
},
data() {
return {
test: Math.random(),
lastDispatcherName: '',
lastTimetables: [] as TimetableHistory[],
};
},
activated() {
this.fetchDispatcherStats();
},
methods: {
async fetchDispatcherStats() {
this.store.driverStatsData = undefined;
const statsData: DriverStatsAPIData = await (
await axios.get(`${URLs.stacjownikAPI}/api/getDriverInfo?name=${this.store.driverStatsName}`)
).data;
const recentTimetablesData: TimetableHistory[] = await (
await axios.get(`${URLs.stacjownikAPI}/api/getTimetables?driverName=${this.store.driverStatsName}`)
).data;
this.store.driverStatsData = statsData;
this.lastTimetables = recentTimetablesData || [];
},
closeCard() {
this.$emit('closeCard');
},
},
});
</script>
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
.timetable-row {
display: grid;
grid-template-columns: 4fr 1fr 1fr 2fr 2fr;
gap: 0.2em;
margin: 0.5em 0;
text-align: center;
span {
min-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
background-color: #4d4d4d;
padding: 0.5em 0.2em;
}
@include smallScreen() {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
span {
padding: 0.2em 0.3em;
}
grid-template-columns: 1fr;
background-color: #4d4d4d;
}
}
</style>
<template>
<div class="card-dimmer" @click="closeCard"></div>
<div class="stats-card card">
<div>
<h2 class="card-title">
STATYSTYKI MASZYNISTY <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
</h2>
<div class="loading" v-if="!store.driverStatsData">Ładowanie...</div>
<div v-else>
<div class="info-stats" v-if="store.driverStatsData._sum.routeDistance != null">
<span class="stat-badge">
<span>PRZEBYTO</span>
<span>{{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km</span>
</span>
<span class="stat-badge">
<span>PORZUCONO</span>
<span>
{{ (store.driverStatsData._sum.routeDistance - store.driverStatsData._sum.currentDistance).toFixed(2) }}km
</span>
</span>
<span class="stat-badge">
<span>WYPEŁNIONO</span>
<span>{{ store.driverStatsData._count.fulfilled }} RJ</span>
</span>
<span class="stat-badge">
<span>PORZUCONO</span>
<span>{{ store.driverStatsData._count._all - store.driverStatsData._count.fulfilled }} RJ</span>
</span>
<span class="stat-badge">
<span>ZATWIERDZONO</span>
<span>{{ store.driverStatsData._sum.confirmedStopsCount }} stacji</span>
</span>
<span class="stat-badge">
<span>PORZUCONO</span>
<span>
{{ store.driverStatsData._sum.allStopsCount - store.driverStatsData._sum.confirmedStopsCount }}
stacji
</span>
</span>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import axios from 'axios';
import { computed, defineComponent, ref } from 'vue';
import { DriverStatsAPIData } from '../../scripts/interfaces/api/DriverStatsAPIData';
import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
import { URLs } from '../../scripts/utils/apiURLs';
import { useStore } from '../../store/store';
export default defineComponent({
emits: ['closeCard'],
setup() {
const store = useStore();
return {
store,
driverStatsName: computed(() => store.driverStatsName),
};
},
data() {
return {
test: Math.random(),
lastDispatcherName: '',
lastTimetables: [] as TimetableHistory[],
};
},
activated() {
this.fetchDispatcherStats();
},
watch: {
driverStatsName(value: any) {
console.log(value);
},
},
methods: {
async fetchDispatcherStats() {
this.store.driverStatsData = undefined;
const statsData: DriverStatsAPIData = await (
await axios.get(`${URLs.stacjownikAPI}/api/getDriverInfo?name=${this.store.driverStatsName}`)
).data;
const recentTimetablesData: TimetableHistory[] = await (
await axios.get(`${URLs.stacjownikAPI}/api/getTimetables?driverName=${this.store.driverStatsName}`)
).data;
this.store.driverStatsData = statsData;
this.lastTimetables = recentTimetablesData || [];
},
closeCard() {
this.$emit('closeCard');
},
},
});
</script>
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
@import '../../styles/card.scss';
.timetable-row {
display: grid;
grid-template-columns: 4fr 1fr 1fr 2fr 2fr;
gap: 0.2em;
margin: 0.5em 0;
text-align: center;
span {
min-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
background-color: #4d4d4d;
padding: 0.5em 0.2em;
}
@include smallScreen() {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
span {
padding: 0.2em 0.3em;
}
grid-template-columns: 1fr;
background-color: #4d4d4d;
}
}
</style>