format & lint; poprawki do nowego API

.eslintrc.cjs

@@ -0,0 +1,17 @@
+/* eslint-env node */
+
+module.exports = {
+  root: true,
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  rules: {
+    'vue/multi-word-component-names': 'off'
+  },
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+};

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}

babel.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}

package.json

@@ -7,7 +7,9 @@
     "dev": "vite --port 8080",
     "deploy": "yarn build && firebase deploy --only hosting",
     "build": "vue-tsc --noEmit && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
   },
   "dependencies": {
     "axios": "^1.6.2",
@@ -19,6 +21,11 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.2",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "eslint": "^8.49.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "prettier": "^3.0.3",
     "sass": "^1.69.5",
     "typescript": "^5.3.3",
     "vite": "^5.0.7",

src/App.vue

@@ -3,13 +3,15 @@
     <router-view />
 
     <transition name="slide-anim">
-      <div v-if="needRefresh" class="update-prompt" @click="updateServiceWorker(true)">Nowa wersja GeneraTORa dostępna! <u>Kliknij, aby odświeżyć aplikację!</u></div>
+      <div v-if="needRefresh" class="update-prompt" @click="updateServiceWorker(true)">
+        Nowa wersja GeneraTORa dostępna!
+        <u>Kliknij, aby odświeżyć aplikację!</u>
+      </div>
     </transition>
 
     <footer>
-      &copy; <a href="https://td2.info.pl/profile/?u=20777">Spythere</a> {{ new Date().getUTCFullYear() }} | v.{{
+      &copy; <a href="https://td2.info.pl/profile/?u=20777">Spythere</a>
-        appVersion
+      {{ new Date().getUTCFullYear() }} | v.{{ appVersion }}
-      }}
     </footer>
   </div>
 </template>
@@ -22,19 +24,19 @@ import packageInfo from '../package.json';
 export default defineComponent({
   setup() {
     const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW({
-      immediate: true,
+      immediate: true
     });
 
     return {
       offlineReady,
       needRefresh,
-      updateServiceWorker,
+      updateServiceWorker
     };
   },
   data() {
     return {
       appVersion: packageInfo.version,
-      needRefreshTest: false,
+      needRefreshTest: false
     };
   },
 
@@ -42,9 +44,9 @@ export default defineComponent({
     document.title = `GeneraTOR ${this.appVersion}`;
 
     setTimeout(() => {
-        this.needRefreshTest = true;
+      this.needRefreshTest = true;
     }, 500);
-  },
+  }
 });
 </script>
 
@@ -52,7 +54,6 @@ export default defineComponent({
 @import './styles/global.scss';
 @import './styles/anims.scss';
 
-
 #app {
   color: white;
 
@@ -86,4 +87,3 @@ footer {
   }
 }
 </style>
-

src/components/Order.vue

@@ -22,7 +22,7 @@ import OrderOVue from './OrderO.vue';
 const orderComponents = {
   orderN: OrderNVue,
   orderS: OrderSVue,
-  orderO: OrderOVue,
+  orderO: OrderOVue
 };
 
 export default defineComponent({
@@ -32,15 +32,15 @@ export default defineComponent({
     const store = useStore();
 
     return {
-      store,
+      store
     };
   },
 
   computed: {
     chosenOrderComponent() {
       return orderComponents[this.store.chosenOrderType];
-    },
+    }
-  },
+  }
 });
 </script>
 
@@ -187,4 +187,3 @@ select {
   }
 }
 </style>
-

src/components/OrderFooter.vue

@@ -36,7 +36,11 @@
           </td>
 
           <td colspan="5">
-            <input type="text" v-model="footerInfo.secondaryDispatcherName" placeholder="dyżurny (wypełnić jedno)" />
+            <input
+              type="text"
+              v-model="footerInfo.secondaryDispatcherName"
+              placeholder="dyżurny (wypełnić jedno)"
+            />
             <br />
             z polecenia dyżurnego ruchu
           </td>
@@ -59,7 +63,7 @@ export default defineComponent({
 
     return {
       store,
-      footerInfo: store.orderFooter,
+      footerInfo: store.orderFooter
     };
   },
 
@@ -68,9 +72,9 @@ export default defineComponent({
       deep: true,
       handler() {
         this.generateFooter();
-      },
+      }
-    },
+    }
-  },
+  }
 });
 </script>
 

src/components/OrderHelper.vue

@@ -11,11 +11,14 @@
         <li>
           <b>Przetaczanie (manewr) taboru poza wskaźnik W 5 (granicy przetaczania)</b>
           <p>
-            Rozkazu <u>nie stosujemy</u> w przypadku wyjazdu taboru na szlak dwutorowy, na którym odbywa się ruch w
+            Rozkazu <u>nie stosujemy</u> w przypadku wyjazdu taboru na szlak dwutorowy, na którym
-            kierunku zasadniczym, tj. "prawostronnym". Dla wszystkich szlaków jednotorowych lub dwutorowych w sytuacji innej niż wymieniona
+            odbywa się ruch w kierunku zasadniczym, tj. "prawostronnym". Dla wszystkich szlaków
-            wykorzystujemy działkę 4. rozkazu pisemnego "S".
+            jednotorowych lub dwutorowych w sytuacji innej niż wymieniona wykorzystujemy działkę 4.
-            <br><br>
+            rozkazu pisemnego "S". <br /><br />
-            <i>Szczegółowe informacje: instrukcja Ir-1 (R-1) § 12 pkt 4 "Manewry na torach głównych"</i>
+            <i
+              >Szczegółowe informacje: instrukcja Ir-1 (R-1) § 12 pkt 4 "Manewry na torach
+              głównych"</i
+            >
           </p>
           <button class="g-button action">Wygeneruj treść rozkazu</button>
         </li>
@@ -33,14 +36,14 @@ export default defineComponent({
   setup() {
     return {
       store: useStore(),
-      orderHelperData,
+      orderHelperData
     };
-  },
+  }
 });
 </script>
 
 <style lang="scss" scoped>
-@import "../styles/global.scss";
+@import '../styles/global.scss';
 
 .content {
   width: 100%;

src/components/OrderList.vue

@@ -3,12 +3,19 @@
     <h3>Zapisane rozkazy pisemne ({{ localOrderList.length }})</h3>
 
     <transition-group name="list" tag="ul">
-      <li class="no-orders-warning" v-if="sortedOrderList.length == 0" :key="-1">Brak zapisanych rozkazów!</li>
+      <li class="no-orders-warning" v-if="sortedOrderList.length == 0" :key="-1">
+        Brak zapisanych rozkazów!
+      </li>
 
-      <li v-for="order in sortedOrderList" :selected="order.id == store.chosenLocalOrderId" :key="order.id">
+      <li
+        v-for="order in sortedOrderList"
+        :selected="order.id == store.chosenLocalOrderId"
+        :key="order.id"
+      >
         <b class="text--accent">#{{ order.id.split('-')[1] }}&nbsp;</b>
         <b>
-          {{ getOrderName(order.orderType) }} nr {{ order.orderBody['header']['orderNo'] }} dla pociągu nr
+          {{ getOrderName(order.orderType) }} nr {{ order.orderBody['header']['orderNo'] }} dla
+          pociągu nr
           {{ order.orderBody['header']['trainNo'] }}
         </b>
         <br />
@@ -34,14 +41,14 @@ export default defineComponent({
 
   data() {
     return {
-      localOrderList: [] as LocalStorageOrder[],
+      localOrderList: [] as LocalStorageOrder[]
     };
   },
 
   setup() {
     return {
       store: useStore(),
-      localStorage: window.localStorage,
+      localStorage: window.localStorage
     };
   },
 
@@ -57,13 +64,15 @@ export default defineComponent({
       this.localOrderList = this.localOrderList.filter((o) => o.id != order.id);
 
       if (this.localOrderList.length == 0) this.saveOrderSetting('orderCount', 0);
-    },
+    }
   },
 
   computed: {
     sortedOrderList() {
-      return this.localOrderList.sort((a, b) => (b.createdAt || b.updatedAt!) - (a.createdAt || a.updatedAt!));
+      return this.localOrderList
-    },
+        .slice()
+        .sort((a, b) => (b.createdAt || b.updatedAt!) - (a.createdAt || a.updatedAt!));
+    }
   },
 
   activated() {
@@ -80,7 +89,7 @@ export default defineComponent({
     }
 
     this.localOrderList = orderList;
-  },
+  }
 });
 </script>
 
