From 2ec4694bd332fc62b97e8547d19570bd7c398f8f Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Fri, 20 Dec 2024 15:51:16 +0100
Subject: [PATCH] restruct: train info & timetable code

---
 src/components/TrainsView/TrainInfo.vue      | 361 ++++++++-----------
 src/components/TrainsView/TrainSchedule.vue  |  14 +-
 src/components/TrainsView/TrainStats.vue     |   1 -
 src/components/TrainsView/TrainTable.vue     |  26 +-
 src/components/TrainsView/TrainTableItem.vue |  76 ++++
 src/views/DriverView.vue                     |   8 +-
 src/views/TrainsView.vue                     |   6 +
 7 files changed, 253 insertions(+), 239 deletions(-)
 create mode 100644 src/components/TrainsView/TrainTableItem.vue

diff --git a/src/components/TrainsView/TrainInfo.vue b/src/components/TrainsView/TrainInfo.vue
index 91fedb8..1337830 100644
--- a/src/components/TrainsView/TrainInfo.vue
+++ b/src/components/TrainsView/TrainInfo.vue
@@ -1,203 +1,183 @@
 <template>
   <div class="train-info" :data-extended="extended">
-    <section class="train-general">
-      <div class="general-top-bar">
-        <div class="top-bar-header">
-          <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
-          <span class="timetable-id" v-if="train.timetableData">
-            #{{ train.timetableData.timetableId }}
-          </span>
+    <div class="general-top-bar">
+      <div class="top-bar-header">
+        <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
+        <span class="timetable-id" v-if="train.timetableData">
+          #{{ train.timetableData.timetableId }}
+        </span>
 
-          <span
-            class="train-badge twr"
-            v-if="train.timetableData?.TWR"
-            data-tooltip-type="BaseTooltip"
-            :data-tooltip-content="$t('warnings.TWR')"
-          >
-            TWR
-          </span>
+        <span
+          class="train-badge twr"
+          v-if="train.timetableData?.TWR"
+          data-tooltip-type="BaseTooltip"
+          :data-tooltip-content="$t('warnings.TWR')"
+        >
+          TWR
+        </span>
 
-          <span
-            class="train-badge tn"
-            v-if="train.timetableData?.hasDangerousCargo"
-            data-tooltip-type="BaseTooltip"
-            :data-tooltip-content="$t('warnings.TN')"
-          >
-            TN
-          </span>
+        <span
+          class="train-badge tn"
+          v-if="train.timetableData?.hasDangerousCargo"
+          data-tooltip-type="BaseTooltip"
+          :data-tooltip-content="$t('warnings.TN')"
+        >
+          TN
+        </span>
 
-          <span
-            class="train-badge pn"
-            v-if="train.timetableData?.hasExtraDeliveries"
-            data-tooltip-type="BaseTooltip"
-            :data-tooltip-content="$t('warnings.PN')"
-          >
-            PN
-          </span>
+        <span
+          class="train-badge pn"
+          v-if="train.timetableData?.hasExtraDeliveries"
+          data-tooltip-type="BaseTooltip"
+          :data-tooltip-content="$t('warnings.PN')"
+        >
+          PN
+        </span>
 
+        <b
+          v-if="train.timetableData"
+          data-tooltip-type="BaseTooltip"
+          :data-tooltip-content="getCategoryExplanation(train.timetableData.category)"
+          class="text--primary tooltip-help"
+        >
+          {{ train.timetableData.category }}
+        </b>
+
+        <b class="train-number">{{ train.trainNo }}</b>
+
+        <span>&bull;</span>
+
+        <div class="train-driver">
           <b
-            v-if="train.timetableData"
-            data-tooltip-type="BaseTooltip"
-            :data-tooltip-content="getCategoryExplanation(train.timetableData.category)"
-            class="text--primary tooltip-help"
+            class="level-badge driver"
+            :style="calculateExpStyle(train.driverLevel, train.isSupporter)"
           >
-            {{ train.timetableData.category }}
+            {{ train.driverLevel < 2 ? 'L' : `${train.driverLevel}` }}
           </b>
 
