refactor(driver): improved locale naming inside propositions component

src/components/DriverView/DriverPropositions.vue

@@ -1,104 +1,101 @@
 <template>
-  <div class="driver-propositions">
+  <div class="analysis-box">
-    <h3>{{ t('trains.number-propositions-header') }}</h3>
+    <div class="driver-propositions">
+      <h3>{{ t('analysis.propositions.header') }}</h3>
 
-    <div class="categories-select">
+      <div class="categories-select">
-      <button
+        <button
-        v-for="(category, i) in availableCategories"
+          v-for="(category, i) in availableCategories"
-        class="btn btn--option btn--action"
+          class="btn btn--option btn--action"
-        @click="selectCategory(i)"
+          @click="selectCategory(i)"
-        :class="{ checked: i == chosenCategoryIndex }"
+          :class="{ checked: i == chosenCategoryIndex }"
-      >
-        {{ category }}
-      </button>
-    </div>
-
-    <div v-if="numberPropositions.length > 0" class="propositions-numbers">
-      <div v-if="chosenCategory">
-        <b>{{ chosenCategory }} </b> -
-        {{ t(`categories.${chosenCategory.slice(0, 2)}`) }}
-        ({{ t(`categories.${chosenCategory.slice(2)}`) }})
-      </div>
-
-      <div v-if="chosenCategoryRules">
-        <span v-if="chosenCategoryRules[0]"
-          >{{ t('trains.number-propositions-third-number') }}
-          <b class="text--primary">{{ chosenCategoryRules[0] }}</b> &bull;
-        </span>
-
-        <span
-          >{{
-            t('trains.number-propositions-last-nums', {
-              count: chosenCategoryRules[1].length
-            })
-          }}
-          <b class="text--primary">{{ chosenCategoryRules[1] }}</b> -
-          <b class="text--primary">{{ chosenCategoryRules[2] }}</b></span
         >
+          {{ category }}
+        </button>
       </div>
 
-      <div style="margin-top: 0.5em">
+      <div v-if="numberPropositions.length > 0" class="propositions-numbers">
-        <b>{{ t('trains.number-propositions-title') }}&nbsp;</b>
+        <div v-if="chosenCategory">
-        <i>{{ numberPropositions.join(', ') }}</i>
+          <b>{{ chosenCategory }} </b> -
+          {{ t(`categories.${chosenCategory.slice(0, 2)}`) }}
+          ({{ t(`categories.${chosenCategory.slice(2)}`) }})
+        </div>
+
+        <div v-if="chosenCategoryRules">
+          <span v-if="chosenCategoryRules[0]"
+            >{{ t('analysis.propositions.third-number') }}
+            <b class="text--primary">{{ chosenCategoryRules[0] }}</b> &bull;
+          </span>
+
+          <span
+            >{{
+              t('analysis.propositions.last-nums', {
+                count: chosenCategoryRules[1].length
+              })
+            }}
+            <b class="text--primary">{{ chosenCategoryRules[1] }}</b> -
+            <b class="text--primary">{{ chosenCategoryRules[2] }}</b></span
+          >
+        </div>
+
+        <div style="margin-top: 0.5em">
+          <b>{{ t('analysis.propositions.title') }}&nbsp;</b>
+          <i>{{ numberPropositions.join(', ') }}</i>
+        </div>
       </div>
-    </div>
 
-    <div class="no-propositions" v-else>{{ t('trains.number-propositions-empty') }}</div>
+      <div class="no-propositions" v-else>{{ t('analysis.propositions.empty') }}</div>
 
-    <div class="cargo-warnings" v-if="Object.values(cargoWarnings).length > 0">
+      <div class="cargo-warnings" v-if="Object.values(cargoWarnings).length > 0">
-      <hr />
+        <hr class="divider" />
-      <h3>{{ t('cargo-warnings.title') }}</h3>
 
-      <div class="warnings-container">
+        <h3>{{ t('analysis.warnings.title') }}</h3>
-        <div
+
-          v-for="(_, warningKey) of cargoWarnings"
+        <div class="warnings-container">
-          class="train-badge"
+          <div
-          :class="warningKey.split('-')[2]"
+            v-for="(_, warningKey) of cargoWarnings"
-        >
+            class="train-badge"
-          {{ t('cargo-warnings.' + warningKey) }}
+            :class="warningKey.split('-')[2]"
+          >
+            {{ t('analysis.warnings.' + warningKey) }}
+          </div>
         </div>
       </div>
     </div>
 
