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,