rozbudowany szczegółówy RJ pociągu

src/components/TrainsView/StopLabel.vue

@@ -0,0 +1,147 @@
+<template>
+  <span class="stop-label" :data-sbl="stop.isSBL">
+    <span class="name" v-html="stop.nameHtml"></span>
+
+    <span
+      class="date arrival"
+      v-if="stop.position != 'begin'"
+      :class="{
+        delayed: stop.arrivalDelay > 0 && stop.status != 'unconfirmed',
+        preponed: stop.arrivalDelay < 0 && stop.status != 'unconfirmed',
+        'on-time': stop.arrivalDelay == 0 && stop.status == 'confirmed'
+      }"
+    >
+      <span v-if="stop.arrivalDelay != 0 && stop.status != 'unconfirmed'">
+        <s>{{ timestampToString(stop.arrivalScheduled) }}</s>
+        {{ timestampToString(stop.arrivalReal) }}
+        ({{ stop.arrivalDelay > 0 ? '+' : '' }}{{ stop.arrivalDelay }})
+      </span>
+
+      <span v-else>
+        {{ timestampToString(stop.arrivalScheduled) }}
+      </span>
+    </span>
+
+    <span
+      class="date stop"
+      v-if="stop.duration || stop.status == 'stopped'"
+      :class="stop.type.replace(', ', '-')"
+    >
+      {{ stop.duration }} {{ stop.type == '' ? 'pt' : stop.type }}
+    </span>
+
+    <span
+      class="date departure"
+      v-if="stop.position != 'end' && (stop.duration != 0 || stop.status == 'stopped')"
+      :class="{
+        delayed: stop.departureDelay > 0 && stop.status == 'confirmed',
+        preponed: stop.departureDelay < 0 && stop.status == 'confirmed'
+      }"
+    >
+      <span v-if="stop.departureDelay != 0 && stop.status == 'confirmed'">
+        <s>{{ timestampToString(stop.departureScheduled) }}</s>
+        {{ timestampToString(stop.departureReal) }}
+
+        ({{ stop.departureDelay > 0 ? '+' : '' }}{{ stop.departureDelay }})
+      </span>
+
+      <span v-else>
+        {{ timestampToString(stop.departureScheduled) }}
+      </span>
+    </span>
+  </span>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import dateMixin from '../../mixins/dateMixin';
+import { TrainScheduleStop } from './TrainSchedule.vue';
+
+export default defineComponent({
+  mixins: [dateMixin],
+
+  props: {
+    stop: {
+      type: Object as PropType<TrainScheduleStop>,
+      required: true
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+$preponedClr: lime;
+$delayedClr: salmon;
+$dateClr: #525151;
+$stopExchangeClr: #db8e29;
+$stopDefaultClr: #252525;
+$stopNameClr: #22a8d1;
+
+.stop-label {
+  &[data-sbl='true'] {
+    .date {
+      display: none;
+    }
+
+    .name {
+      background: none;
+      color: #aaa;
+      padding: 0;
+    }
+  }
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+
+  .name {
+    background: $stopNameClr;
+    padding: 0.3em 0.5em;
+
+    display: flex;
+    align-items: center;
+
+    &.misc {
+      background: gray;
+    }
+  }
+
+  .date {
+    background: $dateClr;
+    padding: 0.3em 0.5em;
+  }
+
+  .stop {
+    &.ph,
+    &.ph-pm,
+    &.pm {
+      background: $stopExchangeClr;
+    }
+
+    background: $stopDefaultClr;
+  }
+
+  .arrival,
+  .departure {
+    &.delayed {
+      s {
+        color: #999;
+      }
+
+      span {
+        color: $delayedClr;
+      }
+    }
+
+    &.preponed {
+      s {
+        color: #999;
+      }
+
+      span {
+        color: $preponedClr;
+      }
+    }
+  }
+}
+</style>

src/components/TrainsView/TrainModal.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="train-modal" v-if="chosenTrain" @keydown.esc="closeModal">
+    <div class="modal_background" @click="closeModal"></div>
+    <div class="modal_content" ref="content" tabindex="0">
+      <button class="btn exit" @click="closeModal">
+        <img src="/images/icon-exit.svg" alt="close card" />
+      </button>
+
+      <TrainInfo :train="chosenTrain" :extended="false" ref="trainInfo" />
+      <TrainSchedule :train="chosenTrain" tabindex="0" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import modalTrainMixin from '../../mixins/modalTrainMixin';
+import TrainInfo from './TrainInfo.vue';
+import TrainSchedule from './TrainSchedule.vue';
+
+export default defineComponent({
+  components: { TrainInfo, TrainSchedule },
+  mixins: [modalTrainMixin],
+
+  activated() {
+    const contentEl = this.$refs['content'] as HTMLElement;
+
+    this.$nextTick(() => {
+      contentEl.focus();
+    });
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+@import '../../styles/card.scss';
+
+.top-info-bar-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all 150ms ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: translate(-50%, -50%) scale(0.8);
+    opacity: 0;
+  }
+}
+
+.exit {
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  margin: 0.5em 1em;
+
+  padding: 0.25em;
+
+  z-index: 201;
+
+  img {
+    width: 1.5rem;
+    vertical-align: middle;
+  }
+}
+
+.train-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+
+  color: white;
+  z-index: 200;
+
+  display: flex;
+  justify-content: center;
+
+  text-align: left;
+}
+
+.modal_background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  cursor: pointer;
+
+  background-color: rgba(0, 0, 0, 0.55);
+}
+
+.modal_content {
+  position: relative;
+  overflow-y: scroll;
+
+  margin-top: 1em;
+
+  width: 95vw;
+  max-height: 96vh;
+
+  background-color: #1a1a1a;
+  box-shadow: 0 0 15px 10px #0e0e0e;
+}
+
+@include midScreen {
+  .exit {
+    margin: 0.5em;
+
+    img {
+      width: 1.75rem;
+    }
+  }
+}
+
+@include smallScreen {
+  .modal_content {
+    max-height: 85vh;
+  }
+}
+</style>

src/components/TrainsView/TrainSchedule.vue

@@ -2,83 +2,139 @@
   <div class="train-schedule" @click="toggleShowState">
     <StockList :trainStockList="train.stockList" />
 
-    <!-- <div class="train-stock"> -->
-    <!-- <ul>
-        <li v-for="(stockName, i) in train.stockList" :key="i">
-          <p>{{ stockName.split(':')[0].split('_').splice(0, 2).join(' ') }} {{ stockName.split(':')[1] }}</p>
-          <TrainThumbnail :name="stockName" /> 
-        </li>
-      </ul> -->
-    <!-- </div> -->
-
     <div class="schedule-wrapper" v-if="train.timetableData">
-      <ul class="stop_list">
-        <li
-          v-for="(stop, i) in train.timetableData.followingStops"
+      <div class="stops">
+        <div
+          v-for="(stop, i) in scheduleStops"
           :key="i"
           class="stop"
-          :class="addClasses(stop, i)"
+          :data-status="stop.status"
+          :data-position="stop.position"
+          :data-delayed="stop.departureDelay > 0"
+          :data-stop-type="stop.type"
+          :data-minor-stop-active="stop.isActive"
+          :data-last-confirmed="stop.isLastConfirmed"
+          :data-track-count="stop.arrivalTrackCount ?? stop.departureTrackCount"
         >
           <span class="stop_info">
-            <div class="indicator"></div>
-
-            <div class="progress-bar"></div>
-
-            <div class="stop-bar"></div>
-
-            <span class="distance" v-if="stop.stopDistance">
-              {{ Math.floor(stop.stopDistance) }}
+            <span class="distance">
+              {{ stop.distance.toFixed(1) }}
             </span>
 
-            <span class="stop-name" v-html="stop.stopName"> </span>
+            <div class="progress">
+              <div class="node"></div>
+              <div class="line line_stop" v-if="stop.status == 'stopped'"></div>
+            </div>
 
-            <StopDate :stop="stop" />
+            <StopLabel :stop="stop" />
           </span>
 
-          <div class="stop_line" v-if="i < train.timetableData!.followingStops.length - 1">
-            <div class="progress-bar"></div>
-
-            <div v-if="stop.comments" style="color: salmon">
-              <b>{{ stop.stopNameRAW }} </b>: <span v-html="stop.comments"></span>
+          <div class="stop_line" v-if="i < scheduleStops.length - 1">
+            <!-- Grid placeholder -->
+            <div class="line-speed">
+              <div>{{ stop.departureSpeed }}</div>
+              <div>{{ stop.arrivalSpeed }}</div>
             </div>
 
-            <span
-              v-if="
-                stop.departureLine == train.timetableData!.followingStops[i + 1].arrivalLine &&
-                !/sbl/gi.test(stop.departureLine!)
-              "
-            >
-              {{ stop.departureLine }}
-            </span>
+            <div class="progress">
+              <div class="line line_connection"></div>
+            </div>
 
-            <span v-else-if="!/sbl/gi.test(stop.departureLine!)">
-              {{ stop.departureLine }} /
-              {{ train.timetableData!.followingStops[i + 1].arrivalLine }}
-            </span>
-          </div>
+            <div class="bottom-line-info">
+              <!-- <div>
+                {{ stop.sceneryName }}
+              </div> -->
 
-          <div class="stop_line" v-else>
-            <div v-if="stop.comments" style="color: salmon">
-              <b>{{ stop.stopNameRAW }} </b>: <span v-html="stop.comments"></span>
+              <div class="info-comments" v-if="stop.comments" style="color: salmon">
+                <img src="/images/icon-warning.svg" alt="icon-warning" width="20" />
+                <b v-html="stop.comments"></b>
+              </div>
+
+              <!-- Routes  -->
+              <span
+                v-if="
+                  stop.departureLine == train.timetableData!.followingStops[i + 1].arrivalLine &&
+                  !/sbl/gi.test(stop.departureLine!)
+                "
+              >
+                {{ stop.departureLine }}
+              </span>
+
+              <span v-else-if="!/sbl/gi.test(stop.departureLine!)">
+                <div>{{ stop.departureLine }}</div>
+                <div
+                  class="scenery-change-name"
+                  v-if="
+                    i < scheduleStops.length - 1 &&
+                    stop.sceneryName != scheduleStops[i + 1].sceneryName
+                  "
+                >
+                  {{ scheduleStops[i + 1].sceneryName }}
+                </div>
+                <div>
+                  {{ train.timetableData!.followingStops[i + 1].arrivalLine }}
+                </div>
+              </span>
+
+              <!-- || {{ stop.departureSpeed || '---' }} || {{ stop.arrivalSpeed || '---' }} -->
             </div>
           </div>
-        </li>
-      </ul>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
 import Train from '../../scripts/interfaces/Train';
-import { useMainStore } from '../../store/mainStore';
-import StopDate from '../Global/StopDate.vue';
+import StopLabel from './StopLabel.vue';
 import StockList from '../Global/StockList.vue';
-import { TrainStop } from '../../store/typings';
+import { useMainStore } from '../../store/mainStore';
+import { useApiStore } from '../../store/apiStore';
+
+export interface TrainScheduleStop {
+  nameHtml: string;
+  nameRaw: string;
+
+  status: 'confirmed' | 'unconfirmed' | 'stopped';
+  type: string;
+  position: 'begin' | 'end' | 'en-route';
+
+  arrivalScheduled: number;
+  arrivalReal: number;
+
+  departureScheduled: number;
+  departureReal: number;
+
+  departureDelay: number;
+  arrivalDelay: number;
+
+  duration: number | null;
+
+  isActive: boolean;
+  isLastConfirmed: boolean;
+  isSBL: boolean;
+
+  sceneryName: string | null;
+  sceneryHash: string;
+  distance: number;
+
+  departureLine: string | null;
+  arrivalLine: string | null;
+
+  arrivalSpeed: number | null;
+  departureSpeed: number | null;
+
+  arrivalTrackCount: number | null;
+  departureTrackCount: number | null;
+
+  comments: string | null;
+}
 
 export default defineComponent({
-  components: { StopDate, StockList },
+  components: { StopLabel, StockList },
   props: {
     train: {
       type: Object as PropType<Train>,
@@ -90,62 +146,151 @@ export default defineComponent({
 
   emits: ['click'],
 
-  setup(props) {
+  data() {
     return {
       store: useMainStore(),
-
-      lastConfirmed: computed(() => {
-        return props.train.timetableData!.followingStops.findIndex(
-          (stop, i, stops) => stop.confirmed && !stops[i + 1]?.confirmed && !stops[i + 1]?.stopped
-        );
-      }),
-      activeMinorStops: computed(() => {
-        const lastMajorConfirmed = props.train.timetableData!.followingStops.findIndex(
-          (stop, i, stops) => stop.confirmed && !stops[i + 1]?.confirmed
-        );
-
-        const activeMinorStopList: number[] = [];
-        if (lastMajorConfirmed + 1 >= props.train.timetableData!.followingStops.length)
-          return activeMinorStopList;
-
-        for (
-          let i = lastMajorConfirmed + 1;
-          i < props.train.timetableData!.followingStops.length;
-          i++
-        ) {
-          if (/po\.|sbl/gi.test(props.train.timetableData!.followingStops[i].stopNameRAW))
-            activeMinorStopList.push(i);
-          else break;
-        }
-
-        return activeMinorStopList;
-      })
+      apiStore: useApiStore()
     };
   },
 
+  computed: {
+    scheduleStops(): TrainScheduleStop[] {
+      let currentSceneryIndex = 0;
+      let lastTrackCount = 2;
+
+      return (
+        this.train.timetableData?.followingStops.map((stop, i, arr) => {
+          if (
+            i > 0 &&
+            stop.arrivalLine &&
+            stop.arrivalLine != arr[i - 1].departureLine &&
+            !/sbl/gi.test(stop.arrivalLine)
+          )
+            currentSceneryIndex++;
+
+          const sceneryInfo = this.apiStore.sceneryData.find(
+            (sd) =>
+              sd.name.toLocaleLowerCase() ==
+              this.timetableSceneryNames[currentSceneryIndex].toLocaleLowerCase()
+          );
+
+          const nextSceneryInfo = this.apiStore.sceneryData.find(
+            (sd) =>
+              sd.name.toLocaleLowerCase() ==
+              this.timetableSceneryNames[currentSceneryIndex + 1]?.toLocaleLowerCase()
+          );
+
+          const arrivalLineInfo = nextSceneryInfo?.routesInfo.find(
+            (r) => r.routeName == arr[i + 1]?.arrivalLine
+          );
+
+          const departureLineInfo = sceneryInfo?.routesInfo.find(
+            (r) => r.routeName == stop.departureLine
+          );
+
+          // let nextOuterLineName = '';
+          // for(let j = i; i < arr.length - 2; i++) {
+          //   if(arr[j].departureLine && arr[j].departureLine != arr[j+1].arrivalLine) {
+          //     nextOuterLineName = arr[j].departureLine!;
+          //     break
+          //   }
+          // }
+
+          lastTrackCount = departureLineInfo?.routeTracks ?? lastTrackCount;
+
+          return {
+            nameHtml: stop.stopName,
+            nameRaw: stop.stopNameRAW,
+
+            arrivalScheduled: stop.arrivalTimestamp,
+            arrivalReal: stop.arrivalRealTimestamp,
+
+            departureScheduled: stop.departureTimestamp,
+            departureReal: stop.departureRealTimestamp,
+
+            departureDelay: stop.departureDelay,
+            arrivalDelay: stop.arrivalDelay,
+
+            duration: stop.stopTime,
+
+            comments: stop.comments ?? null,
+
+            arrivalLine: stop.arrivalLine,
+            departureLine: stop.departureLine,
+
+            arrivalSpeed: arrivalLineInfo?.routeSpeed ?? null,
+            departureSpeed: departureLineInfo?.routeSpeed ?? null,
+
+            arrivalTrackCount: arrivalLineInfo?.routeTracks ?? null,
+            departureTrackCount: departureLineInfo?.routeTracks ?? lastTrackCount,
+
+            type: stop.stopType,
+            distance: stop.stopDistance,
+            isActive: this.activeMinorStops.includes(i),
+            isLastConfirmed: this.lastConfirmed === i && !stop.terminatesHere,
+            isSBL: /sbl/gi.test(stop.stopName),
+            position: stop.beginsHere ? 'begin' : stop.terminatesHere ? 'end' : 'en-route',
+            sceneryHash: '',
+            sceneryName: this.timetableSceneryNames[currentSceneryIndex],
+            status: stop.confirmed ? 'confirmed' : stop.stopped ? 'stopped' : 'unconfirmed'
+          };
+        }) ?? []
+      );
+    },
+
+    lastConfirmed() {
+      return this.train.timetableData?.followingStops.findIndex(
+        (stop, i, stops) => stop.confirmed && !stops[i + 1]?.confirmed && !stops[i + 1]?.stopped
+      );
+    },
+
+    activeMinorStops() {
+      if (!this.train.timetableData) return [];
+
+      const lastMajorConfirmed = this.train.timetableData.followingStops.findIndex(
+        (stop, i, stops) => stop.confirmed && !stops[i + 1]?.confirmed
+      );
+
+      const activeMinorStopList: number[] = [];
+      if (lastMajorConfirmed + 1 >= this.train.timetableData.followingStops.length)
+        return activeMinorStopList;
+
+      for (
+        let i = lastMajorConfirmed + 1;
+        i < this.train.timetableData!.followingStops.length;
+        i++
+      ) {
+        if (/po\.|sbl/gi.test(this.train.timetableData!.followingStops[i].stopNameRAW))
+          activeMinorStopList.push(i);
+        else break;
+      }
+
+      return activeMinorStopList;
+    },
+
+    timetableSceneryNames() {
+      if (!this.train.timetableData?.sceneries) return [];
+
+      return this.train.timetableData?.sceneries
+        .map(
+          (sceneryHash) =>
+            this.store.onlineSceneryList.find((st) => st.hash === sceneryHash)?.name ??
+            this.apiStore.sceneryData.find((sd) => sd.hash === sceneryHash)?.name ??
+            sceneryHash
+        )
+        .reverse();
+    },
+
+    timetableOuterRoutes() {
+      // for (let i = 0; i < this.scheduleStops.length; i++) {}
+
+      return [];
+    }
+  },
+
   methods: {
     toggleShowState() {
       this.$emit('click');
-    },
-
-    addClasses(stop: TrainStop, index: number) {
-      return {
-        confirmed: stop.confirmed,
-        stopped: stop.stopped,
-        begin: stop.beginsHere,
-        end: stop.terminatesHere,
-        delayed: stop.departureDelay > 0,
-        sbl: /sbl/gi.test(stop.stopName),
-        [stop.stopType.replaceAll(', ', '-')]:
-          stop.stopType.match(new RegExp('ph|pm|pt')) && !stop.confirmed && !stop.beginsHere,
-        'minor-stop-active': this.activeMinorStops.includes(index),
-        'last-confirmed': index == this.lastConfirmed && !stop.terminatesHere
-      };
-    },
-
-    onImageError(e: Event) {
-      const imageEl = e.target as HTMLImageElement;
-      imageEl.src = '/images/icon-unknown.png';
     }
   }
 });
@@ -155,17 +300,16 @@ export default defineComponent({
 @import '../../styles/responsive.scss';
 
 $barClr: #b1b1b1;
-$confirmedClr: #18d818;
+$confirmedClr: #4ae24a;
 $stoppedClr: #f55f31;
 $haltClr: #f8bb36;
-$stopNameClr: #22a8d1;
 
 @keyframes blink {
   from {
-    background-color: $barClr;
+    border-color: $barClr;
   }
   to {
-    background-color: $confirmedClr;
+    border-color: $confirmedClr;
   }
 }
 
@@ -181,216 +325,184 @@ $stopNameClr: #22a8d1;
   margin-top: 1em;
 }
 
-.progress-bar {
-  position: absolute;
-  z-index: 10;
-
-  top: -1px;
-  left: -17px;
-
-  height: 100%;
-  width: 3px;
-
-  background-color: $barClr;
-}
-
-.stop-name {
-  background: $stopNameClr;
-  padding: 0.3em 0.5em;
-
-  display: flex;
-  align-items: center;
-
-  &.misc {
-    background: gray;
-  }
-}
-
-.stop-comment {
-  background: forestgreen;
-  padding: 0.3em 0.5em;
-
-  max-width: 250px;
-  overflow: hidden;
-  white-space: nowrap;
-
-  width: 2em;
-
-  cursor: pointer;
-
-  &:hover {
-    text-overflow: ellipsis;
-    width: 100%;
-  }
-
-  img {
-    width: 1em;
-  }
-
-  span {
-    font-size: 0.8em;
-  }
-}
-
-ul.stop_list {
-  margin-left: 2.5em;
-}
-
-ul.stop_list > li.stop {
-  position: relative;
-
+.stops {
   display: flex;
   flex-direction: column;
+  overflow-y: hidden;
+  gap: 0.25em;
 
-  padding: 0 0.5em;
+  padding: 0.25em 0;
+}
 
-  &.sbl {
-    .stop-date {
-      display: none;
-    }
-
-    .stop-name {
-      background: none;
-      color: #aaa;
-      padding: 0;
+.stop {
+  // Begin stop
+  &[data-position='begin'] {
+    .node {
+      border-color: lightgreen;
     }
   }
 
-  &[class*='ph'] > .stop_info > .indicator {
-    border-color: $stopNameClr;
+  // End stop
+  &[data-position='end'] {
+    .node {
+      border-color: salmon;
+    }
   }
 
-  &[class*='pt'] > .stop_info > .indicator {
+  // Stop types
+  &[data-stop-type*='pt'] .node {
     border-color: #818181;
   }
 
-  &.begin {
-    .stop_info > .indicator {
-      border-color: lightgreen;
-    }
-
-    .stop_info > .progress-bar {
-      background: lightgreen;
-    }
+  &[data-stop-type*='ph'] .node {
+    border-color: $haltClr;
   }
 
-  &.end {
-    .stop_info > .indicator {
-      border-color: salmon;
-    }
-
-    .stop_info > .progress-bar {
-      background: salmon;
-    }
-  }
-
-  &.minor-stop-active {
-    .stop_info > .progress-bar {
-      animation: 0.5s ease-in-out alternate infinite blink;
-    }
-
-    .stop_line > .progress-bar {
+  &[data-minor-stop-active='true'] {
+    .progress > .line {
       animation: 0.5s ease-in-out alternate infinite blink;
     }
   }
 
-  &.last-confirmed {
-    .stop_line > .progress-bar {
+  // Last confirmed outpost / checkpoint
+  &[data-last-confirmed='true'] {
+    .progress > .line_connection {
       animation: 0.5s ease-in-out alternate infinite blink;
     }
   }
 
-  &.confirmed {
-    .stop_info {
-      > .progress-bar {
-        background-color: $confirmedClr;
-      }
-
-      > .indicator {
-        border-color: $confirmedClr;
-      }
+  // Confirmed status
+  &[data-status='confirmed'] {
+    .progress > .node {
+      border-color: $confirmedClr;
     }
-
-    .stop_line > .progress-bar {
-      background-color: $confirmedClr;
+    .progress > .line {
+      border-left: 2px solid $confirmedClr;
+      border-right: 2px solid $confirmedClr;
     }
   }
 
-  &.stopped {
-    .stop_info {
-      > .indicator {
-        border-color: $stoppedClr;
-      }
-
-      > .stop-bar {
-        background: $stoppedClr;
-      }
+  // Stopped status
+  &[data-status='stopped'] {
+    .progress > .node {
+      border-color: $stoppedClr;
     }
   }
 
-  .stop_line {
-    font-size: 0.8em;
-    color: #ccc;
-
-    padding: 0.35em 0;
-
-    position: relative;
-
-    .line-segment {
-      color: $barClr;
-      font-weight: 500;
+  &[data-track-count='2'] {
+    .progress > .line {
+      width: 6px;
     }
   }
+}
 
-  .stop_info {
-    display: flex;
+.stop_info,
+.stop_line {
+  display: grid;
+  grid-template-columns: 30px 40px auto 1fr;
+}
 
-    position: relative;
-    text-align: center;
+.line-speed {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: gold;
+  gap: 5px;
+}
 
-    flex-wrap: wrap;
-  }
+.stop_info {
+  position: relative;
+  text-align: center;
+}
 
-  .stop-bar {
+.stop_line {
+  font-size: 0.8em;
+  color: #ccc;
+  margin-top: 0.25em;
+}
+
+.distance {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #d6d6d6;
+  font-size: 0.75em;
+}
+
+.progress {
+  position: relative;
+
+  & > .node {
     position: absolute;
-    top: 0;
-    left: -17px;
-
-    z-index: 10;
-
-    width: 3px;
-    height: 100%;
-  }
-
-  .distance {
-    position: absolute;
-
     top: 50%;
-    transform: translate(-100%, -50%);
-
-    margin-left: -1.75rem;
-
-    font-size: 0.75em;
-    color: #d6d6d6;
-  }
-
-  .indicator {
-    position: absolute;
-    z-index: 11;
-
-    top: 50%;
-    left: -1rem;
-
-    transform: translate(-47%, -50%);
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 15;
 
     text-align: right;
 
     width: 15px;
     height: 15px;
 
-    background: var(--clr-secondary);
-    border: 3px solid $barClr;
+    background-color: var(--clr-secondary);
+    border: 4px solid $barClr;
     border-radius: 100%;
   }
+
+  & > .line {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, 0);
+    z-index: 10;
+
+    height: 100%;
+
+    // background-color: $barClr;
+    border-left: 2px solid $barClr;
+    border-right: 2px solid $barClr;
+
+    &.line_connection {
+      top: -1em;
+      height: calc(100% + 2em);
+    }
+
+    &.line_stop {
+      border-color: $stoppedClr;
+      z-index: 11;
+    }
+  }
+}
+
+.info-comments {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+
+  margin: 0.25em 0;
+
+  img {
+    height: 1.2em;
+  }
+}
+
+.bottom-line-info {
+  .scenery-change-name {
+    position: relative;
+    margin: 0.25em 0;
+
+    &::before {
+      content: '';
+      position: absolute;
+      height: 2px;
+      width: 30px;
+      background-color: #aaa;
+
+      top: 50%;
+      right: calc(100% + 5px);
+      transform: translate(0, -50%);
+    }
+  }
 }
 </style>

src/components/TrainsView/newFile.ts

@@ -0,0 +1,14 @@
+import { PropType, defineComponent } from 'vue';
+import dateMixin from '../../mixins/dateMixin';
+import { TrainScheduleStop } from './TrainSchedule.vue';
+
+export default defineComponent({
+  mixins: [dateMixin],
+
+  props: {
+    stop: {
+      type: Object as PropType<TrainScheduleStop>,
+      required: true
+    }
+  }
+});