-          <b class="train-number">{{ train.trainNo }}</b>
+          <b
+            v-if="apiStore.donatorsData.includes(train.driverName)"
+            data-tooltip-type="DonatorTooltip"
+            :data-tooltip-content="$t('donations.driver-message')"
+          >
+            {{ train.driverName }}
+            <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
+          </b>
 
-          <span>&bull;</span>
-
-          <div class="train-driver">
-            <b
-              class="level-badge driver"
-              :style="calculateExpStyle(train.driverLevel, train.isSupporter)"
-            >
-              {{ train.driverLevel < 2 ? 'L' : `${train.driverLevel}` }}
-            </b>
-
-            <b
-              v-if="apiStore.donatorsData.includes(train.driverName)"
-              data-tooltip-type="DonatorTooltip"
-              :data-tooltip-content="$t('donations.driver-message')"
-            >
-              {{ train.driverName }}
-              <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
-            </b>
-
-            <span v-else>{{ train.driverName }}</span>
-          </div>
+          <span v-else>{{ train.driverName }}</span>
         </div>
       </div>
+    </div>
 
-      <div class="general-timetable" v-if="train.timetableData">
-        <strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
-        <span
-          v-if="getSceneriesWithComments(train.timetableData).length > 0"
-          data-tooltip-type="BaseTooltip"
-          :data-tooltip-content="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(
-            train.timetableData
-          )})`"
-        >
-          <img class="image-warning" src="/images/icon-warning.svg" />
-        </span>
-      </div>
-
-      <hr style="margin: 0.25em 0" />
-
-      <div class="general-stops" v-if="train.timetableData">
-        <span v-if="train.timetableData.followingStops.length > 2">
-          {{ $t('trains.via-title') }}
-          <span v-html="getTrainStopsHtml(train.timetableData.followingStops)"></span>
-        </span>
-      </div>
-
-      <div class="general-status">
-        <div class="status-timetable-progress" v-if="train.timetableData">
-          <ProgressBar :progressPercent="confirmedPercentage(train.timetableData.followingStops)" />
-
-          <span class="progress-distance">
-            <span>{{ currentDistance(train.timetableData.followingStops) }} km</span>
-            <span>/</span>
-            <span class="text--primary">{{ train.timetableData.routeDistance }} km </span>
-            <span>|</span>
-            <span v-html="currentDelay(train.timetableData.followingStops)"></span>
-          </span>
-        </div>
-
-        <div class="status-badges">
-          <div v-if="!train.currentStationHash" class="train-badge offline">
-            <img src="/images/icon-offline.svg" alt="offline train icon" />
-            {{ $t('trains.scenery-offline') }}
-          </div>
-
-          <div v-if="!train.online" class="train-badge offline">
-            <img src="/images/icon-offline.svg" alt="offline train icon" />
-            Offline {{ lastSeenMessage(train.lastSeen) }}
-          </div>
-        </div>
-      </div>
-
-      <div class="general-stats" v-if="extended">
-        <div>
-          <img src="/images/icon-length.svg" alt="length icon" />
-          {{ train.length }}m
-        </div>
-
-        <div>
-          <img src="/images/icon-mass.svg" alt="mass icon" />
-          {{ (train.mass / 1000).toFixed(1) }}t
-        </div>
-
-        <div>
-          <img src="/images/icon-speed.svg" alt="speed icon" />
-          {{ train.speed }} km/h
-
-          <span v-if="stockSpeedLimit != Infinity">
-            &bull;
-            <em
-              class="text--grayed"
-              style="text-decoration: underline dotted"
-              tabindex="0"
-              :data-tooltip="$t('trains.vmax-tooltip')"
-            >
-              {{ stockSpeedLimit }} km/h
-            </em>
-          </span>
-        </div>
-      </div>
-
-      <div class="text--grayed" style="margin-top: 0.25em">
-        {{ displayTrainPosition(train) }}
-      </div>
-
-      <div
-        class="train-dangers"
-        v-if="extended && train.timetableData && train.timetableData.warningNotes"
+    <div class="general-timetable" v-if="train.timetableData">
+      <strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
+      <span
+        v-if="getSceneriesWithComments(train.timetableData).length > 0"
+        data-tooltip-type="BaseTooltip"
+        :data-tooltip-content="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(
+          train.timetableData
+        )})`"
       >
