From 4bae688eaf3cbf6dc8fe7f7224f9fad817075c03 Mon Sep 17 00:00:00 2001
From: Miguel Angel Mulero Martinez <migmul@gmail.com>
Date: Wed, 21 Feb 2018 20:48:13 +0100
Subject: [PATCH] i18n Led Strip and others

---
 locales/en/messages.json        | 171 +++++++++++++++++++++++++++++++-
 src/js/tabs/firmware_flasher.js |   2 +-
 src/tabs/led_strip.html         | 122 +++++++++++------------
 3 files changed, 231 insertions(+), 64 deletions(-)

diff --git a/locales/en/messages.json b/locales/en/messages.json
index efbe18ee..b388700c 100644
--- a/locales/en/messages.json
+++ b/locales/en/messages.json
@@ -2198,6 +2198,9 @@
     "firmwareFlasherFirmwareNotLoaded": {
         "message": "Firmware not loaded"
     },
+    "firmwareFlasherFirmwareLocalLoaded": {
+        "message": "'Loaded Local Firmware: ($1 bytes)'"
+    },
     "firmwareFlasherHexCorrupted": {
         "message": "HEX file appears to be corrupted"
     },
@@ -2229,6 +2232,34 @@
     "ledStripButtonSave": {
         "message": "Save"
     },
+    "ledStripColorSetupTitle": {
+        "message": "Color setup",
+        "description": "Color setup title of the led strip"
+    },
+    "ledStripH": {
+        "message": "H",
+        "description": "Abbreviation of Hue in HSV (Hue, Saturation, Brightness) color model"
+    },
+    "ledStripS": {
+        "message": "S",
+        "description": "Abbreviation of Saturation in HSV  (Hue, Saturation, Brightness) color model"
+    },
+    "ledStripV": {
+        "message": "V",
+        "description": "Abbreviation of Brightness in HSV  (Hue, Saturation, Brightness) color model"
+    },
+    "ledStripRemainingText": {
+        "message": "Remaining",
+        "description": "In the LED STRIP, text next the counter of leds remaining"
+    },
+    "ledStripClearSelectedButton": {
+        "message": "Clear selected",
+        "description": "In the LED STRIP, clear selected leds"
+    },
+    "ledStripClearAllButton": {
+        "message": "Clear ALL",
+        "description": "In the LED STRIP, clear all leds"
+    },
     "ledStripEepromSaved": {
         "message": "EEPROM <span class=\"message-positive\">saved</span>"
     },
@@ -2241,11 +2272,147 @@
     "ledStripFunctionTitle": {
         "message": "Function"
     },
+    "ledStripFunctionNoneOption": {
+        "message": "None",
+        "description": "One of the modes of the Led Strip"
+    },
+    "ledStripFunctionColorOption": {
+        "message": "Color",
+        "description": "One of the modes of the Led Strip"
+    },
+    "ledStripFunctionModesOption": {
+        "message": "Modes &amp; Orientation",
+        "description": "One of the modes of the Led Strip"
+    },
+    "ledStripFunctionArmOption": {
+        "message": "Arm State",
+        "description": "One of the modes of the Led Strip"
+    },
+    "ledStripFunctionBatteryOption": {
+        "message": "Battery",
+        "description": "One of the modes of the Led Strip"
+    },
+    "ledStripFunctionRSSIOption": {
+        "message": "RSSI",
+        "description": "One of the modes of the Led Strip"
+    },
+    "ledStripFunctionGPSOption": {
+        "message": "GPS",
+        "description": "One of the modes of the Led Strip"
+    },
+    "ledStripFunctionRingOption": {
+        "message": "Ring",
+        "description": "One of the modes of the Led Strip"
+    },
     "ledStripColorModifierTitle": {
         "message": "Color modifier"
     },
