mirror of
https://github.com/lumapu/ahoy.git
synced 2025-05-11 07:56:39 +02:00
added central menu
This commit is contained in:
lumapu
parent
0f0bbd4b7f
commit
bb1f345e29
10 changed files with 221 additions and 43 deletions
|
|
@ -8,6 +8,15 @@ function toggle(id, hide) {
|
|||
elm.classList.remove('hide');
|
||||
}
|
||||
|
||||
|
||||
function toggle(id) {
|
||||
var e = document.getElementById(id);
|
||||
if(!e.classList.contains("hide"))
|
||||
e.classList.add("hide");
|
||||
else
|
||||
e.classList.remove('hide');
|
||||
}
|
||||
|
||||
function getAjax(url, ptr, method="GET", json=null) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
if(xhr != null) {
|
||||
|
|
@ -98,7 +107,8 @@ function link(dst, text, target=null) {
|
|||
var a = document.createElement('a');
|
||||
var t = document.createTextNode(text);
|
||||
a.href = dst;
|
||||
a.target = target;
|
||||
if(null != target)
|
||||
a.target = target;
|
||||
a.appendChild(t);
|
||||
return a;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,9 +7,17 @@
|
|||
<script type="text/javascript" src="api.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>AHOY</h1>
|
||||
<div class="topnav">
|
||||
<a href="/" class="active">AhoyDTU</a>
|
||||
<a href="javascript:void(0);" class="icon" onclick="topnav()">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</a>
|
||||
<div id="topnav" class="hide"></div>
|
||||
</div>
|
||||
<div id="content" class="content">
|
||||
<SCRIPT>
|
||||
<script>
|
||||
function promptFunction() {
|
||||
var Text = prompt("This project was started from https://www.mikrocontroller.net/topic/525778 this discussion.\n\n" +
|
||||
"The Hoymiles protocol was decrypted through the voluntary efforts of many participants. ahoy, among others, was developed based on this work.\n" +
|
||||
|
|
@ -21,15 +29,7 @@
|
|||
return true;
|
||||
|
||||
}
|
||||
</SCRIPT>
|
||||
|
||||
<p>
|
||||
<a href="/live">Visualization</a><br/>
|
||||
<br/>
|
||||
<a href="/setup">Setup</a><br/>
|
||||
<br/>
|
||||
<a href="/serial">Webserial & Commands</a><br/>
|
||||
</p>
|
||||
</script>
|
||||
<p><span class="des">Uptime: </span><span id="uptime"></span></p>
|
||||
<p><span class="des">ESP-Time: </span><span id="date"></span></p>
|
||||
<div id="sun">
|
||||
|
|
@ -62,10 +62,7 @@
|
|||
</div>
|
||||
<div id="footer">
|
||||
<p class="left">© 2022</p>
|
||||
<p class="left"><a href="/update">Update Firmware</a></p>
|
||||
<p class="right" id="version"></p>
|
||||
<p class="right"><a href="/reboot">Reboot</a></p>
|
||||
<p class="right"><a href="/api">REST API</a></p>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var exeOnce = true;
|
||||
|
|
@ -88,6 +85,20 @@
|
|||
getAjax("/api/setup", apiCb, "POST", JSON.stringify(obj));
|
||||
}
|
||||
|
||||
function topnav() {
|
||||
toggle("topnav");
|
||||
}
|
||||
|
||||
function parseMenu(obj) {
|
||||
if(true == exeOnce) {
|
||||
var e = document.getElementById("topnav");
|
||||
e.innerHTML = "";
|
||||
for(var i = 0; i < obj["name"].length; i ++) {
|
||||
e.appendChild(link(obj["link"][i], obj["name"][i]));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function parseSys(obj) {
|
||||
// Disclaimer
|
||||
//if(obj["disclaimer"] == false) sessionStorage.setItem("gDisclaimer", promptFunction());
|
||||
|
|
@ -176,6 +187,7 @@
|
|||
|
||||
function parse(obj) {
|
||||
if(null != obj) {
|
||||
parseMenu(obj["menu"]);
|
||||
parseSys(obj["system"]);
|
||||
parseStat(obj["statistics"]);
|
||||
parseIv(obj["inverter"]);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,16 @@
|
|||
<script type="text/javascript" src="api.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Serial Console</h1>
|
||||
<div class="topnav">
|
||||
<a href="/" class="active">AhoyDTU</a>
|
||||
<a href="javascript:void(0);" class="icon" onclick="topnav()">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</a>
|
||||
<div id="topnav" class="hide"></div>
|
||||
</div>
|
||||
<h2>Serial Console</h2>
|
||||
<div id="content" class="content">
|
||||
<div class="serial">
|
||||
<textarea id="serial" cols="80" rows="20" readonly></textarea><br/>
|
||||
|
|
@ -54,13 +63,24 @@
|
|||
</div>
|
||||
<div id="footer">
|
||||
<p class="left">© 2022</p>
|
||||
<p class="left"><a href="/">Home</a></p>
|
||||
<p class="right" id="version"></p>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var mAutoScroll = true;
|
||||
var con = document.getElementById("serial");
|
||||
var mIntervalSet = false;
|
||||
var exeOnce = true;
|
||||
|
||||
function topnav() {
|
||||
toggle("topnav");
|
||||
}
|
||||
|
||||
function parseMenu(obj) {
|
||||
var e = document.getElementById("topnav");
|
||||
e.innerHTML = "";
|
||||
for(var i = 0; i < obj["name"].length; i ++) {
|
||||
e.appendChild(link(obj["link"][i], obj["name"][i]));
|
||||
}
|
||||
}
|
||||
|
||||
function parseSys(obj) {
|
||||
var up = obj["ts_uptime"];
|
||||
|
|
@ -73,16 +93,17 @@
|
|||
+ ("0"+min).substr(-2) + ":"
|
||||
+ ("0"+sec).substr(-2);
|
||||
|
||||
if(false == mIntervalSet) {
|
||||
if(true == exeOnce) {
|
||||
document.getElementById("version").appendChild(
|
||||
link("https://github.com/lumapu/ahoy/commits/" + obj["build"], "Git SHA: " + obj["build"] + " :: " + obj["version"], "_blank")
|
||||
);
|
||||
window.setInterval("getAjax('/api/system', parseSys)", 10000);
|
||||
mIntervalSet = true;
|
||||
exeOnce = false;
|
||||
}
|
||||
}
|
||||
|
||||
function parse(root) {
|
||||
parseMenu(root["menu"]);
|
||||
select = document.getElementById('InvID');
|
||||
|
||||
if(null == root) return;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,15 @@
|
|||
</script>
|
||||
</head>
|
||||
<body onload="load()">
|
||||
<h1>Setup</h1>
|
||||
<div class="topnav">
|
||||
<a href="/" class="active">AhoyDTU</a>
|
||||
<a href="javascript:void(0);" class="icon" onclick="topnav()">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</a>
|
||||
<div id="topnav" class="hide"></div>
|
||||
</div>
|
||||
<div id="setup" class="content">
|
||||
<div id="content">
|
||||
<a class="erase" href="/erase">ERASE SETTINGS (not WiFi)</a>
|
||||
|
|
@ -139,11 +147,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p class="left"><a href="/">Home</a></p>
|
||||
<p class="left"><a href="/update">Update Firmware</a></p>
|
||||
<p class="left">© 2022</p>
|
||||
<p class="right" id="version"></p>
|
||||
<p class="right"><a href="/factory">Factory Reset</a></p>
|
||||
<p class="right"><a href="/reboot">Reboot</a></p>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var highestId = 0;
|
||||
|
|
@ -265,6 +271,18 @@
|
|||
document.getElementsByName(i[0])[0].value = obj[i[1]];
|
||||
}
|
||||
|
||||
function topnav() {
|
||||
toggle("topnav");
|
||||
}
|
||||
|
||||
function parseMenu(obj) {
|
||||
var e = document.getElementById("topnav");
|
||||
e.innerHTML = "";
|
||||
for(var i = 0; i < obj["name"].length; i ++) {
|
||||
e.appendChild(link(obj["link"][i], obj["name"][i]));
|
||||
}
|
||||
}
|
||||
|
||||
function parseSys(obj) {
|
||||
for(var i of [["device", "device_name"], ["ssid", "ssid"]])
|
||||
document.getElementsByName(i[0])[0].value = obj[i[1]];
|
||||
|
|
@ -374,6 +392,7 @@
|
|||
|
||||
function parse(root) {
|
||||
if(null != root) {
|
||||
parseMenu(root["menu"]);
|
||||
parseSys(root["system"]);
|
||||
parseIv(root["inverter"]);
|
||||
parseMqtt(root["mqtt"]);
|
||||
|
|
@ -383,7 +402,6 @@
|
|||
parseRadio(root["radio"]);
|
||||
parseSerial(root["serial"]);
|
||||
}
|
||||
getAjax('/api/setup/networks', listNetworks);
|
||||
window.setInterval("getAjax('/api/setup/networks', listNetworks)", 7000);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,63 @@
|
|||
h1 {
|
||||
margin: 0;
|
||||
padding: 20pt;
|
||||
font-size: 22pt;
|
||||
color: #fff;
|
||||
background-color: #006ec0;
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-family: Arial;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
background-color: #333;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topnav a {
|
||||
color: white;
|
||||
padding: 14px 14px;
|
||||
text-decoration: none;
|
||||
font-size: 17px;
|
||||
display: block;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
#topnav a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.topnav a.icon {
|
||||
background: #333;
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.topnav a:hover {
|
||||
background-color: #006ec0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #006ec0;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.topnav span {
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 3px;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/** old CSS below **/
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
font-size: 13pt;
|
||||
|
|
@ -32,6 +76,7 @@ p.lic, p.lic a {
|
|||
|
||||
.s_active, .s_collapsible:hover {
|
||||
background-color: #006ec0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.s_content {
|
||||
|
|
@ -88,7 +133,7 @@ a.erase {
|
|||
}
|
||||
|
||||
#content {
|
||||
padding: 15px 15px 60px 15px;
|
||||
padding: 60px 15px 60px 15px;
|
||||
}
|
||||
|
||||
#footer {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,15 @@
|
|||
<script type="text/javascript" src="api.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Update</h1>
|
||||
<div class="topnav">
|
||||
<a href="/" class="active">AhoyDTU</a>
|
||||
<a href="javascript:void(0);" class="icon" onclick="topnav()">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</a>
|
||||
<div id="topnav" class="hide"></div>
|
||||
</div>
|
||||
<div id="content" class="content">
|
||||
<div>
|
||||
Make sure that you have noted all your settings before starting an update. New versions may have changed their memory layout which can break your existing settings.<br/>
|
||||
|
|
@ -21,17 +29,36 @@
|
|||
</div>
|
||||
<div id="footer">
|
||||
<p class="left">© 2022</p>
|
||||
<p class="left"><a href="/">Home</a></p>
|
||||
<p class="right" id="version"></p>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
|
||||
function topnav() {
|
||||
toggle("topnav");
|
||||
}
|
||||
|
||||
function parseMenu(obj) {
|
||||
var e = document.getElementById("topnav");
|
||||
e.innerHTML = "";
|
||||
for(var i = 0; i < obj["name"].length; i ++) {
|
||||
e.appendChild(link(obj["link"][i], obj["name"][i]));
|
||||
}
|
||||
}
|
||||
|
||||
function parseSys(obj) {
|
||||
document.getElementById("version").appendChild(
|
||||
link("https://github.com/lumapu/ahoy/commits/" + obj["build"], "Git SHA: " + obj["build"] + " :: " + obj["version"], "_blank")
|
||||
);
|
||||
}
|
||||
|
||||
getAjax("/api/system", parseSys);
|
||||
function parse(obj) {
|
||||
if(null != obj) {
|
||||
parseMenu(obj["menu"]);
|
||||
parseSys(obj["system"]);
|
||||
}
|
||||
}
|
||||
|
||||
getAjax("/api/index", parse);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -8,20 +8,42 @@
|
|||
<script type="text/javascript" src="api.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>AHOY</h1>
|
||||
<div class="topnav">
|
||||
<a href="/" class="active">AhoyDTU</a>
|
||||
<a href="javascript:void(0);" class="icon" onclick="topnav()">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</a>
|
||||
<div id="topnav" class="hide"></div>
|
||||
</div>
|
||||
<div id="content" class="content">
|
||||
<div id="live"></div>
|
||||
<p>Every <span id="refresh"></span> seconds the values are updated</p>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p class="left">© 2022</p>
|
||||
<p class="left"><a href="/">Home</a></p>
|
||||
<p class="right" id="version"></p>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var exeOnce = true;
|
||||
|
||||
function topnav() {
|
||||
toggle("topnav");
|
||||
}
|
||||
|
||||
function parseMenu(obj) {
|
||||
if(true == exeOnce) {
|
||||
var e = document.getElementById("topnav");
|
||||
e.innerHTML = "";
|
||||
for(var i = 0; i < obj["name"].length; i ++) {
|
||||
e.appendChild(link(obj["link"][i], obj["name"][i]));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function parseSys(obj) {
|
||||
if(exeOnce == true) {
|
||||
if(true == exeOnce) {
|
||||
document.getElementById("version").appendChild(
|
||||
link("https://github.com/lumapu/ahoy/commits/" + obj["build"], "Git SHA: " + obj["build"] + " :: " + obj["version"], "_blank")
|
||||
);}
|
||||
|
|
@ -111,6 +133,7 @@
|
|||
|
||||
function parse(obj) {
|
||||
if(null != obj) {
|
||||
parseMenu(obj["menu"]);
|
||||
parseSys(obj["system"]);
|
||||
parseIv(obj["inverter"], obj);
|
||||
document.getElementById("refresh").innerHTML = obj["refresh_interval"];
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue