From 3a104556f7fcbe599331b27880998c06f7704554 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 12 Jun 2021 20:14:02 +0200
Subject: [PATCH] =?UTF-8?q?Dodano=20widok=20ca=C5=82ego=20sk=C5=82adu=20pr?=
 =?UTF-8?q?zy=20rozwini=C4=99ciu=20SRJP?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TrainsView/TrainSchedule.vue |  4 ++
 src/components/TrainsView/TrainTable.vue    | 74 ++++++++++++---------
 2 files changed, 47 insertions(+), 31 deletions(-)

diff --git a/src/components/TrainsView/TrainSchedule.vue b/src/components/TrainsView/TrainSchedule.vue
index df8388f..3ea4ea7 100644
--- a/src/components/TrainsView/TrainSchedule.vue
+++ b/src/components/TrainsView/TrainSchedule.vue
@@ -119,6 +119,10 @@ export default class TrainSchedule extends Vue {
   click() {
     this.$emit("click");
   }
+
+  mounted() {
+    console.log("mounted");
+  }
 }
 </script>
 
diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue
index 14b8e13..c30456c 100644
--- a/src/components/TrainsView/TrainTable.vue
+++ b/src/components/TrainsView/TrainTable.vue
@@ -46,13 +46,7 @@
             </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" />
+              <img :src="train.locoURL" @error="onImageError" />
             </span>
           </span>
 
@@ -175,19 +169,20 @@
                   {{ train.driverName }}
                 </a>
               </span>
+              &bull;
               <span class="driver-type">
                 {{ train.locoType }}
               </span>
+
+              <!-- <div>{{ train.cars.length }} wagonów</div> -->
             </div>
 
             <span class="driver-loco">
               <img
-                v-if="!missingLocoImages.includes(train.locoURL)"
+                class="train-image"
                 :src="train.locoURL"
                 @error="onImageError"
               />
-
-              <img v-else :src="defaultLocoImage" alt="unknown-train" />
             </span>
           </span>
 
@@ -238,20 +233,37 @@
           </span>
         </div>
 
-        <TrainSchedule
-          v-if="train.timetableData"
-          :followingStops="train.timetableData.followingStops"
-          :currentStationName="train.currentStationName"
-          @click="changeScheduleShowState(train.timetableData.timetableId)"
-          v-show="showedSchedule == train.timetableData.timetableId"
-        />
+        <div
+          class="train_extended-info"
+          v-if="
+            train.timetableData &&
+            showedSchedule == train.timetableData.timetableId
+          "
+        >
+          <div class="train_cars">
+            <span v-for="(car, i) in train.cars" :key="i">
+              <img
+                class="car-image"
+                :src="`https://rj.td2.info.pl/dist/img/thumbnails/${car}.png`"
+                alt="image-car"
+                @error="onImageError"
+              />
+            </span>
+          </div>
+
+          <TrainSchedule
+            :followingStops="train.timetableData.followingStops"
+            :currentStationName="train.currentStationName"
+            @click="changeScheduleShowState(train.timetableData.timetableId)"
+          />
+        </div>
       </li>
     </ul>
   </div>
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Emit, Watch } from "vue-property-decorator";
+import { Vue, Component, Prop, Watch } from "vue-property-decorator";
 
 import Train from "@/scripts/interfaces/Train";
 import TrainStop from "@/scripts/interfaces/TrainStop";
@@ -269,8 +281,6 @@ export default class TrainTable extends Vue {
 
   showedSchedule = 0;
 
-  missingLocoImages: string[] = [];
-
   defaultLocoImage = require("@/assets/unknown.png");
 
   ascSVG = require("@/assets/icon-arrow-asc.svg");
@@ -321,7 +331,8 @@ export default class TrainTable extends Vue {
 
   onImageError(e: Event) {
     const imageEl = e.target as HTMLImageElement;
-    this.missingLocoImages.push(imageEl.src);
+
+    imageEl.src = this.defaultLocoImage;
   }
 
   generateStopList(stops: any): string | undefined {
@@ -368,6 +379,10 @@ export default class TrainTable extends Vue {
   background: var(--clr-bg);
 }
 
+img.train-image {
+  width: 12em;
+}
+
 .train {
   &-list {
     @include smallScreen() {
@@ -383,6 +398,13 @@ export default class TrainTable extends Vue {
 
     cursor: pointer;
   }
+
+  &_cars {
+    display: flex;
+    align-items: center;
+
+    overflow: auto;
+  }
 }
 
 .wrapper {
@@ -460,19 +482,9 @@ export default class TrainTable extends Vue {
     font-weight: bold;
   }
 
-  &-type {
-    color: #bbb;
-    margin-left: 0.5em;
-  }
-
   &-loco {
     width: 100%;
     text-align: center;
-
-    & img {
-      width: 200px;
-      max-width: 200px;
-    }
   }
 }