format; linting; aktualizacja do 2023.2.1

src/components/cards/RealStockCard.vue

@@ -1,14 +1,25 @@
 <template>
-  <div class="real-stock-card g-card" @keydown.esc="store.isRealStockListCardOpen = false">
+  <div
+    class="real-stock-card g-card"
+    @keydown.esc="store.isRealStockListCardOpen = false"
+  >
     <div class="g-card_bg" @click="store.isRealStockListCardOpen = false"></div>
 
     <div class="card_content">
       <div class="card_nav">
         <div class="top-pane">
           <h1>
-            {{ $t('realstock.title') }} <a href="https://td2.info.pl/profile/?u=17708" target="_blank">Railtrains997</a>
+            {{ $t("realstock.title") }}
+            <a href="https://td2.info.pl/profile/?u=17708" target="_blank"
+              >Railtrains997</a
+            >
           </h1>
-          <button class="btn exit-btn" @click="store.isRealStockListCardOpen = false">&Cross;</button>
+          <button
+            class="btn exit-btn"
+            @click="store.isRealStockListCardOpen = false"
+          >
+            &Cross;
+          </button>
         </div>
 
         <div class="filters" ref="focus" tabindex="0">
@@ -19,7 +30,11 @@
           />
 
           <datalist id="readyStockDataList">
-            <option v-for="stock in store.readyStockList" :value="stock.stockId">
+            <option
+              v-for="stock in store.readyStockList"
+              :value="stock.stockId"
+              :key="stock.name"
+            >
               {{ stock.stockId }}
             </option>
           </datalist>
@@ -31,12 +46,18 @@
           />
 
           <datalist id="readyStockStringList">
-            <option v-for="stock in computedAvailableStockTypes" :value="stock">
-              {{ stock }}
+            <option
+              v-for="stockType in computedAvailableStockTypes"
+              :value="stockType"
+              :key="stockType"
+            >
+              {{ stockType }}
             </option>
           </datalist>
 
-          <button class="btn" @click="resetStockFilters">{{ $t('realstock.action-reset') }}</button>
+          <button class="btn" @click="resetStockFilters">
+            {{ $t("realstock.action-reset") }}
+          </button>
         </div>
       </div>
 
@@ -46,14 +67,29 @@
           :key="rStock.stockId"
           :data-last-selected="store.chosenRealStockName === rStock.stockId"
         >
-          <div class="stock-title" tabindex="0" @click="chooseStock(rStock)" @keydown.enter="chooseStock(rStock)">
-            <img class="stock-icon" :src="getIconURL(rStock.type)" :alt="rStock.type" />
-            <b class="text--accent" style="margin-left: 5px"> {{ rStock.name }}</b>
+          <div
+            class="stock-title"
+            tabindex="0"
+            @click="chooseStock(rStock)"
+            @keydown.enter="chooseStock(rStock)"
+          >
+            <img
+              class="stock-icon"
+              :src="getIconURL(rStock.type)"
+              :alt="rStock.type"
+            />
+            <b class="text--accent" style="margin-left: 5px">
+              {{ rStock.name }}</b
+            >
             <div>{{ rStock.number }}</div>
           </div>
 
           <div class="stock-thumbnails" ref="thumbnailsRef">
-            <div class="thumbnail-item" v-for="stockType in rStock.stockString.split(';')">
+            <div
+              class="thumbnail-item"
+              v-for="stockType in rStock.stockString.split(';')"
+              :key="stockType"
+            >
               <div class="thumbnail-container">
                 <div>{{ stockType }}</div>
                 <img
@@ -61,7 +97,7 @@
                   :title="stockType"
                   style="opacity: 0"
                   @error="(e) => onStockItemError(e, stockType)"
-                  @load="e => (e.target as HTMLElement).style.opacity = '1'"
+                  @load="(e) => ((e.target as HTMLElement).style.opacity = '1')"
                 />
               </div>
             </div>
@@ -75,23 +111,24 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
 
-import { useStore } from '../../store';
-import imageMixin from '../../mixins/imageMixin';
-import stockMixin from '../../mixins/stockMixin';
+import { useStore } from "../../store";
+import imageMixin from "../../mixins/imageMixin";
+import stockMixin from "../../mixins/stockMixin";
 
