feat(scenery): added optional displaying active timetables' rolling stock thumbnails

src/components/SceneryView/SceneryTimetable/SceneryTimetableList.vue

@@ -54,14 +54,11 @@
           {{ $t('scenery.no-timetables') }}
         </li>
 
-        <li
-          v-else
-          v-for="(row, i) in sceneryTimetables"
-          :key="row.train.id"
-        >
+        <li v-else class="timetable-item" v-for="(row, i) in sceneryTimetables" :key="row.train.id">
           <!-- {{ row.train.id + row.checkpointStop.arrivalTimestamp.toString() }} -->
-          <router-link class="timetable-item-link" tabindex="0" :to="row.train.driverRouteLocation">
-            <span class="item-general">
+          <router-link class="item-link" tabindex="0" :to="row.train.driverRouteLocation">
+            <div class="item-top">
+              <div class="top-general">
                 <span class="general-info">
                   <div class="info-train">
                     <!-- Cargo warnings & details badges -->
@@ -130,9 +127,9 @@
 
                   <ScheduledTrainStatus :sceneryTimetableRow="row" />
                 </span>
-            </span>
+              </div>
 
-            <span class="item-schedule">
+              <div class="top-schedule">
                 <span class="schedule-arrival">
                   <span class="arrival-time begins" v-if="row.checkpointStop.beginsHere">
                     {{ $t('timetables.begins') }}
@@ -180,7 +177,9 @@
 
                   <span class="departure-time" v-else>
                     <div v-if="row.checkpointStop.departureDelay == 0">
-                    <span>{{ timestampToTimeString(row.checkpointStop.departureTimestamp) }}</span>
+                      <span>{{
+                        timestampToTimeString(row.checkpointStop.departureTimestamp)
+                      }}</span>
                     </div>
                     <div v-else>
                       <div>
@@ -197,7 +196,12 @@
                     </div>
                   </span>
                 </span>
-            </span>
+              </div>
+            </div>
+
+            <div class="item-stock-list" v-if="showStockThumbnails">
+              <StockList :trainStockList="row.train.stockList" />
+            </div>
           </router-link>
         </li>
       </transition-group>
@@ -206,7 +210,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ComputedRef, PropType } from 'vue';
+import { computed, ComputedRef, PropType, ref } from 'vue';
 import { Station, ActiveScenery } from '../../../typings/common';
 import { SceneryTimetableRow } from '../typings';
 import { getTrainStopStatus, stopStatusPriorities } from '../utils';
@@ -216,6 +220,7 @@ import { useApiStore } from '../../../store/apiStore';
 import { timestampToTimeString } from '../../../composables/time';
 import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
 import Loading from '../../Global/Loading.vue';
+import StockList from '../../Global/StockList.vue';
 
 const props = defineProps({
   station: {
@@ -236,6 +241,8 @@ const route = useRoute();
 const mainStore = useMainStore();
 const apiStore = useApiStore();
 
+const showStockThumbnails = ref(false);
+
 const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
   if (!props.onlineScenery) return [];
 
@@ -292,7 +299,7 @@ const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
   gap: 1em;
 }
 
-.item-general {
+.top-general {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -300,7 +307,7 @@ const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
   text-align: left;
 }
 
-.item-schedule {
+.top-schedule {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 0.2em;
@@ -341,18 +348,12 @@ const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
   overflow-y: auto;
 }
 
-.timetable-item,
-.timetable-item-link {
+.timetable-item {
   margin: 0.5em 0;
-  padding: 0.5em;
+  padding: 0.35em;
   max-width: 1100px;
 
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 1.2em 0.5em;
-
   overflow: hidden;
-
   background: #353535;
 
   z-index: 10;
@@ -364,6 +365,16 @@ const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
   }
 }
 
+.timetable-item > .item-link > .item-top {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1.2em 0.5em;
+}
+
+.timetable-item > .item-link > .item-stock-list {
+  margin-top: 1em;
+}
+
 .general-info {
   display: flex;
   flex-direction: column;