<!DOCTYPE html>
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title>NMEA 2000 Gateway</title>
<script type="text/javascript">
function reset(){
fetch('/api/reset');
alert("Board reset triggered, reconnect WLAN if necessary");
}
function update(){
fetch('/api/status')
.then(function(resp){
return resp.json()
})
.then(function(jsonData){
for (let k in jsonData){
let el=document.getElementById(k);
if (el) el.textContent=jsonData[k];
}
})
}
function resetForm(ev){
if (ev){
ev.preventDefault();
ev.stopPropagation();
}
fetch("/api/config")
.then(function(resp){
return resp.json();
})
.then(function(jsonData){
for (let k in jsonData){
let el=document.querySelector("[name='"+k+"']");
if (el){
let v=jsonData[k];
el.value=v;
}
}
});
}
window.setInterval(update,1000);
resetForm();
</script>
<style type="text/css">
#wrap
{
text-align: center;
vertical-align: middle;
max-width: 900px;
margin:0 auto;
background:#dcd;
border-radius: 10px;
padding:10px; /*innen*/
}
span.label {
width: 10em;
display: inline-block;
opacity: 0.6;
}
.row {
margin: 0.5em;
}
</style>
</head>
<body>
<div class="main">
<h1>NMEA 2000 Gateway </h1>
<div class="row">
<span class="label">VERSION</span>
<span class="value" id="version">---</span>
</div>
<div class="row">
<span class="label"># CAN messages</span>
<span class="value" id="numcan">---</span>
</div>
<div class="row">
<span class="label">wifi client connected</span>
<span class="value" id="wifiConnected">---</span>
</div>
<div class="row">
<span class="label">wifi client IP</span>
<span class="value" id="clientIP">---</span>
</div>
<form action="/api/setConfig">
<div class="row">
<span class="label">wifiClient</span>
<select name="wifiClient">
<option value="true">On</option>
<option value="false" selected="selected">Off</option>
</select>
</div>
<div class="row">
<span class="label">wifiClientPass</span>
<input name="wifiPass" type="text">
</div>
<div class="row">
<span class="label">wifiClientSSID</span>
<input name="wifiSSID" type="text">
</div>
<button onClick="resetForm()">Reset</button>
<button type="submit">Save&Restart</button>
</form>
<button id="reset" onclick="reset();">Reset</button>
</div>
</body>
</html>