Merge branch 'timetable-progress-bar'

src/components/TrainsView/TrainInfoSimple.vue

@@ -42,16 +42,14 @@
           </span>
         </div>
         <div style="margin-top: 0.5em" v-if="train.timetableData">
+          <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>
-            {{ $t('trains.route-progress') }} {{ confirmedPercentage(train.timetableData.followingStops) }}%
-          </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>
@@ -118,6 +116,22 @@ export default defineComponent({
       offline: require('@/assets/icon-offline.svg'),
     },
   }),
+
+  methods: {
+    generateProgressBar(train: Train) {
+      if (!train.timetableData) return '';
+
+      const percentage = Math.floor(Number(this.confirmedPercentage(train.timetableData.followingStops)));
+
+      let progressBarString = `<span style="color: white"> ${percentage}% </span> `;
+
+      for (let i = 0; i < 5; i++) {
+        progressBarString += `<span style="color: ${i + 1 < percentage / 20 ? 'springgreen' : 'gray'}">▉</span>`;
+      }
+
+      return progressBarString;
+    },
+  },
 });
 </script>
 
@@ -150,7 +164,8 @@ export default defineComponent({
   background-color: #202020;
   gap: 0.5em;
 
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     background: #292929;
   }
 }

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>

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);
         },