-        <div class="dangers-badges">
-          <div v-if="train.timetableData?.TWR">
-            <div class="train-badge twr">TWR</div>
-            - {{ $t('warnings.TWR') }}
-          </div>
+        <img class="image-warning" src="/images/icon-warning.svg" />
+      </span>
+    </div>
 
-          <div v-if="train.timetableData?.hasDangerousCargo">
-            <div class="train-badge tn">TN</div>
-            - {{ $t('warnings.TN') }}
-          </div>
+    <hr style="margin: 0.25em 0" />
 
-          <div v-if="train.timetableData?.hasExtraDeliveries">
-            <div class="train-badge pn">PN</div>
-            - {{ $t('warnings.PN') }}
-          </div>
+    <div class="general-stops" v-if="train.timetableData">
+      <span v-if="train.timetableData.followingStops.length > 2">
+        {{ $t('trains.via-title') }}
+        <span v-html="getTrainStopsHtml(train.timetableData.followingStops)"></span>
+      </span>
+    </div>
+
+    <div class="general-status">
+      <div class="status-timetable-progress" v-if="train.timetableData">
+        <ProgressBar :progressPercent="confirmedPercentage(train.timetableData.followingStops)" />
+
+        <span class="progress-distance">
+          <span>{{ currentDistance(train.timetableData.followingStops) }} km</span>
+          <span>/</span>
+          <span class="text--primary">{{ train.timetableData.routeDistance }} km </span>
+          <span>|</span>
+          <span v-html="currentDelay(train.timetableData.followingStops)"></span>
+        </span>
+      </div>
+
+      <div class="status-badges">
+        <div v-if="!train.currentStationHash" class="train-badge offline">
+          <img src="/images/icon-offline.svg" alt="offline train icon" />
+          {{ $t('trains.scenery-offline') }}
         </div>
 
-        <div class="dangers-notes">
-          <h4>{{ $t('warnings.header-title') }}</h4>
-          <p>
-            <i>{{ train.timetableData?.warningNotes }}</i>
-          </p>
+        <div v-if="!train.online" class="train-badge offline">
+          <img src="/images/icon-offline.svg" alt="offline train icon" />
+          Offline {{ lastSeenMessage(train.lastSeen) }}
         </div>
       </div>
-    </section>
+    </div>
 
-    <section class="train-stats" v-if="!extended">
-      <StockList :trainStockList="train.stockList" :tractionOnly="true" />
+    <div class="general-stats" v-if="extended">
+      <div>
+        <img src="/images/icon-length.svg" alt="length icon" />
+        {{ train.length }}m
+      </div>
 
       <div>
-        <span>{{ train.speed }}km/h</span>
+        <img src="/images/icon-mass.svg" alt="mass icon" />
+        {{ (train.mass / 1000).toFixed(1) }}t
+      </div>
 
-        <div>
-          <span> {{ train.length }}m</span>
+      <div>
+        <img src="/images/icon-speed.svg" alt="speed icon" />
+        {{ train.speed }} km/h
+
+        <span v-if="stockSpeedLimit != Infinity">
           &bull;
-          <span> {{ (train.mass / 1000).toFixed(1) }}t</span>
-          <span v-if="train.stockList.length > 1">
-            &bull;
-            {{ $t('trains.cars') }}: {{ train.stockList.length - 1 }}
-          </span>
+          <em
+            class="text--grayed"
+            style="text-decoration: underline dotted"
+            tabindex="0"
+            :data-tooltip="$t('trains.vmax-tooltip')"
+          >
+            {{ stockSpeedLimit }} km/h
+          </em>
+        </span>
+      </div>
+    </div>
+
+    <div class="text--grayed" style="margin-top: 0.25em">
+      {{ displayTrainPosition(train) }}
+    </div>
+
+    <div
+      class="train-dangers"
+      v-if="extended && train.timetableData && train.timetableData.warningNotes"
+    >
+      <div class="dangers-badges">
+        <div v-if="train.timetableData?.TWR">
+          <div class="train-badge twr">TWR</div>
+          - {{ $t('warnings.TWR') }}
+        </div>
+
+        <div v-if="train.timetableData?.hasDangerousCargo">
+          <div class="train-badge tn">TN</div>
+          - {{ $t('warnings.TN') }}
+        </div>
+
+        <div v-if="train.timetableData?.hasExtraDeliveries">
+          <div class="train-badge pn">PN</div>
+          - {{ $t('warnings.PN') }}
         </div>
       </div>
