From 28cb9f3471931761da6267a7b9564d29e8501250 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 17 May 2022 13:27:21 +0200
Subject: [PATCH 1/2] =?UTF-8?q?Poprawiono=20wygl=C4=85d=20widoku=20poci?=
 =?UTF-8?q?=C4=85g=C3=B3w;=20dodano=20progress=20bar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TrainsView/TrainInfoSimple.vue | 28 ++++++++++++++++---
 .../TrainsView/TrainTimetableCard.vue         |  5 ++--
 src/mixins/trainInfoMixin.ts                  |  4 +++
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/components/TrainsView/TrainInfoSimple.vue b/src/components/TrainsView/TrainInfoSimple.vue
index f73a3f9..86f60dc 100644
--- a/src/components/TrainsView/TrainInfoSimple.vue
+++ b/src/components/TrainsView/TrainInfoSimple.vue
@@ -42,11 +42,10 @@
           </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>
-            {{ $t('trains.route-progress') }} {{ confirmedPercentage(train.timetableData.followingStops) }}%
-          </span>
+          <span style="color: gray" v-html="generateProgressBar(train)"></span>
           |
           <span v-html="currentDelay(train.timetableData.followingStops)"></span>
         </div>
@@ -118,6 +117,26 @@ export default defineComponent({
       offline: require('@/assets/icon-offline.svg'),
     },
   }),
+
+  methods: {
+    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);
+
+      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>`;
+      });
+
+      return progressBarString;
+    },
+  },
 });
 </script>
 
@@ -150,7 +169,8 @@ export default defineComponent({
   background-color: #202020;
   gap: 0.5em;
 
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     background: #292929;
   }
 }
diff --git a/src/components/TrainsView/TrainTimetableCard.vue b/src/components/TrainsView/TrainTimetableCard.vue
index da400a0..626cf96 100644
--- a/src/components/TrainsView/TrainTimetableCard.vue
+++ b/src/components/TrainsView/TrainTimetableCard.vue
@@ -71,9 +71,10 @@ export default defineComponent({
   max-width: 1300px;
   max-height: calc(100vh - 2em);
 
+  background-color: #202020;
+  
+
   top: 0;
   transform: translate(-50%, 1em);
-
-  border: 1px solid white;
 }
 </style>
diff --git a/src/mixins/trainInfoMixin.ts b/src/mixins/trainInfoMixin.ts
index f6b1e54..f19ca60 100644
--- a/src/mixins/trainInfoMixin.ts
+++ b/src/mixins/trainInfoMixin.ts
@@ -63,6 +63,10 @@ export default defineComponent({
                 .join(' > ');
         },
 
+        currentDistance(stops: TrainStop[]) {
+            return stops.filter(stop => stop.confirmed).slice(-1)[0]?.stopDistance || 0;
+        },
+
         confirmedPercentage(stops: TrainStop[]) {
             return ((stops.filter((stop) => stop.confirmed).length / stops.length) * 100).toFixed(0);
         },

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 2/2] 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;
     },