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

chore: filters & stats fixes

Browse Source
This commit is contained in:
Spythere
2024-05-15 18:40:42 +02:00
parent eb5b94c9f6
commit e0036bf969
9 changed files with 113 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/StationsView/StationFilterCard.vue
+11 -5
View File
@@ -1,9 +1,9 @@
<template>
<section class="filter-card" v-click-outside="closeCard" @keydown.esc="closeCard">
<div class="card_controls">
<button class="btn--filled btn--image" @click="toggleCard">
<button class="card-button btn--filled btn--image" @click="toggleCard">
<img class="button_icon" src="/images/icon-filter2.svg" alt="filter icon" />
[F] {{ $t('options.filters') }}
<p>[F] {{ $t('options.filters') }}</p>
<span class="active-indicator" v-if="!filterStore.areFiltersAtDefault"></span>
</button>
@@ -327,9 +327,9 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
@import '../../styles/card.scss';
@import '../../styles/animations.scss';
@import '../../styles/responsive';
@import '../../styles/card';
@import '../../styles/animations';
h3.section-header {
text-align: center;
@@ -582,4 +582,10 @@ h3.section-header {
}
}
}
@include smallScreen {
.card_controls > button.card-button > p {
display: none;
}
}
</style>
src/components/StationsView/StationStats.vue
+88 -42
View File
@@ -1,29 +1,54 @@
<template>
<div class="station-stats">
<div class="separator" />
<div>
{{ $t('station-stats.u-factor') }}
<a
href="https://td2.info.pl/dyskusje/wspolczynnik-ugla-czy-to-ma-sens/msg81011/#msg81011"
target="_blank"
:data-tooltip="$t('station-stats.u-factor-tooltip')"
>(?)</a
>:
<b :style="calculateFactorStyle()">
{{ uFactor.toFixed(2) }}
</b>
| {{ $t('station-stats.avg-timetable-count') }}
<b>{{ avgTimetableCount.toFixed(2) }}</b>
</div>
<div>
{{ $t('station-stats.single-track-count') }}
<b>{{ trackCount.oneWayElectric }}</b> {{ $t('station-stats.electrified') }} /
<b>{{ trackCount.oneWayOther }}</b> {{ $t('station-stats.not-electrified') }} |
{{ $t('station-stats.double-track-count') }} <b>{{ trackCount.twoWayElectric }}</b>
{{ $t('station-stats.electrified') }} / <b>{{ trackCount.twoWayOther }}</b>
{{ $t('station-stats.not-electrified') }} | {{ $t('station-stats.open-spawns') }}
<b>{{ spawnCount.passenger }}</b> - PAS / <b>{{ spawnCount.freight }}</b> - TOW /
<b>{{ spawnCount.loco }}</b> - LUZ / <b>{{ spawnCount.all }}</b> - ALL
<div class="stats-row">
<div>
&bull;
<span
>{{ $t('station-stats.u-factor') }}
<a
href="https://td2.info.pl/dyskusje/wspolczynnik-ugla-czy-to-ma-sens/msg81011/#msg81011"
target="_blank"
:data-tooltip="$t('station-stats.u-factor-tooltip')"
>(?)</a
>:
</span>
<b class="u-factor" :style="calculateFactorStyle()">
{{ uFactor.toFixed(2) }}
</b>
</div>
<div>
&bull;
{{ $t('station-stats.med-timetable-count') }}
<b>{{ medTimetableCount }}</b>
</div>
<div>
&bull;
{{ $t('station-stats.single-track-count') }}
<b>{{ trackCount.oneWayElectric }}</b> {{ $t('station-stats.electrified') }} /
<b>{{ trackCount.oneWayOther }}</b> {{ $t('station-stats.not-electrified') }}
</div>
<div>
&bull;
{{ $t('station-stats.double-track-count') }}
<b>{{ trackCount.twoWayElectric }}</b> {{ $t('station-stats.electrified') }} /
<b>{{ trackCount.twoWayOther }}</b>
{{ $t('station-stats.not-electrified') }}
</div>
<div>&bull; {{ $t('station-stats.cross-sceneries') }} <b>test</b></div>
<div>
&bull;
{{ $t('station-stats.open-spawns') }} <b>{{ spawnCount.passenger }}</b> - PAS /
<b>{{ spawnCount.freight }}</b> - TOW / <b>{{ spawnCount.loco }}</b> - LUZ /
<b>{{ spawnCount.all }}</b> - ALL
</div>
</div>
</div>
</template>
@@ -63,18 +88,28 @@ export default defineComponent({
return activeDispatchers.length != 0 ? activeTrains.length / activeDispatchers.length : 0;
},
avgTimetableCount() {
const scheduledTrainsTotal = this.mainStore.activeSceneryList.reduce<number>((acc, sc) => {
if (sc.region != this.mainStore.region.id) return acc;
medTimetableCount() {
const scheduledTrainsArr = this.mainStore.activeSceneryList
.reduce<number[]>((acc, sc) => {
if (sc.region != this.mainStore.region.id) return acc;
acc += sc.scheduledTrainCount.all;
acc.push(sc.scheduledTrainCount.all);
return acc;
}, 0);
return acc;
}, [])
.sort((a, b) => Math.sign(a - b));
return this.mainStore.activeSceneryList.length != 0
? scheduledTrainsTotal / this.mainStore.activeSceneryList.length
: 0;
if (scheduledTrainsArr.length == 0) return 0;
let v1 = scheduledTrainsArr[scheduledTrainsArr.length / 2];
if (scheduledTrainsArr.length % 2 == 0) {
let v2 = scheduledTrainsArr[scheduledTrainsArr.length / 2 - 1];
return (v1 + v2) / 2;
}
return v1;
},
trackCount() {
@@ -133,19 +168,30 @@ export default defineComponent({
color: #ddd;
}
[data-factor-low='true'] {
color: #ddd;
.stats-row {
display: flex;
justify-content: center;
flex-wrap: wrap;
text-wrap: pretty;
gap: 0.25em;
margin-top: 0.25em;
}
[data-factor-mediocre='true'] {
color: lightgreen;
}
.u-factor {
[data-factor-low='true'] {
color: #ddd;
}
[data-factor-high='true'] {
color: greenyellow;
}
[data-factor-mediocre='true'] {
color: lightgreen;
}
[data-factor-highest='true'] {
color: rgb(22, 245, 22);
[data-factor-high='true'] {
color: greenyellow;
}
[data-factor-highest='true'] {
color: rgb(22, 245, 22);
}
}
</style>
src/components/StationsView/StationTable.vue
+1 -1
View File
@@ -406,7 +406,7 @@ $rowCol: #424242;
.station_table {
height: 80vh;
min-height: 550px;
min-height: 700px;
overflow: auto;
font-weight: 500;
}