-    <div class="analysis">
+    <hr class="divider" />
-      <hr />
-      <div>
-        <h3>Analiza (PL):</h3>
-        <div v-if="Object.values(cargoWarnings).length > 0" v-html="analysisString"></div>
 
-        <!-- <div v-if="Object.keys(cargoWarnings).some((k) => k.includes('-twr'))">
+    <div class="analysis-content">
-          {{ t('cargo-warnings.has-twr') }},
+      <div class="analysis-header">
-        </div>
+        <h3>
+          {{ t('analysis.title') }}
+        </h3>
 
-        <div v-if="Object.keys(cargoWarnings).some((k) => k.includes('-tn'))">
+        {{ analysisLanguage }}
-          {{ t('cargo-warnings.has-tn') }},
+        <button class="btn btn--image" @click="changeAnalysisLanguage('pl')">
-        </div>
+          <img src="/images/flags/pl.svg" alt="" width="20" />
+        </button>
 
-        <div>
+        <button class="btn btn--image" @click="changeAnalysisLanguage('en')">
-          <i v-if="cargoWarnings['zags-loaded-twr'] || cargoWarnings['zags-empty-tn']">
+          <img src="/images/flags/en.svg" alt="" width="20" />
-            33UN1965 {{ cargoWarnings['zags-loaded-twr'] }} /
+        </button>
-            {{ cargoWarnings['zags-empty-tn'] }} Zags
-          </i>
-        </div>
-
-        <div>
-          <i v-if="cargoWarnings['zans-loaded-tn'] || cargoWarnings['zans-empty-tn']">
-            33UN1203 {{ cargoWarnings['zans-loaded-tn'] }} /
-            {{ cargoWarnings['zans-empty-tn'] }} Zans
-          </i>
-        </div>
-
-        <div v-if="Object.keys(cargoWarnings).some((k) => k.includes('-pn'))">
-          {{ t('cargo-warnings.has-pn') }}:
-
-          <i v-if="cargoWarnings['innofreight-all-pn']"> Innofreight - przekroczona skrajnia </i>
-          <i v-if="cargoWarnings['military-all-pn']"> transport wojskowy </i>
-        </div> -->
       </div>
-    </div>
 
-    <div class="actions">
+      <div class="analysis-html" v-html="analysisHtml"></div>
-      <button class="btn btn--action btn-copy">SKOPIUJ ANALIZĘ</button>
+
+      <hr class="divider" />
+
+      <div class="analysis-actions">
+        <button class="btn btn--action">
+          <i class="fa-regular fa-copy"></i>{{ t('analysis.button-copy') }}
+        </button>
+
+        <button class="btn btn--action" @click="copyStockToClipboard()">
+          <i class="fa-regular fa-copy"></i> {{ t('analysis.stock-copy') }}
+        </button>
+      </div>
+
+      <p class="number-info"><i>$number</i> {{ t('analysis.number-info') }}</p>
     </div>
   </div>
 </template>
@@ -110,7 +107,8 @@ import { Train } from '../../typings/common';
 import rulesJSON from '../../data/trainNumberRules.json';
 import { useApiStore } from '../../store/apiStore';
 