@@ -149,4 +158,3 @@ li {
   }
 }
 </style>
-

src/components/OrderMessage.vue

@@ -4,13 +4,18 @@
 
     <div class="message_body" v-html="fullOrderMessage"></div>
     <p class="message_info">
-      Po wygenerowaniu rozkazu skopiuj jego treść lub zapisz w pamięci przeglądarki za pomocą przycisków poniżej
+      Po wygenerowaniu rozkazu skopiuj jego treść lub zapisz w pamięci przeglądarki za pomocą
+      przycisków poniżej
     </p>
 
     <div class="message_actions">
       <button class="g-button action" @click="saveOrder">Zapisz nowy rozkaz</button>
       <button class="g-button action" @click="copyMessage">Kopiuj treść rozkazu</button>
-      <button class="g-button action" :data-disabled="!store.chosenLocalOrderId" @click="updateOrder">
+      <button
+        class="g-button action"
+        :data-disabled="!store.chosenLocalOrderId"
+        @click="updateOrder"
+      >
         Zaktualizuj rozkaz
         <span class="text--accent"
           >{{ store.chosenLocalOrderId && `#${store.chosenLocalOrderId.split('-')[1]}` }}
@@ -40,7 +45,13 @@
         <span>Aktualizuj numer rozkazu po zapisaniu</span>
       </label>
       <label for="update-date" class="g-checkbox">
-        <input type="checkbox" name="update-date" id="update-date" v-model="updateDate" @change="onCheckboxChange" />
+        <input
+          type="checkbox"
+          name="update-date"
+          id="update-date"
+          v-model="updateDate"
+          @change="onCheckboxChange"
+        />
         <span>Aktualizuj godziny przy edycji</span>
       </label>
     </div>
@@ -73,13 +84,13 @@ export default defineComponent({
 
       incrementOnSave: true,
       incrementOnCopy: true,
-      updateDate: true,
+      updateDate: true
     };
   },
 
   setup() {
     return {
-      store: useStore(),
+      store: useStore()
     };
   },
 
@@ -91,13 +102,17 @@ export default defineComponent({
 
   computed: {
     fullOrderMessage() {
-      if(this.updateDate) {
+      return this.store.orderMessage + this.store.footerMessage;
+    }
+  },
+
+  watch: {
+    fullOrderMessage() {
+      if (this.updateDate) {
         this.store.orderFooter['hour'] = currentFormattedHours();
         this.store.orderFooter['minutes'] = currentFormattedMinutes();
       }
-
+    }
-      return this.store.orderMessage + this.store.footerMessage;
-    },
   },
 
   methods: {
@@ -181,10 +196,14 @@ export default defineComponent({
           );
           break;
         case 0:
-          this.showActionMonit('<span class="text--warn">Ostatni zapisany rozkaz jest identyczny z obecnym!</span>');
+          this.showActionMonit(
+            '<span class="text--warn">Ostatni zapisany rozkaz jest identyczny z obecnym!</span>'
+          );
           break;
         case 1:
-          this.showActionMonit('Zapisano treść <b class="text--accent">rozkazu</b> w pamięci przeglądarki!');
+          this.showActionMonit(
+            'Zapisano treść <b class="text--accent">rozkazu</b> w pamięci przeglądarki!'
+          );
 
           if (this.incrementOnSave) this.incrementOrderNo();
           break;
@@ -199,19 +218,23 @@ export default defineComponent({
 
       switch (updatedOrderStatus) {
         case -1:
-          this.showActionMonit('<span class="text--warn">Wystąpił błąd podczas aktualizowania tego rozkazu! :/</span>');
+          this.showActionMonit(
+            '<span class="text--warn">Wystąpił błąd podczas aktualizowania tego rozkazu! :/</span>'
+          );
           break;
 
         case 0:
-          this.showActionMonit('<span class="text--warn">Nie wybrałeś żadnego zapisanego rozkazu!</span>');
+          this.showActionMonit(
+            '<span class="text--warn">Nie wybrałeś żadnego zapisanego rozkazu!</span>'
+          );
           break;
 
         case 1:
           this.showActionMonit('Zaktualizowano treść <b class="text--accent">rozkazu</b>!');
           break;
       }
-    },
+    }
-  },
+  }
 });
 </script>
 
@@ -288,4 +311,3 @@ export default defineComponent({
   }
 }
 </style>
-

src/components/OrderN.vue

@@ -6,7 +6,9 @@
         <input type="number" v-model="order.header.orderNo" placeholder="nr rozkazu" min="1" />
       </h2>
       <div class="flex-row">
-        dla pociągu nr <input type="text" v-model="order.header.trainNo" placeholder="nr pociągu" /> dnia
+        dla pociągu nr
+        <input type="text" v-model="order.header.trainNo" placeholder="nr pociągu" />
+        dnia
         <input type="text" v-model="order.header.date" placeholder="data" />
       </div>
     </section>
@@ -21,10 +23,13 @@
               </div>
             </td>
             <td ref="row-1">
-              Od <input type="text" v-model="order.rows[0].from" holder="stacja / post." /> do
+              Od
-              <input type="text" v-model="order.rows[0].to" holder="stacja / post." /> tor nr
+              <input type="text" v-model="order.rows[0].from" holder="stacja / post." />
-              <input type="text" v-model="order.rows[0].trackNo" holder="nr toru" /> jest zamknięty, ruch jednotorowy
+              do
-              dwukierunkowy wprowadzono po torze nr
+              <input type="text" v-model="order.rows[0].to" holder="stacja / post." />
+              tor nr
+              <input type="text" v-model="order.rows[0].trackNo" holder="nr toru" />
+              jest zamknięty, ruch jednotorowy dwukierunkowy wprowadzono po torze nr
               <input type="text" v-model="order.rows[0].trackNo2" holder="nr toru" />
             </td>
           </tr>
@@ -69,7 +74,8 @@
                         v-model="order.rows[1].signal1"
                         holder="nazwa sem."
                         :radio-checked="
-                          order.rows[1].checkbox == 'checkbox-2a' && order.rows[1].signalType == 'wyjazdowego'
+                          order.rows[1].checkbox == 'checkbox-2a' &&
+                          order.rows[1].signalType == 'wyjazdowego'
                         "
                       />
                     </label>
@@ -89,7 +95,8 @@
                         v-model="order.rows[1].signal2"
                         holder="nazwa sem."
                         :radio-checked="
-                          order.rows[1].checkbox == 'checkbox-2a' && order.rows[1].signalType == 'drogowskazowego'
+                          order.rows[1].checkbox == 'checkbox-2a' &&
+                          order.rows[1].signalType == 'drogowskazowego'
                         "
                       />
                       (odnoszącego się do wyjazdu pociągu)
@@ -110,7 +117,8 @@
                         v-model="order.rows[1].signal3"
                         holder="nazwa sem."
                         :radio-checked="
-                          order.rows[1].checkbox == 'checkbox-2a' && order.rows[1].signalType == 'wjazdowego'
+                          order.rows[1].checkbox == 'checkbox-2a' &&
+                          order.rows[1].signalType == 'wjazdowego'
                         "
                       />
                       na post. odg. bez sem. wyjazdowego
@@ -191,15 +199,19 @@
                 <option value="Popychanie">Popychanie</option>
               </select>
               pociągu odbędzie się w kierunku:
-              <input type="text" v-model="order.rows[2].direction" holder="stacja / post." /> do km
+              <input type="text" v-model="order.rows[2].direction" holder="stacja / post." />
-              <input type="text" v-model="order.rows[2].toKilometer" holder="kilometry" /> skąd
+              do km
+              <input type="text" v-model="order.rows[2].toKilometer" holder="kilometry" />
+              skąd
               <select v-model="order.rows[2].option2">
                 <option value="pociąg">pociąg</option>
                 <option value="popychacz">popychacz</option>
               </select>
               ma wrócić po torze lewym nr
