From 5377bf528d1fbae587820ac7a8ffbe8a94548f2e Mon Sep 17 00:00:00 2001
From: Emil <emil.lipskij@gmail.com>
Date: Sun, 10 Sep 2023 18:08:33 +0300
Subject: [PATCH] feat: Refactor vue components to use i18n (#3560)

---
 src/components/data-flash/DataFlash.vue       |  8 +--
 .../port-picker/FirmwareVirtualOption.vue     | 44 +++++++-------
 .../port-picker/PortOverrideOption.vue        |  5 +-
 src/components/port-picker/PortsInput.vue     | 10 ++--
 .../quad-status/BottomStatusIcons.vue         | 12 ++--
 src/components/sensor-status/SensorStatus.vue | 60 ++++++++-----------
 6 files changed, 60 insertions(+), 79 deletions(-)

diff --git a/src/components/data-flash/DataFlash.vue b/src/components/data-flash/DataFlash.vue
index 411123feb7b..9734ff9ad82 100644
--- a/src/components/data-flash/DataFlash.vue
+++ b/src/components/data-flash/DataFlash.vue
@@ -2,9 +2,9 @@
   <div class="data-flash">
     <div
       v-if="!supportDataflash"
-      class="noflash_global i18n-replaced"
+      class="noflash_global"
     >
-      No dataflash <br>chip found
+      {{ $t("sensorDataFlashNotFound") }}
     </div>
     <div
       v-if="supportDataflash"
@@ -16,8 +16,8 @@
           width: indicatorWidth,
         }"
       >
-        <span class="i18n-replaced">
-          Dataflash: free
+        <span>
+          {{ $t("sensorDataFlashFreeSpace") }}
           {{ freeSpace }}
         </span>
       </div>
diff --git a/src/components/port-picker/FirmwareVirtualOption.vue b/src/components/port-picker/FirmwareVirtualOption.vue
index ef0404b9328..b3f4703bf02 100644
--- a/src/components/port-picker/FirmwareVirtualOption.vue
+++ b/src/components/port-picker/FirmwareVirtualOption.vue
@@ -1,33 +1,19 @@
 <template>
   <div
     id="firmware-virtual-option"
-    style="display: block"
     :style="{ display: isVirtual ? 'block' : 'none' }"
   >
     <div class="dropdown dropdown-dark">
       <select
-        id="firmware-version-dropdown"
-        i18n_title="virtualMSPVersion"
-        class="dropdown-select i18n_title-replaced"
-        title="Virtual Firmware Version"
+        class="dropdown-select"
+        :title="$t('virtualMSPVersion')"
       >
-        <option value="1.46.0">
-          MSP: 1.46 | Firmware: 4.5.*
-        </option>
-        <option value="1.45.0">
-          MSP: 1.45 | Firmware: 4.4.*
-        </option>
-        <option value="1.44.0">
-          MSP: 1.44 | Firmware: 4.3.*
-        </option>
-        <option value="1.43.0">
-          MSP: 1.43 | Firmware: 4.2.*
-        </option>
-        <option value="1.42.0">
-          MSP: 1.42 | Firmware: 4.1.*
-        </option>
-        <option value="1.41.0">
-          MSP: 1.41 | Firmware: 4.0.*
+        <option
+          v-for="(version, index) in firmwareVersions"
+          :key="index"
+          :value="version.value"
+        >
+          {{ version.label }}
         </option>
       </select>
     </div>
@@ -42,6 +28,18 @@ export default {
             default: true,
         },
     },
+    data() {
+        return {
+            firmwareVersions: [
+                { value: "1.46.0", label: "MSP: 1.46 | Firmware: 4.5.*" },
+                { value: "1.45.0", label: "MSP: 1.45 | Firmware: 4.4.*" },
+                { value: "1.44.0", label: "MSP: 1.44 | Firmware: 4.3.*" },
+                { value: "1.43.0", label: "MSP: 1.43 | Firmware: 4.2.*" },
+                { value: "1.42.0", label: "MSP: 1.42 | Firmware: 4.1.*" },
+                { value: "1.41.0", label: "MSP: 1.41 | Firmware: 4.0.*" },
+            ],
+        };
+    },
 };
 </script>
 
