Dodano widok całego składu przy rozwinięciu SRJP

src/components/TrainsView/TrainSchedule.vue

@@ -119,6 +119,10 @@ export default class TrainSchedule extends Vue {
   click() {
     this.$emit("click");
   }
+
+  mounted() {
+    console.log("mounted");
+  }
 }
 </script>
 

src/components/TrainsView/TrainTable.vue

@@ -46,13 +46,7 @@
             </div>
 
             <span class="driver-loco">
-              <img
+              <img :src="train.locoURL" @error="onImageError" />
-                v-if="!missingLocoImages.includes(train.locoURL)"
-                :src="train.locoURL"
-                @error="onImageError"
-              />
-
-              <img v-else :src="defaultLocoImage" alt="unknown-train" />
             </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
+        <div
-          v-if="train.timetableData"
+          class="train_extended-info"
-          :followingStops="train.timetableData.followingStops"
+          v-if="
-          :currentStationName="train.currentStationName"
+            train.timetableData &&
-          @click="changeScheduleShowState(train.timetableData.timetableId)"
+            showedSchedule == train.timetableData.timetableId
-          v-show="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;
-    }
   }
 }