-              <input type="text" v-model="order.rows[2].trackNo" holder="nr toru" /> najpóźniej o godz.
+              <input type="text" v-model="order.rows[2].trackNo" holder="nr toru" />
-              <input type="text" v-model="order.rows[2].untilHour" holder="godzina" /> min.
+              najpóźniej o godz.
+              <input type="text" v-model="order.rows[2].untilHour" holder="godzina" />
+              min.
               <input type="text" v-model="order.rows[2].untilMin" holder="minuta" />
             </td>
           </tr>
@@ -212,13 +224,14 @@
             </td>
             <td ref="row-4">
               <strong>WJAZD</strong> z toru szlakowego nr
-              <input type="text" v-model="order.rows[3].trackNo" holder="nr toru" /> na
+              <input type="text" v-model="order.rows[3].trackNo" holder="nr toru" />
+              na
               <select v-model="order.rows[3].optionStation">
                 <option value="stację">stację</option>
                 <option value="posterunek odgałęźny">posterunek odgałęźny</option>
               </select>
-              <input type="text" v-model="order.rows[3].stationName" holder="stacja / post." /> odbędzie się po
+              <input type="text" v-model="order.rows[3].stationName" holder="stacja / post." />
-              otrzymaniu:
+              odbędzie się po otrzymaniu:
               <div style="margin-top: 0.5rem">
                 <input
                   type="radio"
@@ -259,8 +272,10 @@
             </td>
             <td ref="row-5">
               <strong>ZEZWALAM</strong> wjechać z toru szlakowego nr
-              <input type="text" v-model="order.rows[4].trackNo" holder="nr toru" /> z kierunku
+              <input type="text" v-model="order.rows[4].trackNo" holder="nr toru" />
-              <input type="text" v-model="order.rows[4].direction" holder="stacja / post." /> na
+              z kierunku
+              <input type="text" v-model="order.rows[4].direction" holder="stacja / post." />
+              na
               <select v-model="order.rows[4].stationType">
                 <option value="stację">stację</option>
                 <option value="posterunek odgałęźny">posterunek odgałęźny</option>