-import { IReadyStockItem } from '../../types';
+import { IReadyStockItem } from "../../types";
+import http from "../../http";
 
 interface ResponseJSONData {
   [key: string]: string;
 }
 
 function getVehicleType(stockType: string) {
-  if (/^E/.test(stockType)) return 'loco-e';
-  if (/^S/.test(stockType)) return 'loco-s';
+  if (/^E/.test(stockType)) return "loco-e";
+  if (/^S/.test(stockType)) return "loco-s";
 
-  return 'car-passenger';
+  return "car-passenger";
 }
 
 export default defineComponent({
@@ -99,11 +136,15 @@ export default defineComponent({
 
   data: () => ({
     store: useStore(),
-    responseStatus: 'loading',
-    isMobile: 'ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/) ? true : false,
+    responseStatus: "loading",
+    isMobile:
+      "ontouchstart" in document.documentElement &&
+      navigator.userAgent.match(/Mobi/)
+        ? true
+        : false,
     observer: null as IntersectionObserver | null,
-    searchedReadyStockName: '',
-    searchedReadyStockString: '',
+    searchedReadyStockName: "",
+    searchedReadyStockString: "",
     visibleIndexesTo: 0,
     lastSelectedStockId: null as string | null,
     scrollTop: 0,
@@ -115,11 +156,11 @@ export default defineComponent({
   },
 
   activated() {
-    (this.$refs['focus'] as HTMLElement).focus();
+    (this.$refs["focus"] as HTMLElement).focus();
 
-    (this.$refs['list'] as HTMLElement).scrollTo({
+    (this.$refs["list"] as HTMLElement).scrollTo({
       top: this.scrollTop,
-      behavior: 'auto',
+      behavior: "auto",
     });
   },
 
@@ -130,8 +171,12 @@ export default defineComponent({
       return this.store.readyStockList
         .filter(
           (rs) =>
-            rs.stockId.toLocaleLowerCase().includes(this.searchedReadyStockName.toLocaleLowerCase()) &&
-            rs.stockString.toLocaleLowerCase().includes(this.searchedReadyStockString.toLocaleLowerCase())
+            rs.stockId
+              .toLocaleLowerCase()
+              .includes(this.searchedReadyStockName.toLocaleLowerCase()) &&
+            rs.stockString
+              .toLocaleLowerCase()
+              .includes(this.searchedReadyStockString.toLocaleLowerCase()),
         )
         .filter((_, i) => i <= this.visibleIndexesTo);
     },
@@ -139,7 +184,7 @@ export default defineComponent({
     computedAvailableStockTypes() {
       return this.store.readyStockList
         .reduce((acc, rs) => {
-          rs.stockString.split(';').forEach((s) => {
+          rs.stockString.split(";").forEach((s) => {
             if (!acc.includes(s)) acc.push(s);
           });
 
@@ -153,7 +198,7 @@ export default defineComponent({
     computedReadyStockList(curr, prev) {
       if (curr.length < prev.length) {
         this.visibleIndexesTo = 20;
-        (this.$refs['list'] as HTMLElement).scrollTo({
+        (this.$refs["list"] as HTMLElement).scrollTo({
           top: 0,
         });
       }
@@ -162,21 +207,21 @@ export default defineComponent({
 
   methods: {
     async fetchStockListData() {
-      const readyStockJSONData: ResponseJSONData = await (
-        await fetch(`https://spythere.github.io/api/td2/data/readyStock.json?t=${Math.floor(Date.now() / 60000)}`)
-      ).json();
+      const readyStockJSONData = (
+        await http.get<ResponseJSONData>("td2/data/readyStock.json")
+      ).data;
 
       if (!readyStockJSONData) {
-        this.responseStatus = 'error';
+        this.responseStatus = "error";
         return;
       }
 
       for (let stockKey in readyStockJSONData) {
-        const [type, number, ...name] = stockKey.split(' ');
+        const [type, number, ...name] = stockKey.split(" ");
 
         const obj = {
-          number: number.replace(/_/g, '/'),
-          name: name.join(' '),
+          number: number.replace(/_/g, "/"),
+          name: name.join(" "),
           stockString: readyStockJSONData[stockKey],
           type,
         };
@@ -187,7 +232,7 @@ export default defineComponent({
         });
       }
 
-      this.responseStatus = 'loaded';
+      this.responseStatus = "loaded";
     },
 
     mountObserver() {
@@ -195,7 +240,7 @@ export default defineComponent({
         if (entries[0].intersectionRatio > 0) this.visibleIndexesTo += 20;
       });
 
-      this.observer.observe(this.$refs['bottom'] as HTMLElement);
+      this.observer.observe(this.$refs["bottom"] as HTMLElement);
     },
 
     getImageUrl(name: string) {
@@ -203,8 +248,8 @@ export default defineComponent({
     },
 
     resetStockFilters() {
-      this.searchedReadyStockName = '';
-      this.searchedReadyStockString = '';
+      this.searchedReadyStockName = "";
+      this.searchedReadyStockString = "";
     },
 
     chooseStock(stockItem: IReadyStockItem) {
@@ -216,7 +261,7 @@ export default defineComponent({
     onStockItemError(e: Event, stockType: string) {
       const imageEl = e.target as HTMLImageElement;
       imageEl.src = `images/${getVehicleType(stockType)}-unknown.png`;
-      imageEl.style.opacity = '1';
+      imageEl.style.opacity = "1";
     },
 
     onListScroll(e: Event) {
@@ -230,7 +275,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/global.scss';
+@import "../../styles/global.scss";
 
 .exit-btn {
   font-size: 1.2em;
@@ -316,7 +361,7 @@ ul {
     gap: 1rem;
     padding: 0.1em;
 
-    &[data-last-selected='true'] .stock-title {
+    &[data-last-selected="true"] .stock-title {
       border: 1px solid $accentColor;
     }
 
@@ -378,4 +423,3 @@ ul {
   padding: 1em;
 }
 </style>
-