more to go

HThuren · HThuren · commit 6e05fa7e3c05 · 2023-12-11T01:19:00.000+01:00
diff --git a/src/css/tabs/auxiliary.less b/src/css/tabs/auxiliary.less
@@ -11,6 +11,20 @@
 		color: rgb(105, 99, 99);
 		padding: 10px 5px;
 	}
+	.auxiliary_category_content {
+		width: 100%;
+	}
+	.auxiliary_category_header {
+		width: 100%;
+		margin-top: 6px;
+		padding: 4px;
+		padding-left: 8px;
+		padding-right: 8px;
+		color: white;
+		border: 1px solid var(--subtleAccent);
+		background-color: rgba(64, 64, 64, 1);
+		resize: none;
+	}
 	.range {
 		.marker {
 			background: var(--accent);
diff --git a/src/js/localization.js b/src/js/localization.js
@@ -11,14 +11,31 @@ const i18n = {};
 window.i18n = i18n;
 
 
-const languagesAvailables = ['ca', 'da', 'de', 'en', 'es', 'eu', 'fr', 'gl', 'it', 'ja', 'ko', 'nl', 'pt', 'pt_BR', 'pl', 'ru', 'uk', 'zh_CN', 'zh_TW'];
+const languagesAvailables = ['ca', 'da', 'de', 'en', 'es', 'eu', 'fr', 'gl', 'it',
+                             'ja', 'ko', 'nl', 'pt', 'pt_BR', 'pl', 'ru', 'uk', 'zh_CN', 'zh_TW'];
 
 const languageFallback = {
                             'pt': ['pt_BR', 'en'],
                             'pt_BR': ['pt', 'en'],
                             'default': ['en'],
 };
 
+// must be aligned with languagesAvailables
+const languageISOcode = ['ca-ES', 'da-DK', 'de-DE', 'en-US', 'es-ES', 'eu-ES', 'fr-FR', 'gl-ES', 'it-IT',
+                         'ja-JP', 'ko-KR', 'nl-NL', 'pt-PT', 'pt-BR', 'pl-PL', 'ru-RU', 'uk-UA', 'zh-CN', 'zh-TW'];
+
+/**
+ * Functions that return ISO Language Code Table from http://www.lingoes.net/en/translator/langcode.htm
+ * Map between languagesAvailables and languageISOcode
+ * Fallback to en-US
+ */
+function getCurrentLocaleISO() {
+    const isoCodeIndex = languagesAvailables.indexOf(i18next.language);
+    if (isoCodeIndex === -1)
+        return 'en-US';
+    return languageISOcode[isoCodeIndex];
+}
+
 /**
  * Functions that depend on the i18n framework
  */
@@ -238,4 +255,4 @@ i18n.addResources = function(bundle) {
     i18next.addResourceBundle(lang, ns, bundle, true, true);
 };
 
-export { i18n };
+export { i18n, getCurrentLocaleISO };
diff --git a/src/js/tabs/auxiliary.js b/src/js/tabs/auxiliary.js
@@ -1,4 +1,4 @@
-import { i18n } from '../localization';
+import { i18n, getCurrentLocaleISO } from "../localization";
 import GUI, { TABS } from '../../js/gui';
 import { get as getConfig, set as setConfig } from '../ConfigStorage';
 import { bit_check } from '../bit';
@@ -13,7 +13,7 @@ import inflection from "inflection";
 
 const auxiliary = {};
 
-// BF build Options mapped to build Key
+// BF build Options mapped to buildKey.
 let buildMap = [
     { buildKey: 'cam',       buildOption: ['USE_CAMERA_CONTROL']},
     { buildKey: 'div',       buildOption: ['USE_ARCO_TRAINER', 'USE_DASHBOARD', 'USE_PINIO']},
@@ -31,10 +31,10 @@ let buildMap = [
 const flightModes = ["ARM","ANGLE","HORIZON","ANTI GRAVITY","MAG","HEADFREE","HEADADJ","SERVO1","SERVO2","SERVO3",
                      "FAILSAFE","AIR MODE","FPV ANGLE MIX","FLIP OVER AFTER CRASH","USER1","USER2","USER3","USER4","ACRO TRAINER","LAUNCH CONTROL"];
 
-// Categories
+// Categories to be mapped with buildMap. Category 'all' are virtuel and always included
 let categoryTable = [
     { name: '3D',         buildKey: ['dshot'],     modes: ['3D', '3D DISABLE / SWITCH']},
-    { name: 'BEEP',       buildKey: ['all'],       modes: ['BEEPER', 'BEEPER MUTE', 'GPS BEEP SATELLITE COUNT']},
+    { name: 'BEEP',       buildKey: ['all'],       modes: ['BEEPERON', 'BEEPER', 'BEEPER MUTE', 'GPS BEEP SATELLITE COUNT']},
     { name: 'BLACKBOX',   buildKey: ['all'],       modes: ['BLACKBOX', 'BLACKBOX ERASE']},
     { name: 'CAM',        buildKey: ['cam'],       modes: ['CAMERA CONTROL 1', 'CAMERA CONTROL 2', 'CAMERA CONTROL 3']},
     { name: 'FLIGHTMODE', buildKey: ['all'],       modes: flightModes},
@@ -48,7 +48,9 @@ let categoryTable = [
     { name: 'VTX',        buildKey: ['vtx'],       modes: ['STICK COMMANDS DISABLE', 'VTX CONTROL DISABLE', 'VTX PIT MODE']},
 ];
 
-function isInBuildKey(map, name) {
+let modeList = [];
+
+function inBuildMap(map, name) {
     if (name == 'all') {
         return true;
     }
@@ -64,46 +66,100 @@ function isInBuildKey(map, name) {
     return false;
 }
 
-function createCategorySelect(table) {
-    let categorySelect = $('select.auxiliary_category_select');
+function isSelectedMode(mList, modeName) {
+    for (let i = 0; i < mList.length; i++) {
+        if (mList[i].includes(modeName)) {
+            return true;
+        }
+    }
+    return false;
+}
 
-    for (let i = 0; i < table.length; i++) {
-        if (isInBuildKey(buildMap, table[i].buildKey)) {
-            categorySelect.append(`<option value="${table[i].name}">${table[i].name}</option>`);
+function resolveCategoryName(category, choise) {
+    let mList = [];
+    for (let i = 0; i < choise.length; i++) {
+        for (let j = 0; j < category.length; j++) {
+            if (choise[i] == category[j].name) {
+                mList.push(category[j].modes);
+            }
         }
     }
+    return mList;
+}
 
-    categorySelect.multipleSelect({
-        filter: true,
-        // locale: selectOptions,
-        showClear: true,
-        // minimumCountSelected : minimumCountSelected,
-        placeholder: i18n.getMessage("dropDownFilterDisabled"),
-        // onClick: () => { this.updateSearchResults(); },
-        // onCheckAll: () => { this.updateSearchResults(); },
-        // onUncheckAll: () => { this.updateSearchResults(); },
-        formatSelectAll() { return i18n.getMessage("dropDownSelectAll"); },
-        formatAllSelected() { return i18n.getMessage("dropDownAll"); },
-    });
+function isPreSelectedCategory(categoryList, categoryName) {
+    for (let i = 0; i < categoryList.length; i++) {
+        if (categoryName == categoryList[i]) {
+            return true;
+        }
+    }
+    return false;
 }
 
-function createTable(data) {
-    // Create a dynamic table with fixed values
-    let table = [];
+function updateSearchResults() {
+    let categorySelect = $('select.auxiliary_category_select');
+
+    const categoryNameList = categorySelect.multipleSelect("getSelects", "text");
+    setConfig({ auxiliaryCategoryNameList: categoryNameList });                 // save as users choise
+    modeList = resolveCategoryName(categoryTable, categoryNameList);
+    // like to call, but not out of scope ---- update_ui();
+}
 
-    for (let i = 0; i < data.length; i++) {
-        let row = data[i].modes.slice();              // Use slice to clone the array
-        table.push(row);
+function getCategoryNames(table, buildKey) {
+    // return names for buildKey category
+    let categoryChoise = [];
+    for (let i = 0; i < table.length; i++) {
+        if (buildKey == table[i].name) {
+            categoryChoise.push(table[i].name);
+        }
     }
-
-    return table;
+    return categoryChoise;
 }
 
-// Function to display the table in the console
-function displayTable(table) {
+function createCategorySelect(table, map) {
+    let categorySelect = $('select.auxiliary_category_select');
+
+    const categoryNameObj = getConfig('auxiliaryCategoryNameList');      // read user pre selected categories
+    let categoryNameList = categoryNameObj.auxiliaryCategoryNameList;
+    if (categoryNameList.length == 0) {
+        categoryNameList = getCategoryNames(table, 'all');         // empty choise -> select names from 'all' category
+        setConfig({ auxiliaryCategoryNameList: categoryNameList });
+    }
+
     for (let i = 0; i < table.length; i++) {
-        console.log(`${table[i].name}: ${table[i].modes}`);
+        if (inBuildMap(map, table[i].buildKey)) {
+            if (isPreSelectedCategory(categoryNameList, table[i].name)) {
+                categorySelect.append(`<option value="${table[i].name}" selected="selected">${table[i].name}</option>`);
+            }
+            else {
+                categorySelect.append(`<option value="${table[i].name}">${table[i].name}</option>`);
+            }
+        }
+        else {
+            categorySelect.append(`<option value="${table[i].name}" disabled="disabled">${table[i].name}</option>`);
+        }
     }
+
+    const modeWidth = 125;
+    const heightUnit = categoryTable.length;
+
+    categorySelect.sortSelect().multipleSelect({
+        width: modeWidth + 50,
+        dropWidth: modeWidth + 165,
+        minimumCountSelected: 3,                    // number before we use xx of yy
+        maxHeightUnit: heightUnit,                  // in px
+        locale: getCurrentLocaleISO(),
+        filter: false,
+        showClear: true,
+        ellipsis: true,
+        openOnHover: true,
+        placeholder: i18n.getMessage("dropDownFilterDisabled"),
+        onClick: () => { updateSearchResults(); },
+        onCheckAll: () => { updateSearchResults(); },
+        onUncheckAll: () => { updateSearchResults(); },
+        formatSelectAll() { return i18n.getMessage("dropDownSelectAll"); },
+        formatAllSelected() { return i18n.getMessage("dropDownAll"); },
+    });
 }
 
 // Function to simulate mouseover and select an option
@@ -143,7 +199,6 @@ The simulateMouseoverAndSelectForEachOption function iterates over each option i
 You can also add a delay between each iteration if needed (commented out in the code). Adjust the delay according to your requirements.
 */
 
-
 auxiliary.initialize = function (callback) {
     GUI.active_tab_ref = this;
     GUI.active_tab = 'auxiliary';
@@ -436,10 +491,6 @@ auxiliary.initialize = function (callback) {
         // translate to user-selected language
         i18n.localizePage();
 
-        // generate category multiple select
-        displayTable(categoryTable);
-        createCategorySelect(categoryTable);
-
         const length = Math.max(...(FC.AUX_CONFIG.map(el => el.length)));
         $('.tab-auxiliary .mode .info').css('min-width', `${Math.round(length * getTextWidth('A'))}px`);
 
@@ -455,6 +506,9 @@ auxiliary.initialize = function (callback) {
             addLinkedToMode(modeElement, 0, 0);
         });
 
+        // setup category multiple select
+        createCategorySelect(categoryTable, buildMap);
+
         // UI Hooks
         $('a.save').click(function () {
 
@@ -621,32 +675,19 @@ auxiliary.initialize = function (callback) {
             }
 
             let hideUnused = hideUnusedModes && hasUsedMode;
-            let hideNoFlight = hideNoFlightMode && hasUsedMode;
 
             for (let i = 1; i < FC.AUX_CONFIG.length; i++) {    // ARM has index 0
                 let modeElement = $(`#mode-${i}`);
 
-                if (modeElement.find(' .range').length == 0 && modeElement.find(' .link').length == 0) {
-                    // unused mode
-                    modeElement.toggle(!hideUnused);
+                if ( ! isSelectedMode(modeList, FC.AUX_CONFIG[i])) {
+                    modeElement.toggle( false);
                 }
-
-                /*
-                if ( ! isFlightMode(FC.AUX_CONFIG[i])) {
-                    // not flightMode mode
-                    hide = hide || !hideNoFlight;
-                    style = modeElement.css('display');
-                    console.log(`1 HIDE not flightmode: ${FC.AUX_CONFIG[i]} -> ${hide}`);
-                    // modeElement.toggle(!hideNoFlight);
-                    / *
-                    if( hideNoFlight && ! style === 'none') {
+                else {
+                    if ( ! isSelectedMode(modeList, FC.AUX_CONFIG[i]) && modeElement.find(' .range').length == 0 && modeElement.find(' .link').length == 0) {
+                        // unused mode
                         modeElement.toggle(!hideUnused);
                     }
-                    style = modeElement.css('display');
-                    console.log(`2 NOT flightmode: ${FC.AUX_CONFIG[i]} - ${style}`);
-                    * /
                 }
-                */
             }
 
             auto_select_channel(FC.RC.channels, FC.RC.active_channels, FC.RSSI_CONFIG.channel);
@@ -701,9 +742,8 @@ auxiliary.initialize = function (callback) {
         }
 
         let hideUnusedModes = false;
-        let hideNoFlightMode = false;
 
-        // hide unused modes
+        // get or save hide unused modes
         const configUnusedModes = getConfig('hideUnusedModes');
         $("input#switch-toggle-unused")
             .change(function() {
@@ -714,17 +754,6 @@ auxiliary.initialize = function (callback) {
             .prop("checked", !!configUnusedModes.hideUnusedModes)
             .change();
 
-        // hide non flightmodes
-        const configNoFlightMode = getConfig('hideNoFlightMode');
-        $("input#switch-toggle-hideNoFlightMode")
-            .change(function() {
-                hideNoFlightMode = $(this).prop("checked");
-                setConfig({ hideNoFlightMode: hideNoFlightMode });
-                update_ui();
-            })
-            .prop("checked", !!configNoFlightMode.hideNoFlightMode)
-            .change();
-
         // update ui instantly on first load
         update_ui();
 
diff --git a/src/main.html b/src/main.html
@@ -49,6 +49,7 @@
     <link type="text/css" rel="stylesheet" href="./css/select2_custom.css" media="all"/>
     <link type="text/css" rel="stylesheet" href="./node_modules/select2/dist/css/select2.min.css" media="all"/>
     <link type="text/css" rel="stylesheet" href="./node_modules/multiple-select/dist/multiple-select.min.css" media="all"/>
+    <link type="text/css" rel="stylesheet" href="./node_modules/multiple-select/dist/multiple-select-locale-all.min.js"/>
     <link type="text/css" rel="stylesheet" href="./components/EscDshotDirection/Styles.css" media="all"/>
 
     <link type="text/css" rel="stylesheet" href="./css/dark-theme.css" media="all" disabled/>
diff --git a/src/tabs/auxiliary.html b/src/tabs/auxiliary.html
@@ -7,25 +7,22 @@
         <div class="note">
             <p i18n="auxiliaryHelp"></p>
         </div>
-
         <table>
             <tr>
                 <td>
-                    <div id="auxiliary_main_content">
-                        <div class="auxiliary_search_settings">
-                            <div class="auxiliary_filter_table_wrapper">
-                                <div class="auxiliary_filter_row">
-                                    <div class = "auxiliary_fitler_table_header" i18n="auxiliaryFilterCategory"></div>
-                                    <div class="line auxiliary_filter_table_value">
-                                        <select id="auxiliary_category" multiple="multiple" class="auxiliary_category_select"></select>
-                                    </div>
-                                </div>
+                    <div id="auxiliary_category_content">
+                        <div class="auxiliary_filter_row">
+                            <div>
+                                <div class="auxiliary_category_header" i18n="auxiliaryFilterCategory"></div>
+                            </div>
+                            <div class="line auxiliary_category_select_value">
+                                <select id="auxiliary_category" multiple="multiple" class="auxiliary_category_select" width: 100%; size='14'></select>
                             </div>
                         </div>
                     </div>
                 </td>
-                <td>&nbsp;&nbsp;&nbsp;</td>
-                <td vertical-align: bottom;>
+                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
+                <td>
                     <div class="toolbox">
                         <form>
                             <input type="checkbox" id="switch-toggle-unused" name="switch-toggle-unused" class="toggle"/>
@@ -35,7 +32,6 @@
                 </td>
             </tr>
         </table>
-
         <div class="modes"></div>
     </div>
     <div class="content_toolbar">
