Dodano możliwość wyboru realnych zestawień

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pojazdownik",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/assets/IC.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.0"
+   width="791.32538"
+   height="340"
+   id="svg2">
+  <defs
+     id="defs4" />
+  <g
+     transform="translate(-6.31e-4,-712.36218)"
+     id="layer1">
+    <g
+       transform="translate(-35.785713,150.35711)"
+       id="g2239">
+      <g
+         transform="translate(0,-50)"
+         id="g2288">
+        <path
+           d="M 242.05316,862.5559 L 409.15371,612.00507 L 827.1117,611.95328 L 769.48955,698.50507 L 497.34525,699.01219 L 391.64564,861.99747 L 657.77165,862.08805 L 599.72093,952.00507 L 329.35483,952.00507 L 242.05316,862.5559 z M 35.786344,861.91508 L 204.55316,612.08342 L 346.18935,612.00507 L 123.4711,951.99662 L 35.786344,861.91508 z "
+           style="fill:rgb(170,170,170)"
+           id="path2290" />
+      </g>
+    </g>
+  </g>
+</svg>

src/components/InputsSection.vue

@@ -1,4 +1,6 @@
 <template>
+  <ready-stock-list />
+
   <section class="inputs">
     <div class="input inputs_loco">
       <div class="input_container">
@@ -40,6 +42,10 @@
           </button> -->
         </div>
 
+        <div>
+          <button class="btn" @click="setReadyStockList(true)"><b>REALNE ZESTAWIENIA</b></button>
+        </div>
+
         <div class="input_checkbox">
           <button @click="onShowSupporterChange" :class="{ checked: this.store.showSupporter }" data-ignore-outside="1">
             Pokaż tylko pojazdy dla supporterów
@@ -117,14 +123,24 @@
 
 <script lang="ts">
 import { ICarWagon, ILocomotive, IStore } from '@/types';
-import { defineComponent, inject } from 'vue';
+import { defineComponent, inject, provide, ref } from 'vue';
+
+import ReadyStockList from '@/components/ReadyStockList.vue';
 
 export default defineComponent({
+  components: {
+    ReadyStockList,
+  },
   setup() {
     const store = inject('Store') as IStore;
 
+    const isReadyStockListOpen = ref(false);
+
+    provide('isReadyStockListOpen', isReadyStockListOpen);
+
     return {
       store,
+      isReadyStockListOpen,
       locoDataList: inject('locoDataList') as ILocomotive[],
       carDataList: inject('carDataList') as ICarWagon[],
       isTrainPassenger: inject('isTrainPassenger') as boolean,
@@ -224,6 +240,10 @@ export default defineComponent({
       this.store.swapVehicles = true;
     },
 
+    setReadyStockList(bool = false) {
+      this.isReadyStockListOpen = bool;
+    },
+
     onShowSupporterChange() {
       this.store.showSupporter = !this.store.showSupporter;
 

src/components/ListSection.vue

@@ -61,6 +61,10 @@
         <button class="btn" @click="openRandomizerCard">LOSUJ SKŁAD</button>
       </div>
 
+      <!-- <b style="font-size: 1.15em; color: gold">
+        REALNE ZESTAWIENIE: <b>{{ store.chosenRealStockName?.toLocaleUpperCase() }}</b>
+      </b> -->
+
       <div class="stock-list_specs">
         Masa: <span class="text--accent">{{ totalMass }}t</span> | Długość:
         <span class="text--accent">{{ totalLength }}m</span>

src/components/ReadyStockList.vue

@@ -0,0 +1,274 @@
+<template>
+  <div class="ready-stock-list" v-if="isOpen">
+    <button class="btn--text exit" @click="exit">POWRÓT</button>
+    <div class="header">
+      <h1>
+        REALNE ZESTAWIENIA
+        <div>by <a href="https://td2.info.pl/profile/?u=17708" target="_blank">Railtrains997</a></div>
+      </h1>
+      <p>
+        {{ isMobile ? 'Przytrzymaj zestawienie' : 'Kliknij na zestawienie prawym przyciskiem myszy' }}, aby zobaczyć je
+        na stronie <i>vagonweb.cz</i>
+      </p>
+
+      <input type="text" v-model="chosenStock" placeholder="Szukaj zestawienia..." />
+    </div>
+
+    <ul v-if="responseStatus == 'loaded'">
+      <li
+        v-for="(v, k) in computedList"
+        :key="k"
+        @contextmenu="openPreview($event, v.type, v.number)"
+        @click="choseStock(v.name, v.type, v.number, v.stockString)"
+      >
+        <img :src="icons[v.type]" alt="" />
+        <b class="text--accent"> {{ v.name }}</b>
+        <div>{{ v.number }}</div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { ICarWagon, ILocomotive, IStore } from '@/types';
+import { defineComponent, inject } from 'vue';
+
+interface List {
+  [key: string]: { stockString: string; type: string; number: string; name: string };
+}
+
+interface Response {
+  [key: string]: string;
+}
+
+export default defineComponent({
+  setup() {
+    return {
+      isOpen: inject('isReadyStockListOpen'),
+      store: inject('Store') as IStore,
+      locoDataList: inject('locoDataList') as ILocomotive[],
+      carDataList: inject('carDataList') as ICarWagon[],
+      isLocomotive: inject('isLocomotive') as (vehicle: ILocomotive | ICarWagon) => vehicle is ILocomotive,
+    };
+  },
+
+  data: () => ({
+    responseStatus: 'loading',
+    chosenStock: '',
+    isMobile: 'ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/) ? true : false,
+
+    list: {} as List,
+
+    icons: {
+      EIC: require('@/assets/EIC.png'),
+      IC: require('@/assets/IC.svg'),
+      TLK: require('@/assets/TLK.png'),
+    } as { [key: string]: string },
+  }),
+
+  computed: {
+    computedList() {
+      if (this.chosenStock == '') return this.list;
+
+      let filtered: List = {};
+
+      for (let key in this.list) {
+        if (key.toLocaleLowerCase().includes(this.chosenStock.toLocaleLowerCase())) filtered[key] = this.list[key];
+      }
+
+      return filtered;
+    },
+  },
+
+  methods: {
+    exit() {
+      this.isOpen = false;
+    },
+
+    openPreview(e: Event, type: string, number: string) {
+      e.preventDefault();
+
+      const url = `https://www.vagonweb.cz/razeni/vlak.php?zeme=PKPIC&kategorie=${type}&cislo=${number.replace(
+        /_/g,
+        '/'
+      )}`;
+
+      window.open(url);
+    },
+
+    choseStock(name: string, type: string, number: string, stockString: string) {
+      const stockArray = stockString.split(';');
+
+      this.store.stockList.length = 0;
+      this.store.chosenCar = null;
+      this.store.chosenCargo = null;
+      this.store.chosenLoco = null;
+
+      this.store.swapVehicles = false;
+
+      this.store.chosenRealStockName = `${type} ${number} ${name}`;
+
+      stockArray.forEach((type, i) => {
+        let vehicle;
+        if (i == 0) vehicle = this.locoDataList.find((loco) => loco.type == stockArray[0]);
+        else vehicle = this.carDataList.find((car) => car.type == type);
+
+        this.addVehicle(vehicle);
+      });
+
+      this.exit();
+    },
+
+    addVehicle(vehicle: ILocomotive | ICarWagon | undefined) {
+      if (!vehicle) return;
+
+      const stockObj = {
+        type: vehicle.type,
+        length: vehicle.length,
+        mass: vehicle.mass,
+        maxSpeed: vehicle.maxSpeed,
+        isLoco: this.isLocomotive(vehicle),
+        cargo: undefined,
+        count: 1,
+        imgSrc: vehicle.imageSrc,
+        useType: this.isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
+        supportersOnly: vehicle.supportersOnly,
+      };
+
+      const previousStock =
+        this.store.stockList.length > 0 ? this.store.stockList[this.store.stockList.length - 1] : null;
+
+      if (previousStock && previousStock.type == vehicle.type) {
+        this.store.stockList[this.store.stockList.length - 1].count++;
+        return;
+      }
+
+      this.store.stockList.push(stockObj);
+    },
+  },
+
+  async mounted() {
+    const response: Response = await (await fetch('https://spythere.github.io/api/readyStock.json')).json();
+
+    if (!response) {
+      this.responseStatus = 'error';
+      return;
+    }
+
+    for (let key in response) {
+      const splittedKey = key.split(' ');
+
+      let name = '';
+      for (let i = 2; i < splittedKey.length; i++) {
+        name += ' ' + splittedKey[i];
+      }
+
+      this.list[key] = {
+        type: splittedKey[0],
+        number: splittedKey[1].replace(/_/g, '/'),
+        name,
+        stockString: response[key],
+      };
+    }
+
+    this.responseStatus = 'loaded';
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.exit {
+  padding: 1em 0;
+  font-size: 1.2em;
+}
+
+input {
+  min-width: 250px;
+
+  &::placeholder {
+    font-size: 0.9em;
+    text-align: center;
+  }
+}
+
+.ready-stock-list {
+  position: fixed;
+  z-index: 101;
+
+  top: 50%;
+  left: 50%;
+
+  transform: translate(-50%, -50%);
+
+  background: #333;
+  border-radius: 1em;
+
+  height: 85vh;
+  max-width: 1000px;
+  width: 90vw;
+
+  padding: 0 1em;
+
+  overflow-y: auto;
+
+  .header {
+    position: sticky;
+    top: 0;
+
+    background: #333;
+    padding-bottom: 1.5em;
+    padding-top: 0.5em;
+
+    text-align: center;
+    font-size: 1.3em;
+
+    h1 {
+      line-height: 0.9em;
+      margin: 0.5em 0;
+
+      div {
+        font-size: 0.65em;
+        color: #ccc;
+      }
+    }
+
+    p {
+      margin: 1em 0;
+      color: #999;
+      font-size: 0.95em;
+    }
+  }
+
+  ul {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1em;
+
+    @media screen and (max-width: 700px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    @media screen and (max-width: 550px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    margin-bottom: 1em;
+  }
+
+  ul li {
+    padding: 0.5em;
+
+    cursor: pointer;
+
+    background: #444;
+
+    img {
+      max-width: 1.5em;
+    }
+
+    &:hover {
+      background: #222;
+    }
+  }
+}
+</style>

src/main.ts

@@ -14,6 +14,7 @@ const clickOutsideDirective: Directive = {
 
         document.addEventListener("click", el.clickOutsideEvent);
     },
+
 }
 
 

src/store.ts

@@ -24,6 +24,7 @@ export const Store: IStore = reactive({
     swapVehicles: false,
 
     chosenStockListIndex: -1,
+    chosenRealStockName: null,
     // locoOptions: [] as ILocomotive[],
     // carOptions: [] as ICarWagon[],
 

src/types.ts

@@ -13,6 +13,7 @@ export interface IStore {
   cargoOptions: any[][];
 
   chosenStockListIndex: number;
+  chosenRealStockName: string | null;
 
   swapVehicles: boolean;
   vehiclePreviewSrc: string;