3pp-mirror/ahoy
1
0
Fork 0
mirror of https://github.com/lumapu/ahoy.git synced 2025-05-16 02:16:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

improved async web setup page

Browse source
This commit is contained in:
lumapu 2022-08-28 01:48:53 +02:00
parent 13c88b3626
commit b6ac416665
8 changed files with 175 additions and 157 deletions
Download patch file Download diff file Expand all files Collapse all files

173
tools/esp8266/html/setup.html
View file

@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>Setup - {#DEVICE}</title>
<title>Setup</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">
@ -69,7 +69,7 @@
<label for="ssid">SSID</label>
<input type="text" name="ssid" class="text"/>
<label for="pwd">Password</label>
<input type="password" class="text" name="pwd" value="{#PWD}"/>
<input type="password" class="text" name="pwd" value="{PWD}"/>
</fieldset>
</div>
@ -78,6 +78,7 @@
<fieldset>
<legend class="des">Inverter</legend>
<div id="inverter"></div><br/>
<input type="button" name="btnAdd" value="Add Inverter"/>
<p class="subdes">General</p>
<label for="invInterval">Interval [s]</label>
<input type="text" class="text" name="invInterval"/>
@ -91,9 +92,9 @@
<fieldset>
<legend class="des">NTP Server</legend>
<label for="ntpAddr">NTP Server / IP</label>
<input type="text" class="text" name="ntpAddr" value="{#NTP_ADDR}"/>
<input type="text" class="text" name="ntpAddr"/>
<label for="ntpPort">NTP Port</label>
<input type="text" class="text" name="ntpPort" value="{#NTP_PORT}"/>
<input type="text" class="text" name="ntpPort"/>
</fieldset>
</div>
@ -119,25 +120,24 @@
<fieldset>
<legend class="des">System Config</legend>
<p class="des">Pinout (Wemos)</p>
{#PINOUT}
<div id="pinout"></div>
<p class="des">Radio (NRF24L01+)</p>
<label for="rf24Power">Amplifier Power Level</label>
<select name="rf24Power">{#RF24}</select>
<div id="rf24"></div>
<p class="des">Serial Console</p>
<label for="serEn">print inverter data</label>
<input type="checkbox" class="cb" name="serEn" {#SER_VAL_CB}/><br/>
<input type="checkbox" class="cb" name="serEn"/><br/>
<label for="serDbg">Serial Debug</label>
<input type="checkbox" class="cb" name="serDbg" {#SER_DBG_CB}/><br/>
<input type="checkbox" class="cb" name="serDbg"/><br/>
<label for="serIntvl">Interval [s]</label>
<input type="text" class="text" name="serIntvl" value="{#SER_INTVL}"/>
<input type="text" class="text" name="serIntvl"/>
</fieldset>
</div>
<label for="reboot">Reboot device after successful save</label>
<input type="checkbox" class="cb" name="reboot"/>
<input type="submit" value="save" class="btn" />
<input type="submit" value="save" class="btn"/>
</form>
</div>
</div>
@ -151,19 +151,24 @@
</div>
<script type="text/javascript">
var coll = document.getElementsByClassName("s_collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
for(it of document.getElementsByClassName("s_collapsible")) {
it.addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
content.style.display = (content.style.display === "block") ? "none" : "block";
});
}
var highestId = 0;
var maxInv = 0;
document.getElementsByName("btnAdd")[0].addEventListener("click", function() {
if(highestId < (maxInv-1))
ivHtml(JSON.parse('{"name":"","serial":"","channels":4,"ch_max_power":[0,0,0,0],"ch_name":["","","",""],"power_limit":1500,"power_limit_option":65535}'), highestId + 1);
});
function getAjax(url, ptr) {
var http = null;
http = new XMLHttpRequest();
var http = new XMLHttpRequest();
if(http != null) {
http.open("GET", url, true);
http.onreadystatechange = p;
@ -171,7 +176,7 @@
}
function p() {
if(http.readyState == 4)
ptr(http.responseText);
ptr(JSON.parse(http.responseText));
}
}
@ -191,7 +196,6 @@
function inp(name, val, max=32, cl=["text"]) {
e = document.createElement('input');
e.classList.add(...cl);
e.name = name;
e.value = val;
@ -202,11 +206,11 @@
function sel(name, opt, selId) {
e = document.createElement('select');
e.name = name;
for(i = 0; i < opt.length; i++) {
for(it of opt) {
o = document.createElement('option');
o.value = opt[i][0];
o.innerHTML = opt[i][1];
if(opt[i][0] == selId)
o.value = it[0];
o.innerHTML = it[1];
if(it[0] == selId)
o.selected = true;
e.appendChild(o);
}
@ -220,18 +224,17 @@
}
function ivHtml(obj, id) {
highestId = id;
if(highestId == (maxInv - 1))
toggle("btnAdd", true);
iv = document.getElementById("inverter");
id = "inv" + id;
iv.appendChild(des("Inverter " + id));
id = "inv" + id;
iv.appendChild(lbl(id + "Addr", "Adress*"));
iv.appendChild(inp(id + "Addr", obj.serial, 12));
iv.appendChild(lbl(id + "Name", "Name*"));
iv.appendChild(inp(id + "Name", obj.name));
iv.appendChild(lbl(id + "ActivePowerLimit", "Active Power Limit"));
iv.appendChild(inp(id + "ActivePowerLimit", obj.power_limit.limit, 5));
for(var i of [["Addr", "serial", "Address*", 12], ["Name", "name", "Name*", 32], ["ActivePowerLimit", "power_limit", "Active Power Limit", 5]]) {
iv.appendChild(lbl(id + i[0], i[2]));
iv.appendChild(inp(id + i[0], obj[i[1]], i[3]));
}
iv.appendChild(lbl(id + "ActivePowerLimitConType", "Active Power Limit Control Type"));
iv.appendChild(sel(id + "ActivePowerLimitConType", [
@ -240,61 +243,91 @@
[1, "absolute in Watt persistent"],
[256, "relativ in percent non persistent"],
[257, "relativ in percent persistent"]
], obj.power_limit.limit_option));
], obj.power_limit_option));
iv.appendChild(lbl(id + "ModPwr", "Max Module Power (Wp)"));
d = div("modpwr");
for(i = 0; i < obj.channels; i++) {
d.appendChild(inp(id + "ModPwr" + i, obj.ch_max_power[i], 4, ["text", "sh"]))
for(var j of [["ModPwr", "ch_max_power", "Max Module Power (Wp)"], ["ModName", "ch_name", "Module Name"]]) {
iv.appendChild(lbl(id + j[0], j[2]));
d = div(j[0]);
i = 0;
for(it of obj[j[1]]) {
d.appendChild(inp(id + j[0] + i, it, 4, ["text", "sh"]));
i++;
}
iv.appendChild(d);
}
iv.appendChild(d);
iv.appendChild(lbl(id + "ModName", "Module Name"));
d = div("modname");
for(i = 0; i < obj.channels; i++) {
d.appendChild(inp(id + "ModName" + i, obj.ch_name[i], 4, ["text", "sh"]))
}
iv.appendChild(d);
}
function ivGlob(obj) {
e = document.getElementsByName("invInterval");
e[0].value = obj["interval"];
e = document.getElementsByName("invRetry");
e[0].value = obj["retries"];
for(var i of [["invInterval", "interval"], ["invRetry", "retries"]])
document.getElementsByName(i[0])[0].value = obj[i[1]];
}
function parseSys(json) {
obj = JSON.parse(json);
e = document.getElementsByName("device");
e[0].value = obj.device_name;
e = document.getElementsByName("ssid");
e[0].value = obj.ssid;
function parseSys(obj) {
for(var i of [["device", "device_name"], ["ssid", "ssid"]])
document.getElementsByName(i[0])[0].value = obj[i[1]];
}
function parseIv(json) {
obj = JSON.parse(json);
ivHtml(obj.inverter[0], 0);
function parseIv(obj) {
for(var i = 0; i < obj.inverter.length; i++)
ivHtml(obj.inverter[i], i);
ivGlob(obj);
maxInv = obj["max_num_inverters"];
}
function parseMqtt(json) {
obj = JSON.parse(json);
e = document.getElementsByName("mqttAddr");
e[0].value = obj["broker"];
e = document.getElementsByName("mqttPort");
e[0].value = obj["port"];
e = document.getElementsByName("mqttUser");
e[0].value = obj["user"];
e = document.getElementsByName("mqttPwd");
e[0].value = obj["pwd"];
e = document.getElementsByName("mqttTopic");
e[0].value = obj["topic"];
function parseMqtt(obj) {
for(var i of [["Addr", "broker"], ["Port", "port"], ["User", "user"], ["Pwd", "pwd"], ["Topic", "topic"]])
document.getElementsByName("mqtt"+i[0])[0].value = obj[i[1]];
}
function parseNtp(obj) {
for(var i of [["ntpAddr", "addr"], ["ntpPort", "port"]])
document.getElementsByName(i[0])[0].value = obj[i[1]];
}
function parsePinout(obj) {
var e = document.getElementById("pinout");
pins = [['cs', 'pinCs'], ['ce', 'pinCe'], ['irq', 'pinIrq']];
for(p of pins) {
e.appendChild(lbl(p[1], p[0].toUpperCase()));
e.appendChild(sel(p[1], [
[0, "D3 (GPIO0)"],
[1, "TX (GPIO1)"],
[2, "D4 (GPIO2)"],
[3, "RX (GPIO3)"],
[4, "D2 (GPIO4)"],
[5, "D1 (GPIO5)"],
[6, "GPIO6"],
[7, "GPIO7"],
[8, "GPIO8"],
[9, "GPIO9"],
[10, "GPIO10"],
[11, "GPIO11"],
[12, "D6 (GPIO12)"],
[13, "D7 (GPIO13)"],
[14, "D5 (GPIO14)"],
[15, "D8 (GPIO15)"],
[16, "D0 (GPIO16 - no IRQ!)"]
], obj[p[0]]));
}
}
function parseRadio(obj) {
var e = document.getElementById("rf24");
e.appendChild(lbl("rf24Power", "Amplifier Power Level"));
e.appendChild(sel("rf24Power", [
[0, "MIN"],
[1, "LOW"],
[2, "HIGH"],
[3, "MAX"]
], obj["power_level"]));
}
getAjax("/api/system", parseSys);
getAjax("/api/inverter/list", parseIv);
getAjax("/api/mqtt", parseMqtt);
getAjax("/api/ntp", parseNtp);
getAjax("/api/pinout", parsePinout);
getAjax("/api/radio", parseRadio);
</script>
</body>
</html>