refactor: added translations

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "axios": "^1.6.2",
+    "lucide-vue-next": "^0.525.0",
     "pinia": "^2.1.7",
     "vue": "^3.3.11",
     "vue-i18n": "11",

src/components/OrderList.vue

@@ -1,10 +1,10 @@
 <template>
   <section class="order-list">
-    <h3>Zapisane rozkazy pisemne ({{ localOrderList.length }})</h3>
+    <h3>{{ $t('order-list.title') }} ({{ 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!
+        {{ $t('order-list.no-saved-orders') }}
       </li>
 
       <li
@@ -14,8 +14,13 @@
       >
         <b class="text--accent">#{{ order.id.split('-')[1] }}&nbsp;</b>
         <b>
-          {{ getOrderName(order.orderType) }} nr {{ order.orderBody['header']['orderNo'] }} dla
-          pociągu nr {{ order.orderBody['header']['trainNo'] }}
+          {{
+            $t('order-list.order-title', {
+              orderName: getOrderName(order.orderType),
+              orderNo: order.orderBody['header']['orderNo'],
+              trainNo: order.orderBody['header']['trainNo']
+            })
+          }}
         </b>
         <span
           v-if="!order.orderVersion || order.orderVersion != ORDER_VERSION"
@@ -25,14 +30,18 @@
           >&#9888;
         </span>
         <br />
-        {{ order.createdAt ? 'Dodano: ' : 'Zaktualizowano: ' }}
+        {{ $t(`order-list.order-${order.createdAt ? 'added' : 'updated'}`) }}
         {{ new Date(order.createdAt || order.updatedAt || 0).toLocaleString('pl-PL') }}
 
         <hr />
 
         <div class="buttons">
-          <button class="g-button" @click="selectLocalOrder(order)">Wybierz</button>
-          <button class="g-button" @click="removeOrder(order)">Usuń</button>
+          <button class="g-button" @click="selectLocalOrder(order)">
+            {{ $t('order-list.button-order-select') }}
+          </button>
+          <button class="g-button" @click="removeOrder(order)">
+            {{ $t('order-list.button-order-remove') }}
+          </button>
         </div>
       </li>
     </transition-group>
@@ -65,7 +74,7 @@ export default defineComponent({
 
   methods: {
     getOrderName(orderType: string) {
-      return `Rozkaz "${orderType.split('order')[1]}"`;
+      return orderType.split('order')[1];
     },
 
     removeOrder(order: LocalStorageOrder) {

src/components/OrderMessage.vue

@@ -1,22 +1,25 @@
 <template>
   <section class="order-message">
-    <h3>Wiadomość do wyświetlenia na czacie symulatora:</h3>
+    <h3>{{ $t('order-message.title') }}</h3>
 
     <div class="message_body" v-html="orderMessagePreview"></div>
     <p class="message_info">
-      Po wygenerowaniu rozkazu skopiuj jego treść lub zapisz w pamięci przeglądarki za pomocą
-      przycisków poniżej
+      {{ $t('order-message.info') }}
     </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" @click="saveOrder">
+        {{ $t('order-message.button-save') }}
+      </button>
+      <button class="g-button action" @click="copyMessage">
+        {{ $t('order-message.button-copy') }}
+      </button>
       <button
         class="g-button action"
         :data-disabled="!store.chosenLocalOrderId"
         @click="updateOrder"
       >
-        Zaktualizuj rozkaz
+        {{ $t('order-message.button-update') }}
         <span class="text--accent"
           >{{ store.chosenLocalOrderId && `#${store.chosenLocalOrderId.split('-')[1]}` }}
         </span>
@@ -32,7 +35,7 @@
           v-model="store.orderDarkMode"
           @change="onCheckboxChange"
         />
-        <span>Ciemny motyw rozkazu</span>
+        <span>{{ $t('order-options.dark-mode') }}</span>
       </label>
 
       <label for="copy-increment" class="g-checkbox">
@@ -43,7 +46,7 @@
           v-model="incrementOnCopy"
           @change="onCheckboxChange"
         />
-        <span>Aktualizuj numer rozkazu po skopiowaniu</span>
+        <span>{{ $t('order-options.update-number-on-copy') }}</span>
       </label>
 
       <label for="save-increment" class="g-checkbox">
@@ -54,7 +57,7 @@
           v-model="incrementOnSave"
           @change="onCheckboxChange"
         />
-        <span>Aktualizuj numer rozkazu po zapisaniu</span>
+        <span>{{ $t('order-options.update-number-on-save') }}</span>
       </label>
 
       <label for="update-date" class="g-checkbox">
@@ -65,7 +68,7 @@
           v-model="updateDate"
           @change="onCheckboxChange"
         />
-        <span>Aktualizuj godziny przy edycji</span>
+        <span>{{ $t('order-options.update-hours') }}</span>
       </label>
     </div>
 
@@ -170,27 +173,25 @@ export default defineComponent({
 
     copyMessage() {
       if (!navigator.clipboard)
-        return this.showActionMonit(
-          'Ups! Twoja przeglądarka musi być dosyć przestarzała, ponieważ nie obsługuje zapisu do schowka! :/'
-        );
+        return this.showActionMonit(this.$t('order-message.warning-outdated-clipboard'));
 
       const hasAtLeastOneRow = /(\[ \d \])/g.test(this.fullOrderMessage);
       const hasAllInputsFilled = !/_/g.test(this.store.orderMessage);
 
       if (!hasAllInputsFilled)
         return this.showActionMonit(
-          `<span class="text--warn">Wypełnij puste rubryki rozkazu przed jego skopiowaniem!</span>`
+          `<span class="text--warn">${this.$t('order-message.warning-fill-inputs')}</span>`
         );
       if (!hasAtLeastOneRow)
         return this.showActionMonit(
-          `<span class="text--warn">Dodaj co najmniej jedną działkę rozkazu przed jego skopiowaniem!</span>`
+          `<span class="text--warn">${this.$t('order-message.warning-add-rows')}</span>`
         );
 
       const fieldsToCorrect = this.verifyOrderFields();
 
       if (fieldsToCorrect.length > 0)
         return this.showActionMonit(
-          `<span class="text--warn">Uzupełnij następujące rubryki na dole rozkazu przed jego skopiowaniem: ${fieldsToCorrect.join(
+          `<span class="text--warn">${this.$t('order-message.warning-fill-footer')} ${fieldsToCorrect.join(
             ', '
           )}</span>`
         );
@@ -199,9 +200,7 @@ export default defineComponent({
 
       if (this.incrementOnCopy) this.incrementOrderNo();
 
-      this.showActionMonit(
-        '<b class="text--accent">Skopiowano!</b> Możesz teraz wkleić treść rozkazu na czacie symulatora!'
-      );
+      this.showActionMonit(this.$t('order-message.success-copy-html'));
     },
 
     saveOrder() {
@@ -210,18 +209,16 @@ export default defineComponent({
       switch (savedOrderStatus) {
         case -1:
           this.showActionMonit(
-            '<span class="text--warn">Wypełnij numer rozkazu, numer pociągu i datę zanim dodasz rozkaz!</span>'
+            `<span class="text--warn">${this.$t('order-message.warning-fill-top')}</span>`
           );
           break;
         case 0:
           this.showActionMonit(
-            '<span class="text--warn">Ostatni zapisany rozkaz jest identyczny z obecnym!</span>'
+            `<span class="text--warn">${this.$t('order-message.warning-order-identical')}</span>`
           );
           break;
         case 1:
-          this.showActionMonit(
-            'Zapisano treść <b class="text--accent">rozkazu</b> w pamięci przeglądarki!'
-          );
+          this.showActionMonit(this.$t('order-message.success-save-html'));
 
           if (this.incrementOnSave) this.incrementOrderNo();
           break;
@@ -237,18 +234,18 @@ export default defineComponent({
       switch (updatedOrderStatus) {
         case -1:
           this.showActionMonit(
-            '<span class="text--warn">Wystąpił błąd podczas aktualizowania tego rozkazu! :/</span>'
+            `<span class="text--warn">${this.$t('order-message.error-update')}</span>`
           );
           break;
 
         case 0:
           this.showActionMonit(
-            '<span class="text--warn">Nie wybrałeś żadnego zapisanego rozkazu!</span>'
+            `<span class="text--warn">${this.$t('order-message.warning-no-order-selected')}</span>`
           );
           break;
 
         case 1:
-          this.showActionMonit('Zaktualizowano treść <b class="text--accent">rozkazu</b>!');
+          this.showActionMonit(this.$t('order-message.success-update-html'));
           break;
       }
     }

src/components/OrderTrainPicker.vue

@@ -8,7 +8,9 @@
           v-model="selectedSceneryId"
           @change="selectOption"
         >
-          <option :value="null" disabled>Sceneria</option>
+          <option :value="null" disabled>
+            {{ $t('order-train-picker.placeholder-scenery-name') }}
+          </option>
           <option
             v-for="scenery in filteredSceneries"
             :value="`${scenery.stationName}|${scenery.stationHash}|${scenery.dispatcherName}|${scenery.region}`"
@@ -24,7 +26,9 @@
           v-model="selectedRegion"
           @change="selectOption"
         >
-          <option :value="null" disabled>Region</option>
+          <option :value="null" disabled>
+            {{ $t('order-train-picker.placeholder-region-name') }}
+          </option>
           <option v-for="region in regions" :value="region" :key="region">
             {{ getRegionNameById(region) }}
           </option>
@@ -44,7 +48,9 @@
         v-model="selectedCheckpointName"
         :disabled="!selectedScenery"
       >
-        <option :value="null" disabled>Posterunek</option>
+        <option :value="null" disabled>
+          {{ $t('order-train-picker.placeholder-checkpoint-name') }}
+        </option>
         <option :value="cp" v-for="cp in checkpointNameList" :key="cp">
           {{ cp }}
         </option>
@@ -57,19 +63,19 @@
           id="fill-checkpoint"
           v-model="fillCheckpointName"
         />
-        <span> Uzupełniaj skrót wybranego posterunku</span>
+        <span> {{ $t('order-train-picker.autofill-checkpoint-id') }}</span>
       </label>
     </div>
 
     <div class="content">
       <b v-if="!selectedSceneryId" class="text--accent">
-        Wybierz dyżurnego oraz scenerię, aby zobaczyć pociągi
+        {{ $t('order-train-picker.info') }}
       </b>
 
       <div v-else>
         <div style="margin-bottom: 0.5em">
-          <h3 style="margin-bottom: 0.5em">Aktywne RJ i gracze na scenerii</h3>
-          <b class="text--accent">Kliknij na gracza, aby wypełnić obecny rozkaz jego danymi</b>
+          <h3 style="margin-bottom: 0.5em">{{ $t('order-train-picker.title') }}</h3>
+          <b class="text--accent">{{ $t('order-train-picker.subtitle') }}</b>
         </div>
 
         <ul class="train-list">
@@ -84,18 +90,18 @@
                 class="online-indicator"
               ></span>
 
-              <b>
+              <span>
                 {{ train.driverName }} &bull;
                 <span v-if="train.timetable" style="color: gold">{{
                   train.timetable.category
                 }}</span>
                 {{ train.trainNo }}
-              </b>
+              </span>
             </button>
           </li>
 
           <li class="no-trains" v-if="sceneryTrains?.length == 0 && selectedSceneryId">
-            Brak graczy
+            {{ $t('order-train-picker.no-trains') }}
           </li>
         </ul>
       </div>
@@ -293,7 +299,7 @@ export default defineComponent({
   flex-direction: column;
   align-items: center;
   overflow: auto;
-  padding: 0 0.5em;
+  padding: 0.5em;
 }
 
 .options {

src/locales/en.json

@@ -1 +1,63 @@
-{}
+{
+   "locale": {
+      "pl": "POLISH",
+      "en": "ENGLISH"
+   },
+   "navbar": {
+      "order-message": "ORDER MESSAGE",
+      "order-list": "SAVED ORDERS",
+      "order-train-picker": "TRAINS"
+   },
+   "order-message": {
+      "title": "Message to display in the simulator's chatbox:",
+      "info": "Copy or save the content of the generated train order using buttons below:",
+      "button-save": "Save as new order",
+      "button-copy": "Copy the order message",
+      "button-update": "Update the order",
+      "warning-outdated-clipboard": "Oops! Your browser may be a little bit depraceted since it's not supporting saving data to the clipboard! :/",
+      "warning-fill-inputs": "Fill all the empty fields before copying the order!",
+      "warning-add-rows": "Add at least one row before copying the order!",
+      "warning-fill-footer": "Fill the following rows in the order's footer before copying it:",
+      "warning-fill-top": "Fill the order number, train number and date before saving it!",
+      "warning-order-identical": "Last saved order is identical as the current one!",
+      "warning-no-order-selected": "Choose the already saved order first!",
+      "error-update": "An error occurred while saving this order! :/",
+      "success-update-html": "Updated this <b class=\"text--accent\">order's</b> message!",
+      "success-save-html": "Saved <b class=\"text--accent\">order's</b> message in the browser memory!",
+      "success-copy-html": "<b class=\"text--accent\">Success!</b> You may paste the order message in the simulator's chatbox now!"
+   },
+   "order-footer": {
+      "field-stationName": "station",
+      "field-checkpointName": "checkpoint",
+      "field-hour": "hour",
+      "field-minutes": "minute",
+      "field-dispatcherName": "dispatcher",
+      "field-secondaryDispatcherName": "ordering dispatcher",
+      "field-dispatcherOrSecondaryName": "dispatcher (or ordering dispatcher)"
+   },
+   "order-options": {
+      "dark-mode": "Order dark theme",
+      "update-number-on-copy": "Update order number on copy",
+      "update-number-on-save": "Update order number on save",
+      "update-hours": "Update order hour on edit"
+   },
+   "order-list": {
+      "title": "Saved train orders",
+      "order-title": "Order \"{orderName}\" no. {orderNo} for train no. {trainNo}",
+      "no-saved-orders": "No saved orders!",
+      "order-added": "Added:",
+      "order-updated": "Updated:",
+      "button-order-select": "Select",
+      "button-order-remove": "Remove"
+   },
+   "order-train-picker": {
+      "placeholder-scenery-name": "Scenery name",
+      "placeholder-region-name": "Region",
+      "placeholder-checkpoint-name": "Checkpoint name",
+      "autofill-checkpoint-id": "Autofill checkpoint's abbreviation",
+      "info": "Select scenery name to display active trains",
+      "title": "Active timetables and trains on the scenery",
+      "subtitle": "Click on the user below to fill the current order with their information",
+      "no-trains": "No trains to display"
+   }
+}

src/locales/pl.json

@@ -1 +1,63 @@
-{}
+{
+   "locale": {
+      "pl": "POLSKI",
+      "en": "ANGIELSKI"
+   },
+   "navbar": {
+      "order-message": "TREŚĆ ROZKAZU",
+      "order-list": "ZAPISANE ROZKAZY",
+      "order-train-picker": "POCIĄGI"
+   },
+   "order-message": {
+      "title": "Wiadomość do wyświetlenia na czacie symulatora:",
+      "info": "Po wygenerowaniu rozkazu skopiuj jego treść lub zapisz w pamięci przeglądarki za pomocą przycisków poniżej:",
+      "button-save": "Zapisz nowy rozkaz",
+      "button-copy": "Kopiuj treść rozkazu",
+      "button-update": "Zaktualizuj rozkaz",
+      "warning-outdated-clipboard": "Ups! Twoja przeglądarka musi być dosyć przestarzała, ponieważ nie obsługuje zapisu do schowka! :/",
+      "warning-fill-inputs": "Wypełnij puste rubryki rozkazu przed jego skopiowaniem!",
+      "warning-add-rows": "Dodaj co najmniej jedną działkę rozkazu przed jego skopiowaniem!",
+      "warning-fill-footer": "Uzupełnij następujące rubryki na dole rozkazu przed jego skopiowaniem:",
+      "warning-fill-top": "Wypełnij numer rozkazu, numer pociągu i datę zanim dodasz rozkaz!",
+      "warning-order-identical": "Ostatni zapisany rozkaz jest identyczny z obecnym!",
+      "warning-no-order-selected": "Wybierz rozkaz, który chcesz zaktualizować!",
+      "error-update": "Wystąpił błąd podczas aktualizowania tego rozkazu! :/",
+      "success-update-html": "Zaktualizowano treść <b class=\"text--accent\">rozkazu</b>!",
+      "success-save-html": "Zapisano treść <b class=\"text--accent\">rozkazu</b> w pamięci przeglądarki!",
+      "success-copy-html": "<b class=\"text--accent\">Skopiowano!</b> Możesz teraz wkleić treść rozkazu na czacie symulatora!"
+   },
+   "order-footer": {
+      "field-stationName": "stacja",
+      "field-checkpointName": "posterunek",
+      "field-hour": "godzina",
+      "field-minutes": "minuta",
+      "field-dispatcherName": "dyżurny ruchu",
+      "field-secondaryDispatcherName": "z polecenia dyżurnego ruchu",
+      "field-dispatcherOrSecondaryName": "dyżurny ruchu (lub z polecenia dyżurnego ruchu)"
+   },
+   "order-options": {
+      "dark-mode": "Ciemny motyw bloczka rozkazu",
+      "update-number-on-copy": "Aktualizuj numer rozkazu po skopiowaniu",
+      "update-number-on-save": "Aktualizuj numer rozkazu po zapisaniu",
+      "update-hours": "Aktualizuj godziny przy edycji"
+   },
+   "order-list": {
+      "title": "Zapisane rozkazy pisemne",
+      "no-saved-orders": "Brak zapisanych rozkazów!",
+      "order-title": "Rozkaz \"{orderName}\" nr {orderNo} dla pociągu nr {trainNo}",
+      "order-added": "Dodano:",
+      "order-updated": "Zaktualizowano:",
+      "button-order-select": "Wybierz",
+      "button-order-remove": "Usuń"
+   },
+   "order-train-picker": {
+      "placeholder-scenery-name": "Sceneria",
+      "placeholder-region-name": "Region",
+      "placeholder-checkpoint-name": "Posterunek",
+      "autofill-checkpoint-id": "Uzupełniaj skrót wybranego posterunku",
+      "info": "Wybierz dyżurnego oraz scenerię, aby zobaczyć pociągi",
+      "title": "Aktywne RJ i gracze na scenerii",
+      "subtitle": "Kliknij na gracza, aby wypełnić obecny rozkaz jego danymi",
+      "no-trains": "Brak pociągów do wyświetlenia"
+   }
+}

src/mixins/orderValidationMixin.ts

@@ -4,7 +4,7 @@ import { useStore } from '../store/store';
 export default defineComponent({
   setup() {
     return {
-      store: useStore()
+      store: useStore(),
     };
   },
 

src/styles/_global.scss

@@ -107,6 +107,12 @@ button.g-button {
       color: colors.$accentCol;
     }
   }
+
+  &.icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
 
 // Text styles

src/views/Home.vue

@@ -9,6 +9,13 @@
       </div>
 
       <div class="message_container">
+        <div class="message_actions">
+          <button class="g-button action icon" @click="switchLanguages">
+            <LanguagesIcon :size="18" />
+            <span style="margin-left: 0.25em">{{ $t('locale.' + store.currentAppLocale) }}</span>
+          </button>
+        </div>
+
         <div class="message_nav">
           <span v-for="(action, i) in navActions" :key="action.mode">
             <b v-if="i > 0">&bull;</b>
@@ -18,7 +25,7 @@
               :data-active="store.orderMode == action.mode"
               @click="selectOrderMode(action.mode)"
             >
-              {{ action.value }}
+              {{ $t(`navbar.${action.value}`) }}
             </button>
           </span>
         </div>
@@ -42,24 +49,26 @@ import OrderList from '../components/OrderList.vue';
 import { useStore } from '../store/store';
 import OrderHelper from '../components/OrderHelper.vue';
 import OrderTrainPicker from '../components/OrderTrainPicker.vue';
+import { LanguagesIcon } from 'lucide-vue-next';
+import StorageManager from "../managers/storageManager";
 
 export default defineComponent({
-  components: { OrderVue, SideBar, OrderHelper },
+  components: { OrderVue, SideBar, OrderHelper, LanguagesIcon },
 
   data() {
     return {
       navActions: [
         {
           mode: 'OrderMessage',
-          value: 'TREŚĆ ROZKAZU'
+          value: 'order-message'
         },
         {
           mode: 'OrderList',
-          value: 'ZAPISANE ROZKAZY'
+          value: 'order-list'
         },
         {
           mode: 'OrderTrainPicker',
-          value: 'POCIĄGI'
+          value: 'order-train-picker'
         }
       ]
     };
@@ -68,6 +77,15 @@ export default defineComponent({
   methods: {
     selectOrderMode(mode: string) {
       this.store.orderMode = mode;
+    },
+
+    switchLanguages() {
+      const lang = this.store.currentAppLocale == 'pl' ? 'en' : 'pl';
+
+      this.$i18n.locale = lang;
+      this.store.currentAppLocale = lang;
+
+      StorageManager.setStringValue('lang', lang);
     }
   },
 
@@ -132,16 +150,23 @@ export default defineComponent({
   }
 
   .message_container {
+    padding: 2px;
+
     width: 100%;
     max-width: 500px;
 
     display: grid;
-    grid-template-rows: auto 1fr;
+    grid-template-rows: auto auto 1fr;
 
     height: 95vh;
     overflow: auto;
   }
 
+  .message_actions {
+    display: flex;
+    justify-content: center;
+  }
+
   .message_nav {
     display: flex;
     align-items: center;
@@ -149,7 +174,7 @@ export default defineComponent({
 
     flex-wrap: wrap;
 
-    margin-bottom: 2em;
+    margin: 0.5em 0;
   }
 }
 </style>

yarn.lock

@@ -3111,6 +3111,11 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
+lucide-vue-next@^0.525.0:
+  version "0.525.0"
+  resolved "https://registry.yarnpkg.com/lucide-vue-next/-/lucide-vue-next-0.525.0.tgz#94bafb8dcb6b6344dbbd8a00d8230cf5478e444e"
+  integrity sha512-Xf8+x8B2DrnGDV/rxylS+KBp2FIe6ljwDn2JsGTZZvXIfhmm/q+nv8RuGO1OyoMjOVkkz7CqtUqJfwtFPRbB2w==
+
 magic-string@^0.25.0, magic-string@^0.25.7:
   version "0.25.9"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"