-    </section>
+
+      <div class="dangers-notes">
+        <h4>{{ $t('warnings.header-title') }}</h4>
+        <p>
+          <i>{{ train.timetableData?.warningNotes }}</i>
+        </p>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -256,7 +236,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
 @import '../../styles/badge.scss';
 
 .image-warning {
@@ -265,17 +244,6 @@ export default defineComponent({
   vertical-align: middle;
 }
 
-.train-stats {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  flex-direction: column;
-  text-align: center;
-
-  line-height: 1.5em;
-}
-
 .train-dangers {
   margin-top: 0.5em;
 }
@@ -299,15 +267,9 @@ export default defineComponent({
 }
 
 .train-info {
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  grid-template-rows: 1fr;
-
-  &[data-extended='true'] {
-    grid-template-columns: 1fr;
-  }
-
-  padding: 1em;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
 
   background-color: #1a1a1a;
   gap: 0.5em;
@@ -337,12 +299,6 @@ export default defineComponent({
   padding: 0 0.25em;
 }
 
-.train-general {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25em;
-}
-
 .general-stops {
   font-size: 0.8em;
 }
@@ -419,11 +375,4 @@ export default defineComponent({
   display: flex;
   gap: 0.25em;
 }
-
-@include smallScreen() {
-  .train-info {
-    grid-template-columns: 1fr;
-    gap: 1em 0;
-  }
-}
 </style>
diff --git a/src/components/TrainsView/TrainSchedule.vue b/src/components/TrainsView/TrainSchedule.vue
index 1a8b009..01f5307 100644
--- a/src/components/TrainsView/TrainSchedule.vue
+++ b/src/components/TrainsView/TrainSchedule.vue
@@ -1,7 +1,5 @@
 <template>
-  <div class="train-schedule" @click="toggleShowState">
-    <StockList :trainStockList="train.stockList" />
-
+  <div class="train-schedule">
     <div class="schedule-wrapper" v-if="train.timetableData">
       <div class="stops">
         <div
@@ -252,12 +250,6 @@ export default defineComponent({
 
       return activeMinorStopList;
     }
-  },
-
-  methods: {
-    toggleShowState() {
-      this.$emit('click');
-    }
   }
 });
 </script>
@@ -281,10 +273,6 @@ $blinkAnim: 0.5s ease-in-out alternate infinite blink;
   }
 }
 
-.train-schedule {
-  padding: 1em;
-}
-
 .schedule-wrapper {
   overflow-y: auto;
   width: 100%;
diff --git a/src/components/TrainsView/TrainStats.vue b/src/components/TrainsView/TrainStats.vue
index 35c8a83..757bd6e 100644
--- a/src/components/TrainsView/TrainStats.vue
+++ b/src/components/TrainsView/TrainStats.vue
@@ -249,7 +249,6 @@ h3 {
 }
 
 @include smallScreen {
-  h1,
   .no-data {
     text-align: center;
   }
diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue
index a16a8fa..e4a1db9 100644
--- a/src/components/TrainsView/TrainTable.vue
+++ b/src/components/TrainsView/TrainTable.vue
@@ -13,15 +13,7 @@
       </div>
 
       <transition-group name="list-anim" tag="ul">
-        <li
-          class="train-row"
-          v-for="train in trains"
-          :key="train.id"
-        >
-          <router-link class="a-block" :to="train.driverRouteLocation">
-            <TrainInfo :train="train" :extended="false" />
-          </router-link>
-        </li>
+        <TrainTableItem v-for="train in trains" :key="train.id" :train="train" />
       </transition-group>
     </div>
   </transition>
@@ -30,13 +22,15 @@
 <script lang="ts">
 import { defineComponent, inject, PropType, Ref } from 'vue';
 import { useMainStore } from '../../store/mainStore';
-import Loading from '../Global/Loading.vue';
-import TrainInfo from './TrainInfo.vue';
-import { Status, Train } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
+import { Status, Train } from '../../typings/common';
+
+import Loading from '../Global/Loading.vue';
+import TrainTableItem from './TrainTableItem.vue';
+import TrainInfo from './TrainInfo.vue';
 
 export default defineComponent({
-  components: { Loading, TrainInfo },
+  components: { Loading, TrainInfo, TrainTableItem },
 
   props: {
     trains: {
@@ -99,9 +93,5 @@ export default defineComponent({
   background: #1a1a1a;
 }
 
-li.train-row {
-  background-color: var(--clr-secondary);
-  margin-bottom: 1em;
-  width: 100%;
-}
+
 </style>
diff --git a/src/components/TrainsView/TrainTableItem.vue b/src/components/TrainsView/TrainTableItem.vue
new file mode 100644
index 0000000..8cbefff
--- /dev/null
+++ b/src/components/TrainsView/TrainTableItem.vue
@@ -0,0 +1,76 @@
+<template>
+  <li class="train-item">
+    <router-link class="a-block" :to="train.driverRouteLocation">
+      <div class="item-wrapper">
+        <TrainInfo :train="train" />
+
+        <div class="train-stats">
+          <StockList :trainStockList="train.stockList" :tractionOnly="true" />
+
+          <div>
+            <span>{{ train.speed }}km/h</span>
+
+            <div>
+              <span> {{ train.length }}m</span>
+              &bull;
+              <span> {{ (train.mass / 1000).toFixed(1) }}t</span>
+              <span v-if="train.stockList.length > 1">
+                &bull;
+                {{ $t('trains.cars') }}: {{ train.stockList.length - 1 }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </router-link>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+import { Train } from '../../typings/common';
+import TrainInfo from './TrainInfo.vue';
+import StockList from '../Global/StockList.vue';
+
+defineProps({
+  train: {
+    type: Object as PropType<Train>,
+    required: true
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+
+.train-item {
+  background-color: #1a1a1a;
+  margin-bottom: 1em;
+  width: 100%;
+  padding: 1em;
+}
+
+.item-wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-template-rows: 1fr;
+}
+
+.train-stats {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  flex-direction: column;
+  text-align: center;
+
+  line-height: 1.5em;
+}
+
+@include smallScreen() {
+  .item-wrapper {
+    grid-template-columns: 1fr;
+    gap: 1em 0;
+  }
+}
+</style>
diff --git a/src/views/DriverView.vue b/src/views/DriverView.vue
index 01eeb02..700fa91 100644
--- a/src/views/DriverView.vue
+++ b/src/views/DriverView.vue
@@ -17,12 +17,16 @@
             <span class="hidable">
               {{ $t('trains.driver-journal-link') }}
             </span>
+            
             <img src="/images/icon-train.svg" alt="train icon" />
           </router-link>
         </div>
 
         <div class="train-card">
-          <TrainInfo :train="chosenTrain" :extended="true" ref="trainInfo" />
+          <TrainInfo :train="chosenTrain" :extended="true" />
+          <div style="margin-top: 1em">
+            <StockList :trainStockList="chosenTrain.stockList" />
+          </div>
           <TrainSchedule :train="chosenTrain" />
         </div>
       </div>
@@ -69,6 +73,7 @@
 import { computed } from 'vue';
 import TrainInfo from '../components/TrainsView/TrainInfo.vue';
 import TrainSchedule from '../components/TrainsView/TrainSchedule.vue';
+import StockList from '../components/Global/StockList.vue';
 import Loading from '../components/Global/Loading.vue';
 import { useMainStore } from '../store/mainStore';
 import { useApiStore } from '../store/apiStore';
@@ -131,6 +136,7 @@ $viewBgCol: #1a1a1a;
 }
 
 .train-card {
+  padding: 1em;
   background-color: $viewBgCol;
   border-radius: 0 0 0.5em 0.5em;
 }
diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue
index c5aee1e..cc03f52 100644
--- a/src/views/TrainsView.vue
+++ b/src/views/TrainsView.vue
@@ -133,4 +133,10 @@ export default defineComponent({
   position: relative;
   margin-bottom: 0.5em;
 }
+
+@include smallScreen {
+  .trains_topbar {
+    justify-content: space-between;
+  }
+}
 </style>