Poprawiono wygląd widoku pociągów; dodano progress bar

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

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