Add language option (#4174)

betaflight · Sep 30, 2024 · 0a7f22b · 0a7f22b
1 parent b53f5c2
commit 0a7f22b
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 7 deletions.
diff --git a/locales/en/messages.json b/locales/en/messages.json
@@ -171,6 +171,9 @@
         "message": "Change language:",
         "description": "Try and be brief"
     },
+    "userLanguageSelect": {
+        "message": "Select default language"
+    },
     "language_default": {
         "message": "System Default"
     },

diff --git a/src/js/tabs/options.js b/src/js/tabs/options.js
@@ -30,6 +30,7 @@ options.initialize = function (callback) {
         TABS.options.initDarkTheme();
         TABS.options.initShowDevToolsOnStartup();
         TABS.options.initShowNotifications();
+        TABS.options.initUserLanguage();
         TABS.options.initShowWarnings();
         TABS.options.initMeteredConnection();
 
@@ -233,13 +234,34 @@ options.initShowNotifications = function () {
 options.initMeteredConnection = function () {
     const result = getConfig("meteredConnection");
     $("div.meteredConnection input")
-        .prop("checked", !!result.meteredConnection)
-        .on('change', function () {
-            setConfig({ meteredConnection: $(this).is(":checked") });
-            // update network status
-            ispConnected();
-        })
-        .trigger('change');
+    .prop("checked", !!result.meteredConnection)
+    .on('change', function () {
+        setConfig({ meteredConnection: $(this).is(":checked") });
+        // update network status
+        ispConnected();
+    })
+    .trigger('change');
+};
+
+options.initUserLanguage = function () {
+    const userLanguage = i18n.selectedLanguage;
+    const userLanguageElement = $('#userLanguage');
+    const languagesAvailables = i18n.getLanguagesAvailables();
+    userLanguageElement.append(`<option value="DEFAULT">${i18n.getMessage('language_default')}</option>`);
+    userLanguageElement.append('<option disabled>------</option>');
+    languagesAvailables.forEach(element => {
+        const languageName = i18n.getMessage(`language_${element}`);
+        userLanguageElement.append(`<option value="${element}">${languageName}</option>`);
+    });
+
+    userLanguageElement
+    .val(userLanguage)
+    .on('change', e => {
+        i18n.changeLanguage(e.target.value);
+        // translate to user-selected language
+        i18n.localizePage();
+    })
+    .trigger('change');
 };
 
 // TODO: remove when modules are in place

diff --git a/src/tabs/options.html b/src/tabs/options.html
@@ -79,6 +79,14 @@
                     </div>
                     <span class="freelabel" i18n="showNotifications"></span>
                 </div>
+                <div class="userLanguage">
+                    <span class="dropdown">
+                        <select class="dropdown-select" id="userLanguage" i18n_title="userLanguageSelect">
+                            <!-- User languages generated here -->
+                        </select>
+                    </span>
+                    <span i18n="userLanguageSelect"></span>
+                </div>
             </div>
         </div>