sekcje: refactor plików

2026-05-03 11:45:34 +00:00 · 2023-02-13 15:07:13 +01:00
parent 25367163f9
commit 62886dd5bf
9 changed files with 39 additions and 39 deletions
@@ -0,0 +1,293 @@
+<template>
+  <section class="inputs-section">
+    <div class="input_container">
+      <h2 class="input_header">WYBIERZ POJAZDY / WAGONY</h2>
+
+      <div class="input_list type">
+        <div class="vehicle-types locos">
+          <button
+            v-for="locoType in locomotiveTypeList"
+            class="btn btn--choice"
+            :data-selected="locoType.id == store.chosenLocoPower"
+            @click="selectLocoType(locoType.id)"
+          >
+            {{ locoType.value }}
+          </button>
+        </div>
+
+        <select
+          id="locomotives-list"
+          v-model="store.chosenLoco"
+          @focus="previewVehicleByType('loco')"
+          @change="previewVehicleByType('loco')"
+          @keydown.enter.prevent="addOrSwitchVehicle"
+          @keydown.backspace="removeVehicle"
+        >
+          <option :value="null" disabled>Wybierz pojazd trakcyjny</option>
+          <option v-for="loco in locoOptions" :value="loco" :key="loco.type">
+            {{ loco.type }}
+          </option>
+        </select>
+      </div>
+
+      <div class="input_list type">
+        <div class="vehicle-types carwagons">
+          <button
+            v-for="carType in carTypeList"
+            class="btn btn--choice"
+            :data-selected="carType.id == store.chosenCarUseType"
+            @click="selectCarWagonType(carType.id)"
+          >
+            {{ carType.value }}
+          </button>
+        </div>
+
+        <select
+          id="carwagons-list"
+          v-model="store.chosenCar"
+          @focus="previewVehicleByType('car')"
+          @change="previewVehicleByType('car')"
+          @keydown.enter.prevent="addOrSwitchVehicle"
+          @keydown.backspace="removeVehicle"
+        >
+          <option :value="null" disabled>Wybierz wagon</option>
+
+          <option v-for="car in carOptions" :value="car" :key="car.type">
+            {{ car.type }}
+          </option>
+        </select>
+      </div>
+
+      <div class="input_list cargo">
+        <label for="cargo-select">Ładunek (tylko wybrane towarowe)</label>
+        <select
+          id="cargo-select"
+          :disabled="
+            (store.chosenCar && !store.chosenCar.loadable) ||
+            (store.chosenCar && store.chosenCar.useType == 'car-passenger') ||
+            !store.chosenCar
+          "
+          data-select="cargo"
+          data-ignore-outside="1"
+          v-model="store.chosenCargo"
+          @focus="previewVehicleByType('cargo')"
+          @change="previewVehicleByType('cargo')"
+          @keydown.enter.prevent="addOrSwitchVehicle"
+          @keydown.backspace="removeVehicle"
+        >
+          <option :value="null" v-if="!store.chosenCar || !store.chosenCar.loadable">brak dostępnych ładunków</option>
+          <option :value="null" v-else>próżny</option>
+
+          <option v-for="cargo in store.chosenCar?.cargoList" :value="cargo" :key="cargo.id">
+            {{ cargo.id }}
+          </option>
+        </select>
+      </div>
+
+      <div class="input_actions">
+        <button class="btn" @click="addVehicle(store.chosenVehicle, store.chosenCargo)">DODAJ NOWY</button>
+        <button
+          class="btn"
+          @click="switchVehicles"
+          :disabled="store.chosenStockListIndex == -1"
+          :data-disabled="store.chosenStockListIndex == -1"
+        >
+          ZAMIEŃ ZA
+          <b class="text--accent">
+            {{ store.chosenStockListIndex == -1 ? '' : `${store.chosenStockListIndex + 1}.` }}
+          </b>
+        </button>
+
+        <button class="btn" @click="store.isRealStockListCardOpen = true"><b>REALNE ZESTAWIENIA</b></button>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import { IStock } from '../../types';
+import imageMixin from '../../mixins/imageMixin';
+import { useStore } from '../../store';
+import { isLocomotive } from '../../utils/vehicleUtils';
+import stockPreviewMixin from '../../mixins/stockPreviewMixin';
+import stockMixin from '../../mixins/stockMixin';
+
+interface ILocoType {
+  id: string;
+  value: string;
+  desc: string;
+}
+
+export default defineComponent({
+  mixins: [imageMixin, stockPreviewMixin, stockMixin],
+
+  data: () => ({
+    locomotiveTypeList: [
+      {
+        id: 'loco-e',
+        value: 'ELEKTR',
+        desc: 'ELEKTRYCZNE',
+      },
+      {
+        id: 'loco-s',
+        value: 'SPAL',
+        desc: 'SPALINOWE',
+      },
+      {
+        id: 'loco-ezt',
+        value: 'EZT',
+        desc: 'ELEKTR. ZESPOŁY TRAKCYJNE',
+      },
+      {
+        id: 'loco-szt',
+        value: 'SZT',
+        desc: 'SPAL. ZESPOŁY TRAKCYJNE',
+      },
+    ] as ILocoType[],
+
+    carTypeList: [
+      {
+        id: 'car-passenger',
+        value: 'PAS',
+        desc: 'PASAŻERSKIE',
+      },
+      {
+        id: 'car-cargo',
+        value: 'TOW',
+        desc: 'TOWAROWE',
+      },
+    ],
+  }),
+
+  setup() {
+    const store = useStore();
+
+    return {
+      store,
+    };
+  },
+
+  methods: {
+    prepareSwapVehicles() {
+      this.store.swapVehicles = true;
+    },
+
+    addOrSwitchVehicle() {
+      if (!this.store.chosenVehicle) return;
+
+      if (this.store.chosenStockListIndex == -1) this.addVehicle(this.store.chosenVehicle, this.store.chosenCargo);
+      else this.switchVehicles();
+    },
+
+    removeVehicle() {
+      if (this.store.stockList.length == 0) return;
+
+      const lastStock = this.store.stockList.slice(-1)[0];
+
+      if (lastStock.count > 1) lastStock.count--;
+      else this.store.stockList.splice(-1);
+    },
+
+    switchVehicles() {
+      if (this.store.chosenStockListIndex == -1) return;
+
+      const vehicle = this.store.chosenVehicle;
+
+      if (!vehicle) return;
+
+      const stockObj: IStock = {
+        id: `${Date.now()}`,
+        useType: isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
+        type: vehicle.type,
+        length: vehicle.length,
+        mass: vehicle.mass,
+        maxSpeed: vehicle.maxSpeed,
+        isLoco: isLocomotive(vehicle),
+        cargo:
+          !isLocomotive(vehicle) && vehicle.loadable && this.store.chosenCargo ? this.store.chosenCargo : undefined,
+        count: 1,
+        imgSrc: vehicle.imageSrc,
+        supportersOnly: vehicle.supportersOnly,
+      };
+
+      this.store.stockList[this.store.chosenStockListIndex] = stockObj;
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/global';
+
+.inputs-section {
+  display: flex;
+  justify-content: center;
+
+  grid-row: 2;
+  grid-column: 1;
+}
+
+.input_header {
+  margin-bottom: 1em;
+}
+
+button.btn--choice {
+  font-weight: bold;
+  font-size: 0.9em;
+  padding: 0.15em 0.6em;
+
+  &[data-selected='true'] {
+    background-color: $accentColor;
+    color: black;
+  }
+
+  transition: all 120ms ease;
+}
+
+.input_list {
+  margin: 0.5em 0;
+
+  label {
+    display: block;
+
+    font-weight: bold;
+    color: $accentColor;
+    margin-bottom: 0.3em;
+  }
+
+  select:focus {
+    border-color: $accentColor;
+  }
+}
+
+.input_actions {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5em;
+
+  button:nth-child(3) {
+    grid-column: 1 / 3;
+  }
+}
+
+.vehicle-types {
+  display: flex;
+  gap: 0.25em;
+
+  margin-bottom: 0.5em;
+}
+
+@media screen and (max-width: $breakpointMd) {
+  .inputs-section {
+    justify-content: center;
+    text-align: center;
+  }
+
+  .vehicle-types {
+    justify-content: center;
+  }
+}
+</style>
+
@@ -0,0 +1,31 @@
+<template>
+  <section class="logo-section">
+    <img src="/images/logo.svg" alt="logo pojazdownik" />
+  </section>
+</template>
+
+<script lang="ts">
+export default {
+  setup() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.logo-section {
+  grid-row: 1;
+  grid-column: 1;
+  margin-bottom: 1.5em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+img {
+  max-width: 25em;
+  width: 100%;    
+}
+</style>
+
@@ -0,0 +1,69 @@
+<template>
+  <section class="stock-section">
+    <transition name="tab-change" mode="out-in">
+      <keep-alive>
+        <component :is="chosenSectionComponent" :key="chosenSectionComponent"></component>
+      </keep-alive>
+    </transition>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../../store';
+import StockListTab from '../tabs/StockListTab.vue';
+import StockGeneratorTab from '../tabs/StockGeneratorTab.vue';
+import NumberGeneratorTab from '../tabs/NumberGeneratorTab.vue';
+
+export default defineComponent({
+  setup() {
+    return {
+      store: useStore(),
+    };
+  },
+
+  computed: {
+    chosenSectionComponent() {
+      switch (this.store.stockSectionMode) {
+        case 'stock-list':
+          return StockListTab;
+
+        case 'stock-generator':
+          return StockGeneratorTab;
+
+        case 'number-generator':
+          return NumberGeneratorTab;
+
+        default:
+          return StockListTab;
+      }
+    },
+  },
+});
+</script>
+
+<style lang="scss">
+// Tab change animation
+.tab-change {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: all 100ms ease-in-out;
+  }
+}
+
+// Section styles
+.stock-section {
+  grid-row: 1 / 4;
+  grid-column: 2;
+
+  padding: 0 1px;
+
+  overflow: hidden;
+}
+</style>
+
@@ -0,0 +1,197 @@
+<template>
+  <section class="train-image-section">
+    <div class="train-image__wrapper">
+      <div class="train-image__content">
+        <transition name="img-message-anim">
+          <div class="empty-message" v-if="store.imageLoading && store.chosenVehicle?.imageSrc">
+            ŁADOWANIE OBRAZU...
+          </div>
+        </transition>
+
+        <div class="no-img" v-if="!store.chosenVehicle">PODGLĄD WYBRANEGO POJAZDU</div>
+
+        <img
+          v-if="store.chosenVehicle"
+          :src="`https://spythere.github.io/api/td2/images/${store.chosenVehicle.type}--300px.jpg`"
+          :alt="store.chosenVehicle.type"
+          @load="onImageLoad"
+          @click="onImageClick"
+        />
+
+        <!-- <div class="empty-message" v-if="store.chosenVehicle && !store.chosenVehicle.imageSrc">Ten pojazd nie ma jeszcze podglądu!</div> -->
+      </div>
+
+      <div class="train-image__info" v-if="store.chosenVehicle">
+        <b class="text--accent">{{ store.chosenVehicle.type }}</b> &bull;
+        <b style="color: #ccc">{{
+          vehicleTypes[
+            isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType || 'loco-e'
+          ]
+        }}</b>
+
+        <div style="color: #ccc">
+          <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'
+                ? store.stockData?.usage[store.chosenVehicle.constructionType]
+                : 'Typ konstrukcji: ' + store.chosenVehicle.constructionType
+            }}
+          </div>
+        </div>
+      </div>
+
+      <div class="train-image__info" v-else>Wybierz pojazd lub wagon, aby zobaczyć jego podgląd powyżej</div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { computed, 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,
+      chosenVehicle: computed(() => store.chosenVehicle),
+    };
+  },
+
+  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 },
+    };
+  },
+
+  watch: {
+    chosenVehicle(vehicle: Vehicle, prevVehicle: Vehicle) {
+      if (vehicle && vehicle.type != prevVehicle?.type) {
+        this.store.imageLoading = true;
+      }
+    },
+  },
+
+  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 = `https://spythere.github.io/api/td2/images/${chosenVehicle.type}--800px.jpg`;
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/global.scss';
+
+.train-image-section {
+  grid-row: 3;
+  grid-column: 1;
+
+  margin-top: 2em;
+  height: 22em;
+}
+
+.train-image {
+  &__wrapper {
+    text-align: center;
+  }
+
+  &__content {
+    border: 1px solid white;
+    position: relative;
+    overflow: hidden;
+
+    max-width: 22em;
+    height: 13em;
+    margin: 0 auto;
+
+    &.supporter {
+      border: 1px solid salmon;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+
+      cursor: pointer;
+    }
+
+    .empty-message,
+    .no-img {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+
+      padding: 0.3em 0;
+      width: 100%;
+    }
+
+    .empty-message {
+      background: rgba(#000, 0.75);
+    }
+  }
+}
+
+.train-image__info {
+  margin: 1em 0;
+  font-size: 1.1em;
+  padding: 0 1em;
+
+  b {
+    font-size: 1.1em;
+  }
+
+  div {
+    margin: 0.25em 0;
+  }
+}
+
+// Transition animations
+.img-message-anim {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: opacity 75ms ease-in 100ms;
+  }
+}
+
+@media screen and (max-width: $breakpointMd) {
+  .train-image-section {
+    justify-content: center;
+  }
+}
+</style>
+