Poprawki do listy pociągów

src/components/TrainsView/TrainStats.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="train-stats">
-    <transition name="stats-anim">
+    <div class="stats_button">
+      <action-button @click.native="toggleStatsOpen">
+        <img :src="statsIcon" :alt="$t('trains.stats')" />
+        {{ $t("trains.stats") }}
+      </action-button>
+    </div>
+
+    <transition name="stats-anim" class="stats_wrapper" tag="div">
       <div class="stats-body" v-if="trainStatsOpen">
         <h2 class="stats-header">
           <img :src="statsIcon" :alt="$t('trains.stats')" />
@@ -74,14 +81,19 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
+import { Component, Vue, Prop, Emit } from "vue-property-decorator";
+import ActionButton from "@/components/Global/ActionButton.vue";
 
 import Train from "@/scripts/interfaces/Train";
 
-@Component
+@Component({ components: { ActionButton } })
 export default class TrainStats extends Vue {
   @Prop() readonly trains!: Train[];
-  @Prop() readonly trainStatsOpen!: boolean;
+  trainStatsOpen = false;
+
+  toggleStatsOpen() {
+    this.trainStatsOpen = !this.trainStatsOpen;
+  }
 
   statsIcon = require("@/assets/icon-stats.svg");
 
@@ -202,19 +214,16 @@ export default class TrainStats extends Vue {
 }
 
 .train-stats {
-  z-index: 10;
-
-  margin-bottom: 0.5em;
-
   position: relative;
   top: 0;
-
+  z-index: 99;
-  outline: none;
 }
 
 .stats {
-  &-btn {
+  &_wrapper {
-    padding: 0.5em;
+    margin-bottom: 0.5em;
+
+    outline: none;
   }
 
   &-header {
@@ -305,22 +314,16 @@ export default class TrainStats extends Vue {
 }
 
 @include smallScreen {
-  .button {
-    font-size: 1.2em;
-  }
-
   .stats-body {
     display: block;
-
     width: 100%;
 
     border-radius: 0 0 1em 1em;
   }
 
-  .btn-wrapper {
+  .stats_button {
     display: flex;
     justify-content: center;
-    margin-top: 1em;
   }
 }
 </style>

src/components/TrainsView/TrainTable.vue

@@ -16,12 +16,103 @@
         class="train-row"
         v-for="(train, i) in computedTrains"
         :key="i"
-        :id="train.driverId + train.trainNo"
+        :ref="train.timetableData ? train.timetableData.timetableId : -1"
       >
-        <!-- :ref="train.timetableData.timetableId" -->
+        <div class="wrapper no-timetable" v-if="!train.timetableData">
-        <span class="wrapper">
+          <span class="info">
-          <span class="info" v-if="train.timetableData">
+            <div class="info-main">
-            <!-- @click="changeScheduleShowState(train.timetableData.timetableId)" -->
+              <div class="info-top">
+                <div class="top-category">
+                  <span>
+                    {{ train.trainNo }} |
+                    <span style="color: gold">
+                      {{ $t("trains.no-timetable") }}
+                    </span>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </span>
+
+          <span class="driver">
+            <div class="driver-info">
+              <span class="driver-name">
+                <a
+                  :href="'https://td2.info.pl/profile/?u=' + train.driverId"
+                  target="_blank"
+                >
+                  {{ train.driverName }}
+                </a>
+              </span>
+              <span class="driver-type">
+                {{ train.locoType }}
+              </span>
+            </div>
+
+            <span class="driver-loco">
+              <img
+                v-if="!missingLocoImages.includes(train.locoURL)"
+                :src="train.locoURL"
+                @error="onImageError"
+              />
+
+              <img v-else :src="defaultLocoImage" alt="unknown-train" />
+            </span>
+          </span>
+
+          <span class="stats">
+            <div class="stats-main">
+              <span class="mass">
+                <img :src="massIcon" alt="icon-mass" />
+                {{ train.mass / 1000 }}t
+              </span>
+
+              <span class="speed">
+                <img :src="speedIcon" alt="icon-speed" />
+                {{ train.speed }} km/h
+              </span>
+
+              <span class="length">
+                <img :src="lengthIcon" alt="icon-length" />
+                {{ train.length }}m
+              </span>
+            </div>
+
+            <div class="stats-position">
+              <span class="station">
+                <div class="stat-icon">
+                  <img :src="sceneryIcon" alt="icon-scenery" />
+                </div>
+                {{ train.currentStationName || "---" }}
+              </span>
+              <span class="track">
+                <div class="stat-icon">
+                  <img :src="routeIcon" alt="icon-scenery" />
+                </div>
+                {{ train.connectedTrack || "---" }}
+              </span>
+              <span class="signal">
+                <div class="stat-icon">
+                  <img :src="signalIcon" alt="icon-scenery" />
+                </div>
+                {{ train.signal || "---" }}
+              </span>
+              <span class="distance">
+                <div class="stat-icon">
+                  <img :src="distanceIcon" alt="icon-scenery" />
+                </div>
+                {{ train.distance || "0" }}m
+              </span>
+            </div>
+          </span>
+        </div>
+
+        <div
+          v-else
+          class="wrapper"
+          @click="changeScheduleShowState(train.timetableData.timetableId)"
+        >
+          <span class="info">
             <div class="info-main">
               <div class="info-top">
                 <div class="top-category">
@@ -154,7 +245,7 @@
               </span>
             </div>
           </span>
-        </span>
+        </div>
 
         <TrainSchedule
           v-if="train.timetableData"
@@ -210,20 +301,23 @@ export default class TrainTable extends Vue {
     return this.timetableDataStatus == DataStatus.Error;
   }
 
-  focusOnTrain(timetableId: number) {
+  changeScheduleShowState(elementId: number) {
-    const currentEl: HTMLElement = this.$refs[timetableId][0];
+    if (elementId < 0) return;
 
-    currentEl.scrollIntoView({
+    this.showedSchedule = this.showedSchedule == elementId ? 0 : elementId;
-      behavior: "smooth",
+
-      block: "nearest",
+    this.$nextTick(() => {
+      const currentEl: HTMLElement = this.$refs[elementId][0];
+
+      console.log(currentEl);
+
+      currentEl.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+      });
     });
   }
 
-  changeScheduleShowState(timetableId: number) {
-    this.showedSchedule = this.showedSchedule === timetableId ? 0 : timetableId;
-    this.$nextTick(() => this.focusOnTrain(timetableId));
-  }
-
   onImageError(e: Event) {
     const imageEl = e.target as HTMLImageElement;
     this.missingLocoImages.push(imageEl.src);
@@ -287,20 +381,16 @@ export default class TrainTable extends Vue {
     background-color: var(--clr-secondary);
 
     cursor: pointer;
+  }
+}
 
-    & > .wrapper {
+.wrapper {
-      display: grid;
+  display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-template-rows: 1fr;
 
-      @include smallScreen() {
+  @include smallScreen() {
-        font-size: 1.3em;
+    font-size: 1.3em;
-      }
-
-      // @include midScreen() {
-      //   grid-template-columns: 1fr;
-      //   grid-template-rows: repeat(3, minmax(0, 1fr));
-      // }
-    }
   }
 }
 
@@ -390,13 +480,10 @@ export default class TrainTable extends Vue {
 .stats {
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
+  justify-content: space-between;
 
   font-size: 0.9em;
 
-  // grid-column: 1 / 3;
-  // grid-column: span 2;
-
   &-main {
     display: flex;
     margin-bottom: 1.5em;

src/lang/en.json

@@ -104,7 +104,8 @@
     "search-no": "Search for train no...",
     "search-driver": "Search for driver...",
     "detailed-timetable": "Detailed timetable for train no. ",
-    "via-title": "Via: "
+    "via-title": "Via: ",
+    "no-timetable": "no current timetable"
   },
   "journal": {
     "title": "SCENERY ACTIVITY JOURNAL",

src/lang/pl.json

@@ -104,7 +104,8 @@
     "search-no": "Szukaj nr pociągu...",
     "search-driver": "Szukaj maszynisty...",
     "detailed-timetable": "Szczegółowy rozkład jazdy pociągu ",
-    "via-title": "Przez: "
+    "via-title": "Przez: ",
+    "no-timetable": "brak rozkładu jazdy"
   },
   "journal": {
     "title": "DZIENNIK AKTYWNOŚCI SCENERII",

src/views/TrainsView.vue

@@ -2,14 +2,7 @@
   <section class="trains-view">
     <div class="wrapper">
       <div class="options-bar">
-        <div class="stats">
+        <TrainStats :trains="trains" :trainStatsOpen="trainStatsOpen" />
-          <action-button @click.native="toggleStats">
-            <img :src="statsIcon" :alt="$t('trains.stats')" />
-            {{ $t("trains.stats") }}
-          </action-button>
-
-          <TrainStats :trains="trains" :trainStatsOpen="trainStatsOpen" />
-        </div>
 
         <TrainOptions
           :queryTrain="queryTrain"
@@ -64,10 +57,6 @@ export default class TrainsView extends Vue {
   searchedTrain: string = "";
   searchedDriver: string = "";
 
-  toggleStats() {
-    this.trainStatsOpen = !this.trainStatsOpen;
-  }
-
   changeSearchedTrain(trainNo: string) {
     this.searchedTrain = trainNo;
   }
@@ -148,17 +137,9 @@ export default class TrainsView extends Vue {
   padding: 0 0.5em;
 }
 
-.options-bar button {
-  margin-bottom: 0.5em;
-}
-
 @include smallScreen {
   .options-bar {
     font-size: 1.25em;
-
-    button {
-      margin: 0 auto;
-    }
   }
 }
 </style>