Dodano wykrywanie składów realnych

src/components/ListSection.vue

@@ -72,22 +72,25 @@
       </button>
     </div>
 
+    <div class="stock_clipboard-text">
+      <button class="btn" v-if="store.stockList.length > 0" @click="copyToClipboard">
+        Skopiuj pociąg w formie tekstowej do schowka
+      </button>
+    </div>
+
     <div class="stock_specs">
+      <b class="real-stock-info" v-if="store.chosenRealStock">
+        <span class="text--accent">
+          <img :src="icons[store.chosenRealStock.type]" :alt="store.chosenRealStock.type" />
+          {{ store.chosenRealStock.number }} {{ store.chosenRealStock.name }}</span
+        >
+      </b>
+
       <div>
         Masa: <span class="text--accent">{{ store.totalMass }}t</span> | Długość:
         <span class="text--accent">{{ store.totalLength }}m</span>
         | Vmax pociągu: <span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
       </div>
-
-      <!-- <div v-if="store.chosenRealStockName" style="margin-top: 0.25rem">
-          <b>{{ store.chosenRealStockName.toLocaleUpperCase() }}</b>
-        </div> -->
-    </div>
-
-    <div class="stock_clipboard-text">
-      <button class="btn--text" v-if="store.stockList.length > 0" @click="copyToClipboard">
-        Skopiuj pociąg w formie tekstowej do schowka
-      </button>
     </div>
 
     <div class="stock_warnings">
@@ -173,6 +176,10 @@ import subIcon from '../assets/sub-icon.svg';
 import removeIcon from '../assets/remove-icon.svg';
 import lowerIcon from '../assets/lower-icon.svg';
 import higherIcon from '../assets/higher-icon.svg';
+import TLKIcon from '../assets/TLK.png';
+import EICIcon from '../assets/EIC.png';
+import ICIcon from '../assets/IC.svg';
+
 import { useStore } from '../store';
 import warningsMixin from '../mixins/warningsMixin';
 
@@ -196,7 +203,10 @@ export default defineComponent({
       remove: removeIcon,
       lower: lowerIcon,
       higher: higherIcon,
-    },
+      TLK: TLKIcon,
+      EIC: EICIcon,
+      IC: ICIcon,
+    } as { [key: string]: string },
 
     imageOffsetY: 0,
 
@@ -455,7 +465,9 @@ export default defineComponent({
   flex-wrap: wrap;
 
   margin: 1em 0;
-  outline: 1px solid white;
+  border: 1px solid white;
+
+  padding: 0 0.3em;
 
   &[data-disabled='true'] {
     opacity: 0.8;
@@ -467,11 +479,6 @@ export default defineComponent({
     pointer-events: none;
   }
 
-  &.no-chosen-vehicle {
-    font-size: 1.05em;
-    padding: 0.5em;
-  }
-
   input#stock-count {
     width: 3em;
 
@@ -500,10 +507,18 @@ export default defineComponent({
 }
 
 .stock_clipboard-text {
-  margin-top: 1em;
+  margin: 0.5em 0;
   font-weight: bold;
 }
 
+.real-stock-info {
+  font-size: 1.15em;
+
+  img {
+    width: 1.75em;
+  }
+}
+
 ul {
   position: relative;
 

src/components/ReadyStockList.vue

@@ -10,7 +10,8 @@
         </h1>
         <p>
           Pełne informacje o zestawieniach dostępne na stronie
-          <a href="http://bocznica.eu/files/archiwum/2021r_2021-11-04.html" target="_blank">bocznica.eu</a> (stan na listopad 2021r.)
+          <a href="http://bocznica.eu/files/archiwum/2021r_2021-11-04.html" target="_blank">bocznica.eu</a> (stan na
+          listopad 2021r.)
         </p>
 
         <input type="text" tabindex="0" v-model="searchedReadyStockName" placeholder="Szukaj zestawienia..." />
@@ -37,7 +38,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { Vehicle, IStock } from '../types';
+import { Vehicle, IStock, IReadyStockList } from '../types';
 
 import iconEIC from '../assets/EIC.png';
 import iconIC from '../assets/IC.svg';
@@ -45,10 +46,6 @@ import iconTLK from '../assets/TLK.png';
 import { useStore } from '../store';
 import { isLocomotive } from '../utils/vehicleUtils';
 
-interface ReadyStockList {
-  [key: string]: { stockString: string; type: string; number: string; name: string };
-}
-
 interface ResponseJSONData {
   [key: string]: string;
 }
@@ -64,7 +61,6 @@ export default defineComponent({
     responseStatus: 'loading',
     isMobile: 'ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/) ? true : false,
 
-    readyStockList: {} as ReadyStockList,
     searchedReadyStockName: '',
 
     icons: {
@@ -76,13 +72,13 @@ export default defineComponent({
 
   computed: {
     computedReadyStockList() {
-      if (this.searchedReadyStockName == null) return this.readyStockList;
+      if (this.searchedReadyStockName == null) return this.store.readyStockList;
 
-      let filtered: ReadyStockList = {};
+      let filtered: IReadyStockList = {};
 
-      for (let key in this.readyStockList) {
+      for (let key in this.store.readyStockList) {
         if (key.toLocaleLowerCase().includes(this.searchedReadyStockName.toLocaleLowerCase()))
-          filtered[key] = this.readyStockList[key];
+          filtered[key] = this.store.readyStockList[key];
       }
 
       return filtered;
@@ -167,7 +163,7 @@ export default defineComponent({
         name += ' ' + splittedKey[i];
       }
 
-      this.readyStockList[stockKey] = {
+      this.store.readyStockList[stockKey] = {
         type: splittedKey[0],
         number: splittedKey[1].replace(/_/g, '/'),
         name,

src/store.ts

@@ -1,6 +1,6 @@
 import { IStore } from './types';
 import { defineStore } from 'pinia';
-import { carDataList, isTrainPassenger, locoDataList, maxStockSpeed, totalLength, totalMass } from './utils/vehicleUtils';
+import { carDataList, chosenRealStock, isTrainPassenger, locoDataList, maxStockSpeed, totalLength, totalMass } from './utils/vehicleUtils';
 
 
 export const useStore = defineStore({
@@ -21,6 +21,8 @@ export const useStore = defineStore({
       stockList: [],
       cargoOptions: [],
 
+      readyStockList: {},
+
       swapVehicles: false,
 
       chosenStockListIndex: -1,
@@ -41,6 +43,7 @@ export const useStore = defineStore({
     totalLength: (state) => totalLength(state),
     maxStockSpeed: (state) => maxStockSpeed(state),
     isTrainPassenger: (state) => isTrainPassenger(state),
+    chosenRealStock: (state) => chosenRealStock(state)
   },
 });
 

src/types.ts

@@ -14,6 +14,7 @@ export interface IStore {
   chosenCarUseType: string;
 
   stockList: IStock[];
+  readyStockList: IReadyStockList;
   cargoOptions: any[][];
 
   chosenStockListIndex: number;
@@ -77,4 +78,6 @@ export interface IStock {
   imgSrc: string;
 }
 
-
+export interface IReadyStockList {
+  [key: string]: { stockString: string; type: string; number: string; name: string };
+}

src/utils/vehicleUtils.ts

@@ -1,6 +1,6 @@
-import { computed } from "vue";
-import { EVehicleUseType } from "../enums/EVehicleUseType";
-import { ICarWagon, ILocomotive, IStore, IVehicleData } from "../types";
+import { computed } from 'vue';
+import { EVehicleUseType } from '../enums/EVehicleUseType';
+import { ICarWagon, ILocomotive, IStore, IVehicleData } from '../types';
 
 import vehicleDataJSON from '../data/vehicleData.json';
 import vehiclePropsJSON from '../data/vehicleProps.json';
@@ -10,7 +10,7 @@ export function isLocomotive(vehicle: ILocomotive | ICarWagon): vehicle is ILoco
 }
 
 export function locoDataList(state: IStore) {
-    return Object.keys(vehicleDataJSON).reduce((acc, vehicleTypeKey) => {
+  return Object.keys(vehicleDataJSON).reduce((acc, vehicleTypeKey) => {
     if (!vehicleTypeKey.startsWith('loco')) return acc;
 
     const locoVehiclesData = (vehicleDataJSON as IVehicleData)[vehicleTypeKey];
@@ -88,11 +88,11 @@ export function locoDataList(state: IStore) {
     });
 
     return acc;
-  }, [] as ILocomotive[])
+  }, [] as ILocomotive[]);
 }
 
 export function carDataList(state: IStore) {
-    return Object.keys(vehicleDataJSON).reduce((acc, vehicleTypeKey) => {
+  return Object.keys(vehicleDataJSON).reduce((acc, vehicleTypeKey) => {
     if (!vehicleTypeKey.startsWith('car')) return acc;
 
     const carVehiclesData = (vehicleDataJSON as IVehicleData)[vehicleTypeKey];
@@ -122,7 +122,7 @@ export function carDataList(state: IStore) {
     });
 
     return acc;
-  }, [] as ICarWagon[])
+  }, [] as ICarWagon[]);
 }
 
 export function totalMass(state: IStore) {
@@ -130,15 +130,15 @@ export function totalMass(state: IStore) {
     (acc, stock) => acc + (stock.cargo ? stock.cargo.totalMass : stock.mass) * stock.count,
     0
   );
-};
+}
 
 export function totalLength(state: IStore) {
   return state.stockList.reduce((acc, stock) => acc + stock.length * stock.count, 0);
-};
+}
 
 export function maxStockSpeed(state: IStore) {
   return state.stockList.reduce((acc, stock) => (stock.maxSpeed < acc || acc == 0 ? stock.maxSpeed : acc), 0);
-};
+}
 
 export function isTrainPassenger(state: IStore) {
   if (state.stockList.length == 0) return false;
@@ -147,7 +147,18 @@ export function isTrainPassenger(state: IStore) {
   return state.stockList
     .filter((stock) => !stock.isLoco)
     .every((stock) => stock.useType === EVehicleUseType.CAR_PASSENGER);
-};
+}
+
+export function chosenRealStock(state: IStore) {
+  const currentStockString = state.stockList
+    .reduce((acc, stock) => {
+      for (let i = 0; i < stock.count; i++) acc.push(stock.type);
+      return acc;
+    }, [] as string[])
+    .join(';');
+
+  return Object.values(state.readyStockList).find((readyStock) => readyStock.stockString == currentStockString);
+}
 
 // export function maxAllowedSpeed(state: IStore) {
 //   if (state.stockList.length < 1) return -1;