@@ -128,7 +126,7 @@ export default {
     border: 0;
     border-radius: 0;
     -webkit-appearance: none;
-    appearance: 'none';
+    appearance: "none";
 }
 
 .dropdown-select:focus {
diff --git a/src/components/port-picker/PortOverrideOption.vue b/src/components/port-picker/PortOverrideOption.vue
index 1f4317798de..0d7ba9992b8 100644
--- a/src/components/port-picker/PortOverrideOption.vue
+++ b/src/components/port-picker/PortOverrideOption.vue
@@ -6,10 +6,7 @@
   >
     <label
       for="port-override"
-    ><span
-       i18n="portOverrideText"
-       class="i18n-replaced"
-     >Port:</span>
+    ><span>{{ $t("portOverrideText") }}</span>
       <input
         id="port-override"
         type="text"
diff --git a/src/components/port-picker/PortsInput.vue b/src/components/port-picker/PortsInput.vue
index f07242974c0..baac2eda6f8 100644
--- a/src/components/port-picker/PortsInput.vue
+++ b/src/components/port-picker/PortsInput.vue
@@ -6,9 +6,8 @@
     <div class="dropdown dropdown-dark">
       <select
         id="port"
-        i18n_title="firmwareFlasherManualPort"
-        class="dropdown-select i18n_title-replaced"
-        title="Port"
+        class="dropdown-select"
+        :title="$t('firmwareFlasherManualPort')"
       >
         <option value="virtual">
           {{ $t("portsSelectVirtual") }}
@@ -56,9 +55,8 @@
           <select
             id="baud"
             v-model="selectedBaudRate"
-            i18n_title="firmwareFlasherBaudRate"
-            class="dropdown-select i18n_title-replaced"
-            title="Baud Rate"
+            class="dropdown-select"
+            :title="$t('firmwareFlasherBaudRate')"
             :disabled="isAutoConnect"
           >
             <option
diff --git a/src/components/quad-status/BottomStatusIcons.vue b/src/components/quad-status/BottomStatusIcons.vue
index 516c7ee6284..e50599e512a 100644
--- a/src/components/quad-status/BottomStatusIcons.vue
+++ b/src/components/quad-status/BottomStatusIcons.vue
@@ -1,18 +1,18 @@
 <template>
   <div class="bottomStatusIcons">
     <div
-      i18n_title="mainHelpArmed"
-      class="armedicon cf_tip i18n_title-replaced"
+      class="armedicon cf_tip"
+      :title="$t('mainHelpArmed')"
       :class="{ active: setActiveArmed }"
     />
     <div
-      i18n_title="mainHelpFailsafe"
-      class="failsafeicon cf_tip i18n_title-replaced"
+      class="failsafeicon cf_tip"
+      :title="$t('mainHelpFailsafe')"
       :class="{ active: setFailsafeActive }"
     />
     <div
-      i18n_title="mainHelpLink"
-      class="linkicon cf_tip i18n_title-replaced"
+      class="linkicon cf_tip"
+      :title="$t('mainHelpLink')"
       :class="{ active: setActiveLink }"
     />
   </div>
diff --git a/src/components/sensor-status/SensorStatus.vue b/src/components/sensor-status/SensorStatus.vue
index dc9a0b322ad..e5d4fc519d7 100644
--- a/src/components/sensor-status/SensorStatus.vue
+++ b/src/components/sensor-status/SensorStatus.vue
@@ -6,90 +6,78 @@
   >
     <ul>
       <li
-        i18n_title="sensorStatusGyro"
-        class="gyro i18n_title-replaced"
-        title="Gyroscope"
+        class="gyro"
+        :title="$t('sensorStatusGyro')"
         :class="{ on: setGyroActive }"
       >
         <div
-          i18n="sensorStatusGyroShort"
-          class="gyroicon i18n-replaced"
+          class="gyroicon"
           :class="{ active: setGyroActive }"
         >
-          Gyro
+          {{ $t('sensorStatusGyroShort') }}
         </div>
       </li>
       <li
-        i18n_title="sensorStatusAccel"
-        class="accel i18n_title-replaced"
-        title="Accelerometer"
+        class="accel"
+        :title="$t('sensorStatusAccel')"
         :class="{ on: setAccActive }"
       >
         <div
-          i18n="sensorStatusAccelShort"
-          class="accicon i18n-replaced"
+          class="accicon"
           :class="{ active: setAccActive }"
         >
-          Accel
+          {{ $t('sensorStatusAccelShort') }}
         </div>
       </li>
       <li
-        i18n_title="sensorStatusMag"
-        class="mag i18n_title-replaced"
-        title="Magnetometer"
+        class="mag"
+        :title="$t('sensorStatusMag')"
         :class="{ on: setMagActive }"
       >
         <div
-          i18n="sensorStatusMagShort"
-          class="magicon i18n-replaced"
+          class="magicon"
           :class="{ active: setMagActive }"
         >
-          Mag
+          {{ $t('sensorStatusMagShort') }}
         </div>
       </li>
       <li
-        i18n_title="sensorStatusBaro"
-        class="baro i18n_title-replaced"
-        title="Barometer"
+        class="baro"
+        :title="$t('sensorStatusBaro')"
         :class="{ on: setBaroActive }"
       >
         <div
-          i18n="sensorStatusBaroShort"
-          class="baroicon i18n-replaced"
+          class="baroicon"
           :class="{ active: setBaroActive }"
         >
-          Baro
+          {{ $t('sensorStatusBaroShort') }}
         </div>
       </li>
       <li
-        i18n_title="sensorStatusGPS"
-        class="gps i18n_title-replaced"
+        class="gps"
         :class="{ on: setGpsActive }"
-        title="GPS"
+        :title="$t('sensorStatusGPS')"
       >
         <div
-          i18n="sensorStatusGPSShort"
-          class="gpsicon i18n-replaced"
+          class="gpsicon"
           :class="{
             active: setGpsFixState && setGpsActive,
             active_fix: !setGpsFixState && setGpsActive,
           }"
         >
-          GPS
+          {{ $t('sensorStatusGPSShort') }}
         </div>
       </li>
       <li
-        i18n_title="sensorStatusSonar"
-        class="sonar i18n_title-replaced"
-        title="Sonar / Range finder"
+        class="sonar"
+        :title="$t('sensorStatusSonar')"
         :class="{ on: setSonarActive }"
       >
         <div
-          i18n="sensorStatusSonarShort"
-          class="sonaricon i18n-replaced"
+          class="sonaricon"
           :class="{ active: setSonarActive }"
         >
-          Sonar
+          {{ $t('sensorStatusSonarShort') }}
         </div>
       </li>
     </ul>