-const { t } = useI18n();
+const { t, locale } = useI18n();
+
 const apiStore = useApiStore();
 
 const props = defineProps({
@@ -127,6 +125,8 @@ const chosenCategoryIndex = ref(0);
 const numberPropositions = ref<string[]>([]);
 const chosenCategoryRules = ref<any[]>([]);
 
+const analysisLanguage = ref(locale.value);
+
 watch(
   computed(() => props.chosenTrain.trainNo),
   () => {
@@ -139,6 +139,11 @@ onMounted(() => {
   generateNumberPropositions();
 });
 
+function selectCategory(i: number) {
+  chosenCategoryIndex.value = i;
+  generateNumberPropositions();
+}
+
 function generateNumberPropositions() {
   const categoryCode = chosenCategory.value?.slice(0, 2);
   const trainNoStr = props.chosenTrain.trainNo.toString();
@@ -197,6 +202,28 @@ function generateNumberPropositions() {
   chosenCategoryRules.value = rules;
 }
 
+function copyStockToClipboard() {
+  const stockString = props.chosenTrain.stockList.join(';');
+
+  if (!stockString) {
+    alert(t('analysis.stock-clipboard-failure'));
+    return;
+  }
+
+  navigator.clipboard
+    .writeText(stockString)
+    .then(() => {
+      prompt(t('analysis.stock-clipboard-success'), stockString);
+    })
+    .catch(() => {
+      alert(t('analysis.stock-clipboard-failure'));
+    });
+}
+
+function changeAnalysisLanguage(langId: string) {
+  analysisLanguage.value = langId;
+}
+
 const chosenCategory = computed(() => {
   return availableCategories.value[chosenCategoryIndex.value];
 });
@@ -310,22 +337,17 @@ const availableCategories = computed(() => {
   return availableCategories.map((c) => `${c}${categoryTraction}`);
 });
 
-function selectCategory(i: number) {
+const analysisHtml = computed(() => {
-  chosenCategoryIndex.value = i;
+  let analysisStr = `${t('analysis.title')}: `;
-  generateNumberPropositions();
-}
 
-const analysisString = computed(() => {
+  analysisStr += `<b>${chosenCategory.value} $number </b> (${props.chosenTrain.stockList[0]}, ${(props.chosenTrain.mass / 1000).toFixed(1)}t, ${props.chosenTrain.length}m)`;
-  let analysisStr = 'Analiza: ';
-
-  analysisStr = `<i>$number</i>, <b>${chosenCategory.value}</b> (${props.chosenTrain.stockList[0]}, ${(props.chosenTrain.mass / 1000).toFixed(1)}t, ${props.chosenTrain.length}m)`;
 
   if (Object.keys(cargoWarnings.value).length > 0) {
     if (Object.keys(cargoWarnings.value).some((k) => k.includes('-twr')))
-      analysisStr += `<br>${t('cargo-warnings.has-twr')}`;
+      analysisStr += `<br>${t('analysis.warnings.has-twr')}`;
 
     if (Object.keys(cargoWarnings.value).some((k) => k.includes('-tn')))
-      analysisStr += `<br>${t('cargo-warnings.has-tn')}`;
+      analysisStr += `<br>${t('analysis.warnings.has-tn')}`;
 
     if (cargoWarnings.value['zags-loaded-twr'] || cargoWarnings.value['zags-empty-tn']) {
       analysisStr += `<br><i>33UN1965 ${cargoWarnings.value['zags-loaded-twr'] || 0}/${cargoWarnings.value['zags-empty-tn'] || 0} Zags</i>`;
@@ -336,7 +358,7 @@ const analysisString = computed(() => {
     }
 
     if (Object.keys(cargoWarnings.value).some((k) => k.includes('-pn'))) {
-      analysisStr += `${t('cargo-warnings.has-pn')}:`;
+      analysisStr += `${t('analysis.warnings.has-pn')}:`;
 
       if (cargoWarnings.value['innofreight-all-pn']) {
         analysisStr += `<br> - Innofreight - przekroczona skrajnia`;
@@ -356,9 +378,15 @@ const analysisString = computed(() => {
 @use '../../styles/responsive';
 @use '../../styles/badge';
 
-.driver-propositions {
+hr.divider {
-  margin-bottom: 1em;
+  margin: 0.5em 0;
+  border-bottom: #111;
+  border-width: 2px;
+}
+
+.analysis-box {
   padding: 0.5em;
+  margin-bottom: 1em;
   background-color: #111;
 }
 
@@ -391,34 +419,43 @@ const analysisString = computed(() => {
   color: #ccc;
 }
 
-.cargo-warnings {
-  margin-top: 0.5em;
-
-  h3 {
-    margin: 0.5em 0;
-  }
-}
-
 .warnings-container {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5em;
 }
 
-.analysis {
+.analysis-html {
+  display: inline-block;
+  padding: 0.5em;
+  background-color: #2e2e2e;
   margin-top: 0.5em;
+  user-select: none;
+}
 
-  h3 {
+.analysis-header {
-    margin: 0.5em 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+
+  .btn {
+    padding: 0;
   }
 }
 
-.actions {
+.analysis-actions {
-  margin-top: 0.5em;
+  display: flex;
+  gap: 0.5em;
+  margin: 0.5em 0;
+}
+
+.number-info {
+  font-size: 0.85em;
+  color: #aaa;
 }
 
 @include responsive.smallScreen {
-  .driver-propositions {
+  .analysis-box {
     text-align: center;
   }
 

src/components/DriverView/DriverTrainCard.vue

@@ -4,12 +4,8 @@
 
     <!-- Train action buttons -->
     <div class="train-stock-actions">
-      <button class="btn btn--action" @click="copyStockToClipboard()">
-        <i class="fa-regular fa-copy"></i> {{ i18n.t('trains.stock-copy') }}
-      </button>
-
       <button class="btn btn--action" @click="toggleNumberPropositions()">
-        <i class="fa-regular fa-lightbulb"></i> {{ i18n.t('trains.number-propositions') }}
+        <i class="fa-regular fa-lightbulb"></i> {{ i18n.t('analysis.button-show') }}
       </button>
     </div>
 
@@ -44,32 +40,12 @@ const props = defineProps({
   }
 });
 
-function copyStockToClipboard() {
-  const stockString = props.chosenTrain.stockList.join(';');
-
-  if (!stockString) {
-    alert(i18n.t('trains.stock-clipboard-failure'));
-    return;
-  }
-
-  navigator.clipboard
-    .writeText(stockString)
-    .then(() => {
-      prompt(i18n.t('trains.stock-clipboard-success'), stockString);
-    })
-    .catch(() => {
-      alert(i18n.t('trains.stock-clipboard-failure'));
-    });
-}
-
 function toggleNumberPropositions() {
   arePropositionsVisible.value = !arePropositionsVisible.value;
 }
 </script>
 
 <style lang="scss" scoped>
-@use '../../styles/responsive';
-
 .driver-train-card {
   padding: 1em;
   background-color: var(--clr-view-bg);
@@ -82,10 +58,4 @@ function toggleNumberPropositions() {
   gap: 0.5em;
   margin: 1em 0;
 }
-
-@include responsive.smallScreen {
-  .train-stock-actions {
-    justify-content: center;
-  }
-}
 </style>

src/locales/en.json

@@ -437,27 +437,45 @@
     "driver-not-found-desc-2": "You can browse timetable history in the",
     "driver-not-found-journal": "TIMETABLES JOURNAL",
     "driver-not-found-others": "Player {driver} is online as:",
-    "driver-not-found-return": "RETURN TO THE MAIN SITE",
+    "driver-not-found-return": "RETURN TO THE MAIN SITE"
+  },
+
+  "analysis": {
+    "button-show": "ANALYSIS & STOCK",
+    "number-info": "will be automatically updated to the current train number chosen in the simulator after the analysis is sent in the chat.",
+    "button-copy": "COPY THE ANALYSIS",
+    "title": "Analysis content",
     "stock-copy": "COPY THE STOCK",
-    "number-propositions": "NUMBER & WARNINGS SUGGESTIONS",
     "stock-clipboard-success": "Successfully copied the railway stock in a text form to your clipboard!",
     "stock-clipboard-failure": "Oops! Something happened and the railway stock couldn't be copied to your clipboard! :/",
-    "number-propositions-header": "Generate number examples for a train category:",
+
-    "number-propositions-third-number": "Third digit:",
+    "propositions": {
-    "number-propositions-last-nums": "{count} last digits from the range of:",
+      "title": "Number propositions:",
-    "number-propositions-title": "Propositions:",
+      "header": "Generate number examples for the chosen train category:",
-    "number-propositions-empty": "No propositions available for the chosen category! :/"
+      "third-number": "Third digit:",
-  },
+      "last-nums": "{count} last digits from the range of:",
-  "cargo-warnings": {
+      "empty": "No propositions available for the chosen category! :/"
-    "title": "Additional cargo warnings:",
+    },
-    "pn-innofreight": "PN: Innofreight C45: exceeded gauge",
+
-    "twr-un1965": "TWR: UN1965 (LPG)",
+    "warnings": {
-    "tn-un1965": "TN: unclean tanks after UN1965",
+      "title": "Additional cargo warnings:",
-    "tn-un1202": "TN: UN1202 (diesel fuel)",
+      "zags-loaded-twr": "TWR: UN1965 (LPG)",
-    "tn-un1202-empty": "TN: unclean tanks after UN1202",
+      "zags-empty-tn": "TN: unclean tanks after UN1965",
-    "pn-military": "PN: military transport",
+      "zans-loaded-tn": "TN: UN1202 (diesel fuel)",
-    "pn-edk80": "PN: EDK80 railway crane"
+      "zans-empty-tn": "TN: unclean tanks after UN1202",
+      "military-all-pn": "PN: military transport",
+      "edk80-all-pn": "PN: EDK80 railway crane",
+      "innofreight-all-pn": "PN: Innofreight C45: exceeded gauge",
+
+      "has-pn": "* contains extraordinary deliveries (PN)",
+      "has-tn": "* contains dangerous cargo (TN)",
+      "has-twr": "* contains high risk dangerous cargo (TWR)",
+
+      "empty": "empty",
+      "loaded": "loaded"
+    }
   },
+
   "train-stats": {
     "stats-button": "STATISTICS",
     "title": "ONLINE TRAINS STATS",

src/locales/pl.json

@@ -426,31 +426,45 @@
     "driver-not-found-others": "Gracz {driver} jest online jako:",
     "driver-not-found-return": "WRÓĆ NA STRONĘ GŁÓWNĄ",
     "stock-copy": "SKOPIUJ SKŁAD",
-    "number-propositions": "PROPOZYCJE NUMERÓW I UWAG",
     "stock-clipboard-success": "Pomyślnie skopiowano skład w postaci tekstowej do schowka!",
-    "stock-clipboard-failure": "Ups! Nie udało się skopiować składu do schowka! :/",
+    "stock-clipboard-failure": "Ups! Nie udało się skopiować składu do schowka! :/"
-    "number-propositions-header": "Wygeneruj propozycje numerów dla pociągu kategorii:",
-    "number-propositions-third-number": "Trzecia cyfra:",
-    "number-propositions-last-nums": "{count} ostatnie cyfry z przedziału:",
-    "number-propositions-title": "Propozycje:",
-    "number-propositions-empty": "Brak propozycji dla wybranej kategorii! :/"
   },
-  "cargo-warnings": {
-    "title": "Dodatkowe uwagi przewozowe:",
-    "zags-loaded-twr": "TWR: UN1965 (LPG)",
-    "zags-empty-tn": "TN: brudne cysterny po UN1965",
-    "zans-tn": "TN: UN1202 (olej napędowy)",
-    "zans-empty-tn": "TN: brudne cysterny po UN1202",
-    "military-all-pn": "PN: transport wojskowy",
-    "edk80-all-pn": "PN: żuraw kolejowy EDK80",
-    "innofreight-all-pn": "PN: Innofreight C45: przekroczona skrajnia",
 
-    "has-pn": "* przejazd z przesyłkami nadzwyczajnymi (PN)",
+  "analysis": {
-    "has-tn": "* przewozi towary niebezpieczne (TN)",
+    "button-show": "ANALIZA I SKŁAD",
-    "has-twr": "* przewozi towary niebezpieczne wysokiego ryzyka (TWR)",
+    "number-info": "zostanie automatycznie zaktualizowany na obecny numer wybrany w symulatorze po wysłaniu wiadomości na czacie.",
+    "button-copy": "SKOPIUJ ANALIZĘ",
+    "title": "Treść analizy",
 
-    "empty": "puste",
+    "stock-copy": "SKOPIUJ SKŁAD",
-    "loaded": "pełne"
+    "stock-clipboard-success": "Pomyślnie skopiowano skład w postaci tekstowej do schowka:",
+    "stock-clipboard-failure": "Ups! Nie udało się skopiować składu do schowka! :/",
+
+    "propositions": {
+      "title": "Propozycje numerów:",
+      "header": "Wygeneruj analizę dla pociągu wybranej kategorii:",
+      "third-number": "Trzecia cyfra:",
+      "last-nums": "{count} ostatnie cyfry z przedziału:",
+      "empty": "Brak propozycji dla wybranej kategorii!"
+    },
+
+    "warnings": {
+      "title": "Dodatkowe uwagi przewozowe:",
+      "zags-loaded-twr": "TWR: UN1965 (LPG)",
+      "zags-empty-tn": "TN: brudne cysterny po UN1965",
+      "zans-loaded-tn": "TN: UN1202 (olej napędowy)",
+      "zans-empty-tn": "TN: brudne cysterny po UN1202",
+      "military-all-pn": "PN: transport wojskowy",
+      "edk80-all-pn": "PN: żuraw kolejowy EDK80",
+      "innofreight-all-pn": "PN: Innofreight C45: przekroczona skrajnia",
+
+      "has-pn": "* przejazd z przesyłkami nadzwyczajnymi (PN)",
+      "has-tn": "* przewozi towary niebezpieczne (TN)",
+      "has-twr": "* przewozi towary niebezpieczne wysokiego ryzyka (TWR)",
+
+      "empty": "puste",
+      "loaded": "pełne"
+    }
   },
   "train-stats": {
     "stats-button": "STATYSTYKI",
@@ -497,9 +511,7 @@
     "stock-timetable-speed": "Prędkość RJ",
     "stock-dangers": "DODATKOWE UWAGI",
     "stock-preview": "PODGLĄD SKŁADU",
-    "stock-copy": "SKOPIUJ SKŁAD",
+    "stock-copy": "KOPIUJ SKŁAD",
-    "stock-clipboard-success": "Pomyślnie skopiowano skład w postaci tekstowej do schowka:",
-    "stock-clipboard-failure": "Ups! Nie udało się skopiować składu do schowka! :/",
     "load-data": "Pobierz dalszą historię...",
     "last-seen-at": "Ostatnio widziany na: ",
     "currently-at": "Obecnie na scenerii: ",