diff --git a/data/settings.html b/data/settings.html index 836446cd..4db05f9b 100644 --- a/data/settings.html +++ b/data/settings.html @@ -1,7 +1,6 @@ - - - + + SmartSpin2k Settings @@ -16,15 +15,298 @@
-
Loading
+

Settings

- + +
+
+ +
- +
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+ + +
@@ -75,14 +357,21 @@

Reset to Defaults?

tooltipText: 'DNS Name the device will use on the network.', defaultValue: 'loading' }, - shiftStep: { - type: 'slider', - title: 'Shift Amount', - tooltip: 'Sim Mode step size', - tooltipText: 'Amount to move stepper per gear shift. Try to target ~30watt changes.', - min: 10, max: 6000, step: 50, - defaultValue: 1200, - unit: '' + autoUpdate: { + type: 'toggle', + title: 'Automatic Updates', + tooltip: 'OTA firmware', + tooltipText: 'Check for new firmware on boot?', + defaultValue: false + } + }; + const settingsConfig2 = { + pTab4Pwr: { + type: 'toggle', + title: 'PowerTable For Power', + tooltip: 'Use cadence to calculate power output', + tooltipText: 'Use the PowerTable for Power instead of PM', + defaultValue: false }, powerCorrectionFactor: { type: 'slider', @@ -110,6 +399,17 @@

Reset to Defaults?

min: 0.1, max: 20, step: 0.1, defaultValue: 1.0, unit: '' + } + }; + const settingsConfig3 = { + shiftStep: { + type: 'slider', + title: 'Shift Amount', + tooltip: 'Sim Mode step size', + tooltipText: 'Amount to move stepper per gear shift. Try to target ~30watt changes.', + min: 10, max: 6000, step: 50, + defaultValue: 1200, + unit: '' }, minWatts: { type: 'slider', @@ -145,13 +445,6 @@

Reset to Defaults?

tooltipText: 'Make stepper silent at expense of torque', defaultValue: false }, - autoUpdate: { - type: 'toggle', - title: 'Automatic Updates', - tooltip: 'OTA firmware', - tooltipText: 'Check for new firmware on boot?', - defaultValue: false - }, stepperDir: { type: 'toggle', title: 'Stepper Motor Direction', @@ -165,20 +458,15 @@

Reset to Defaults?

tooltip: 'Reverse input', tooltipText: 'Change Shifter Direction', defaultValue: false - }, + } + }; + const settingsConfig4 = { udpLogEnabled: { type: 'toggle', title: 'UDP Logging', tooltip: 'Network diagnostics', tooltipText: 'Sending log-messages via UDP Port 10.000', defaultValue: false - }, - pTab4Pwr: { - type: 'toggle', - title: 'PowerTable For Power', - tooltip: 'Use cadence to calculate power output', - tooltipText: 'Use the PowerTable for Power instead of PM', - defaultValue: false } }; @@ -254,6 +542,7 @@

${config.title}

} function generateSettings() { + //network const container = document.getElementById('settingsContainer'); let html = ''; @@ -270,11 +559,70 @@

${config.title}

html += createToggleSetting(id, config); break; } - } - + } container.innerHTML = html; + + //power + const container2 = document.getElementById('settingsContainer2'); + let html2 = ''; + + for (const [id, config] of Object.entries(settingsConfig2)) { + switch (config.type) { + case 'text': + case 'password': + html2 += createTextSetting(id, config); + break; + case 'slider': + html2 += createSliderSetting(id, config); + break; + case 'toggle': + html2 += createToggleSetting(id, config); + break; + } + } + container2.innerHTML = html2; } + //motor + const container3 = document.getElementById('settingsContainer3'); + let html3 = ''; + + for (const [id, config] of Object.entries(settingsConfig3)) { + switch (config.type) { + case 'text': + case 'password': + html3 += createTextSetting(id, config); + break; + case 'slider': + html3 += createSliderSetting(id, config); + break; + case 'toggle': + html3 += createToggleSetting(id, config); + break; + } + } + container3.innerHTML = html3; + + //advanced + const container4 = document.getElementById('settingsContainer4'); + let html4 = ''; + + for (const [id, config] of Object.entries(settingsConfig4)) { + switch (config.type) { + case 'text': + case 'password': + html4 += createTextSetting(id, config); + break; + case 'slider': + html4 += createSliderSetting(id, config); + break; + case 'toggle': + html4 += createToggleSetting(id, config); + break; + } + } + container4.innerHTML = html4; + let debounceTimer; const saveStatus = document.getElementById('saveStatus'); const confirmDialog = document.getElementById('confirmDialog'); @@ -378,7 +726,8 @@

${config.title}

params.append(element.name, element.value); } - const toggleIds = Object.entries(settingsConfig) + settingsConfigCombined = settingsConfig.concat(settingsConfig2, settingsConfig3, settingsConfig4); + const toggleIds = Object.entries(settingsConfigCombined) .filter(([_, config]) => config.type === 'toggle') .map(([id, _]) => id); @@ -398,6 +747,27 @@

${config.title}

generateSettings(); startConfigUpdate(); }); + + // Select all accordion headers + var acc = document.getElementsByClassName("accordion-header"); + var i; + + for (i = 0; i < acc.length; i++) { + acc[i].addEventListener("click", function() { + /* Toggle between adding and removing the "active" class, to highlight the button that controls the panel */ + this.classList.toggle("active"); + + /* Toggle between hiding and showing the active panel */ + var panel = this.nextElementSibling; + if (panel.style.maxHeight) { + // If the panel is open (has a maxHeight set), close it + panel.style.maxHeight = null; + } else { + // If the panel is closed, open it by setting its height dynamically + // Use scrollHeight to get the full height of the content, regardless of current visibility + panel.style.maxHeight = panel.scrollHeight + "px"; + } + }); + } - - +