@@ -306,7 +321,9 @@ export default defineComponent({
 
         const message = `Od ${row.from || '_'} do ${row.to || '_'} tor nr ${
           row.trackNo || '_'
-        } jest zamknięty, ruch jednotorowy dwukierunkowy wprowadzono po torze nr ${row.trackNo2 || '_'}`;
+        } jest zamknięty, ruch jednotorowy dwukierunkowy wprowadzono po torze nr ${
+          row.trackNo2 || '_'
+        }`;
 
         return message;
       },
@@ -317,20 +334,25 @@ export default defineComponent({
         let message = `ZEZWALAM po otrzymaniu ${row.option1 || '_'}`;
 
         if (row.checkbox == 'checkbox-2a') {
-          message += ` przejechać obok wskazującego sygnał "Stój" semafora ${row.signalType || '_'} `;
+          message += ` przejechać obok wskazującego sygnał "Stój" semafora ${
+            row.signalType || '_'
+          } `;
 
           if (row.signalType == 'wyjazdowego') message += row.signal1 || '_';
           if (row.signalType == 'drogowskazowego')
             message += `${row.signal2 || '_'} (odnoszącego się do wyjazdu pociągu)`;
-          if (row.signalType == 'wjazdowego') message += `${row.signal3 || '_'} na post. odg. bez sem. wyjazdowego`;
+          if (row.signalType == 'wjazdowego')
+            message += `${row.signal3 || '_'} na post. odg. bez sem. wyjazdowego`;
 
-          message += ` i wyjechać w kierunku ${row.direction1 || '_'} na tor szlakowy ${row.option2 || '_'} nr ${
+          message += ` i wyjechać w kierunku ${row.direction1 || '_'} na tor szlakowy ${
-            row.trackNoTo1 || '_'
+            row.option2 || '_'
-          }`;
+          } nr ${row.trackNoTo1 || '_'}`;
         }
 
         if (row.checkbox == 'checkbox-2b') {
-          message += ` z toru nr ${row.trackNoFrom || '_'} nie posiadającego semafora wyjazdowego wyjechać w kierunku ${
+          message += ` z toru nr ${
+            row.trackNoFrom || '_'
+          } nie posiadającego semafora wyjazdowego wyjechać w kierunku ${
             row.direction2 || '_'
           } na tor szlakowy ${row.option3 || '_'} nr ${row.trackNoTo2 || '_'}`;
         }
@@ -341,11 +363,11 @@ export default defineComponent({
       () => {
         const row = order.rows[2];
 
-        let message = `${row.option1 || '_'} pociągu odbędzie się w kierunku: ${row.direction || '_'} do km ${
+        let message = `${row.option1 || '_'} pociągu odbędzie się w kierunku: ${
-          row.toKilometer || '_'
+          row.direction || '_'
-        } skąd ${row.option2 || '_'} ma wrócić po torze lewym nr ${row.trackNo || '_'} najpóźniej o godz. ${
+        } do km ${row.toKilometer || '_'} skąd ${row.option2 || '_'} ma wrócić po torze lewym nr ${
-          row.untilHour || '_'
+          row.trackNo || '_'
-        } min. ${row.untilMin || '_'}`;
+        } najpóźniej o godz. ${row.untilHour || '_'} min. ${row.untilMin || '_'}`;
 
         return message;
       },
@@ -353,15 +375,18 @@ export default defineComponent({
       () => {
         const row = order.rows[3];
 
-        let message = `WJAZD z toru szlakowego nr ${row.trackNo || '_'} na ${row.optionStation || '_'} ${
+        let message = `WJAZD z toru szlakowego nr ${row.trackNo || '_'} na ${
-          row.stationName || '_'
+          row.optionStation || '_'
-        } odbędzie się po otrzymaniu: `;
+        } ${row.stationName || '_'} odbędzie się po otrzymaniu: `;
 
         if (row.checkbox == 'checkbox-4a')
-          message += `sygnału zastępczego "Sz" na osobnym urządzeniu ustawionym z ${row.side || '_'} strony toru`;
+          message += `sygnału zastępczego "Sz" na osobnym urządzeniu ustawionym z ${
+            row.side || '_'
+          } strony toru`;
 
         if (row.checkbox == 'checkbox-4b')
-          message += 'rozkazu pisemnego "N" (doręczonego lub przekazanego przez urządzenia łączności)';
+          message +=
+            'rozkazu pisemnego "N" (doręczonego lub przekazanego przez urządzenia łączności)';
 
         return message;
       },
@@ -371,16 +396,18 @@ export default defineComponent({
 
         const message = `ZEZWALAM wjechać z toru szlakowego nr ${row.trackNo || '_'} z kierunku ${
           row.direction || '_'
-        } na ${row.stationType || '_'} ${row.stationName || '_'} i przejechać obok sygnału "Stój" na ${row.on || '_'} `;
+        } na ${row.stationType || '_'} ${
+          row.stationName || '_'
+        } i przejechać obok sygnału "Stój" na ${row.on || '_'} `;
 
         return message;
-      },
+      }
     ];
 
     return {
       store,
       order,
-      rowMethods,
+      rowMethods
     };
   },
 
@@ -389,14 +416,14 @@ export default defineComponent({
       deep: true,
       handler() {
         this.generateMessage();
-      },
+      }
     },
     'order.rows': {
       deep: true,
       handler() {
         this.updatePlaceholders();
-      },
+      }
-    },
+    }
   },
 
   mounted() {
@@ -433,8 +460,7 @@ export default defineComponent({
       }
 
       this.store.orderMessage = message;
-    },
+    }
-  },
+  }
 });
 </script>
-

src/components/OrderO.vue

@@ -7,7 +7,9 @@
       </h2>
 
       <div class="flex-row" style="padding: 0 0.5em">
-        dla pociągu nr <input type="text" v-model="order.header.trainNo" placeholder="nr pociągu" /> dnia
+        dla pociągu nr
+        <input type="text" v-model="order.header.trainNo" placeholder="nr pociągu" />
+        dnia
         <input type="text" v-model="order.header.date" />
       </div>
 
@@ -41,7 +43,7 @@
             <td colspan="2">kilometra</td>
           </tr>
 
-          <tr v-for="row in order.orderList" class="tr-data">
+          <tr v-for="row in order.orderList" :key="row.name" class="tr-data">
             <td>
               <textarea v-model="row.name"></textarea>
             </td>
@@ -88,16 +90,16 @@ export default defineComponent({
       () => {
         const { header } = order;
 
-        return `<i>Rozkaz pisemny "O" nr ${header.orderNo || '_'} dla pociągu nr ${header.trainNo || '_'} dnia ${
+        return `<i>Rozkaz pisemny "O" nr ${header.orderNo || '_'} dla pociągu nr ${
-          header.date || '_'
+          header.trainNo || '_'
-        }</i>`;
+        } dnia ${header.date || '_'}</i>`;
-      },
+      }
     ];
 
     return {
       store,
       order,
-      rowMethods,
+      rowMethods
     };
   },
 
@@ -110,8 +112,8 @@ export default defineComponent({
       deep: true,
       handler() {
         this.generateMessage();
-      },
+      }
-    },
+    }
   },
 
   methods: {
@@ -137,13 +139,13 @@ export default defineComponent({
         rowsMessageList.push(rowMessage);
       }
 
-      message += rowsMessageList.join("; ");
+      message += rowsMessageList.join('; ');
 
       if (this.order.other) message += ` <b> [ 2 ] </b> Inne: ${this.order.other}`;
 
       this.store.orderMessage = message;
-    },
+    }
-  },
+  }
 });
 </script>
 
@@ -212,4 +214,3 @@ th {
   }
 }
 </style>
-

src/components/OrderS.vue

@@ -11,7 +11,9 @@
           <option value="pociągu">pociągu</option>
           <option value="manewru">manewru</option>
         </select>
-        nr <input type="text" v-model="order.header.trainNo" :placeholder="`nr ${order.header.for}`" /> dnia
+        nr
+        <input type="text" v-model="order.header.trainNo" :placeholder="`nr ${order.header.for}`" />
+        dnia
         <input type="text" v-model="order.header.date" placeholder="data" />
       </div>
     </section>
@@ -184,13 +186,19 @@
               </div>
             </td>
             <td ref="row-3">
-              Od <input type="text" v-model="order.rows[2].from" holder="stacja / post." /> do
+              Od
-              <input type="text" v-model="order.rows[2].to" holder="stacja / post." /> po torze nr
+              <input type="text" v-model="order.rows[2].from" holder="stacja / post." />
-              <input type="text" v-model="order.rows[2].trackNo" holder="nr toru" /> ruch pociągów prowadzony jest w
+              do
-              odstępie posterunków następczych. Wskazania semaforów sbl są nieważne. Zachować ostrożność od ostatniego
+              <input type="text" v-model="order.rows[2].to" holder="stacja / post." />
-              semafora ze wskaźnikiem "W18". Szlak wolny, ostatni pociąg nr
+              po torze nr
-              <input type="text" v-model="order.rows[2].trainNo" holder="nr pociągu" /> przybył do
+              <input type="text" v-model="order.rows[2].trackNo" holder="nr toru" />
-              <input type="text" v-model="order.rows[2].arrivedTo" holder="stacja / post." /> o godzinie
+              ruch pociągów prowadzony jest w odstępie posterunków następczych. Wskazania semaforów
+              sbl są nieważne. Zachować ostrożność od ostatniego semafora ze wskaźnikiem "W18".
+              Szlak wolny, ostatni pociąg nr
+              <input type="text" v-model="order.rows[2].trainNo" holder="nr pociągu" />
+              przybył do
+              <input type="text" v-model="order.rows[2].arrivedTo" holder="stacja / post." />
+              o godzinie
               <input type="text" v-model="order.rows[2].hour" holder="godzina" />
             </td>
           </tr>
@@ -207,8 +215,14 @@
               </div>
             </td>
             <td ref="row-4">
-              <button class="g-button text" @click="order.rows[3].w5.enabled = !order.rows[3].w5.enabled">
+              <button
-                &gt; <span v-if="!order.rows[3].w5.enabled">Wygeneruj treść na pominięcie wskaźnika W5</span>
+                class="g-button text"
+                @click="order.rows[3].w5.enabled = !order.rows[3].w5.enabled"
+              >
+                &gt;
+                <span v-if="!order.rows[3].w5.enabled"
+                  >Wygeneruj treść na pominięcie wskaźnika W5</span
+                >
                 <span v-else>Wpisz treść własnoręcznie</span>
               </button>
 
@@ -220,14 +234,26 @@
                   <option value="granicę przetaczania">granicę przetaczania</option>
                 </select>
                 po torze szlakowym nr
-                <input type="text" v-model="order.rows[3].w5.trackNo" holder="nr szlaku" /> do kilometra
+                <input type="text" v-model="order.rows[3].w5.trackNo" holder="nr szlaku" />
-                <input type="text" v-model="order.rows[3].w5.maxKm" holder="km szlaku" />. Powrót odbędzie się na
+                do kilometra
-                <select id="select-returnWay" v-model="order.rows[3].w5.returnWay" style="width: 250px">
+                <input type="text" v-model="order.rows[3].w5.maxKm" holder="km szlaku" />. Powrót
-                  <option :value='`sygnał ręczny "Do mnie"`'>sygnał ręczny "Do mnie"</option>
+                odbędzie się na
-                  <option :value='`sygnał "Do mnie" przekazany przez urządzenia radiołączności`'>
+                <select
+                  id="select-returnWay"
+                  v-model="order.rows[3].w5.returnWay"
+                  style="width: 250px"
+                >
+                  <option :value="`sygnał ręczny &quot;Do mnie&quot;`">
+                    sygnał ręczny "Do mnie"
+                  </option>
+                  <option
+                    :value="`sygnał &quot;Do mnie&quot; przekazany przez urządzenia radiołączności`"
+                  >
                     sygnał "Do mnie" przekazany przez urządzenia radiołączności
                   </option>
-                  <option value="sygnał Ms2 podany na tarczy manewrowej">sygnał Ms2 podany na tarczy manewrowej</option>
+                  <option value="sygnał Ms2 podany na tarczy manewrowej">
+                    sygnał Ms2 podany na tarczy manewrowej
+                  </option>
                 </select>
                 <input
                   type="text"
@@ -235,7 +261,8 @@
                   holder="nazwa tarczy"
                   v-if="order.rows[3].w5.returnWay.includes('tarczy')"
                 />
-                do godziny <input type="text" v-model="order.rows[3].w5.maxHour" holder="godzina" />
+                do godziny
+                <input type="text" v-model="order.rows[3].w5.maxHour" holder="godzina" />
               </div>
 
               <textarea id="" cols="30" rows="10" v-model="order.rows[3].content" v-else></textarea>
@@ -276,10 +303,13 @@ export default defineComponent({
         let message = `zezwalam po otrzymaniu ${row.option1 || '_'}`;
 
         if (row.radio1 == 'radio-1a-1')
-          message += ` przejechać obok wskazującego sygnał "Stój" semafora ${row.optionSignal || '_'} ${
+          message += ` przejechać obok wskazującego sygnał "Stój" semafora ${
-            row.signal1 || '_'
+            row.optionSignal || '_'
-          }`;
+          } ${row.signal1 || '_'}`;
-        else message += ` wyjechać z toru nr ${row.trackNo || '_'} nie posiadającego semafora wyjazdowego`;
+        else
+          message += ` wyjechać z toru nr ${
+            row.trackNo || '_'
+          } nie posiadającego semafora wyjazdowego`;
 
         return message;
       },
@@ -300,7 +330,9 @@ export default defineComponent({
             message += `odstępowego ${row.signal3 || '_'}`;
             break;
           case 'toru':
-            message += `wjechać z zamkniętego toru nr ${row.trackNo || '_'} nie posiadającego semafora wjazdowego`;
+            message += `wjechać z zamkniętego toru nr ${
+              row.trackNo || '_'
+            } nie posiadającego semafora wjazdowego`;
             break;
 
           default:
@@ -326,7 +358,12 @@ export default defineComponent({
           const { borderType, trackNo, maxHour, maxKm, returnWay, tmName } = row.w5;
           const textArray = [];
 
-          textArray.push('Inne: zezwalam na wyjazd poza', borderType || '_', 'po torze szlakowym nr', trackNo || '_');
+          textArray.push(
+            'Inne: zezwalam na wyjazd poza',
+            borderType || '_',
+            'po torze szlakowym nr',
+            trackNo || '_'
+          );
           if (maxKm) textArray.push(`do kilometra ${maxKm}`);
           textArray.push('.');
           textArray.push('Powrót odbędzie się na', returnWay || '_');
@@ -337,13 +374,13 @@ export default defineComponent({
         }
 
         return `Inne: ${row.content}`;
-      },
+      }
     ];
 
     return {
       store,
       order,
-      rowMethods,
+      rowMethods
     };
   },
 
@@ -360,15 +397,15 @@ export default defineComponent({
       deep: true,
       handler() {
         this.generateMessage();
-      },
+      }
     },
 
     'order.rows': {
       deep: true,
       handler() {
         this.updatePlaceholders();
-      },
+      }
-    },
+    }
   },
 
   methods: {
@@ -397,8 +434,8 @@ export default defineComponent({
       this.$nextTick(() => {
         handleOrderPlaceholders(isRowEnabled, rowRef);
       });
-    },
+    }
-  },
+  }
 });
 </script>
 
@@ -409,4 +446,3 @@ textarea {
   resize: none;
 }
 </style>
-

src/components/OrderTrainPicker.vue

@@ -4,7 +4,11 @@
       <label for="dispatcher-select">
         <select name="dispatcher-select" id="dispatcher-select" v-model="selectedDispatcherName">
           <option :value="null" disabled>Nick dyżurnego</option>
-          <option v-for="dispatcherName in dispatcherNameList" :value="dispatcherName">
+          <option
+            v-for="dispatcherName in dispatcherNameList"
+            :value="dispatcherName"
+            :key="dispatcherName"
+          >
             {{ dispatcherName }}
           </option>
         </select>
@@ -15,10 +19,10 @@
           name="scenery-select"
           id="scenery-select"
           v-model="selectedSceneryName"
-          :disabled="sceneryNameList.length == 0"
+          :disabled="!sceneryNameList || sceneryNameList.length == 0"
         >
           <option :value="null" disabled>Sceneria</option>
-          <option :value="sceneryName" v-for="sceneryName in sceneryNameList">
+          <option :value="sceneryName" v-for="sceneryName in sceneryNameList" :key="sceneryName">
             {{ sceneryName }}
           </option>
         </select>
@@ -29,43 +33,62 @@
           name="checkpoint-select"
           id="checkpoint-select"
           v-model="selectedCheckpointName"
-          :disabled="sceneryNameList.length == 0"
+          :disabled="!sceneryNameList || sceneryNameList.length == 0"
         >
           <option :value="null" disabled>Posterunek</option>
-          <option :value="cp" v-for="cp in checkpointNameList">
+          <option :value="cp" v-for="cp in checkpointNameList" :key="cp">
             {{ cp }}
           </option>
         </select>
       </label>
 
       <label for="fill-checkpoint" class="g-checkbox">
-        <input type="checkbox" name="fill-checkpoint" id="fill-checkpoint" v-model="fillCheckpointName" />
+        <input
+          type="checkbox"
+          name="fill-checkpoint"
+          id="fill-checkpoint"
+          v-model="fillCheckpointName"
+        />
         <span> Uzupełniaj skrót post.</span>
       </label>
     </div>
 
     <div class="content">
-      <b v-if="!selectedSceneryName" class="text--accent"> Wybierz dyżurnego oraz scenerię, aby zobaczyć pociągi </b>
+      <b v-if="!selectedSceneryName" class="text--accent">
+        Wybierz dyżurnego oraz scenerię, aby zobaczyć pociągi
+      </b>
 
       <div v-else>
         <b class="text--accent">Kliknij na gracza, aby wypełnić obecny rozkaz jego danymi</b>
 
         <p>Gracze online bez RJ</p>
         <ul class="train-list">
-          <li v-for="train in sceneryTrains" @click="fillOrder(train.trainNo)">
+          <li
+            v-for="train in sceneryTrains"
+            :key="train.trainNo + train.driverName"
+            @click="fillOrder(train.trainNo)"
+          >
             <b>{{ train.trainNo }} | {{ train.driverName }}</b>
           </li>
 
-          <li class="no-trains" v-if="sceneryTrains.length == 0 && selectedSceneryName">Brak graczy</li>
+          <li class="no-trains" v-if="sceneryTrains?.length == 0 && selectedSceneryName">
+            Brak graczy
+          </li>
         </ul>
 
         <p>Aktywne rozkłady jazdy</p>
         <ul class="train-list">
-          <li v-for="train in sceneryScheduledTrains" @click="fillOrder(train.trainNo)">
+          <li
+            v-for="train in sceneryScheduledTrains"
+            :key="train.trainNo + train.driverName"
+            @click="fillOrder(train.trainNo)"
+          >
             <b>{{ train.trainNo }} | {{ train.driverName }}</b>
           </li>
 
-          <li class="no-trains" v-if="sceneryScheduledTrains.length == 0">Brak aktywnych rozkładów</li>
+          <li class="no-trains" v-if="sceneryScheduledTrains?.length == 0">
+            Brak aktywnych rozkładów
+          </li>
         </ul>
       </div>
     </div>
@@ -74,20 +97,23 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import axios from 'axios';
-import { ApiSWDR, ApiStacjownik } from '../types/apiTypes';
 import { useStore } from '../store/store';
-import { currentFormattedDate, currentFormattedHours, currentFormattedMinutes } from '../utils/dateUtils';
+import {
-import { ISceneryOnline, ISceneryData } from '../types/dataTypes';
+  currentFormattedDate,
+  currentFormattedHours,
+  currentFormattedMinutes
+} from '../utils/dateUtils';
+import http from '../http';
+import { ISceneryData } from '../types/dataTypes';
+import { API } from '../types/apiTypes';
 
 export default defineComponent({
   name: 'order-train-picker',
 
   data() {
     return {
-      sceneriesData: [] as ISceneryData[],
+      sceneriesData: undefined as ISceneryData[] | undefined,
-      sceneriesOnline: [] as ISceneryOnline[],
+      activeData: undefined as API.ActiveData.Response | undefined,
-      trainsOnline: [] as ApiStacjownik.IActiveTrain[],
 
       selectedSceneryName: null as string | null,
       selectedDispatcherName: null as string | null,
@@ -96,7 +122,7 @@ export default defineComponent({
       fillCheckpointName: false,
 
       refreshInterval: -1,
-      store: useStore(),
+      store: useStore()
     };
   },
 
@@ -107,10 +133,10 @@ export default defineComponent({
   },
 
   activated() {
-    this.fetchOnlineData();
+    this.fetchActiveData();
 
     this.refreshInterval = window.setInterval(() => {
-      this.fetchOnlineData();
+      this.fetchActiveData();
     }, 35 * 1000);
   },
 
@@ -120,34 +146,41 @@ export default defineComponent({
 
   watch: {
     selectedDispatcherName() {
+      if (!this.sceneryNameList) return null;
+
       this.selectedSceneryName = this.sceneryNameList.length == 0 ? null : this.sceneryNameList[0];
     },
 
     selectedSceneryName() {
-      this.selectedCheckpointName = this.checkpointNameList.length == 0 ? null : this.checkpointNameList[0];
+      this.selectedCheckpointName =
+        this.checkpointNameList.length == 0 ? null : this.checkpointNameList[0];
     },
 
     fillCheckpointName(val: boolean) {
       window.localStorage.setItem('fill-checkpoint', `${val}`);
-    },
+    }
   },
 
   computed: {
     selectedSceneryHash() {
-      return this.sceneriesOnline.find((s) => this.selectedSceneryName == s.stationName)?.stationHash;
+      return this.activeData?.activeSceneries?.find(
+        (s) => this.selectedSceneryName == s.stationName
+      )?.stationHash;
     },
 
     sceneriesOnlinePL1() {
-      return this.sceneriesOnline.filter((s) => s.region == 'eu' && s.isOnline);
+      return this.activeData?.activeSceneries?.filter((s) => s.region == 'eu' && s.isOnline);
     },
 
     dispatcherNameList() {
-      return [...new Set(this.sceneriesOnlinePL1.map((s) => s.dispatcherName))].sort((a, b) =>
+      return [...new Set(this.sceneriesOnlinePL1?.map((s) => s.dispatcherName))].sort((a, b) =>
         a.toLocaleLowerCase() < b.toLocaleLowerCase() ? -1 : 1
       );
     },
 
     sceneryNameList() {
+      if (!this.sceneriesOnlinePL1) return [];
+
       return this.sceneriesOnlinePL1
         .filter((s) => s.dispatcherName == this.selectedDispatcherName)
         .map((s) => s.stationName)
@@ -158,7 +191,7 @@ export default defineComponent({
       if (!this.selectedSceneryName) return [];
 
       const name = this.selectedSceneryName;
-      const checkpoints = this.sceneriesData.find(
+      const checkpoints = this.sceneriesData?.find(
         (s) => s.name.toLocaleLowerCase() == name.toLocaleLowerCase()
       )?.checkpoints;
 
@@ -168,8 +201,12 @@ export default defineComponent({
     },
 
     sceneryTrains() {
-      return this.trainsOnline.filter(
+      return this.activeData?.trains?.filter(
-        (t) => t.online && t.currentStationName == this.selectedSceneryName && this.selectedSceneryName && !t.timetable
+        (t) =>
+          t.online &&
+          t.currentStationName == this.selectedSceneryName &&
+          this.selectedSceneryName &&
+          !t.timetable
       );
     },
 
@@ -177,44 +214,23 @@ export default defineComponent({
       if (!this.selectedSceneryHash) return [];
       const hash = this.selectedSceneryHash;
 
-      return this.trainsOnline
+      return this.activeData?.trains
-        .filter((t) => t.timetable?.sceneries.includes(hash))
+        ?.filter((t) => t.timetable?.sceneries.includes(hash))
         .sort((t1, t2) => t1.trainNo - t2.trainNo);
-    },
+    }
   },
 
   methods: {
     async fetchSceneriesData() {
-      const data: ISceneryData[] = await (await axios.get(`${import.meta.env['VITE_APP_API_URL']}/getSceneries`)).data;
+      const data: ISceneryData[] = (await http.get<ISceneryData[]>('api/getSceneries')).data;
-
-      if (!data) return;
 
       this.sceneriesData = data;
     },
 
-    async fetchOnlineData() {
+    async fetchActiveData() {
-      this.fetchSceneriesOnline();
+      const data: API.ActiveData.Response = await (await http.get('api/getActiveData')).data;
-      this.fetchTrainsOnline();
-    },
 
-    async fetchSceneriesOnline() {
+      this.activeData = data;
-      const data: ApiSWDR.IStationsOnline = await (
-        await axios.get(`${import.meta.env['VITE_APP_SWDR_URL']}/?method=getStationsOnline`)
-      ).data;
-
-      if (!data.success) return;
-
-      this.sceneriesOnline = data.message;
-    },
-
-    async fetchTrainsOnline() {
-      const data: ApiStacjownik.IActiveTrain[] = await (
-        await axios.get(`${import.meta.env['VITE_APP_API_URL']}/getActiveTrainList`)
-      ).data;
-
-      if (!data) return;
-
-      this.trainsOnline = data;
     },
 
     fillOrder(trainNo: number) {
@@ -225,18 +241,22 @@ export default defineComponent({
       chosenOrder.header.date = currentFormattedDate();
 
       this.store.orderFooter.dispatcherName = this.selectedDispatcherName;
-      this.store.orderFooter.stationName = this.selectedCheckpointName?.split(',')[0] || this.selectedSceneryName;
+      this.store.orderFooter.stationName =
+        this.selectedCheckpointName?.split(',')[0] || this.selectedSceneryName;
       this.store.orderFooter.hour = currentFormattedHours();
       this.store.orderFooter.minutes = currentFormattedMinutes();
 
       if (this.fillCheckpointName) {
-        const sceneryAbbrev = this.sceneriesData.find(({ name }) => name === this.selectedSceneryName)?.abbr;
+        const sceneryAbbrev = this.sceneriesData?.find(
-        this.store.orderFooter.checkpointName = sceneryAbbrev || this.store.orderFooter.stationName.slice(0, 2);
+          ({ name }) => name === this.selectedSceneryName
+        )?.abbr;
+        this.store.orderFooter.checkpointName =
+          sceneryAbbrev || this.store.orderFooter.stationName.slice(0, 2);
       }
 
       this.store.orderMode = 'OrderMessage';
-    },
+    }
-  },
+  }
 });
 </script>
 
@@ -314,4 +334,3 @@ ul.train-list {
   }
 }
 </style>
-

src/components/SideBar.vue

@@ -31,22 +31,22 @@ export default defineComponent({
       orderTypeList: [
         {
           id: 'orderN',
-          name: 'N',
+          name: 'N'
         },
         {
           id: 'orderS',
-          name: 'S',
+          name: 'S'
         },
         {
           id: 'orderO',
-          name: 'O',
+          name: 'O'
-        },
+        }
-      ],
+      ]
     };
   },
   setup() {
     return {
-      store: useStore(),
+      store: useStore()
     };
   },
 
@@ -55,8 +55,8 @@ export default defineComponent({
       if (type != this.store.chosenOrderType) this.store.chosenLocalOrderId = '';
 
       this.store.chosenOrderType = type;
-    },
+    }
-  },
+  }
 });
 </script>
 
@@ -143,4 +143,3 @@ button.option-save {
   }
 }
 </style>
-

src/data/orderHelperData.json

@@ -1,5 +1,3 @@
 {
-  "orderS": [
+  "orderS": ["D"]
-    "D"
-  ]
 }

src/handlers/orderPlaceholderHandler.ts

@@ -13,8 +13,10 @@ export const handleOrderPlaceholders = (isRowEnabled: boolean, rowRef: HTMLTable
     if (!node.getAttribute('holder')) return;
     const radioCheckedAttr = node.getAttribute('radio-checked');
 
-    if (radioCheckedAttr == null) return node.setAttribute('placeholder', node.getAttribute('holder')!);
+    if (radioCheckedAttr == null)
-    if (radioCheckedAttr == 'true') return node.setAttribute('placeholder', node.getAttribute('holder')!);
+      return node.setAttribute('placeholder', node.getAttribute('holder')!);
+    if (radioCheckedAttr == 'true')
+      return node.setAttribute('placeholder', node.getAttribute('holder')!);
     if (node.getAttribute('placeholder') == null) return;
 
     node.setAttribute('holder', node.getAttribute('placeholder')!);

src/http.ts

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+const http = axios.create({
+  baseURL: 'https://stacjownik.spythere.eu'
+});
+
+export default http;

src/main.ts

@@ -4,4 +4,3 @@ import router from './router';
 import { createPinia } from 'pinia';
 
 createApp(App).use(router).use(createPinia()).mount('#app');
-

src/mixins/orderFooterMixin.ts

@@ -4,7 +4,7 @@ import { useStore } from '../store/store';
 export default defineComponent({
   setup() {
     return {
-      store: useStore(),
+      store: useStore()
     };
   },
 
@@ -25,7 +25,6 @@ export default defineComponent({
       this.store.footerMessage = ` <b>|</b> ${messageArray.join(
         ', '
       )} <b>|</b> Rozkaz otrzymałem, maszynista: (potwierdzić otrzymanie rozkazu)`;
-    },
+    }
-  },
+  }
 });
-

src/mixins/orderStorageMixin.ts

@@ -5,7 +5,7 @@ import { LocalStorageOrder } from '../types/orderTypes';
 export default defineComponent({
   setup() {
     return {
-      store: useStore(),
+      store: useStore()
     };
   },
 
@@ -23,12 +23,12 @@ export default defineComponent({
     },
 
     saveLocalOrder() {
-      let orderObj: LocalStorageOrder = {
+      const orderObj: LocalStorageOrder = {
         id: '',
         orderType: this.store.chosenOrderType,
         orderBody: this.store[this.store.chosenOrderType],
         orderFooter: this.store.orderFooter,
-        createdAt: Date.now(),
+        createdAt: Date.now()
       };
 
       const headerInfo = orderObj['orderBody']['header'];
@@ -64,12 +64,12 @@ export default defineComponent({
 
       if (!localOrder) return -1;
 
-      let orderObj: LocalStorageOrder = {
+      const orderObj: LocalStorageOrder = {
         id: this.store.chosenLocalOrderId,
         orderType: this.store.chosenOrderType,
         orderBody: this.store[this.store.chosenOrderType],
         orderFooter: this.store.orderFooter,
-        updatedAt: Date.now(),
+        updatedAt: Date.now()
       };
 
       window.localStorage.setItem(this.store.chosenLocalOrderId, JSON.stringify(orderObj));
@@ -98,8 +98,8 @@ export default defineComponent({
         case 'orderN':
         case 'orderS':
           storeOrderObj = this.store[order.orderType];
-          for (let orderKey in storeOrderObj) {
+          for (const orderKey in storeOrderObj) {
-            for (let propKey in (storeOrderObj as any)[orderKey]) {
+            for (const propKey in (storeOrderObj as any)[orderKey]) {
               (storeOrderObj as any)[orderKey][propKey] = localOrderBody[orderKey][propKey];
             }
           }
@@ -116,7 +116,7 @@ export default defineComponent({
           for (let i = 0; i < storeOrderObj['orderList'].length; i++) {
             const orderItem = storeOrderObj['orderList'][i];
 
-            for (let prop in orderItem) {
+            for (const prop in orderItem) {
               (storeOrderObj['orderList'][i] as any)[prop] = localOrderBody['orderList'][i][prop];
             }
           }
@@ -124,12 +124,11 @@ export default defineComponent({
           break;
       }
 
-      for (let key in this.store.orderFooter) {
+      for (const key in this.store.orderFooter) {
         (this.store.orderFooter as any)[key] = localOrderFooter[key];
       }
 
       this.store.orderMode = 'OrderMessage';
-    },
+    }
-  },
+  }
 });
-

src/mixins/orderValidationMixin.ts

@@ -4,7 +4,7 @@ import { useStore } from '../store/store';
 export default defineComponent({
   setup() {
     return {
-      store: useStore(),
+      store: useStore()
     };
   },
 
@@ -27,9 +27,6 @@ export default defineComponent({
         fieldsToCorrect.push('dyżurny ruchu (lub z polecenia dyżurnego ruchu)');
 
       return fieldsToCorrect;
-    },
+    }
-  },
+  }
 });
-
-
-

src/router/index.ts

@@ -1,17 +1,17 @@
-import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
-import Home from '../views/Home.vue'
+import Home from '../views/Home.vue';
 
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
     name: 'Home',
     component: Home
-  },
+  }
-]
+];
 
 const router = createRouter({
   history: createWebHistory(),
   routes
-})
+});
 
-export default router
+export default router;

src/store/store.ts

@@ -1,6 +1,10 @@
 import { defineStore } from 'pinia';
 import { IOrderN, IOrderO, IOrderS, TOrder } from '../types/orderTypes';
-import { currentFormattedDate, currentFormattedHours, currentFormattedMinutes } from '../utils/dateUtils';
+import {
+  currentFormattedDate,
+  currentFormattedHours,
+  currentFormattedMinutes
+} from '../utils/dateUtils';
 
 export const useStore = defineStore('store', {
   state: () => {
@@ -18,7 +22,7 @@ export const useStore = defineStore('store', {
         hour: currentFormattedHours(),
         minutes: currentFormattedMinutes(),
         dispatcherName: '',
-        secondaryDispatcherName: '',
+        secondaryDispatcherName: ''
       },
 
       orderMessage: '',
@@ -28,7 +32,7 @@ export const useStore = defineStore('store', {
         header: {
           orderNo: '1',
           trainNo: '',
-          date: currentFormattedDate(),
+          date: currentFormattedDate()
         },
 
         orderList: [
@@ -38,7 +42,7 @@ export const useStore = defineStore('store', {
             to: '',
             vmax: '',
             jo: false,
-            reason: '',
+            reason: ''
           },
           {
             name: '',
@@ -46,7 +50,7 @@ export const useStore = defineStore('store', {
             to: '',
             vmax: '',
             jo: false,
-            reason: '',
+            reason: ''
           },
           {
             name: '',
@@ -54,7 +58,7 @@ export const useStore = defineStore('store', {
             to: '',
             vmax: '',
             jo: false,
-            reason: '',
+            reason: ''
           },
           {
             name: '',
@@ -62,7 +66,7 @@ export const useStore = defineStore('store', {
             to: '',
             vmax: '',
             jo: false,
-            reason: '',
+            reason: ''
           },
           {
             name: '',
@@ -70,17 +74,17 @@ export const useStore = defineStore('store', {
             to: '',
             vmax: '',
             jo: false,
-            reason: '',
+            reason: ''
-          },
+          }
         ],
-        other: '',
+        other: ''
       } as IOrderO,
 
       orderN: {
         header: {
           orderNo: '1',
           trainNo: '',
-          date: currentFormattedDate(),
+          date: currentFormattedDate()
         },
 
         rows: [
@@ -89,7 +93,7 @@ export const useStore = defineStore('store', {
             from: '',
             to: '',
             trackNo: '',
-            trackNo2: '',
+            trackNo2: ''
           },
           {
             enabled: false,
@@ -105,7 +109,7 @@ export const useStore = defineStore('store', {
             direction2: '',
             trackNoFrom: '',
             trackNoTo1: '',
-            trackNoTo2: '',
+            trackNoTo2: ''
           },
           {
             enabled: false,
@@ -116,7 +120,7 @@ export const useStore = defineStore('store', {
             toKilometer: '',
             trackNo: '',
             untilHour: '',
-            untilMin: '',
+            untilMin: ''
           },
           {
             enabled: false,
@@ -124,7 +128,7 @@ export const useStore = defineStore('store', {
             optionStation: 'stację',
             stationName: '',
             checkbox: 'checkbox-4a',
-            side: 'lewej',
+            side: 'lewej'
           },
           {
             enabled: false,
@@ -132,9 +136,9 @@ export const useStore = defineStore('store', {
             direction: '',
             stationType: 'stację',
             stationName: '',
-            on: '',
+            on: ''
-          },
+          }
-        ],
+        ]
       } as IOrderN,
 
       orderS: {
@@ -142,7 +146,7 @@ export const useStore = defineStore('store', {
           orderNo: '1',
           trainNo: '',
           for: 'pociągu',
-          date: currentFormattedDate(),
+          date: currentFormattedDate()
         },
 
         rows: [
@@ -152,7 +156,7 @@ export const useStore = defineStore('store', {
             optionSignal: 'wyjazdowego',
             radio1: 'radio-1a-1',
             signal1: '',
-            trackNo: '',
+            trackNo: ''
           },
 
           {
@@ -161,7 +165,7 @@ export const useStore = defineStore('store', {
             signal1: '',
             signal2: '',
             signal3: '',
-            trackNo: '',
+            trackNo: ''
           },
 
           {
@@ -171,7 +175,7 @@ export const useStore = defineStore('store', {
             trackNo: '',
             trainNo: '',
             arrivedTo: '',
-            hour: '',
+            hour: ''
           },
 
           {
@@ -184,14 +188,11 @@ export const useStore = defineStore('store', {
               tmName: '',
               maxKm: '',
               returnWay: 'sygnał ręczny "Do mnie"',
-              trackNo: '',
+              trackNo: ''
-            },
+            }
-          },
+          }
-        ],
+        ]
-      } as IOrderS,
+      } as IOrderS
     };
-  },
+  }
 });
-
-
-

src/styles/anims.scss

@@ -10,4 +10,3 @@
     transform: translateY(100%);
   }
 }
-

src/styles/global.scss

@@ -195,4 +195,3 @@ label.g-checkbox {
     }
   }
 }
-

src/types/apiTypes.ts

@@ -1,117 +1,105 @@
-export declare module ApiSWDR {
+export declare module API {
-  export interface IStationsOnline {
+  export namespace ActiveData {
-    success: boolean;
+    export interface Response {
-    respCode: number;
+      activeSceneries?: API.ActiveSceneries.Response;
-    message: IStationsOnlineMessage[];
+      trains?: API.ActiveTrains.Response;
+    }
   }
 
-  export interface IStationsOnlineMessage {
+  export namespace ActiveSceneries {
-    dispatcherId: number;
+    export interface Data {
-    dispatcherName: string;
+      dispatcherId: number;
-    dispatcherIsSupporter: boolean;
+      dispatcherName: string;
-    stationName: string;
+      dispatcherIsSupporter: boolean;
-    stationHash: string;
+      stationName: string;
-    region: string;
+      stationHash: string;
-    maxUsers: number;
+      region: string;
-    currentUsers: number;
+      maxUsers: number;
-    spawn: number;
+      currentUsers: number;
-    lastSeen: any;
+      spawn: number;
-    dispatcherExp: number;
+      lastSeen: number;
-    nameFromHeader: string;
+      dispatcherExp: number;
-    spawnString: string;
+      nameFromHeader: string;
-    networkConnectionString: string;
+      spawnString: string | null;
-    isOnline: number;
+      networkConnectionString: string;
-    dispatcherRate: number;
+      isOnline: number;
+      dispatcherRate: number;
+      dispatcherStatus: number;
+    }
+
+    export type Response = Data[];
   }
 
-  // export interface ITrainsOnline {
+  export namespace ActiveTrains {
-  //   success: boolean;
+    export type Response = Data[];
-  //   respCode: number;
-  //   message: ITrainsOnlineMessage[];
-  // }
 
-  // export interface ITrainsOnlineMessage {
+    export interface Data {
-  //   trainNo: number;
+      trainNo: number;
-  //   driverId: number;
-  //   driverName: string;
-  //   driverIsSupporter: boolean;
-  //   dataSignal: string;
-  //   dataSceneryConnection: string;
-  //   dataDistance: number;
-  //   dataCon: string;
-  //   dataSpeed: number;
-  //   dataMass: number;
-  //   dataLength: number;
-  //   region: string;
-  //   isOnline: number;
-  //   lastSeen: number;
-  //   station?: ISceneryData;
-  // }
-}
 
-export declare module ApiStacjownik {
+      mass: number;
-  export interface IActiveTrain {
+      length: number;
-    trainNo: number;
+      speed: number;
+      stockString: string;
 
-    mass: number;
+      signal: string;
-    length: number;
+      distance: number;
-    speed: number;
+      connectedTrack: string;
 
-    signal: string;
+      driverName: string;
-    distance: number;
+      driverId: number;
-    connectedTrack: string;
+      driverIsSupporter: boolean;
-    stockString: string;
+      driverLevel?: number;
 
-    driverName: string;
+      currentStationName: string;
-    driverId: number;
+      currentStationHash?: string;
-    driverIsSupporter: boolean;
 
-    currentStationName: string;
+      online: number;
-    currentStationHash?: string;
+      lastSeen: number;
 
-    online: boolean;
+      region: string;
-    lastSeen: number;
+      isTimeout: boolean;
 
-    region: string;
+      timetable?: Timetable;
+    }
 
-    timetable?: {
+    export interface TimetableStop {
+      stopName: string;
+      stopNameRAW: string;
+      stopType: string;
+      stopDistance: number;
+      pointId: string;
+
+      mainStop: boolean;
+
+      arrivalLine: string | null;
+      arrivalTimestamp: number;
+      arrivalRealTimestamp: number;
+      arrivalDelay: number;
+
+      departureLine: string | null;
+      departureTimestamp: number;
+      departureRealTimestamp: number;
+      departureDelay: number;
+
+      comments?: any;
+
+      beginsHere: boolean;
+      terminatesHere: boolean;
+      confirmed: number;
+      stopped: number;
+      stopTime: number | null;
+    }
+
+    export interface Timetable {
       timetableId: number;
       category: string;
       route: string;
-      stopList: IActiveTrainStop[];
+
+      stopList: TimetableStop[];
+
       TWR: boolean;
       SKR: boolean;
       sceneries: string[];
-    };
+    }
-
-    isTimeout: boolean;
   }
-
+}
-  export interface IActiveTrainStop {
-    stopName: string;
-    stopNameRAW: string;
-    stopType: string;
-    stopDistance: number;
-    pointId: number;
-
-    mainStop: boolean;
-
-    arrivalLine: string;
-    arrivalTimestamp: number;
-    arrivalRealTimestamp: number;
-    arrivalDelay: number;
-
-    departureLine: string;
-    departureTimestamp: number;
-    departureRealTimestamp: number;
-    departureDelay: number;
-
-    comments?: any;
-
-    beginsHere: boolean;
-    terminatesHere: boolean;
-    confirmed: boolean;
-    stopped: boolean;
-    stopTime: number;
-  }
-} 

src/types/dataTypes.ts

@@ -50,5 +50,3 @@ export interface ISceneryData {
 //   lastSeen: number;
 //   station?: ISceneryData;
 // }
-
-

src/types/orderTypes.ts

@@ -173,5 +173,3 @@ export interface IOrderO {
 
   other: string;
 }
-
-

src/utils/dateUtils.ts

@@ -1,5 +1,11 @@
 export function currentFormattedDate() {
-  return new Date().toLocaleDateString('pl-PL', { day: 'numeric', month: 'numeric', year: 'numeric' }) + 'r.';
+  return (
+    new Date().toLocaleDateString('pl-PL', {
+      day: 'numeric',
+      month: 'numeric',
+      year: 'numeric'
+    }) + 'r.'
+  );
 }
 
 export function currentFormattedMinutes() {
@@ -10,4 +16,3 @@ export function currentFormattedMinutes() {
 export function currentFormattedHours() {
   return new Date().toLocaleTimeString('pl-PL', { hour: '2-digit' });
 }
-

src/views/Home.vue

@@ -10,7 +10,7 @@
 
       <div class="message_container">
         <div class="message_nav">
-          <span v-for="(action, i) in navActions">
+          <span v-for="(action, i) in navActions" :key="action.mode">
             <b v-if="i > 0">&bull;</b>
 
             <button
@@ -51,29 +51,29 @@ export default defineComponent({
       navActions: [
         {
           mode: 'OrderMessage',
-          value: 'TREŚĆ ROZKAZU',
+          value: 'TREŚĆ ROZKAZU'
         },
         {
           mode: 'OrderList',
-          value: 'ZAPISANE ROZKAZY',
+          value: 'ZAPISANE ROZKAZY'
         },
         {
           mode: 'OrderTrainPicker',
-          value: 'POCIĄGI',
+          value: 'POCIĄGI'
-        },
+        }
-      ],
+      ]
     };
   },
 
   methods: {
     selectOrderMode(mode: string) {
       this.store.orderMode = mode;
-    },
+    }
   },
 
   setup() {
     return {
-      store: useStore(),
+      store: useStore()
     };
   },
 
@@ -89,8 +89,8 @@ export default defineComponent({
         default:
           return OrderMessage;
       }
-    },
+    }
-  },
+  }
 });
 </script>
 
@@ -152,4 +152,3 @@ export default defineComponent({
   }
 }
 </style>
-

src/vite-env.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />
 
 declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
+  import type { DefineComponent } from 'vue';
-  const component: DefineComponent<{}, {}, any>
+  const component: DefineComponent<{}, {}, any>;
-  export default component
+  export default component;
 }