Skip to content

Commit

Permalink
more to go
Browse files Browse the repository at this point in the history
  • Loading branch information
@HThuren
HThuren committed Dec 11, 2023
1 parent f0a0a76 commit 6e05fa7
Show file tree
Hide file tree
Showing 5 changed files with 141 additions and 84 deletions.
14 changes: 14 additions & 0 deletions src/css/tabs/auxiliary.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
21 changes: 19 additions & 2 deletions src/js/localization.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down Expand Up @@ -238,4 +255,4 @@ i18n.addResources = function(bundle) {
i18next.addResourceBundle(lang, ns, bundle, true, true);
};

export { i18n };
export { i18n, getCurrentLocaleISO };
167 changes: 98 additions & 69 deletions src/js/tabs/auxiliary.js
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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']},
Expand All @@ -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},
Expand All @@ -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;
}
Expand All @@ -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
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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`);

Expand All @@ -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 () {

Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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() {
Expand All @@ -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();

Expand Down
1 change: 1 addition & 0 deletions src/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/>
Expand Down
22 changes: 9 additions & 13 deletions src/tabs/auxiliary.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>
Expand All @@ -35,7 +32,6 @@
</td>
</tr>
</table>

<div class="modes"></div>
</div>
<div class="content_toolbar">
Expand Down

0 comments on commit 6e05fa7

Please sign in to comment.