From 92fbd36a51dec2b314709dbc1967065b1de3cd50 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 17 May 2022 21:31:58 +0200
Subject: [PATCH] Stylizacja progress bara

---
 src/components/TrainsView/TrainInfoSimple.vue | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/components/TrainsView/TrainInfoSimple.vue b/src/components/TrainsView/TrainInfoSimple.vue
index 86f60dc..8a7113a 100644
--- a/src/components/TrainsView/TrainInfoSimple.vue
+++ b/src/components/TrainsView/TrainInfoSimple.vue
@@ -42,15 +42,14 @@
           </span>
         </div>
         <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>
+          &nbsp;{{ currentDistance(train.timetableData.followingStops) }} km /
+          <span class="text--primary"> {{ train.timetableData.routeDistance }} km </span>
           |
           <span v-html="currentDelay(train.timetableData.followingStops)"></span>
         </div>
 
-        <div class="driver_position text--grayed">
+        <div class="driver_position text--grayed" style="margin-top: 0.25em">
           <span v-if="train.currentStationHash">
             {{ $t('trains.current-scenery') }} <span>{{ train['currentStationName'] }}&nbsp;</span>
           </span>
@@ -122,17 +121,13 @@ export default defineComponent({
     generateProgressBar(train: Train) {
       if (!train.timetableData) return '';
 
-      const percentage = this.confirmedPercentage(train.timetableData.followingStops);
-
-      const mainStops = train.timetableData.followingStops.filter((stop) => stop.stopName.startsWith('<strong>'));
-      const skipRatio = Math.floor(mainStops.length / 10);
+      const percentage = Math.floor(Number(this.confirmedPercentage(train.timetableData.followingStops)));
 
       let progressBarString = `<span style="color: white"> ${percentage}% </span> `;
 
-      mainStops.forEach((stop, i) => {
-        if (skipRatio > 0 && i % 10 == skipRatio) return;
-        progressBarString += `<span style="color: ${stop.confirmed ? 'springgreen' : 'gray'}">▉</span>`;
-      });
+      for (let i = 0; i < 5; i++) {
+        progressBarString += `<span style="color: ${i + 1 < percentage / 20 ? 'springgreen' : 'gray'}">▉</span>`;
+      }
 
       return progressBarString;
     },