diff --git a/CHANGELOG.md b/CHANGELOG.md index 20bc482c..d7f5f7b9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added ### Changed +- Updated settings.html and style.css for accordian sections ### Hardware diff --git a/data/settings.html b/data/settings.html index 836446cd..235cf4b4 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,29 @@

${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"; + } + }); + } + - - + + diff --git a/data/style.css b/data/style.css index 54caee98..44ceb2a6 100644 --- a/data/style.css +++ b/data/style.css @@ -119,6 +119,30 @@ footer{margin-top:2rem;padding:1rem 0;border-top:1px solid var(--border);display .dev-links{display:flex;align-items:center;gap:1rem} .dev-link{color:var(--text-secondary);font-size:.9rem} .separator{color:rgba(255,255,255,.3)} +.accordion-header { + background-color: #03254c99; + color: #2a9df4; + cursor: pointer; + padding: 18px; + width: 100%; + text-align: left; + border: none; + outline: none; + transition: background-color 0.4s ease; +} +.accordion-header:hover { + background-color: #ddd; +} +.accordion-content { + padding: 0 18px; + background-color: #1167b1; + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease-out; +} +.accordion-header.active { + background-color: #03254c99; +} @keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}} @keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(220,53,69,.4)}70%{box-shadow:0 0 0 10px rgba(220,53,69,0)}100%{box-shadow:0 0 0 0 rgba(220,53,69,0)}}