Refactor Settings page with cards

This commit is contained in:
Daniel Öster 2025-09-14 22:45:03 +03:00
parent 00a820f007
commit 9ee0dffb33
2 changed files with 100 additions and 38 deletions

View file

@ -18,6 +18,8 @@ std::vector<BatteryType> supported_battery_types() {
const char* name_for_chemistry(battery_chemistry_enum chem) { const char* name_for_chemistry(battery_chemistry_enum chem) {
switch (chem) { switch (chem) {
case battery_chemistry_enum::Autodetect:
return "Autodetect";
case battery_chemistry_enum::LFP: case battery_chemistry_enum::LFP:
return "LFP"; return "LFP";
case battery_chemistry_enum::NCA: case battery_chemistry_enum::NCA:

View file

@ -864,6 +864,21 @@ const char* getCANInterfaceName(CAN_Interface interface) {
grid-column: span 2; grid-column: span 2;
} }
.settings-card {
background-color: #3a4b54; /* Slightly lighter than main background */
padding: 15px 20px;
margin-bottom: 20px;
border-radius: 20px; /* Less rounded than 50px for a more card-like feel */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.settings-card h3 {
color: #fff;
margin-top: 0;
margin-bottom: 15px;
padding-bottom: 8px;
border-bottom: 1px solid #4d5f69;
}
form .if-battery, form .if-inverter, form .if-charger, form .if-shunt { display: contents; } form .if-battery, form .if-inverter, form .if-charger, form .if-shunt { display: contents; }
form[data-battery="0"] .if-battery { display: none; } form[data-battery="0"] .if-battery { display: none; }
form[data-inverter="0"] .if-inverter { display: none; } form[data-inverter="0"] .if-inverter { display: none; }
@ -960,7 +975,11 @@ const char* getCANInterfaceName(CAN_Interface interface) {
</div> </div>
<div style='background-color: #404E47; padding: 10px; margin-bottom: 10px; border-radius: 50px'> <div style='background-color: #404E47; padding: 10px; margin-bottom: 10px; border-radius: 50px'>
<form action='saveSettings' method='post' style='display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; align-items: center;'> <form action='saveSettings' method='post'>
<div class="settings-card">
<h3>Battery config</h3>
<div style='display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; align-items: center;'>
<label for='battery'>Battery: </label> <label for='battery'>Battery: </label>
<select name='battery' id='battery'> <select name='battery' id='battery'>
@ -1000,7 +1019,7 @@ const char* getCANInterfaceName(CAN_Interface interface) {
</div> </div>
<div class="if-battery"> <div class="if-battery">
<label for='BATTCOMM'>Battery comm I/F: </label><select name='BATTCOMM' id='BATTCOMM'> <label for='BATTCOMM'>Battery interface: </label><select name='BATTCOMM' id='BATTCOMM'>
%BATTCOMM% %BATTCOMM%
</select> </select>
@ -1023,12 +1042,29 @@ const char* getCANInterfaceName(CAN_Interface interface) {
<input name='BATTCVMIN' pattern="^[0-9]+$" type='text' value='%BATTCVMIN%' /> <input name='BATTCVMIN' pattern="^[0-9]+$" type='text' value='%BATTCVMIN%' />
</div> </div>
<label>Double battery: </label>
<input type='checkbox' name='DBLBTR' value='on' %DBLBTR% />
<div class="if-dblbtr">
<label>Battery 2 interface: </label>
<select name='BATT2COMM'>
%BATT2COMM%
</select>
</div>
</div>
</div>
<div class="settings-card">
<h3>Inverter config</h3>
<div style='display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; align-items: center;'>
<label>Inverter protocol: </label><select name='inverter'> <label>Inverter protocol: </label><select name='inverter'>
%INVTYPE% %INVTYPE%
</select> </select>
<div class="if-inverter"> <div class="if-inverter">
<label>Inverter comm I/F: </label><select name='INVCOMM'> <label>Inverter interface: </label><select name='INVCOMM'>
%INVCOMM% %INVCOMM%
</select> </select>
</div> </div>
@ -1067,12 +1103,19 @@ const char* getCANInterfaceName(CAN_Interface interface) {
<input type='checkbox' name='INVICNT' value='on' %INVICNT% /> <input type='checkbox' name='INVICNT' value='on' %INVICNT% />
</div> </div>
</div>
</div>
<div class="settings-card">
<h3>Optional components config (optional)</h3>
<div style='display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; align-items: center;'>
<label>Charger: </label><select name='charger'> <label>Charger: </label><select name='charger'>
%CHGTYPE% %CHGTYPE%
</select> </select>
<div class="if-charger"> <div class="if-charger">
<label>Charger comm I/F: </label><select name='CHGCOMM'> <label>Charger interface: </label><select name='CHGCOMM'>
%CHGCOMM% %CHGCOMM%
</select> </select>
</div> </div>
@ -1082,11 +1125,21 @@ const char* getCANInterfaceName(CAN_Interface interface) {
</select> </select>
<div class="if-shunt"> <div class="if-shunt">
<label>Shunt comm I/F: </label><select name='SHUNTCOMM'> <label>Shunt interface: </label><select name='SHUNTCOMM'>
%SHUNTCOMM% %SHUNTCOMM%
</select> </select>
</div> </div>
</div>
</div>
<div class="settings-card">
<h3>Hardware config</h3>
<div style='display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; align-items: center;'>
<label>Use CanFD as classic CAN: </label>
<input type='checkbox' name='CANFDASCAN' value='on' %CANFDASCAN% />
<label>CAN addon crystal (Mhz): </label> <label>CAN addon crystal (Mhz): </label>
<input name='CANFREQ' type='text' value="%CANFREQ%" pattern="^[0-9]+$" /> <input name='CANFREQ' type='text' value="%CANFREQ%" pattern="^[0-9]+$" />
@ -1097,17 +1150,7 @@ const char* getCANInterfaceName(CAN_Interface interface) {
%EQSTOP% %EQSTOP%
</select> </select>
<label>Use CanFD as classic CAN: </label>
<input type='checkbox' name='CANFDASCAN' value='on' %CANFDASCAN% />
<label>Double battery: </label>
<input type='checkbox' name='DBLBTR' value='on' %DBLBTR% />
<div class="if-dblbtr"> <div class="if-dblbtr">
<label>Battery 2 comm I/F: </label>
<select name='BATT2COMM'>
%BATT2COMM%
</select>
<label>Contactor control via GPIO double battery: </label> <label>Contactor control via GPIO double battery: </label>
<input type='checkbox' name='CNTCTRLDBL' value='on' %CNTCTRLDBL% /> <input type='checkbox' name='CNTCTRLDBL' value='on' %CNTCTRLDBL% />
</div> </div>
@ -1149,6 +1192,17 @@ const char* getCANInterfaceName(CAN_Interface interface) {
<input type='checkbox' name='NOINVDISC' value='on' %NOINVDISC% /> <input type='checkbox' name='NOINVDISC' value='on' %NOINVDISC% />
</div> </div>
<label for='LEDMODE'>Status LED pattern: </label><select name='LEDMODE' id='LEDMODE'>
%LEDMODE%
</select>
</div>
</div>
<div class="settings-card">
<h3>Connectivity settings</h3>
<div style='display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; align-items: center;'>
<label>Broadcast Wifi access point: </label> <label>Broadcast Wifi access point: </label>
<input type='checkbox' name='WIFIAPENABLED' value='on' %WIFIAPENABLED% /> <input type='checkbox' name='WIFIAPENABLED' value='on' %WIFIAPENABLED% />
@ -1191,28 +1245,6 @@ const char* getCANInterfaceName(CAN_Interface interface) {
<div></div> <div></div>
</div> </div>
<label>Enable performance profiling: </label>
<input type='checkbox' name='PERFPROFILE' value='on' %PERFPROFILE% />
<label>Enable CAN logging via USB serial: </label>
<input type='checkbox' name='CANLOGUSB' value='on' %CANLOGUSB% />
<label>Enable logging via USB serial: </label>
<input type='checkbox' name='USBENABLED' value='on' %USBENABLED% />
<label>Enable logging via Webserver: </label>
<input type='checkbox' name='WEBENABLED' value='on' %WEBENABLED% />
<label>Enable CAN logging via SD card: </label>
<input type='checkbox' name='CANLOGSD' value='on' %CANLOGSD% />
<label>Enable logging via SD card: </label>
<input type='checkbox' name='SDLOGENABLED' value='on' %SDLOGENABLED% />
<label for='LEDMODE'>Status LED pattern: </label><select name='LEDMODE' id='LEDMODE'>
%LEDMODE%
</select>
<label>Enable MQTT: </label> <label>Enable MQTT: </label>
<input type='checkbox' name='MQTTENABLED' value='on' %MQTTENABLED% /> <input type='checkbox' name='MQTTENABLED' value='on' %MQTTENABLED% />
@ -1240,6 +1272,34 @@ const char* getCANInterfaceName(CAN_Interface interface) {
</div> </div>
</div>
</div>
<div class="settings-card">
<h3>Debug options</h3>
<div style='display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; align-items: center;'>
<label>Enable performance profiling on main page: </label>
<input type='checkbox' name='PERFPROFILE' value='on' %PERFPROFILE% />
<label>Enable CAN message logging via USB serial: </label>
<input type='checkbox' name='CANLOGUSB' value='on' %CANLOGUSB% />
<label>Enable general logging via USB serial: </label>
<input type='checkbox' name='USBENABLED' value='on' %USBENABLED% />
<label>Enable general logging via Webserver: </label>
<input type='checkbox' name='WEBENABLED' value='on' %WEBENABLED% />
<label>Enable CAN message logging via SD card: </label>
<input type='checkbox' name='CANLOGSD' value='on' %CANLOGSD% />
<label>Enable general logging via SD card: </label>
<input type='checkbox' name='SDLOGENABLED' value='on' %SDLOGENABLED% />
</div>
</div>
<div style='grid-column: span 2; text-align: center; padding-top: 10px;'><button type='submit'>Save</button></div> <div style='grid-column: span 2; text-align: center; padding-top: 10px;'><button type='submit'>Save</button></div>
<div style='grid-column: span 2; text-align: center; padding-top: 10px;' class="%SAVEDCLASS%"> <div style='grid-column: span 2; text-align: center; padding-top: 10px;' class="%SAVEDCLASS%">