Layout

2026-05-03 11:45:34 +00:00 · 2022-07-26 00:31:00 +02:00
parent bea95f9cf3
commit 451a184ccb
9 changed files with 149 additions and 159 deletions
@@ -0,0 +1,169 @@
+<template>
+  <section class="train-image">
+    <div class="train-image__wrapper">
+      <div class="train-image__content">
+        <div class="no-img" v-if="!store.chosenVehicle">PODGLĄD WYBRANEGO POJAZDU</div>
+        <div class="empty-message" v-if="store.imageLoading">ŁADOWANIE OBRAZU...</div>
+        <img
+          v-if="store.chosenVehicle"
+          :src="store.chosenVehicle.imageSrc"
+          :alt="store.chosenVehicle.type"
+          @load="onImageLoad"
+          @click="onImageClick"
+        />
+      </div>
+    </div>
+
+    <div class="image__info" v-if="store.chosenVehicle">
+      <b class="text--accent">{{ store.chosenVehicle.type }} </b>
+
+      <div style="color: #ccc">
+        <b>{{
+          vehicleTypes[
+            isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType || 'loco-e'
+          ]
+        }}</b>
+
+        <div>
+          {{ store.chosenVehicle.length }}m | {{ store.chosenVehicle.mass }}t | {{ store.chosenVehicle.maxSpeed }} km/h
+        </div>
+
+        <div v-if="isLocomotive(store.chosenVehicle)">Typ kabiny: {{ store.chosenVehicle.cabinType }}</div>
+
+        <div v-else>
+          {{
+            store.chosenVehicle.useType == 'car-cargo'
+              ? carUsage[store.chosenVehicle.constructionType]
+              : 'Typ konstrukcji: ' + store.chosenVehicle.constructionType
+          }}
+        </div>
+      </div>
+    </div>
+
+    <div class="image__info" v-else>Wybierz pojazd lub wagon, aby zobaczyć jego podgląd powyżej</div>
+  </section>
+</template>
+
+<script lang="ts">
+import carUsage from '../data/carUsage.json';
+import { defineComponent } from 'vue';
+import { useStore } from '../store';
+import { isLocomotive } from '../utils/vehicleUtils';
+import { ILocomotive, Vehicle } from '../types';
+
+export default defineComponent({
+  setup() {
+    const store = useStore();
+
+    return {
+      store,
+    };
+  },
+
+  data() {
+    return {
+      vehicleTypes: {
+        'loco-e': 'ELEKTROWÓZ',
+        'loco-s': 'SPALINOWÓZ',
+        'loco-ezt': 'EZT',
+        'loco-szt': 'SZT',
+        'car-passenger': 'WAGON PASAŻERSKI',
+        'car-cargo': 'WAGON TOWAROWY',
+      } as { [key: string]: string },
+
+      carUsage: carUsage as { [key: string]: string },
+    };
+  },
+
+  methods: {
+    onImageLoad() {
+      this.store.imageLoading = false;
+    },
+
+    isLocomotive(vehicle: Vehicle): vehicle is ILocomotive {
+      return isLocomotive(vehicle);
+    },
+
+    onImageClick() {
+      const chosenVehicle = this.store.chosenVehicle;
+
+      if (!chosenVehicle) return;
+
+      this.store.vehiclePreviewSrc = chosenVehicle.imageSrc.replace('300', '800');
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.train-image {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+
+  margin-top: 2.5em;
+}
+
+.train-image {
+  &__wrapper {
+    max-width: 380px;
+    width: 22em;
+    height: 13em;
+  }
+
+  &__content {
+    border: 1px solid white;
+    position: relative;
+
+    height: 100%;
+
+    &.supporter {
+      border: 1px solid salmon;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+
+      cursor: pointer;
+    }
+
+    .empty-message,
+    .no-img {
+      position: absolute;
+      left: 0;
+      top: 0;
+
+      display: flex;
+      justify-content: center;
+      align-items: flex-end;
+
+      width: 100%;
+      height: 100%;
+      padding: 0.3em 0;
+    }
+
+    .empty-message {
+      background: rgba(#000, 0.75);
+    }
+  }
+}
+
+.image__info {
+  text-align: center;
+
+  margin: 1em 0;
+
+  font-size: 1.1em;
+
+  b {
+    font-size: 1.1em;
+  }
+
+  div {
+    margin: 0.25em 0;
+  }
+}
+</style>
+