-    "ledStripThrottleFunction": {
-        "message": "Throttle"
+    "ledStripModeColorsTitle": {
+        "message": "Mode colors"
+    },
+    "ledStripModeColorsModeOrientation": {
+        "message": "Orientation",
+        "description": "One of the modes in Color Mode in Led Strip"
+    },
+    "ledStripModeColorsModeHeadfree": {
+        "message": "Headfree",
+        "description": "One of the modes in Color Mode in Led Strip"
+    },
+    "ledStripModeColorsModeHorizon": {
+        "message": "Horizon",
+        "description": "One of the modes in Color Mode in Led Strip"
+    },
+    "ledStripModeColorsModeAngle": {
+        "message": "Angle",
+        "description": "One of the modes in Color Mode in Led Strip"
+    },
+    "ledStripModeColorsModeMag": {
+        "message": "Mag",
+        "description": "One of the modes in Color Mode in Led Strip"
+    },
+    "ledStripModeColorsModeBaro": {
+        "message": "Baro",
+        "description": "One of the modes in Color Mode in Led Strip"
+    },
+    "ledStripDirN": {
+        "message": "N",
+        "description": "North direction in Color Mode in Led Strip"
+    },
+    "ledStripDirE": {
+        "message": "E",
+        "description": "East direction in Color Mode in Led Strip"
+    },
+    "ledStripDirS": {
+        "message": "S",
+        "description": "South direction in Color Mode in Led Strip"
+    },
+    "ledStripDirW": {
+        "message": "W",
+        "description": "West direction in Color Mode in Led Strip"
+    },
+    "ledStripDirU": {
+        "message": "U",
+        "description": "Up direction in Color Mode in Led Strip"
+    },
+    "ledStripDirD": {
+        "message": "D",
+        "description": "Down direction in Color Mode in Led Strip"
+    },
+    "ledStripModesOrientationTitle": {
+        "message": "LED Orientation ('Modes &amp; Orientation') and Color",
+        "description": "One of the modes in Color Mode in Led Strip"
+    },
+    "ledStripModesSpecialColorsTitle": {
+        "message": "Special colors",
+        "description": "One of the modes in Color Mode in Led Strip"
+    },
+    "ledStripModeColorsModeDisarmed": {
+        "message": "Disarmed",
+        "description": "One of the modes in Color Mode in Led Strip"
+    },
+    "ledStripModeColorsModeArmed": {
+        "message": "Armed",
+        "description": "One of the modes in Color Mode in Led Strip"
+    },
+    "ledStripModeColorsModeAnimation": {
+        "message": "Animation",
+        "description": "One of the modes in Color Mode in Led Strip"
+    },
+    "ledStripModeColorsModeBlinkBg": {
+        "message": "Blink background",
+        "description": "One of the modes in Color Mode in Led Strip"
+    },
+    "ledStripModeColorsModeGPSNoSats": {
+        "message": "GPS: no sats",
+        "description": "One of the modes in Color Mode in Led Strip"
+    },
+    "ledStripModeColorsModeGPSNoLock": {
+        "message": "GPS: no lock",
+        "description": "One of the modes in Color Mode in Led Strip"
+    },
+    "ledStripModeColorsModeGPSLocked": {
+        "message": "GPS: locked",
+        "description": "One of the modes in Color Mode in Led Strip"
+    },
+    "ledStripWiring": {
+        "message": "LED Strip Wiring",
+        "description": "One of the modes in Led Strip"
+    },
+    "ledStripWiringMode": {
+        "message": "Wire Ordering Mode",
+        "description": "One of the wiring modes in Led Strip"
+    },
+    "ledStripWiringClearControl": {
+        "message": "Clear selected",
+        "description": "Control button in the wiring modes in Led Strip"
+    },
+    "ledStripWiringClearAllControl": {
+        "message": "Clear ALL Wiring",
+        "description": "Control button in the wiring modes in Led Strip"
+    },
+    "ledStripWiringMessage": {
+        "message": "LEDs without wire ordering number will not be saved.",
+        "description": "Message in the wiring modes in Led Strip"
     },
     "ledStripVtxFunction": {
         "message": "Larson scanner"
diff --git a/src/js/tabs/firmware_flasher.js b/src/js/tabs/firmware_flasher.js
index 41620ee0..c178ca86 100755
--- a/src/js/tabs/firmware_flasher.js
+++ b/src/js/tabs/firmware_flasher.js
@@ -206,7 +206,7 @@ TABS.firmware_flasher.initialize = function (callback) {
                                     if (parsed_hex) {
                                         $('a.flash_firmware').removeClass('disabled');
 
-                                        $('span.progressLabel').text('Loaded Local Firmware: (' + parsed_hex.bytes_total + ' bytes)');
+                                        $('span.progressLabel').text(i18n.getMessage('firmwareFlasherFirmwareLocalLoaded', parsed_hex.bytes_total));
                                     } else {
                                         $('span.progressLabel').text(i18n.getMessage('firmwareFlasherHexCorrupted'));
                                     }
diff --git a/src/tabs/led_strip.html b/src/tabs/led_strip.html
index 5a5e521b..e2de9724 100644
--- a/src/tabs/led_strip.html
+++ b/src/tabs/led_strip.html
@@ -29,19 +29,19 @@
             <div class="block"></div>
         </div>
         <div class="colorDefineSliders">
-            <div class="">Color setup</div>
+            <div class="" i18n="ledStripColorSetupTitle"/>
             <div class="colorDefineSliderContainer">
-                <Label class="colorDefineSliderLabel">H</Label>
+                <Label class="colorDefineSliderLabel" i18n="ledStripH"></Label>
                 <input class="sliderHSV" type="range" min="0" max="359" value="0">
                 <Label class="colorDefineSliderValue Hvalue">0</Label>
             </div>
             <div class="colorDefineSliderContainer">
-                <Label class="colorDefineSliderLabel">S</Label>
+                <Label class="colorDefineSliderLabel" i18n="ledStripS"></Label>
                 <input class="sliderHSV" type="range" min="0" max="255" value="0">
                 <Label class="colorDefineSliderValue Svalue">0</Label>
             </div>
             <div class="colorDefineSliderContainer">
-                <Label class="colorDefineSliderLabel">V</Label>
+                <Label class="colorDefineSliderLabel" i18n="ledStripV"></Label>
                 <input class="sliderHSV" type="range" min="0" max="255" value="0">
                 <Label class="colorDefineSliderValue Vvalue">0</Label>
             </div>
@@ -49,10 +49,10 @@
         <div class="controls">
             <div class="wires-remaining">
                 <div></div>
-                Remaining
+                <span i18n="ledStripRemainingText"></span>
             </div>
-            <button class="funcClear">Clear selected</button>
-            <button class="funcClearAll">Clear ALL</button>
+            <button class="funcClear" i18n="ledStripClearSelectedButton"></button>
+            <button class="funcClearAll" i18n="ledStripClearAllButton"></button>
 
             <div class="section" i18n="ledStripFunctionSection"></div>
 
@@ -60,14 +60,14 @@
             <div class="select">
                 <span class="color_section" i18n="ledStripFunctionTitle"></span>
                 <select class="functionSelect">
-                    <option value="">None</option>
-                    <option value="function-c" class="">Color</option>
-                    <option value="function-f" class="">Modes &amp; Orientation</option>
-                    <option value="function-a" class="">Arm State</option>
-                    <option value="function-l" class="extra_functions20">Battery</option>
-                    <option value="function-s" class="extra_functions20">RSSI</option>
-                    <option value="function-g" class="extra_functions20">GPS</option>
-                    <option value="function-r" class="">Ring</option>
+                    <option value="" i18n="ledStripFunctionNoneOption"/>
+                    <option value="function-c" class="" i18n="ledStripFunctionColorOption"/>
+                    <option value="function-f" class="" i18n="ledStripFunctionModesOption"/>
+                    <option value="function-a" class="" i18n="ledStripFunctionArmOption"/>
+                    <option value="function-l" class="extra_functions20" i18n="ledStripFunctionBatteryOption"/>
+                    <option value="function-s" class="extra_functions20" i18n="ledStripFunctionRSSIOption"/>
+                    <option value="function-g" class="extra_functions20" i18n="ledStripFunctionGPSOption"/>
+                    <option value="function-r" class="" i18n="ledStripFunctionRingOption"/>
                 </select>
             </div>
 
@@ -78,20 +78,20 @@
                     <input type="checkbox" name="ThrottleHue" class="toggle function-t" />
                     <label>
                         <select class="auxSelect">
-                            <option value="0" class="">Roll</option>
-                            <option value="1" class="">Pitch</option>
-                            <option value="2" class="">Yaw</option>
-                            <option value="3" class="">Throttle</option>
-                            <option value="4" class="">Aux1</option>
-                            <option value="5" class="">Aux2</option>
-                            <option value="6" class="">Aux3</option>
-                            <option value="7" class="">Aux4</option>
-                            <option value="8" class="">Aux5</option>
-                            <option value="9" class="">Aux6</option>
-                            <option value="10" class="">Aux7</option>
-                            <option value="11" class="">Aux8</option>
+                            <option value="0" class="" i18n="controlAxisRoll"/>
+                            <option value="1" class="" i18n="controlAxisPitch"/>
+                            <option value="2" class="" i18n="controlAxisYaw"/>
+                            <option value="3" class="" i18n="controlAxisThrottle"/>
+                            <option value="4" class="" i18n="controlAxisAux1"/>
+                            <option value="5" class="" i18n="controlAxisAux2"/>
+                            <option value="6" class="" i18n="controlAxisAux3"/>
+                            <option value="7" class="" i18n="controlAxisAux4"/>
+                            <option value="8" class="" i18n="controlAxisAux5"/>
+                            <option value="9" class="" i18n="controlAxisAux6"/>
+                            <option value="10" class="" i18n="controlAxisAux7"/>
+                            <option value="11" class="" i18n="controlAxisAux8"/>
                         </select>
-                        <span class="labelSelect" i18n="ledStripThrottleFunction"></span>
+                        <span class="labelSelect" i18n="controlAxisThrottle"></span>
                     </label>
                 </div>
 
@@ -130,33 +130,33 @@
             </div>
 
             <div class="mode_colors">
-                <div class="section">Mode colors</div>
+                <div class="section" i18n="ledStripModeColorsTitle"/>
 
                 <select class="modeSelect">
-                    <option value="0">Orientation</option>
-                    <option value="1">Headfree</option>
-                    <option value="2">Horizon</option>
-                    <option value="3">Angle</option>
-                    <option value="4">Mag</option>
-                    <option value="5">Baro</option>
+                    <option value="0" i18n="ledStripModeColorsModeOrientation"/>
+                    <option value="1" i18n="ledStripModeColorsModeHeadfree"/>
+                    <option value="2" i18n="ledStripModeColorsModeHorizon"/>
+                    <option value="3" i18n="ledStripModeColorsModeAngle"/>
+                    <option value="4" i18n="ledStripModeColorsModeMag"/>
+                    <option value="5" i18n="ledStripModeColorsModeBaro"/>
                 </select>
 
-                <button class="mode_color-0-0 dir-n">N</button>
-                <button class="mode_color-0-1 dir-e">E</button>
-                <button class="mode_color-0-2 dir-s">S</button>
-                <button class="mode_color-0-3 dir-w">W</button>
-                <button class="mode_color-0-4 dir-u">U</button>
-                <button class="mode_color-0-5 dir-d">D</button>
+                <button class="mode_color-0-0 dir-n" i18n="ledStripDirN"/>
+                <button class="mode_color-0-1 dir-e" i18n="ledStripDirE"/>
+                <button class="mode_color-0-2 dir-s" i18n="ledStripDirS"/>
+                <button class="mode_color-0-3 dir-w" i18n="ledStripDirW"/>
+                <button class="mode_color-0-4 dir-u" i18n="ledStripDirU"/>
+                <button class="mode_color-0-5 dir-d" i18n="ledStripDirD"/>
             </div>
 
-            <div class="section">LED Orientation ('Modes &amp; Orientation') and Color</div>
+            <div class="section" i18n="ledStripModesOrientationTitle"/>
             <div class="directions">
-                <button class="dir-n">N</button>
-                <button class="dir-e">E</button>
-                <button class="dir-s">S</button>
-                <button class="dir-w">W</button>
-                <button class="dir-u">U</button>
-                <button class="dir-d">D</button>
+                <button class="dir-n" i18n="ledStripDirN"/>
+                <button class="dir-e" i18n="ledStripDirE"/>
+                <button class="dir-s" i18n="ledStripDirS"/>
+                <button class="dir-w" i18n="ledStripDirW"/>
+                <button class="dir-u" i18n="ledStripDirU"/>
+                <button class="dir-d" i18n="ledStripDirD"/>
             </div>
 
             <div class="colors">
@@ -179,26 +179,26 @@
             </div>
 
             <div class="special_colors mode_colors">
-                <div class="section">Special colors</div>
-                <button class="mode_color-6-0" i18n_title="colorGreen">Disarmed</button>
-                <button class="mode_color-6-1" i18n_title="colorBlue">Armed</button>
-                <button class="mode_color-6-2" i18n_title="colorWhite">Animation</button>
+                <div class="section" i18n="ledStripModesSpecialColorsTitle"/>
+                <button class="mode_color-6-0" i18n_title="colorGreen" i18n="ledStripModeColorsModeDisarmed"/>
+                <button class="mode_color-6-1" i18n_title="colorBlue" i18n="ledStripModeColorsModeArmed"/>
+                <button class="mode_color-6-2" i18n_title="colorWhite" i18n="ledStripModeColorsModeAnimation"/>
                 <!-- button class="mode_color-6-3" i18n_title="colorBlack">Background</button -->
-                <button class="mode_color-6-4" i18n_title="colorBlack">Blink background</button>
-                <button class="mode_color-6-5" i18n_title="colorRed">GPS: no sats</button>
-                <button class="mode_color-6-6" i18n_title="colorOrange">GPS: no lock</button>
-                <button class="mode_color-6-7" i18n_title="colorGreen">GPS: locked</button>
+                <button class="mode_color-6-4" i18n_title="colorBlack" i18n="ledStripModeColorsModeBlinkBg"/>
+                <button class="mode_color-6-5" i18n_title="colorRed" i18n="ledStripModeColorsModeGPSNoSats"/>
+                <button class="mode_color-6-6" i18n_title="colorOrange" i18n="ledStripModeColorsModeGPSNoLock"/>
+                <button class="mode_color-6-7" i18n_title="colorGreen" i18n="ledStripModeColorsModeGPSLocked"/>
             </div>
 
-            <div class="section">LED Strip Wiring</div>
+            <div class="section" i18n="ledStripWiring"/>
             <div class="wiringMode">
-                <button class="funcWire w100">Wire Ordering Mode</button>
+                <button class="funcWire w100" i18n="ledStripWiringMode"/>
             </div>
             <div class="wiringControls">
-                <button class="funcWireClearSelect w50">Clear selected</button>
-                <button class="funcWireClear w50">Clear ALL Wiring</button>
+                <button class="funcWireClearSelect w50" i18n="ledStripWiringClearControl"/>
+                <button class="funcWireClear w50" i18n="ledStripWiringClearAllControl"/>
             </div>
-            <p>LEDs without wire ordering number will not be saved.</p>
+            <p i18n="ledStripWiringMessage"/>
         </div>
 
         <div class="colorControls">