BuildOptions

Author: HThuren

src/js/tabs/auxiliary.js

@@ -15,8 +15,8 @@ const auxiliary = {};
 
 // BF build Options mapped to build Key
 let buildMap = [
-    { buildKey: 'xxx',       buildOption: ['USE_ARCO_TRAINER', 'USE_DASHBOARD', 'USE_PINIO']},
     { buildKey: 'cam',       buildOption: ['USE_CAMERA_CONTROL']},
+    { buildKey: 'div',       buildOption: ['USE_ARCO_TRAINER', 'USE_DASHBOARD', 'USE_PINIO']},
     { buildKey: 'dshot',     buildOption: ['USE_DSHOT']},
     { buildKey: 'gps',       buildOption: ['USE_GPS', 'USE_GPS_PLUS_CODES']},
     { buildKey: 'led_strip', buildOption: ['USE_LED_STRIP', 'USE_LED_STRIP_64']},
@@ -48,9 +48,6 @@ let categoryTable = [
     { name: 'VTX',        buildKey: ['vtx'],       modes: ['STICK COMMANDS DISABLE', 'VTX CONTROL DISABLE', 'VTX PIT MODE']},
 ];
 
-
-const categoryFieldsSelect = $('.auxiliary_category');
-
 function createTable(data) {
     // Create a dynamic table with fixed values
     let table = [];
@@ -107,18 +104,30 @@ 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.
 */
 
-function createCategorySelect(table) {
-    for (let i = 0; i < table.length; i++) {
-        const str = `<option value="${table[i].name}">${table[i].name}</option>`;
-        $('#auxiliary_filter_category .select').append(`<option value="${table[i].name}">${table[i].name}</option>`);
-        console.log(str);
+function isInBuildKey(map, name) {
+
+    if(name === 'all') {
+        return true;
+    }
+    for (let i = 0; i < map.length; i++) {
+        return flightModes.includes(name);
     }
 }
 
 function isFlightMode(name) {
     return flightModes.includes(name);
 }
 
+function createCategorySelect(table) {
+    let categorySelect = $('select.auxiliary_category_select');
+
+    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>`);
+        }
+    }
+}
+
 auxiliary.initialize = function (callback) {
     GUI.active_tab_ref = this;
     GUI.active_tab = 'auxiliary';
@@ -410,7 +419,6 @@ auxiliary.initialize = function (callback) {
 
         // translate to user-selected language
         i18n.localizePage();
-        //categoryFieldsSelect
 
         // generate category multiple select
         displayTable(categoryTable);

src/tabs/auxiliary.html

@@ -8,25 +8,33 @@
             <p i18n="auxiliaryHelp"></p>
         </div>
 
-        <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 = "auxiliary_fitler_table_value">
-                            <select id="auxiliary_category" multiple="multiple" class="auxiliary_filter_select"></select>
+        <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>
                         </div>
                     </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="toolbox">
-            <form>
-                <input type="checkbox" id="switch-toggle-unused" name="switch-toggle-unused" class="toggle" />
-                <span i18n="auxiliaryToggleUnused"></span>
-            </form>
-        </div>
+                </td>
+                <td>&nbsp;</td>
+                <td vertical-align: bottom;>
+                    <div class="toolbox">
+                        <form>
+                            <input type="checkbox" id="switch-toggle-unused" name="switch-toggle-unused" class="toggle"/>
+                            <span i18n="auxiliaryToggleUnused"></span>
+                        </form>
+                    </div>
+                </td>
+            </tr>
+        </table>
 
         <div class="modes"></div>
     </div>