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

Stylizacja progress bara

Browse Source
This commit is contained in:
Spythere
2022-05-17 21:31:58 +02:00
parent 28cb9f3471
commit 92fbd36a51
1 changed files with 7 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/TrainsView/TrainInfoSimple.vue
+7 -12
View File
@@ -42,15 +42,14 @@
</span> </span>
</div> </div>
<div style="margin-top: 0.5em" v-if="train.timetableData"> <div style="margin-top: 0.5em" v-if="train.timetableData">
<span class="text--grayed">{{ currentDistance(train.timetableData.followingStops) }} km</span> /
<span class="text--primary"> {{ train.timetableData.routeDistance }} km </span>
|
<span style="color: gray" v-html="generateProgressBar(train)"></span> <span style="color: gray" v-html="generateProgressBar(train)"></span>
&nbsp;{{ currentDistance(train.timetableData.followingStops) }} km /
<span class="text--primary"> {{ train.timetableData.routeDistance }} km </span>
| |
<span v-html="currentDelay(train.timetableData.followingStops)"></span> <span v-html="currentDelay(train.timetableData.followingStops)"></span>
</div> </div>
<div class="driver_position text--grayed"> <div class="driver_position text--grayed" style="margin-top: 0.25em">
<span v-if="train.currentStationHash"> <span v-if="train.currentStationHash">
{{ $t('trains.current-scenery') }} <span>{{ train['currentStationName'] }}&nbsp;</span> {{ $t('trains.current-scenery') }} <span>{{ train['currentStationName'] }}&nbsp;</span>
</span> </span>
@@ -122,17 +121,13 @@ export default defineComponent({
generateProgressBar(train: Train) { generateProgressBar(train: Train) {
if (!train.timetableData) return ''; if (!train.timetableData) return '';
const percentage = this.confirmedPercentage(train.timetableData.followingStops); const percentage = Math.floor(Number(this.confirmedPercentage(train.timetableData.followingStops)));
const mainStops = train.timetableData.followingStops.filter((stop) => stop.stopName.startsWith('<strong>'));
const skipRatio = Math.floor(mainStops.length / 10);
let progressBarString = `<span style="color: white"> ${percentage}% </span> `; let progressBarString = `<span style="color: white"> ${percentage}% </span> `;
mainStops.forEach((stop, i) => { for (let i = 0; i < 5; i++) {
if (skipRatio > 0 && i % 10 == skipRatio) return; progressBarString += `<span style="color: ${i + 1 < percentage / 20 ? 'springgreen' : 'gray'}">▉</span>`;
progressBarString += `<span style="color: ${stop.confirmed ? 'springgreen' : 'gray'}">▉</span>`; }
});
return progressBarString; return progressBarString;
}, },