topaLE
/
ahoy
mirror of https://github.com/lumapu/ahoy.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Style setup page with collapse feature 

sort order too.
pull/144/head
DanielR92 2 years ago
committed by GitHub
parent
ebe5ecd338
commit
0f9f6795bc
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 91 additions and 50 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 139
      tools/esp8266/html/setup.html

139
tools/esp8266/html/setup.html
View File

@ -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>
<a class="erase" href="/erase">ERASE SETTINGS (not WiFi)</a>
<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">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>
<p class="des">Pinout (Wemos)</p>
{PINOUT}
<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">Radio (NRF24L01+)</p>
<label for="rf24Power">Amplifier Power Level</label>
<select name="rf24Power">{RF24}</select>
<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">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}"/>
<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">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">Radio (NRF24L01+)</p>
<label for="rf24Power">Amplifier Power Level</label>
<select name="rf24Power">{RF24}</select>
<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">&nbsp;</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>

Write Preview
Loading…
Cancel
Save