From ee5b61cb193ff4315c73e02002ab1a7083754896 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 7 Dec 2021 16:02:55 +0100
Subject: [PATCH] =?UTF-8?q?Dodano=20mo=C5=BCliwo=C5=9B=C4=87=20wyboru=20re?=
 =?UTF-8?q?alnych=20zestawie=C5=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                      |   2 +-
 src/assets/EIC.png                | Bin 0 -> 640 bytes
 src/assets/IC.svg                 |  28 +++
 src/assets/TLK.png                | Bin 0 -> 560 bytes
 src/components/InputsSection.vue  |  22 ++-
 src/components/ListSection.vue    |   4 +
 src/components/ReadyStockList.vue | 274 ++++++++++++++++++++++++++++++
 src/main.ts                       |   1 +
 src/store.ts                      |   1 +
 src/types.ts                      |   1 +
 10 files changed, 331 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/EIC.png
 create mode 100644 src/assets/IC.svg
 create mode 100644 src/assets/TLK.png
 create mode 100644 src/components/ReadyStockList.vue

diff --git a/package.json b/package.json
index 443e1fc..09a94e7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pojazdownik",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/src/assets/EIC.png b/src/assets/EIC.png
new file mode 100644
index 0000000000000000000000000000000000000000..22131f6749a83366fbe1e738e87cc659c8e9e709
GIT binary patch
literal 640
zcmV-`0)PF9P)<h;3K|Lk000e1NJLTq001KZ000mO1^@s6oHxc=0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!B1uF+RCwByl{-jWK@^7X>iUeYE4sde
zF<K~Mp%4TcwGkC8?1VtHvr8+2fdo>lpePoCprDXwR#3a7vC&QhADBi2MbyF~K}_5=
zVO{?Nzc7q*AA8_~<;=|8|DN;Dxq(O|Vi_V6w1YPA1{8s8kPEUb???gfz&`j0dO@no
z{y$(MXjqWk0L8oll^~x&(ky@RA6$bq(Bfl%A^4PHSO|d%5G5H&3Xxa@Wj=*G#hzZ7
z0B8j-SPglg4Zeai!vo^r79^CMh+bk<)VKr7;0iowYhr;_T}&xx1_huTR0A>9pvxN#
zfjs49Hb5=?rp7cFbt{c7rjACdrfH=bA6(9lNw2ls1?V;ybiu1nsu-I$r=Bf}Qdk$;
z5Lfn!IkyZIliPF5HmUI)oFpTrh-UrEKQ5%eIm5XhY)y@pp9Ou|^_OQ&_;K))m@GP9
z+Em5L6cAIa@cOGEmD~m2wEO|sNk)uZ<p#DR!P#;IVuoS$lWpqJ@-v``=GF5FzhZ*C
z&cz^ybLJP{{L<mv7lX)k5Y}?%hDy1PZE4F(iV`2B(|}GwWPiVw+vK@cEkDKfS$->1
zMQ=!DO88qm)ah{MEx%oAd<Mf5WN8D?^qc_wb)$=EqySsVjSxR^NQ2HB*1`^FeuLMh
zHl=g&+Vo4RHdDM}j^p4yi8JFA^sG(Wpo6`Q^9IFOO0PKO_eSD9M}Ej<|37{%CQXZv
a0t^6Ya%4MMk#h0?0000<MNUMnLSTX?bQ?(k

literal 0
HcmV?d00001

diff --git a/src/assets/IC.svg b/src/assets/IC.svg
new file mode 100644
index 0000000..f5297f9
--- /dev/null
+++ b/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>
diff --git a/src/assets/TLK.png b/src/assets/TLK.png
new file mode 100644
index 0000000000000000000000000000000000000000..97262d385f18369f96cfea01985d208878332451
GIT binary patch
literal 560
zcmV-00?+-4P)<h;3K|Lk000e1NJLTq001cf000mO1^@s6ixpOr0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUz(n&-?RCwB?RxM8hK@h!O`U8r%Dnt#Y
z2wD<Iz_b{G1W^PiEERx2pePy*28F;}1t<iDt*WGm!(b}vYO2AoL#D~(Wo~y5CYfgE
zZa!XT-_C6*P18;kMK@NHC|o91cdWKJmZWR-))PmyQeJOb9V$MA<HG70+aG27(<=y&
zWRYXe#j~m>rXm2&b7(#<RvT>3tRBXH07x>mI<{I9&qkh@2G~aF;4AnYQQnw4P!igN
zU@E=<K2-o10<taEWB#La*|nMpfK$ftL`GRj_6_zOx7}5A!i8N@2aqz)Bka;D=lqpe
zNwx;|M^4d}SPugzBJ&Oe1tdUf#<m2Q2eJV{CSdza03VURZRTJ_bZ|?fjket@0ma*3
z4+<U{+U_^7*MX<bPD%jpIYpbmq09ra2L4O%{y7hz268#@#BPXn7Qn|A`1gV92d+^V
zJCeCTb_#4YZui`OABMOQ{B(lsDg*n!QiI|n(b0PtQKvqT3CuDR2%=tK^pJdt^)<XZ
z))JH*d^DcVVgi>2oToIt9+bQptc^IV3Ew4pc_537m7ci$AV;Nq0nhu2&lS`@VZTh<
yZsd*Y)Y6q~&-1;WDWEiv2DnK$E~Ued00RKAux6cV;~ho-0000<MNUMnLSTZD^Xwo1

literal 0
HcmV?d00001

diff --git a/src/components/InputsSection.vue b/src/components/InputsSection.vue
index 7adbb54..9266619 100644
--- a/src/components/InputsSection.vue
+++ b/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;
 
diff --git a/src/components/ListSection.vue b/src/components/ListSection.vue
index 0eaf09d..3b0a178 100644
--- a/src/components/ListSection.vue
+++ b/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>
diff --git a/src/components/ReadyStockList.vue b/src/components/ReadyStockList.vue
new file mode 100644
index 0000000..6051ef4
--- /dev/null
+++ b/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>
diff --git a/src/main.ts b/src/main.ts
index dc9035b..3def9cb 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -14,6 +14,7 @@ const clickOutsideDirective: Directive = {
 
         document.addEventListener("click", el.clickOutsideEvent);
     },
+
 }
 
 
diff --git a/src/store.ts b/src/store.ts
index ea7bd51..e30cfed 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -24,6 +24,7 @@ export const Store: IStore = reactive({
     swapVehicles: false,
 
     chosenStockListIndex: -1,
+    chosenRealStockName: null,
     // locoOptions: [] as ILocomotive[],
     // carOptions: [] as ICarWagon[],
 
diff --git a/src/types.ts b/src/types.ts
index 25c92a3..1a8f679 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -13,6 +13,7 @@ export interface IStore {
   cargoOptions: any[][];
 
   chosenStockListIndex: number;
+  chosenRealStockName: string | null;
 
   swapVehicles: boolean;
   vehiclePreviewSrc: string;