feature: historia zmian w zestawieniu pociągów

src/components/JournalView/JournalTimetablesList.vue

@@ -1,7 +1,7 @@
 <template>
   <transition-group class="journal-list" tag="ul" name="list-anim">
     <li
-      v-for="{ timetable, sceneryList, ...item } in computedTimetableHistory"
+      v-for="{ timetable, sceneryList, revesedHistory, ...item } in computedTimetableHistory"
       class="journal_item"
       :key="timetable.id"
       @click="item.showExtra.value = !item.showExtra.value"
@@ -129,24 +129,49 @@
           <img :src="getIcon(`arrow-${item.showExtra.value ? 'asc' : 'desc'}`)" alt="Arrow" />
         </button>
 
+        <!-- Dodatkowe informacje -->
         <div class="info-extended" v-if="timetable.stockString && item.showExtra.value">
           <hr />
-          <div>
+
-            <span class="badge info-badge">
+          <div class="stock-specs">
+            <span class="badge specs-badge">
               <span>{{ $t('journal.stock-max-speed') }}</span>
               <span>{{ timetable.maxSpeed }}km/h</span>
             </span>
-            <span class="badge info-badge">
+            <span class="badge specs-badge">
               <span>{{ $t('journal.stock-length') }}</span>
               <span>{{ timetable.stockLength }}m</span>
             </span>
-            <span class="badge info-badge">
+            <span class="badge specs-badge">
               <span>{{ $t('journal.stock-mass') }}</span>
               <span>{{ Math.floor(timetable.stockMass! / 1000) }}t</span>
             </span>
           </div>
+
+          <div class="stock-history" v-if="revesedHistory.length > 1">
+            <button
+              class="btn--action"
+              v-for="(sh, i) in revesedHistory"
+              :data-checked="i == item.currentHistoryIndex.value"
+              @click.stop="item.currentHistoryIndex.value = i"
+            >
+              {{
+                new Date(Number(sh.split('@')[0])).toLocaleTimeString($i18n.locale, {
+                  hour: '2-digit',
+                  minute: '2-digit',
+                })
+              }}
+            </button>
+          </div>
+
           <ul class="stock-list">
-            <li v-for="(car, i) in timetable.stockString.split(';')" :key="i">
+            <li
+              v-for="(car, i) in (revesedHistory.length <= 1
+                ? timetable.stockString
+                : revesedHistory[item.currentHistoryIndex.value].split('@')[1]
+              ).split(';')"
+              :key="i"
+            >
               <img
                 @error="onImageError"
                 :src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
@@ -168,7 +193,6 @@ import imageMixin from '../../mixins/imageMixin';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 import styleMixin from '../../mixins/styleMixin';
 import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
-import { TimetableStop } from '../../scripts/interfaces/api/TrainAPIData';
 
 export default defineComponent({
   props: {
@@ -185,7 +209,9 @@ export default defineComponent({
       return this.timetableHistory.map((timetable) => ({
         timetable,
         sceneryList: this.getSceneryList(timetable),
+        revesedHistory: timetable.stockHistory.slice().reverse(),
         showExtra: ref(false),
+        currentHistoryIndex: ref(0),
       }));
     },
   },
@@ -308,6 +334,38 @@ ul.stock-list {
     color: #aaa;
     font-size: 0.9em;
   }
+
+  li > img {
+    vertical-align: text-bottom;
+    max-height: 60px;
+  }
+}
+
+.stock-specs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-top: 0.5em;
+
+  .specs-badge {
+    margin: 0;
+
+    span:last-child {
+      color: black;
+      background-color: $accentCol;
+    }
+  }
+}
+
+.stock-history {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-top: 1em;
+  
+  button[data-checked=true] {
+    color: $accentCol;
+  }
 }
 
 .scenery-list {
@@ -328,13 +386,6 @@ ul.stock-list {
   }
 }
 
-.info-badge {
-  span:last-child {
-    color: black;
-    background-color: $accentCol;
-  }
-}
-
 @include smallScreen {
   .info-general {
     flex-direction: column;
@@ -351,5 +402,13 @@ ul.stock-list {
   .btn--show {
     margin: 1em auto 0 auto;
   }
+
+  .stock-specs {
+    justify-content: center;
+  }
+
+  .stock-history {
+    justify-content: center;
+  }
 }
 </style>

src/components/TrainsView/TrainSchedule.vue

@@ -202,7 +202,6 @@ ul.stock-list {
 
   img {
     max-height: 60px;
-    max-width: 320px;
   }
 }
 

src/locales/en.json

@@ -284,7 +284,7 @@
     "stock-info": "EXTRA INFO",
     "stock-length": "Length",
     "stock-mass": "Mass",
-    "stock-max-speed": "Maximum registered speed",
+    "stock-max-speed": "Max. speed",
 
     "load-data": "Load further data...",
 

src/locales/pl.json

@@ -290,7 +290,7 @@
     "stock-info": "DODATKOWE INFORMACJE",
     "stock-length": "Długość",
     "stock-mass": "Masa",
-    "stock-max-speed": "Maks. zarejestrowana prędkość",
+    "stock-max-speed": "Prędkość maks.",
 
     "load-data": "Pobierz dalszą historię...",
 

src/scripts/interfaces/api/TimetablesAPIData.ts

@@ -38,6 +38,8 @@ export interface TimetableHistory {
   stopsString?: string;
 
   stockString?: string;
+  stockHistory: string[];
+
   stockMass?: number;
   stockLength?: number;
   maxSpeed?: number;

src/styles/badge.scss

@@ -4,10 +4,12 @@
   display: inline-block;
   padding: 0;
 
-  background: #585858;
-
   margin: 0.25em;
 
+  span:first-child {
+    background: #585858;
+  }
+
   span {
     display: inline-block;
     padding: 0.2em 0.4em;