mirror of
https://github.com/lumapu/ahoy.git
synced 2025-05-09 23:16:38 +02:00
Style setup page with collapse feature
sort order too.
This commit is contained in:
DanielR92
GitHub
parent
ebe5ecd338
commit
0f9f6795bc
1 changed files with 91 additions and 50 deletions
|
|
@ -52,64 +52,88 @@
|
|||
<h1>Setup</h1>
|
||||
<div id="setup" class="content">
|
||||
<div id="content">
|
||||
<p>
|
||||
Enter the credentials to your prefered WiFi station. After rebooting the device tries to connect with this information.
|
||||
</p>
|
||||
<form method="post" action="{IP}/save">
|
||||
<p class="des">WiFi</p>
|
||||
<label for="ssid">SSID</label>
|
||||
<input type="text" class="text" name="ssid" value="{SSID}"/>
|
||||
<label for="pwd">Password</label>
|
||||
<input type="password" class="text" name="pwd" value="{PWD}"/>
|
||||
<p class="des">Device Host Name</p>
|
||||
<a class="erase" href="/erase">ERASE SETTINGS (not WiFi)</a>
|
||||
|
||||
<p class="des">Device Host Name</p>
|
||||
<label for="device">Device Name</label>
|
||||
<input type="text" class="text" name="device" value="{DEVICE}"/>
|
||||
|
||||
<form method="post" action="{IP}/save">
|
||||
<button type="button" class="s_collapsible">WiFi</button>
|
||||
<div class="s_content">
|
||||
<fieldset>
|
||||
<legend class="des">WiFi</legend>
|
||||
<p>Enter the credentials to your prefered WiFi station. After rebooting the device tries to connect with this information.</p>
|
||||
<label for="ssid">SSID</label>
|
||||
<input type="text" class="text" name="ssid" value="{SSID}"/>
|
||||
<label for="pwd">Password</label>
|
||||
<input type="password" class="text" name="pwd" value="{PWD}"/>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<button type="button" class="s_collapsible">Inverter</button>
|
||||
<div class="s_content">
|
||||
<fieldset>
|
||||
<legend class="des">Inverter</legend>
|
||||
{INVERTERS}<br/>
|
||||
<p class="subdes">General</p>
|
||||
<label for="invInterval">Interval [s]</label>
|
||||
<input type="text" class="text" name="invInterval" value="{INV_INTVL}"/>
|
||||
<label for="invRetry">Max retries per Payload</label>
|
||||
<input type="text" class="text" name="invRetry" value="{INV_RETRIES}"/>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<a class="erase" href="/erase">ERASE SETTINGS (not WiFi)</a>
|
||||
<button type="button" class="s_collapsible">NTP Server</button>
|
||||
<div class="s_content">
|
||||
<fieldset>
|
||||
<legend class="des">NTP Server</legend>
|
||||
<label for="ntpAddr">NTP Server / IP</label>
|
||||
<input type="text" class="text" name="ntpAddr" value="{NTP_ADDR}"/>
|
||||
<label for="ntpPort">NTP Port</label>
|
||||
<input type="text" class="text" name="ntpPort" value="{NTP_PORT}"/>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<p class="des">Inverter</p>
|
||||
{INVERTERS}<br/>
|
||||
<p class="subdes">General</p>
|
||||
<label for="invInterval">Interval [s]</label>
|
||||
<input type="text" class="text" name="invInterval" value="{INV_INTVL}"/>
|
||||
<label for="invRetry">Max retries per Payload</label>
|
||||
<input type="text" class="text" name="invRetry" value="{INV_RETRIES}"/>
|
||||
<button type="button" class="s_collapsible">MQTT</button>
|
||||
<div class="s_content">
|
||||
<fieldset>
|
||||
<legend class="des">MQTT</legend>
|
||||
<label for="mqttAddr">Broker / Server IP</label>
|
||||
<input type="text" class="text" name="mqttAddr" value="{MQTT_ADDR}"/>
|
||||
<label for="mqttPort">Port</label>
|
||||
<input type="text" class="text" name="mqttPort" value="{MQTT_PORT}"/>
|
||||
<label for="mqttUser">Username (optional)</label>
|
||||
<input type="text" class="text" name="mqttUser" value="{MQTT_USER}"/>
|
||||
<label for="mqttPwd">Password (optional)</label>
|
||||
<input type="text" class="text" name="mqttPwd" value="{MQTT_PWD}"/>
|
||||
<label for="mqttTopic">Topic</label>
|
||||
<input type="text" class="text" name="mqttTopic" value="{MQTT_TOPIC}"/>
|
||||
<label for="mqttIntvl">Interval [s] (read-only)</label>
|
||||
<input type="text" class="text" name="mqttIntvl" value="{MQTT_INTVL}" readonly/>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<p class="des">Pinout (Wemos)</p>
|
||||
{PINOUT}
|
||||
<button type="button" class="s_collapsible">System Config</button>
|
||||
<div class="s_content">
|
||||
<fieldset>
|
||||
<legend class="des">System Config</legend>
|
||||
<p class="des">Pinout (Wemos)</p>
|
||||
{PINOUT}
|
||||
|
||||
<p class="des">Radio (NRF24L01+)</p>
|
||||
<label for="rf24Power">Amplifier Power Level</label>
|
||||
<select name="rf24Power">{RF24}</select>
|
||||
<p class="des">Radio (NRF24L01+)</p>
|
||||
<label for="rf24Power">Amplifier Power Level</label>
|
||||
<select name="rf24Power">{RF24}</select>
|
||||
|
||||
<p class="des">NTP Server</p>
|
||||
<label for="ntpAddr">NTP Server / IP</label>
|
||||
<input type="text" class="text" name="ntpAddr" value="{NTP_ADDR}"/>
|
||||
<label for="ntpPort">NTP Port</label>
|
||||
<input type="text" class="text" name="ntpPort" value="{NTP_PORT}"/>
|
||||
|
||||
<p class="des">MQTT</p>
|
||||
<label for="mqttAddr">Broker / Server IP</label>
|
||||
<input type="text" class="text" name="mqttAddr" value="{MQTT_ADDR}"/>
|
||||
<label for="mqttPort">Port</label>
|
||||
<input type="text" class="text" name="mqttPort" value="{MQTT_PORT}"/>
|
||||
<label for="mqttUser">Username (optional)</label>
|
||||
<input type="text" class="text" name="mqttUser" value="{MQTT_USER}"/>
|
||||
<label for="mqttPwd">Password (optional)</label>
|
||||
<input type="text" class="text" name="mqttPwd" value="{MQTT_PWD}"/>
|
||||
<label for="mqttTopic">Topic</label>
|
||||
<input type="text" class="text" name="mqttTopic" value="{MQTT_TOPIC}"/>
|
||||
<label for="mqttIntvl">Interval [s] (read-only)</label>
|
||||
<input type="text" class="text" name="mqttIntvl" value="{MQTT_INTVL}" readonly/>
|
||||
|
||||
<p class="des">Serial Console</p>
|
||||
<label for="serEn">print inverter data</label>
|
||||
<input type="checkbox" class="cb" name="serEn" {SER_VAL_CB}/><br/>
|
||||
<label for="serDbg">print RF24 debug</label>
|
||||
<input type="checkbox" class="cb" name="serDbg" {SER_DBG_CB}/><br/>
|
||||
<label for="serIntvl">Interval [s]</label>
|
||||
<input type="text" class="text" name="serIntvl" value="{SER_INTVL}"/>
|
||||
<p class="des">Serial Console</p>
|
||||
<label for="serEn">print inverter data</label>
|
||||
<input type="checkbox" class="cb" name="serEn" {SER_VAL_CB}/><br/>
|
||||
<label for="serDbg">print RF24 debug</label>
|
||||
<input type="checkbox" class="cb" name="serDbg" {SER_DBG_CB}/><br/>
|
||||
<label for="serIntvl">Interval [s]</label>
|
||||
<input type="text" class="text" name="serIntvl" value="{SER_INTVL}"/>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<p class="des"> </p>
|
||||
<label for="reboot">Reboot device after successful save</label>
|
||||
|
|
@ -126,5 +150,22 @@
|
|||
<p class="right"><a href="{IP}/factory">Factory Reset</a></p>
|
||||
<p class="right"><a href="{IP}/reboot">Reboot</a></p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var coll = document.getElementsByClassName("s_collapsible");
|
||||
var i;
|
||||
|
||||
for (i = 0; i < coll.length; i++) {
|
||||
coll[i].addEventListener("click", function() {
|
||||
this.classList.toggle("active");
|
||||
var content = this.nextElementSibling;
|
||||
if (content.style.display === "block") {
|
||||
content.style.display = "none";
|
||||
} else {
|
||||
content.style.display = "block";
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue