userbogd/WebguiappTemplate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reworked web interface with new design

Browse Source
This commit is contained in:
Bogdan Pilyugin 2022-08-25 15:28:19 +02:00
parent 2dd77f6930
commit 5140387538
31 changed files with 674 additions and 1379 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
HTML/app/set_app.html
View File

@ -1,23 +0,0 @@
~inc:head.inc~</head>
<body>
<div class = 'frm'>
<script>PrintMenu();</script>
<div class = "mform">
<div class='stg'>
<div id = 'name'>
Settings|App[~dname~]
</div>
</br></br>
<form name="conf" method="post">
<table>
<tr><td class='rl'>ID устройства:</td><td>~serial~</td></tr>
</table>
<br/>
<div style='margin:auto;text-align:center'>
<button type="submit" class ='btn' name='sav' value='prs'>Сохранить</button>
</div>
</form>
</div>
</div>
</body>
</html>

76
HTML/control.html Normal file
View File

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="iconsfont.css">
<script src="main.js"></script>
<script src="res.js"></script>
<title>~name~</title>
</head>
<body>
<script>PageSurround();</script>
<!--========== CONTENTS ==========-->
<main>
<section>
<table class='cntr'>
<tr><td class='rl'>Ethernet:</td><td><span id='eth'>?</span></td></tr>
<tr><td class='rl'>WiFi:</td><td><span id='wfi'>?</span></td></tr>
<tr><td class='rl'>GPRS:</td><td><span id='gpr'>?</span></td></tr>
<tr><td class='rl'>LoRaWAN:</td><td><span id='lrw'>?</span></td></tr>
<tr><td height='20px'></td></tr>
<tr><td class='rl'>Основной адаптер:</td><td><span id='adp'>?</span></td></tr>
<tr><td height='20px'></td></tr>
<tr><td class='rl'>MQTT соединение 1:</td><td><span id='mq1'>?</span></td></tr>
<tr><td class='rl'>MQTT соединение 2:</td><td><span id='mq2'>?</span></td></tr>
<tr><td height='20px'></td></tr>
<tr><td class='rl'>Свободной памяти:</td><td><span id='mem'>?</span></td></tr>
<tr><td class='rl'>Минимум памяти:</td><td><span id='mmem'>?</span></td></tr>
</table>
<form name="conf" method="post" accept-charset='UTF-8'>
<div style='margin:auto;text-align:center'>
</br>
<button type="submit" class ='btn' name='cmd' value='1'>BAT ON</button>
<button type="submit" class ='btn' name='cmd' value='2'>BAT OFF</button></br></br>
<button type="submit" class ='btn' name='cmd' value='3'>MQTT ON</button>
<button type="submit" class ='btn' name='cmd' value='4'>MQTT OFF</button></br></br>
<button type="submit" class ='btn' name='cmd' value='5'>LORA RJN</button>
<button type="submit" class ='btn' name='cmd' value='6'>FREE</button></br></br>
<button type="submit" class ='btn' name='cmd' value='7'>DEF ETH</button>
<button type="submit" class ='btn' name='cmd' value='8'>DEF WIFI</button></br></br>
<button type="submit" class ='btn' name='cmd' value='9'>DEF PPP</button>
<button type="submit" class ='btn' name='cmd' value='10'>IF NEXT</button></br></br>
<button type="submit" class ='btn' name='cmd' value='11'>IF PRINT</button>
<button type="submit" class ='btn' name='cmd' value='12'>TEST</button></br></br>
</div>
</form>
</section>
</main>
<script>
showMenu('header-toggle','navbar');
linkColor.forEach(l => l.addEventListener('click', colorLink))
function updateStatus(data) {
var dat = JSON.parse(data);
try
{
document.getElementById('eth').innerHTML= dat.ethstat;
document.getElementById('wfi').innerHTML= dat.wfstat;
document.getElementById('gpr').innerHTML= dat.gsmstat;
document.getElementById('lrw').innerHTML= dat.lrstat;
document.getElementById('adp').innerHTML= dat.defadp;
document.getElementById('mq1').innerHTML= dat.mqtt1st;
document.getElementById('mq2').innerHTML= dat.mqtt2st;
document.getElementById('mem').innerHTML= dat.freeram;
document.getElementById('mmem').innerHTML= dat.minram;
}
catch(e){return;}
}
function ReadAndUpdate() {
GetDataFile("/stat.json", function(data){updateStatus(data);});
}
ReadAndUpdate();
setInterval("ReadAndUpdate()",1000);
</script>
</body>
</html>

7
HTML/head.inc
View File

@ -1,7 +0,0 @@
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, user-scalable=yes" />
<link rel="stylesheet" href="style.css" />
<script src="ioscr.js" type="text/javascript" charset="utf-8"></script>
<title>СПИ "CityLink"</title>

0
HTML/new/iconsfont.css → HTML/iconsfont.css
View File

0
HTML/new/iconsfont.woff2 → HTML/iconsfont.woff2
View File

78
HTML/index.html
View File

@ -1,51 +1,29 @@
~inc:head.inc~</head>
<body>
<div class = 'frm'>
<script>PrintMenu();</script>
<div class = "mform">
<div id = 'name'>
Home|State[<span id='dn'>?</span>]
</div>
<div style='text-align:center;margin-top:20px'>
<span id="name" ><div class='hdr1'>Your device name'</div></span>
<span id='localtime'>?</span><br/>
Время работы:<span id='uptime'>?</span><br/><br/>
Уровень WiFi:<span id='wlev' style="color:#0099ff;font-weight:bold">?</span><br/>
</div>
</div>
</div>
</body>
<script>
var tmr;
function updateStatus(xmlData) {
var dat = JSON.parse(xmlData);
var theDate,sec,wl,volt,dnam;
try{
theDate = new Date(dat.time * 1000);
sec = dat.uptime;
wl = dat.wlev;
dnam = dat.dname;
}
catch(e){return;}
document.getElementById('localtime').innerHTML = (theDate.toString()).slice(0,34);
document.getElementById('uptime').innerHTML= secondsToHms(sec);
document.getElementById('wlev').innerHTML= wl;
document.getElementById('dn').innerHTML= dnam;
function secondsToHms(d) {
d = Number(d);
var dd = Math.floor(d/86400);
var h = Math.floor(d%86400/3600);
var m = Math.floor(d%3600/60);
var s = Math.floor(d%3600%60);
return (' '+dd+'d '+(h<10?"0":"")+h+":"+(m<10?"0":"")+m+":"+(s<10?"0":"")+s); }
}
function ReadAndUpdate() {
GetDataFile("/status.json", function(text){
updateStatus(text);});
}
ReadAndUpdate();
setInterval("ReadAndUpdate()",1000);
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="iconsfont.css">
<script src="main.js"></script>
<script src="res.js"></script>
<title>~name~</title>
</head>
<body>
<script>PageSurround();</script>
<!--========== CONTENTS ==========-->
<main>
<section>
<div >
<table class='cntr'>
<tr><td>~name~</td></tr>
</table>
</div>
</section>
</main>
<script>
showMenu('header-toggle','navbar');
linkColor.forEach(l => l.addEventListener('click', colorLink))
</script>
</body>
</html>

230
HTML/ioscr.js
View File

@ -1,230 +0,0 @@
function PostData(data,page,conf,alrt,reld) {
if(conf){if (!confirm(conf)) return;}
var xhr = new XMLHttpRequest();
xhr.open('POST',page, true);
xhr.timeout = 5000;
xhr.send(data);
xhr.onreadystatechange = function() {
if (xhr.readyState != 4) return;
if (xhr.status != 200) {alert(xhr.status+': '+xhr.statusText);}
else {if(reld)location.reload();
if(alrt) alert(alrt);
}}}
function GetDataFile(file, callback) {
var xhr = new XMLHttpRequest();
xhr.overrideMimeType("application/json");
xhr.open("GET", file, true);
xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status == "200") {callback(xhr.responseText);}}
xhr.timeout = 5000;
xhr.send(null);
}
function PrintMenu(){
document.write("<div id='conteiner'><nav id='menu1'><ul>");
document.write("<li><a href='index.html'>Main</a></li>");
document.write("<li><a href='#'>Service</a><ul>");
document.write("<li><a href='sys/control.html'>Control</a></li>");
document.write("<li><a href='sys/stats.html'>Stats</a></li></ul></li>");
document.write("<li><a href='#'>Settings</a><ul>");
//document.write("<li><a href='app/set_app.html'>Application</a></li>");
document.write("<li><a href='sys/set_mqtt.html'>MQTT</a></li>");
document.write("<li><a href='sys/set_sys.html'>System</a></li>");
document.write("<li><a href='sys/set_time.html'>Time</a></li></ul></li>");
document.write("<li><a href='#'>Network</a><ul>");
document.write("<li><a href='sys/set_eth.html'>Ethernet</a></li>");
document.write("<li><a href='sys/set_wifi.html'>WiFi</a></li>");
document.write("<li><a href='sys/set_gprs.html'>GPRS</a></li>");
//document.write("<li><a href='sys/set_lora.html'>LoRaWAN</a></li></ul></li>");
document.write("</ul></nav></div>");}
function PrintIPInput(title,name,value){document.write("<tr><td class='rl'>"+title+"</td><td><input type='text' required size='20' name='"+name+"' value='"+value+"' title='IP адрес xxx.xxx.xxx.xxx' pattern='^\\d{1,3}\.\\d{1,3}\.\\d{1,3}\.\\d{1,3}$' /></td></tr>");}
function PrintMACInput(title,name,value){document.write("<tr><td class='rl'>"+title+"</td><td><input type='text' required size='20' name='"+name+"' value='"+value+"' title='MAC адрес xx-xx-xx-xx-xx-xx' pattern='^([0-9a-fA-F]{2}([-]|$)){6}$|([0-9a-fA-F]{4}([.]|$)){3}$' /></td></tr>");}
function PrintTextInput(title,name,value,min,max){document.write("<tr><td class='rl'>"+title+"</td><td><input type='text' required size='20' name='"+name+"' value="+value+" title='"+min+"-"+max+" символов A-Za-z0-9_\-*!<>)(.@,/' pattern='^[0-9a-zA-Z_\\-*!<>.@\,/)(\s]{"+min+","+max+"}$' /></td></tr>");}
function PrintHexInput(title,name,value,min,max){document.write("<tr><td class='rl'>"+title+"</td><td><input type='text' required size='20' name='"+name+"' value="+value+" title='"+min+"-"+max+" символов A-Fa-f0-9' pattern='^[0-9a-fA-F]{"+min+","+max+"}$' /></td></tr>");}
function PrintTextInputNoReg(title,name,value,min,max){document.write("<tr><td class='rl'>"+title+"</td><td><input type='text' required size='20' name='"+name+"' value="+value+" title='"+min+"-"+max+" символов'/></td></tr>");}
function PrintLabel(title,value){document.write("<tr><td class='rl'>"+title+"</td><td align='left'>"+value+"</td></tr>");}
function PrintSpanLabel(title,idx){document.write("<tr><td class='rl'>"+title+"</td><td align='left'><span id='"+idx+"'>?</span></td></tr>");}
function PrintCheckBox(title,name,checked,action){document.write("<tr><td class='rl'>"+title+"</td><td><input type='checkbox' name='"+name+"' value='1' onclick="+action+" "+checked+" /></td></tr>");}
function PrintInt(title,name,value,min,max){document.write("<tr><td class='rl'>"+title+"</td><td><input type='number' required min='"+min+"' max='"+max+"' name='"+name+"' value ='"+value+"'/></td></tr>");}
function PrintIntId(title,id,value,min,max){document.write("<tr><td class='rl'>"+title+"</td><td><input type='number' required min='"+min+"' max='"+max+"' id='"+id+"' value ='"+value+"'/></td></tr>");}
function PrintSep(){document.write("<tr><td height='20px'></td></tr>");}
function PrintSaveBtn(){document.write("<div style='text-align:center;margin-top:10px'><button type='submit' class='btn' name='sav' value='prs'>Сохранить</button></div>");}
function PrintSaveFail(isfail){document.write("<div class='resfail' style='text-align:center;display:"+isfail+"' color='#F00'><font color='red'><h2>Неверный формат данных!</h2></font><br/></div>");}
function sndtmr()
{
var body = '';
var body2 = '';
//var ofc = (new Date).getTimezoneOffset()*60;
var ofc = 0;
for(i=1;i<9;++i)
{
body += GetInterface(i);
if(i<8) body +='&';
}
for(i=9;i<17;++i)
{
body2 += GetInterface(i);
if(i<16) body2 +='&';
}
function GetInterface(n) {
var s = '';
s+='tm'+i+'='+ ( +Date.parse(document.getElementById('tdp'+n).value)/1000 + ofc);
s+= '%'+ ((document.getElementsByName('enb'+n)[0].checked) ? '1':'0').toString();
s+= '%'+ ((document.getElementsByName('act'+n)[0].value == 'on') ? '1':'0').toString();
s+= '%'+ (document.getElementsByName('prd'+n)[0].value).toString();
return s;
}
var xhr2 = new XMLHttpRequest();
var xhr = new XMLHttpRequest();
xhr.open('POST', 'index42.html', true);
xhr.send(body);
xhr.onreadystatechange = function() {
if (xhr.readyState != 4) return;
if (xhr.status != 200) {
alert(xhr.status + ': ' + xhr.statusText);
} else {
xhr2.open('POST', 'index42.html', true);
xhr2.send(body2);
}
}
xhr2.onreadystatechange = function() {
if (xhr2.readyState != 4) return;
if (xhr2.status != 200) {
alert(xhr2.status + ': ' + xhr2.statusText);
} else {
alert('Timer settings saved')
location.reload();
}
}
}
function ClickCheckbox()
{
for(i=1;i<17;++i)
{
var st = !document.getElementsByName('enb'+i)[0].checked;
document.getElementById('tdp'+i).disabled = st;
document.getElementsByName('prd'+i)[0].disabled = st;
document.getElementsByName('act'+i)[0].disabled = st;
}
}
function configIPBoxes() {
e = document.forms.conf;
var ap = document.getElementsByName('netm');
st = e.dhcp.checked;
function apmode(m){
e.wfiap.disabled = m;
e.wfpap.disabled = m;
e.ipaap.disabled = m;
}
function clnmode(m){
e.wfi.disabled = m;
e.wfp.disabled = m;
e.ipa.disabled = m;
e.mas.disabled = m;
e.gte.disabled = m;
}
if(ap[0].checked){
apmode(true);
clnmode(false);
e.ipa.disabled = st;
e.mas.disabled = st;
e.gte.disabled = st;
}
if(ap[1].checked){
apmode(false);
clnmode(true);
}
}
function configIPBoxes2() {
e = document.forms.conf;
st2 = e.tsen.checked;
e.tsr.disabled = !st2;
st3 = e.clen.checked;
e.cld.disabled = !st3;
e.idd.disabled = !st3;
e.top.disabled = !st3;
e.prt.disabled = !st3;
e.clnm.disabled = !st3;
e.clps.disabled = !st3;
e.ssen.disabled = !st3;
}
function configIPBoxesOCPP() {
e = document.forms.conf;
}
function UnixToStr(t, base, sec)
{
if(t.lenth < 10) t = '000000000';
var d;
if (base == 16) d = new Date(parseInt(t,16)*1000);
else d = new Date(parseInt(t,10)*1000);
var dd = d.getDate(); if (dd < 10) dd = '0' + dd;
var mm = d.getMonth() + 1; if (mm < 10) mm = '0' + mm;
var yy = d.getFullYear() % 100; if (yy < 10) yy = '0' + yy;
var h = d.getHours(); if (h < 10) h = '0' + h;
var m = d.getMinutes(); if (m < 10) m = '0' + m;
var s = d.getSeconds(); if (s < 10) s = '0' + s;
d=yy+'/'+mm+'/'+dd+' '+h+':'+m;
if(sec==1) d+=':'+s;
return d;
}
function FloatToString(f)
{
var buffer = new ArrayBuffer(4);
var bytes = new Uint8Array(buffer);
var doubles = new Float32Array(buffer);
bytes[3] = '0x'+f.substr(6,2);
bytes[2] = '0x'+f.substr(4,2);
bytes[1] = '0x'+f.substr(2,2);
bytes[0] = '0x'+f.substr(0,2);
return doubles[0];
}
function sendtime() {
var ut = Date.parse(new Date( Date.parse(document.getElementById('curdt').value)))/1000;
var xhr = new XMLHttpRequest();
xhr.open('POST', 'index23.html', true);
var body = 'timenow=' + ut;
xhr.send(body);
xhr.onreadystatechange = function() {
if (xhr.readyState != 4) return;
if (xhr.status != 200) {
alert(xhr.status + ': ' + xhr.statusText);
} else {
alert('Time changed');
}
}
}
function Pst(Rqv,Pag,Conf){
if (confirm(Conf)) {
var xhr = new XMLHttpRequest();
xhr.open('POST',Pag, true);
xhr.send(Rqv);
xhr.onreadystatechange = function() {
if (xhr.readyState != 4) return;
if (xhr.status != 200) {
alert(xhr.status + ': ' + xhr.statusText);
} else {
location.reload();
}
}
}
}

157
HTML/main.js Normal file
View File

@ -0,0 +1,157 @@
function PostData(data,page,conf,alrt,reld) {
if(conf){if (!confirm(conf)) return;}
var xhr = new XMLHttpRequest();
xhr.open('POST',page, true);
xhr.timeout = 5000;
xhr.send(data);
xhr.onreadystatechange = function() {
if (xhr.readyState != 4) return;
if (xhr.status != 200) {alert(xhr.status+': '+xhr.statusText);}
else {if(reld)location.reload();
if(alrt) alert(alrt);
}}}
function GetDataFile(file, callback) {
var xhr = new XMLHttpRequest();
xhr.overrideMimeType("application/json");
xhr.open("GET", file, true);
xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status == "200") {callback(xhr.responseText);}}
xhr.timeout = 5000;
xhr.send(null);
}
function configIPBoxes() {
e = document.forms.conf;
var ap = document.getElementsByName('netm');
st = e.dhcp.checked;
function apmode(m){
e.wfiap.disabled = m;
e.wfpap.disabled = m;
e.ipaap.disabled = m;
}
function clnmode(m){
e.wfi.disabled = m;
e.wfp.disabled = m;
e.ipa.disabled = m;
e.mas.disabled = m;
e.gte.disabled = m;
}
if(ap[0].checked){
apmode(true);
clnmode(false);
e.ipa.disabled = st;
e.mas.disabled = st;
e.gte.disabled = st;
}
if(ap[1].checked){
apmode(false);
clnmode(true);
}
}
function configIPBoxes2() {
e = document.forms.conf;
st2 = e.tsen.checked;
e.tsr.disabled = !st2;
st3 = e.clen.checked;
e.cld.disabled = !st3;
e.idd.disabled = !st3;
e.top.disabled = !st3;
e.prt.disabled = !st3;
e.clnm.disabled = !st3;
e.clps.disabled = !st3;
e.ssen.disabled = !st3;
}
function configIPBoxesOCPP() {
e = document.forms.conf;
}
function UnixToStr(t, base, sec)
{
if(t.lenth < 10) t = '000000000';
var d;
if (base == 16) d = new Date(parseInt(t,16)*1000);
else d = new Date(parseInt(t,10)*1000);
var dd = d.getDate(); if (dd < 10) dd = '0' + dd;
var mm = d.getMonth() + 1; if (mm < 10) mm = '0' + mm;
var yy = d.getFullYear() % 100; if (yy < 10) yy = '0' + yy;
var h = d.getHours(); if (h < 10) h = '0' + h;
var m = d.getMinutes(); if (m < 10) m = '0' + m;
var s = d.getSeconds(); if (s < 10) s = '0' + s;
d=yy+'/'+mm+'/'+dd+' '+h+':'+m;
if(sec==1) d+=':'+s;
return d;
}
function FloatToString(f)
{
var buffer = new ArrayBuffer(4);
var bytes = new Uint8Array(buffer);
var doubles = new Float32Array(buffer);
bytes[3] = '0x'+f.substr(6,2);
bytes[2] = '0x'+f.substr(4,2);
bytes[1] = '0x'+f.substr(2,2);
bytes[0] = '0x'+f.substr(0,2);
return doubles[0];
}
function sendtime() {
var ut = Date.parse(new Date( Date.parse(document.getElementById('curdt').value)))/1000;
var xhr = new XMLHttpRequest();
xhr.open('POST', 'index23.html', true);
var body = 'timenow=' + ut;
xhr.send(body);
xhr.onreadystatechange = function() {
if (xhr.readyState != 4) return;
if (xhr.status != 200) {
alert(xhr.status + ': ' + xhr.statusText);
} else {
alert('Time changed');
}
}
}
function Pst(Rqv,Pag,Conf){
if (confirm(Conf)) {
var xhr = new XMLHttpRequest();
xhr.open('POST',Pag, true);
xhr.send(Rqv);
xhr.onreadystatechange = function() {
if (xhr.readyState != 4) return;
if (xhr.status != 200) {
alert(xhr.status + ': ' + xhr.statusText);
} else {
location.reload();
}
}
}
}
/*==================== SHOW NAVBAR ====================*/
const showMenu = (headerToggle, navbarId) =>{
const toggleBtn = document.getElementById(headerToggle),
nav = document.getElementById(navbarId)
// Validate that variables exist
if(headerToggle && navbarId){
toggleBtn.addEventListener('click', ()=>{
// We add the show-menu class to the div tag with the nav__menu class
nav.classList.toggle('show-menu')
// change icon
toggleBtn.classList.toggle('bx-x')
})
}
}
showMenu('header-toggle','navbar')
/*==================== LINK ACTIVE ====================*/
const linkColor = document.querySelectorAll('.nav__link')
function colorLink(){
linkColor.forEach(l => l.classList.remove('active'))
this.classList.add('active')
}
linkColor.forEach(l => l.addEventListener('click', colorLink))

143
HTML/new/index.html
View File

@ -1,143 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="iconsfont.css">
<script src="ioscr.js"></script>
<title>Charge Point Type2</title>
</head>
<body>
<header class="header">
<div class="header__container">
<img src="logo.png" alt="" class="header__img">
<a href="#" class="header__logo">ChargeStation2</a>
<div class="header__toggle">
<i class='icon-menu' id="header-toggle"></i>
</div>
</div>
</header>
<div class="nav" id="navbar">
<nav class="nav__container">
<div>
<a href="#" class="nav__link nav__logo">
<i class='icon-home nav__icon' ></i>
<span class="nav__logo-name">Home</span>
</a>
<div class="nav__list">
<div class="nav__items">
<h3 class="nav__subtitle">ENERGY</h3>
<div class="nav__dropdown">
<a href="#" class="nav__link">
<i class='icon-chart-bar' ></i>
<span class="nav__name">Monitor</span>
<i class='icon-down-open nav__icon nav__dropdown-icon'></i>
</a>
<div class="nav__dropdown-collapse">
<div class="nav__dropdown-content">
<a href="#" class="nav__dropdown-item">Realtime</a>
<a href="#" class="nav__dropdown-item">History</a>
</div>
</div>
</div>
<div class="nav__dropdown">
<a href="#" class="nav__link">
<i class='icon-wrench nav__icon' ></i>
<span class="nav__name">Utilities</span>
<i class='icon-down-open nav__icon nav__dropdown-icon'></i>
</a>
<div class="nav__dropdown-collapse">
<div class="nav__dropdown-content">
<a href="#" class="nav__dropdown-item">Control</a>
<a href="#" class="nav__dropdown-item">Protection</a>
<a href="#" class="nav__dropdown-item">Logs</a>
</div>
</div>
</div>
</div>
<div class="nav__items">
<h3 class="nav__subtitle">SETTINGS</h3>
<div class="nav__dropdown">
<a href="#" class="nav__link">
<i class='icon-wifi nav__icon' ></i>
<span class="nav__name">Network</span>
<i class='icon-down-open nav__icon nav__dropdown-icon'></i>
</a>
<div class="nav__dropdown-collapse">
<div class="nav__dropdown-content">
<a href="#" class="nav__dropdown-item">Ethernet</a>
<a href="#" class="nav__dropdown-item">WiFi</a>
<a href="#" class="nav__dropdown-item">GPRS</a>
</div>
</div>
</div>
<div class="nav__dropdown">
<a href="#" class="nav__link">
<i class='icon-cog-alt nav__icon' ></i>
<span class="nav__name">Station</span>
<i class='icon-down-open nav__icon nav__dropdown-icon'></i>
</a>
<div class="nav__dropdown-collapse">
<div class="nav__dropdown-content">
<a href="#" class="nav__dropdown-item">General</a>
<a href="#" class="nav__dropdown-item">Services</a>
<a href="#" class="nav__dropdown-item">Time</a>
</div>
</div>
</div>
<a href="#" class="nav__link">
<i class='icon-user' ></i>
<span class="nav__name">Help</span>
</a>
</div>
</div>
</div>
<a href="#" class="nav__link nav__logout">
<i class='bx bx-log-out nav__icon' ></i>
<span class="nav__name">Log Out</span>
</a>
</nav>
</div>
<!--========== CONTENTS ==========-->
<main>
<section>
<div >
<table class='cntr'><tr>
<script>PrintCheckBox('Включить ETHERNET','ethen','~ethen~','configIPBoxes()');
PrintCheckBox('Включить DHCP','dhcp','~ecbdh~','configIPBoxes()');
PrintIPInput('IP Станции:','ipa','~eip~');
PrintIPInput('Маска подсети:','mas','~emsk~');
PrintIPInput(' Адрес шлюза:','gte','~egate~');
PrintIPInput('DNS1:','dns1','~edns~');
PrintIPInput('DNS2:','dns2','~bkedns~');
PrintIPInput('DNS3:','dns3','~fledns~');
PrintMACInput('MAC:','mac','~emacadr~');</script>
<tr><td></td></tr>
</table>
</div>
</section>
</main>
<!--========== MAIN JS ==========-->
<script src="main.js"></script>
</body>
</html>

491
HTML/new/ioscr.js
View File

@ -1,491 +0,0 @@
var Ku=1.0,Ki=0.02,sc=Ku*Ki/3600000;
var tds=['???','Пиковый','Полупиковый','Ночной'];
var tz=['+0','+1','+2','+3','+4','+5','+6','+7','+8','+9','+10','+11','+12','-12','-11','-10','-9','-8','-7','-6','-5','-4','-3','-2','-1'];
let trpend=[0,0,0];
function PostData(data,page,conf,alrt,reld) {
if(conf){if (!confirm(conf)) return;}
var xhr = new XMLHttpRequest();
xhr.open('POST',page, true);
xhr.timeout = 5000;
xhr.send(data);
xhr.onreadystatechange = function() {
if (xhr.readyState != 4) return;
if (xhr.status != 200) {alert(xhr.status+': '+xhr.statusText);}
else {if(reld)location.reload();
if(alrt) alert(alrt);
}}}
function GetDataFile(file, callback) {
var xhr = new XMLHttpRequest();
xhr.overrideMimeType("application/json");
xhr.open("GET", file, true);
xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status == "200") {callback(xhr.responseText);}}
xhr.timeout = 5000;
xhr.send(null);
}
function TimeToStr(t){
if(t>=(65535-1440))return '-----';
if(t>=1440) t-=1440;
return (Math.floor(t/60)).toString().padStart(2,'0')+':'+(Math.floor((t%60))).toString().padStart(2,'0'); }
function StrToTime(s){
return parseInt(s.substring(0,2))*60+parseInt(s.substring(3,5));}
function TimeToStrSec(t){
hh=Math.floor(t/3600).toString().padStart(2,'0');
mm=Math.floor((t-hh*3600)/60).toString().padStart(2,'0');
ss=Math.floor((t-hh*3600-mm*60)).toString().padStart(2,'0');
return hh+':'+mm+':'+ss;}
function StrToTimeSec(s){
return parseInt(s.substring(0,2))*3600+parseInt(s.substring(3,5))*60+parseInt(s.substring(6,8));}
function UnixToStr(t, z, base, sec) {
if(t.lenth < 10) t = '000000000';
var d;
if (base == 16) d = new Date((parseInt(t,16)+z)*1000);
else d=new Date((parseInt(t,10)+z)*1000);
var dd=d.getUTCDate();if(dd<10) dd='0'+dd;
var mm=d.getUTCMonth() + 1;if(mm<10) mm='0'+mm;
var yy=d.getUTCFullYear() % 100;if(yy<10) yy='0'+yy;
var h=d.getUTCHours();if(h<10) h='0'+h;
var m=d.getUTCMinutes();if(m<10) m='0'+m;
var s=d.getUTCSeconds();if(s<10) s='0'+s;
d=yy+'/'+mm+'/'+dd+' '+h+':'+m;
if(sec==1) d+=':'+s;
return d;}
function FloatToString(f) {
var buffer=new ArrayBuffer(4);
var bytes=new Uint8Array(buffer);
var doubles=new Float32Array(buffer);
bytes[3]='0x'+f.substr(6,2);
bytes[2]='0x'+f.substr(4,2);
bytes[1]='0x'+f.substr(2,2);
bytes[0]='0x'+f.substr(0,2);
return doubles[0];}
function SndTmr(z) {
body = ''; body2 = '';
for(i=1;i<9;++i){
body += GetInterface(i);
if(i<8) body +='&';}
for(i=9;i<17;++i){
body2 += GetInterface(i);
if(i<16) body2 +='&';}
function GetInterface(n) {
s='';
rawd=document.getElementById('tdp'+n).value;
date=Date.parse(rawd+':00Z')/1000-z;
s+='tm'+i+'='+date;
s+='%'+((document.getElementsByName('enb'+n)[0].checked)?'1':'0').toString();
s+='%'+document.getElementsByName('act'+n)[0].value;
s+='%'+document.getElementsByName('prd'+n)[0].value;
return s;}
var xhr2 = new XMLHttpRequest();
var xhr = new XMLHttpRequest();
xhr.open('POST','index42.html',true);
xhr.send(body);
xhr.onreadystatechange = function() {
if (xhr.readyState != 4) return;
if (xhr.status != 200) {
alert(xhr.status + ': ' + xhr.statusText);
} else{
xhr2.open('POST','index42.html',true);
xhr2.send(body2);
}}
xhr2.onreadystatechange = function() {
if (xhr2.readyState != 4) return;
if (xhr2.status != 200) {
alert(xhr2.status + ': ' + xhr2.statusText);
} else {
alert('Параметры таймера сохранены')
location.reload();
}}
}
function clstmr(){PostData('tmr=rst','index42.html',false,'Таймеры очищены',true);}
function ClsTar(){PostData('tar=rst','index23_5.html',false,'Тарифы очищены',true);}
function ClickCheckbox(){
for(i=1;i<17;++i){
var st = !document.getElementsByName('enb'+i)[0].checked;
document.getElementById('tdp'+i).disabled = st;
document.getElementsByName('prd'+i)[0].disabled = st;
document.getElementsByName('act'+i)[0].disabled = st;
}}
function GenerateInterface(t, z){
timers = t;
document.write("<table>");
document.write("<tr><td></td><td>&nbsp;начало</td><td>&nbsp;повтор</td><td></td></tr>");
for(i=1;i<17;++i){
rep = ['once','1m','2m','5m','10m','15m','20m','30m','1h','2h','3h','6h','9h','12h','18h','1d','2d','7d'];
act=['Off','On','Rst','Wrs'];
tm=timers[i-1];
pos1=tm.indexOf("%",0);
dt=parseInt(tm.substring(0,pos1),16);
en=parseInt(tm.substr(pos1+1,2),16);
ac=parseInt(tm.substr(pos1+4,2),16);
rp=parseInt(tm.substr(pos1+7),16);
document.write("<div style='padding-top:0px;white-space:pre'>");
ch = (en != 0)?'checked':'';
document.write("<tr><td><input type='checkbox' name='enb"+i+"' "+ch+" onclick='ClickCheckbox()' ></td>");
date=new Date((dt+z*3600)*1000);
str=date.toISOString();
val=str.substring(0,16);
document.write("<td><input type='datetime-local' value='"+val+"' id='tdp"+i+"'></td>");
document.write("<td><select name='prd"+i+"'>");
for(ii=0;ii<18;++ii){
s=(ii==+rp)?"selected":"";
document.write("<option value='"+ii+"' "+s+" >"+rep[ii]+"</option>");}
document.write("</select></td>");
document.write("<td><select name='act"+i+"'>");
for(ii=0;ii<4;++ii){
s=(ii==+ac)?"selected":"";
document.write("<option value='"+ii+"' "+s+" >"+act[ii]+"</option>");}
document.write("</select></td></tr>");
document.write("</div>");}
document.write("</table>");}
function GenTarifTable(r){
document.write('<table>');
document.write("<tr><td></td><td>&nbsp;начало</td><td>&nbsp;конец</td><td>&nbsp;тариф</td></tr>");
for(i=1;i<7;++i){
var rc=(r[i-1]).split("%",4);
document.write("<div style='padding-top:0px;white-space:pre'>");
ch=(rc[0] != 0)?'checked':'';
document.write("<tr><td><input type='checkbox' id='tcb"+i+"' "+ch+"></td>");
document.write("<td class='tarw'><input type='time' id='tbgn"+i+"'"+"value='"+TimeToStr(parseInt(rc[1],10))+"' ></td>");
document.write("<td class='tarw'><input type='time' id='tend"+i+"'"+"value='"+TimeToStr(parseInt(rc[2],10))+"' ></td>");
document.write("<td><select id='sltar"+i+"'>");
for(ii=1; ii<4 ;++ii){
sel=(rc[3] == ii)?"selected":"";
document.write("<option "+sel+" value='"+ii+"'"+">"+tds[ii]+"</option>");}
document.write("</select></td></tr>");}
document.write("</table>");}
function SaveTar(){
var d="";
for(i=1;i<7;++i){
d+="tpr"+i+"=";
d+=((document.getElementById("tcb"+i).checked) ? "1":"0").toString()+"%";
d+=StrToTime(document.getElementById("tbgn"+i).value)+"%";
d+=StrToTime(document.getElementById("tend"+i).value)+"%";
d+=(document.getElementById("sltar"+i).value).toString()+"&";}
for(i=1;i<4;++i){
d+="tar"+i+"="+(document.getElementById("tar"+i).value).toString()+"&";}
d+="unt="+(document.getElementById("unt").value).toString()+"&sav=prs";
PostData(d,"index23_5.html",false,"Параметры тарифов сохранены",true);}
function ClsTar(){PostData('tarif=rst','index23_5.html',false,'Тарифы очищены',true);}
function SendSimpTim(btn){
ts=StrToTimeSec(document.getElementById("stbgn"+btn).value);
ac=document.getElementById("slact"+btn).value;
bt=document.getElementById("simt"+btn);st=bt.value;
if(st=="1"){st="0";bt.innerHTML="Пуск";bt.style.backgroundColor="#FF6633";bt.value="0";}
else {st="1";bt.innerHTML="Стоп";bt.style.backgroundColor="#99CC00";bt.value="1";}
d='tim'+btn+"="+ts+"&act"+btn+"="+ac+"&st"+btn+"="+st+"&sav=prs";
PostData(d,"index42_2.html",false,"",false);}
function GenSimpTimers(r){
document.write("<table style='margin-left:40px'>");
for(i=1;i<4;++i){rc=(r[i-1]).split("%",3);
t=TimeToStrSec(parseInt(rc[0],10));
document.write("<tr style='margin-top:40px'><td>Таймер "+i+"</td></tr>");
document.write("<tr><td class='stimr'><input type='time' id='stbgn"+i+"'"+" value='"+t+"' step='1'></td>");
document.write("<td><select id='slact"+i+"'>");s1="",s2="";
if(rc[1]==1)s1="selected";else s2="selected";
document.write("<option "+s1+" value='1'>On</option>");
document.write("<option "+s2+" value='0'>Off</option></select></td>");
if(rc[2]==1) document.write("<td><button type='submit' class='btn sbtn' id='simt"+i+"' value='1' onclick='SendSimpTim("+i+")'>Стоп</button></td></tr>");
else document.write("<td><button type='submit' class='btn sbtn timact' id='simt"+i+"' value='0' onclick='SendSimpTim("+i+")'>Пуск</button></td></tr>");}
document.write("</table>");}
function RefSimpTimers(){
function refresh(){
if (this.status == 200) {
r=JSON.parse(this.responseText);
for(i=1;i<4;++i){
var rc=(r.tmr2[i-1]).split("%",3);
tt=parseInt(rc[0],10);t=TimeToStrSec(tt);
if(rc[2]=="1" || trpend[i-1]==1){
document.getElementById("stbgn"+i).value=t;
document.getElementById("slact"+i).value=rc[1];
bt=document.getElementById("simt"+i);
if(rc[2]=="1"){bt.innerHTML="Стоп";bt.style.backgroundColor="#99CC00";}
else{bt.innerHTML="Пуск";bt.style.backgroundColor="#FF6633";}
if(tt<5&&tt!=0&&rc[2]=="1") trpend[i-1]=1;
else trpend[i-1]=0;
}}}};
var xhr=new XMLHttpRequest();
xhr.onload = refresh;
xhr.open('GET','/tmr2.json',true);
xhr.send();
}
function GenCntInter(N,curN,pp,tt,unt,tw,tz,ttr){
var T=parseFloat(ttr),P=0;
document.write("<table><tr><td align='right'>Счетчик:</td><td align='left'>№"+N+"</td></tr>");
document.write("<tr><td align='right'>Начало учета:</td><td align='left'><span id='tt"+N+"'>?</span></td></tr>");
document.write("<tr><td align='right'>Конец учета:</td><td align='left'><span name='tnow'>?</span></td></tr>");
document.write("<tr><td align='right'>Действующий тариф:</td><td align='left'><span id='curt'>?</span></td></tr>");
document.write("<tr><td height='20px'></td></tr>");
document.write("<tr class='acc'><td align='right'>Тариф:</td><td align='left'>Пиковый</td></tr>");
document.write("<tr class='acc'><td align='right'>Потребление:</td><td align='left'><span id='pp"+N+"1'>?</span> кВт*ч</td></tr>");
document.write("<tr class='acc'><td align='right'>Стоимость:</td><td align='left'><span id='prs"+N+"1'>?</span></td></tr><tr><td height='20px'></td></tr>");
document.write("<tr class='yl'><td align='right'>Тариф:</td><td align='left'>Полупиковый</td></tr>");
document.write("<tr class='yl'><td align='right'>Потребление:</td><td align='left'><span id='pp"+N+"2'>?</span> кВт*ч</td></tr>");
document.write("<tr class='yl'><td align='right'>Стоимость:</td><td align='left'><span id='prs"+N+"2'>?</span></td></tr><tr><td height='20px'></td></tr>");
document.write("<tr class='pri'><td align='right'>Тариф:</td><td align='left'>Ночной</td></tr>");
document.write("<tr class='pri'><td align='right'>Потребление:</td><td align='left'><span id='pp"+N+"3'>?</span> кВт*ч</td></tr>");
document.write("<tr class='pri'><td align='right'>Стоимость:</td><td align='left'><span id='prs"+N+"3'>?</span></td></tr><tr><td height='20px'></td></tr>");
document.write("<div class='ctrb'>");
document.write("<tr><td align='right'>Общее потребление:</td><td align='left'><span id='pp"+N+"'>?</span> кВт*ч</td></tr>");
document.write("<tr><td align='right'>Общая стоимость:</td><td align='left'><span id='prs"+N+"'>?</span></tr>");
document.write("</div><tr><td height='20px'></td></tr></table>");
document.getElementById('curt').innerHTML=tds[curN];
for(i=1;i<4;++i){
var px = FloatToString(pp[i])*sc;
document.getElementById("pp"+N+i).innerHTML=parseFloat(px).toFixed(4);
document.getElementById("prs"+N+i).innerHTML=(px*T).toFixed(2)+' '+unt;
P+=px;}
document.getElementById("pp"+N).innerHTML=parseFloat(P).toFixed(4);
document.getElementById("tt"+N).innerHTML=UnixToStr(tt,tz,10);
document.getElementById("prs"+N).innerHTML=(P*T).toFixed(2)+' '+unt;
document.getElementsByName('tnow')[0].innerHTML=UnixToStr(tw,tz,10);}
function configIPBoxes(){e=document.forms.conf;
var ap=document.getElementsByName('netm');
st=e.dhcp.checked;
function apmode(m){e.wfiap.disabled=m;e.wfpap.disabled=m;e.ipaap.disabled=m;}
function clnmode(m){e.wfi.disabled=m;e.wfp.disabled=m;e.ipa.disabled=m;e.mas.disabled=m;e.gte.disabled=m;}
if(ap[0].checked){apmode(true);clnmode(false);
e.ipa.disabled=st;e.mas.disabled=st;e.gte.disabled=st;}
if(ap[1].checked){apmode(false);clnmode(true);}
}
function sendtime() {var ut=Date.parse(new Date( Date.parse(document.getElementById('curdt').value)))/1000;
var d='timenow='+ut;
PostData(d,'index23_3.html',false,'Время установлено',false);}
function WriteChart(log,z){
var val=[],tst=[],vf=[],scl;
for(i=0;i<32;++i){
var r=log[i];
var t=r.substr(0,8);
if (t!='00000000') tst[i]=UnixToStr(t,z,16,0);
else tst[i]=0;
val[i]=FloatToString(r.substr(8,8));
vf[i]=parseFloat((val[i]*sc).toFixed(4));}
scl=Math.max.apply(null, vf);
document.write("<div class='wnd'><table><div class='wd'>");
document.write("<tr><td>дата&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;время&nbsp;кВт*ч</td><td></td></tr></div>");
for(i=0;i<32;++i){
document.write("<tr><td><div class='wd'>");
if(tst[i]!=0) document.write(tst[i]+" "+(val[i]*sc).toFixed(4));
else document.write("--/--/-- --:-- -----");
document.write("</div></td><td><div class='chart'>");
if(tst[i]!=0)document.write("<div style='width:"+Math.floor(160*0.95/(scl+sc)*((val[i]*sc).toFixed(4)))+"px;'></div>");
document.write("</div></td></tr>");}
document.write("</table></div>");}
function setprm(p) {
document.getElementById("vmin").value=Math.round(p[0]*Ku);
document.getElementById("vmax").value=Math.round(p[1]*Ku);
document.getElementById("imin").value=(p[2]*Ki).toFixed(1);
document.getElementById("imax").value=(p[3]*Ki).toFixed(1);}
function sld(){document.getElementById("vn").innerHTML=document.getElementById("vmin").value+' В';
document.getElementById("vx").innerHTML=document.getElementById("vmax").value+' В';
document.getElementById("in").innerHTML=document.getElementById("imin").value+' A';
document.getElementById("ix").innerHTML=document.getElementById("imax").value+' A';}
function sendprm(){var d='umin='+Math.round( parseFloat(document.getElementById("vmin").value,10)/Ku);
d+='&umax='+Math.round( parseFloat(document.getElementById("vmax").value,10)/Ku);
d+='&imin='+Math.round( parseFloat(document.getElementById("imin").value,10)/Ki);
d+='&imax='+Math.round( parseFloat(document.getElementById("imax").value,10)/Ki);
d+='&pten='+((document.getElementsByName('pten')[0].checked) ? '1':'0').toString();
d+='&rstt='+document.getElementById('rstt').value;
d+='&rstn='+document.getElementById('rstn').value;
d+='&sav=prs';
PostData(d,'index41.html',false,'Параметры установлены',true);}
function GenTzSel(zn) {
document.write('<tr><td class=\'rl\'>Time zone:</td><td><select size="1" name = "tz" id="tz">');
for(i=0;i<=24;++i) document.write('<option value='+i+'>GMT'+tz[i]+'</option>');
document.write('</select></td></tr>');
document.getElementById('tz').value = zn;}
function PrintIPInput(title,name,value){document.write("<tr><td class='rl'>"+title+"</td><td><input type='text' required size='20' name='"+name+"' value='"+value+"' title='IP адрес xxx.xxx.xxx.xxx' pattern='^\\d{1,3}\.\\d{1,3}\.\\d{1,3}\.\\d{1,3}$' /></td></tr>");}
function PrintMACInput(title,name,value){document.write("<tr><td class='rl'>MAC:</td><td><input type='text' required size='20' name='"+name+"' value='"+value+"' title='MAC адрес xx-xx-xx-xx-xx-xx' pattern='^([0-9a-fA-F]{2}([-]|$)){6}$|([0-9a-fA-F]{4}([.]|$)){3}$' /></td></tr>");}
function PrintTextInput(title,name,value,min,max){document.write("<tr><td class='rl'>"+title+"</td><td><input type='text' required size='20' name='"+name+"' value="+value+" title='"+min+"-"+max+" символов A-Za-z0-9_\-*!<>)(.@,/' pattern='^[0-9a-zA-Z_\\-*!<>.@\,/)(\s]{"+min+","+max+"}$' /></td></tr>");}
function PrintTextInputNoReg(title,name,value,min,max){document.write("<tr><td class='rl'>"+title+"</td><td><input type='text' required size='20' name='"+name+"' value="+value+" title='"+min+"-"+max+" символов'/></td></tr>");}
function PrintLabel(title,value){document.write("<tr><td class='rl'>"+title+"</td><td align='left'>"+value+"</td></tr>");}
function PrintCheckBox(title,name,checked,action){document.write("<tr><td class='rl'>"+title+"</td><td><input type='checkbox' name='"+name+"' value='1' onclick="+action+" "+checked+" /></td></tr>");}
function PrintInt(title,name,value,min,max){document.write("<tr><td class='rl'>"+title+"</td><td><input type='number' required min='"+min+"' max='"+max+"' name='"+name+"' value ='"+value+"'/></td></tr>");}
function PrintIntId(title,id,value,min,max){document.write("<tr><td class='rl'>"+title+"</td><td><input type='number' required min='"+min+"' max='"+max+"' id='"+id+"' value ='"+value+"'/></td></tr>");}
function PrintSep(){document.write("<tr><td height='20px'></td></tr>");}
function PrintTar(title,name,value){document.write("<tr><td class='rl'>"+title+"</td><td><input type='text' required value='"+value+"' size='6' id='"+name+"' title='число 3-6 символов с десятичной точкой' pattern='[0-9\.]{3,6}'/></td></tr>");}
function PrintSaveBtn(){document.write("<div style='text-align:center;margin-top:10px'><button type='submit' class='btn' name='sav' value='prs'>Сохранить</button></div>");}
function PrintSaveFail(isfail){document.write("<div class='resfail' style='text-align:center;display:"+isfail+"' color='#F00'><font color='red'><h2>Ошибка формата данных!</h2></font><br/></div>");}
function PrintMenu(){
document.write("<div id='conteiner'><nav id='menu1'><ul>");
document.write("<li><a href='index.html'>Главная</a></li>");
document.write("<li><a href='#'>Измерения</a><ul>");
document.write("<li><a href='index31.html'>Счетчик1</a></li>");
document.write("<li><a href='index31_5.html'>Счетчик2</a></li>");
document.write("<li><a href='index32.html'>5 минут</a></li>");
document.write("<li><a href='index33.html'>1 час</a></li>");
document.write("<li><a href='index34.html'>1 день</a></li></ul></li>");
document.write("<li><a href='#'>Контроль</a><ul>");
document.write("<li><a href='index41.html'>Защита</a></li>");
document.write("<li><a href='index42.html'>Менеджер</a></li>");
document.write("<li><a href='index42_2.html'>Таймер</a></li>");
document.write("<li><a href='index43.html'>Астрореле</a></li>");
document.write("<li><a href='index44.html'>ПингТаймер</a></li></ul></li>");
document.write("<li><a href ='#'>Настройки</a><ul>");
document.write("<li><a href='index21.html'>Сеть</a></li>");
document.write("<li><a href='index22.html'>MQTT</a></li>");
document.write("<li><a href='index23.html'>Система</a></li>");
document.write("<li><a href='index23_3.html'>Время</a></li>");
document.write("<li><a href='index23_5.html'>Тарифы</a></li>");
document.write("<li><a href='index24.html'>Журнал</a></li></ul></li>");
document.write("</ul></nav></div>");}
function saveFile(fileName,urlFile){
let a = document.createElement("a");
a.style = "display: none";
document.body.appendChild(a);
a.href = urlFile;
var D = new Date();
a.download ='WS10_'+fileName+'_'+((D).toISOString()).substr(0,19)+'.dat';
a.click();
window.URL.revokeObjectURL(urlFile);
a.remove();
}
function ReadEEPR(v5m,v1h,v1d,z){
document.getElementById('tmr').innerHTML=0;
var str=document.location.toString();
var ref=str.substring(0,str.lastIndexOf('/savehist.html'));
let data = {bufm:[],bufh:[],bufd:[],adr:0x1006,isReady:true};
function PrcdData(){
function Iter(item){
if(item.substr(0,8)!='00000000')
prnt+=UnixToStr(item.substr(0,8),z,16,0)+' '+(FloatToString(item.substr(8,8))*sc).toFixed(4)+' кВт*ч\r\n'}
data.bufm.sort();data.bufh.sort();data.bufd.sort();
var prnt='5 минут\r\n';data.bufm.forEach(Iter);
prnt+='1 час\r\n';data.bufh.forEach(Iter);
prnt+='1 день\r\n';data.bufd.forEach(Iter);
let blobData = new Blob([prnt], {type: "text/plain"});
let url = window.URL.createObjectURL(blobData);
saveFile('measures',url);
window.location=ref+'/index23.html';
}
function ReadChunk(){
if (this.readyState==4 && this.status==200) {
for(i=0;i<8;++i){
r=(this.response.mem[i]).substr(5,32);
r1=r.substr(6,2)+r.substr(4,2)+r.substr(2,2)+r.substr(0,2)+r.substr(8,8);
r2=r.substr(22,2)+r.substr(20,2)+r.substr(18,2)+r.substr(16,2)+r.substr(24,8);
if(data.adr<0x1906){data.bufm.push(r1);data.bufm.push(r2);}
else if (data.adr<0x1f06){data.bufh.push(r1);data.bufh.push(r2);}
else{data.bufd.push(r1);data.bufd.push(r2);}}
data.adr+=0x80;data.isReady=true;
document.getElementById('tmr').innerHTML=Math.round((data.adr-0x1006)/(0x2B06-0x1006)*100);
if(data.adr==0x2B06) {clearInterval(timerId);
PrcdData();
}}else{alert(xhr.status+': '+xhr.statusText);window.location=ref+'/index23.html'}}
let timerId = setInterval(function(){
if(data.isReady){
data.isReady=false;
var xhr=new XMLHttpRequest();
xhr.open('POST',ref+'/mem.json', true);
xhr.responseType='json';
xhr.onreadystatechange=ReadChunk;
xhr.send('base='+data.adr.toString(16));}},5);
}
function ReadConf(){
document.getElementById('tmr').innerHTML=0;
var str=document.location.toString();
var ref=str.substring(0,str.lastIndexOf('/saveconf.html'));
let data = {buf:[],adr:0x0000,isReady:true};
function PrcdData(){
function Iter(item){prnt+=item+'\r\n';}
var prnt='';data.buf.forEach(Iter);
let blobData = new Blob([prnt], {type: "text/plain"});
let url = window.URL.createObjectURL(blobData);
saveFile('config',url);
window.location=ref+'/index23.html';
}
function ReadChunk(){
if (this.readyState==4 && this.status==200) {
for(i=0;i<8;++i){
r=(this.response.mem[i]).substr(5,32);
data.buf.push(r);}
data.adr+=0x80;data.isReady=true;
document.getElementById('tmr').innerHTML=Math.round((data.adr-0x0000)/(0x0800-0x0000)*100);
if(data.adr==0x0800) {clearInterval(timerId);
PrcdData();
}}else{alert(xhr.status+': '+xhr.statusText);window.location=ref+'/index23.html'}}
let timerId = setInterval(function(){
if(data.isReady){
data.isReady=false;
var xhr=new XMLHttpRequest();
xhr.open('POST',ref+'/mem.json', true);
xhr.responseType='json';
xhr.onreadystatechange=ReadChunk;
xhr.send('base='+data.adr.toString(16));}},5);
}
function WriteConf(input){
document.getElementById('tmr').innerHTML=0;
var str=document.location.toString();
var ref=str.substring(0,str.lastIndexOf('/restconf.html'));
let data = {buf:[],adr:0x0000,isReady:true};
let file = input.files[0];
let reader = new FileReader();
reader.readAsText(file);
reader.onload = function() {
data.buf = reader.result.split('\r\n');
function ReadChunk(){
if (this.readyState==4 && this.status==200) {
data.adr+=0x40;data.isReady=true;
document.getElementById('tmr').innerHTML=Math.round((data.adr-0x0000)/(0x0800-0x0000)*100);
if(data.adr==0x0800) {
clearInterval(timerId);
window.location=ref+'/reboot.html';
}}else{alert(xhr.status+': '+xhr.statusText);window.location=ref+'/index23.html'}}
let timerId = setInterval(function(){
if(data.isReady){
data.isReady=false;
var ind=data.adr/0x10;
var dt='write='+data.adr.toString(16);
dt+='&dt1='+data.buf[ind];
dt+='&dt2='+data.buf[ind+1];
dt+='&dt3='+data.buf[ind+2];
dt+='&dt4='+data.buf[ind+3];
var xhr=new XMLHttpRequest();
xhr.open('POST',ref+'/mem.json', true);
xhr.responseType='json';
xhr.onreadystatechange=ReadChunk;
xhr.send(dt);}},5);
};
reader.onerror = function() {};
}

BIN
HTML/new/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

27
HTML/new/main.js
View File

@ -1,27 +0,0 @@
/*==================== SHOW NAVBAR ====================*/
const showMenu = (headerToggle, navbarId) =>{
const toggleBtn = document.getElementById(headerToggle),
nav = document.getElementById(navbarId)
// Validate that variables exist
if(headerToggle && navbarId){
toggleBtn.addEventListener('click', ()=>{
// We add the show-menu class to the div tag with the nav__menu class
nav.classList.toggle('show-menu')
// change icon
toggleBtn.classList.toggle('bx-x')
})
}
}
showMenu('header-toggle','navbar')
/*==================== LINK ACTIVE ====================*/
const linkColor = document.querySelectorAll('.nav__link')
function colorLink(){
linkColor.forEach(l => l.classList.remove('active'))
this.classList.add('active')
}
linkColor.forEach(l => l.addEventListener('click', colorLink))

0
HTML/sys/reboot.html → HTML/reboot.html
View File

115
HTML/res.js Normal file
View File

@ -0,0 +1,115 @@
var hedmen = `
<header class="header">
<div class="header__container">
<img src="youlogo.gif" alt="LOGO" class="header__img">
<a href="index.html" class="header__logo">YouDevice</a>
<div class="header__toggle">
<i class='icon-menu' id="header-toggle"></i>
</div>
</div>
</header>
<div class="nav" id="navbar">
<nav class="nav__container">
<div>
<a href="index.html" class="nav__link nav__logo">
<i class='icon-home nav__icon' ></i>
<span class="nav__logo-name">Home</span>
</a>
<div class="nav__list">
<div class="nav__items">
<h3 class="nav__subtitle">APPLICATION</h3>
<div class="nav__dropdown">
<a href="#" class="nav__link">
<i class='icon-chart-bar nav__icon'></i>
<span class="nav__name">APPLICATION1</span>
<i class='icon-down-open nav__icon nav__dropdown-icon'></i>
</a>
<div class="nav__dropdown-collapse">
<div class="nav__dropdown-content">
<a href="#" class="nav__dropdown-item">App1</a>
<a href="#" class="nav__dropdown-item">App2</a>
<a href="#" class="nav__dropdown-item">App3</a>
</div>
</div>
</div>
<div class="nav__dropdown">
<a href="#" class="nav__link">
<i class='icon-chart-bar nav__icon' ></i>
<span class="nav__name">APPLICATION2</span>
<i class='icon-down-open nav__icon nav__dropdown-icon'></i>
</a>
<div class="nav__dropdown-collapse">
<div class="nav__dropdown-content">
<a href="#" class="nav__dropdown-item">App1</a>
<a href="#" class="nav__dropdown-item">App2</a>
<a href="#" class="nav__dropdown-item">App3</a>
</div>
</div>
</div>
</div>
<div class="nav__items">
<h3 class="nav__subtitle">SYSTEM</h3>
<div class="nav__dropdown">
<a href="#" class="nav__link">
<i class='icon-wifi nav__icon' ></i>
<span class="nav__name">NETWORK</span>
<i class='icon-down-open nav__icon nav__dropdown-icon'></i>
</a>
<div class="nav__dropdown-collapse">
<div class="nav__dropdown-content">
<a href="set_eth.html" class="nav__dropdown-item">Ethernet</a>
<a href="set_wifi.html" class="nav__dropdown-item">WiFi</a>
<a href="set_gprs.html" class="nav__dropdown-item">GPRS</a>
<a href="set_mqtt.html" class="nav__dropdown-item">MQTT</a>
</div>
</div>
</div>
<div class="nav__dropdown">
<a href="#" class="nav__link">
<i class='icon-cog-alt nav__icon' ></i>
<span class="nav__name">STSTEM</span>
<i class='icon-down-open nav__icon nav__dropdown-icon'></i>
</a>
<div class="nav__dropdown-collapse">
<div class="nav__dropdown-content">
<a href="set_sys.html" class="nav__dropdown-item">System</a>
<a href="set_time.html" class="nav__dropdown-item">Time</a>
<a href="control.html" class="nav__dropdown-item">Control</a>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
`;
function PageSurround()
{document.write(hedmen);}
function PrintIPInput(title,name,value){document.write("<tr><td class='rl'>"+title+"</td><td><input type='text' required size='20' name='"+name+"' value='"+value+"' title='IP адрес xxx.xxx.xxx.xxx' pattern='^\\d{1,3}\.\\d{1,3}\.\\d{1,3}\.\\d{1,3}$' /></td></tr>");}
function PrintMACInput(title,name,value){document.write("<tr><td class='rl'>"+title+"</td><td><input type='text' required size='20' name='"+name+"' value='"+value+"' title='MAC адрес xx-xx-xx-xx-xx-xx' pattern='^([0-9a-fA-F]{2}([-]|$)){6}$|([0-9a-fA-F]{4}([.]|$)){3}$' /></td></tr>");}
function PrintTextInput(title,name,value,min,max){document.write("<tr><td class='rl'>"+title+"</td><td><input type='text' required size='20' name='"+name+"' value="+value+" title='"+min+"-"+max+" символов A-Za-z0-9_\-*!<>)(.@,/' pattern='^[0-9a-zA-Z_\\-*!<>.@\,/)(\s]{"+min+","+max+"}$' /></td></tr>");}
function PrintHexInput(title,name,value,min,max){document.write("<tr><td class='rl'>"+title+"</td><td><input type='text' required size='20' name='"+name+"' value="+value+" title='"+min+"-"+max+" символов A-Fa-f0-9' pattern='^[0-9a-fA-F]{"+min+","+max+"}$' /></td></tr>");}
function PrintTextInputNoReg(title,name,value,min,max){document.write("<tr><td class='rl'>"+title+"</td><td><input type='text' required size='20' name='"+name+"' value="+value+" title='"+min+"-"+max+" символов'/></td></tr>");}
function PrintLabel(title,value){document.write("<tr><td class='rl'>"+title+"</td><td align='left'>"+value+"</td></tr>");}
function PrintSpanLabel(title,idx){document.write("<tr><td class='rl'>"+title+"</td><td align='left'><span id='"+idx+"'>?</span></td></tr>");}
function PrintCheckBox(title,name,checked,action){document.write("<tr><td class='rl'>"+title+"</td><td><input type='checkbox' name='"+name+"' value='1' onclick="+action+" "+checked+" /></td></tr>");}
function PrintInt(title,name,value,min,max){document.write("<tr><td class='rl'>"+title+"</td><td><input type='number' required min='"+min+"' max='"+max+"' name='"+name+"' value ='"+value+"'/></td></tr>");}
function PrintIntId(title,id,value,min,max){document.write("<tr><td class='rl'>"+title+"</td><td><input type='number' required min='"+min+"' max='"+max+"' id='"+id+"' value ='"+value+"'/></td></tr>");}
function PrintSep(){document.write("<tr><td height='20px'></td></tr>");}
function PrintSaveBtn(){document.write("<div style='text-align:center;margin-top:10px'><button type='submit' class='btn' name='sav' value='prs'>Сохранить</button></div>");}
function PrintSaveFail(isfail){document.write("<div class='resfail' style='text-align:center;display:"+isfail+"' color='#F00'><font color='red'><h4>Неверный формат данных!</h4></font><br/></div>");}

40
HTML/set_eth.html Normal file
View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="iconsfont.css">
<script src="main.js"></script>
<script src="res.js"></script>
<title>~name~</title>
</head>
<body>
<script>PageSurround();</script>
<!--========== CONTENTS ==========-->
<main>
<section>
<form name="conf" method="post">
<table class='cntr'><tr>
<script>PrintCheckBox('Включить ETHERNET','ethen','~ethen~','configIPBoxes()');
PrintCheckBox('Включить DHCP','dhcp','~ecbdh~','configIPBoxes()');
PrintIPInput('IP Станции:','ipa','~eip~');
PrintIPInput('Маска подсети:','mas','~emsk~');
PrintIPInput(' Адрес шлюза:','gte','~egate~');
PrintIPInput('DNS1:','dns1','~edns~');
PrintIPInput('DNS2:','dns2','~bkedns~');
PrintIPInput('DNS3:','dns3','~fledns~');
PrintMACInput('MAC:','mac','~emacadr~');</script>
<tr><td></td></tr></table><br/>
</div>
<script>PrintSaveFail('~status_fail~');
PrintSaveBtn();</script>
</form>
</section>
</main>
<script>
showMenu('header-toggle','navbar');
linkColor.forEach(l => l.addEventListener('click', colorLink))
</script>
</body>
</html>

42
HTML/set_gprs.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="iconsfont.css">
<script src="main.js"></script>
<script src="res.js"></script>
<title>~name~</title>
</head>
<body>
<script>PageSurround();</script>
<!--========== CONTENTS ==========-->
<main>
<section>
<form name="conf" method="post">
<table class='cntr'>
<script>PrintCheckBox('Включить GSM','gsmen','~gsmen~',null);
PrintLabel('Модуль:','~gsmmod~');
PrintLabel('Оператор:','~gsmopr~');
PrintLabel('IMEI:','~gimei~');
PrintLabel('IMSI:','~gimsi~');
PrintLabel('IP адрес:','~gsmip~');
PrintLabel('Маска подсети:','~gsmmsk~');
PrintLabel('Адрес шлюза:','~gsmgate~');
PrintLabel('DNS1:','~gsmdns~');
PrintLabel('DNS2:','~bkgsmdns~');
PrintLabel('DNS3:','~flgsmdns~');</script>
<tr><td></td></tr></table><br/>
</div>
<script>PrintSaveFail('~status_fail~');
PrintSaveBtn();</script>
</form>
</section>
</main>
<script>
showMenu('header-toggle','navbar');
linkColor.forEach(l => l.addEventListener('click', colorLink))
</script>
</body>
</html>

46
HTML/set_mqtt.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="iconsfont.css">
<script src="main.js"></script>
<script src="res.js"></script>
<title>~name~</title>
</head>
<body>
<script>PageSurround();</script>
<!--========== CONTENTS ==========-->
<main>
<section>
<form name="conf" method="post">
<table class='cntr'>
<script>PrintCheckBox('Включить MQTT 1','mqttenb1','~mqtten1~',null);
PrintTextInput('URL шлюза сообщений','cld1','~ipcld1~',3,31);
PrintInt('Порт шлюза сообщений','mprt1','~mport1~',1000,65534);
PrintTextInput('ID станции','idd1','~idcld1~',3,31);
PrintTextInput('Корневая тема','top1','~topic1~',3,31);
PrintTextInput('Логин','clnm1','~clname1~',3,31);
PrintTextInput('Пароль','clps1','~clpass1~',3,31);
PrintSep();
PrintCheckBox('Включить MQTT 2','mqttenb2','~mqtten2~',null);
PrintTextInput('URL шлюза сообщений','cld2','~ipcld2~',3,31);
PrintInt('Порт шлюза сообщений','mprt2','~mport2~',1000,65534);
PrintTextInput('ID станции','idd2','~idcld2~',3,31);
PrintTextInput('Корневая тема','top2','~topic2~',3,31);
PrintTextInput('Логин','clnm2','~clname2~',3,31);
PrintTextInput('Пароль','clps2','~clpass2~',3,31);</script>
</table>
</div>
<script>PrintSaveFail('~status_fail~');
PrintSaveBtn();</script>
</form>
</section>
</main>
<script>
showMenu('header-toggle','navbar');
linkColor.forEach(l => l.addEventListener('click', colorLink))
</script>
</body>
</html>

50
HTML/set_sys.html Normal file
View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="iconsfont.css">
<script src="main.js"></script>
<script src="res.js"></script>
<title>~name~</title>
</head>
<body>
<script>PageSurround();</script>
<!--========== CONTENTS ==========-->
<main>
<section>
<form name="conf" method="post" accept-charset='UTF-8'>
<table class='cntr'><script>PrintTextInputNoReg('Имя устройства:','nam','~dname~', 3, 31 );
PrintTextInput('Имя пользователя:','lgn','~login~', 3, 31 );
PrintTextInput('Пароль пользователя','psn','~pass~', 5, 31 );
PrintCheckBox('Подтверждать TCP','tcpdel','~tcpdel~',null);
PrintCheckBox('Подтверждать LoRaWAN','lrdel','~lrdel~',null);
PrintCheckBox('Включить OTA обновление','ota','~ota~',null);</script></table>
<table class='cntr'><tr><td align="center">URL файла обновления:</td></tr>
<tr><td align="center"><textarea type="text" cols="40" raws="5" name='otaurl' title="64 символа" ">~otaurl~</textarea></td></tr>
</table>
<table class='cntr'><script>
PrintSep();
PrintLabel('Версия ПО:','~fver~');
PrintLabel('Версия IDF:','~idfver~');
PrintLabel('Дата сборки:','~builddate~');
PrintLabel('Серийный номер:','~serial10~');</script></table>
</div>
<div class="resfail" style="text-align:center;display:~status_fail~" color="#F00" >
<font color="red">
Data format error!</font><br /> </div>
<div style='margin:auto;text-align:center'>
<button type="submit" class ='btn' name='upd' value='prs'>Обновить ПО</button>
<button type="submit" class ='btn' name='rst' value='prs'>Перезагрузить</button><br /><br />
<button type="submit" class ='btn' name='sav' value='prs'>Сохранить</button>
</div>
</form>
</section>
</main>
<script>
showMenu('header-toggle','navbar');
linkColor.forEach(l => l.addEventListener('click', colorLink))
</script>
</body>
</html>

49
HTML/set_time.html Normal file
View File

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="iconsfont.css">
<script src="main.js"></script>
<script src="res.js"></script>
<title>~name~</title>
</head>
<body>
<script>PageSurround();</script>
<!--========== CONTENTS ==========-->
<main>
<section>
<div class='cntr'>
<form name="conf" method="post" accept-charset='UTF-8'>
<table class='cntr'>
<tr><td class='rl'>Включить SNTP клиент</td><td><input type="checkbox" name="sntpen" value="1" ~sntpen~></td></tr>
<tr><td class='rl'>Адрес SNTP сервера:</td><td><input type="text" required size="20" name='tsr' value="~tmsrv~" title="3-32 символов A-Z,a-z,0-9,." pattern="^[0-9a-zA-Z\.]{3,32}$"/></td></tr><tr><td></td></tr><tr><td></td></tr>
</table>
<table class='cntr'>
<tr><td width=90% align='center'>
Установить текущее время вручную:<br/>
<input type='datetime-local' id="curdt">
<button id='sendt' type='button' class ='btn sbtn'>Передать</button><br/><br/><br/>
</td></tr>
</table>
<div class="resfail" style="text-align:center;display:~status_fail~" color="#F00" >
<font color="red">
<h2>Ошибка формата данных!</h2></font><br /> </div>
<div style='margin:auto;text-align:center'>
<button type="submit" class ='btn' name='sav' value='prs'>Сохранить</button>
</div>
</form>
</div>
</section>
</main>
<script>
showMenu('header-toggle','navbar');
linkColor.forEach(l => l.addEventListener('click', colorLink))
</script>
</body>
</html>

48
HTML/set_wifi.html Normal file
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="iconsfont.css">
<script src="main.js"></script>
<script src="res.js"></script>
<title>~name~</title>
</head>
<body>
<script>PageSurround();</script>
<!--========== CONTENTS ==========-->
<main>
<section>
<form name="conf" method="post">
<table class='cntr'>
<tr><td class='rl'>Включить WiFi</td><td><input type="checkbox" name="wifien" value="1" ~wfen~/></td></tr>
<td class='rl'>Режим WiFi</td></td><td><input name="netm" type="radio" value="2" onclick="configIPBoxes()" ~cln~>Клиент(CLN)</input></td></tr>
<tr><td></td><td><input name="netm" type="radio" value="1" onclick="configIPBoxes()" ~apn~>Точка доступа(AP)</input></td></tr>
<script>PrintTextInput('Имя WiFi сети(AP):','wfiap','~ssidap~',3,31);
PrintTextInput('Ключ WiFi сети(AP):','wfpap','~wkeyap~',8,31);
PrintIPInput('IP адрес(AP):','ipaap','~ipap~');
PrintTextInput('Имя WiFi сети(CLN):','wfi','~ssid~',3,31);
PrintTextInput('Ключ WiFi сети(CLN):','wfp','~wkey~',8,31);
PrintCheckBox('Включить DHCP','dhcp','~cbdh~','configIPBoxes()');
PrintIPInput('IP адрес(CLN):','ipa','~ip~');
PrintIPInput('Маска подсети(CLN):','mas','~msk~');
PrintIPInput('Адрес шлюза(CLN):','gte','~gate~');
PrintIPInput('DNS1:','dns','~dns~');
PrintIPInput('DNS2:','dns2','~dns2~');
PrintIPInput('DNS3:','dns3','~dns3~');
PrintMACInput('MAC(CLN):','mac','~macadr~');
PrintMACInput('MAC(AP):','mac2','~apmacadr~');</script>
<tr><td></td></tr></table><br/>
</div>
<script>PrintSaveFail('~status_fail~');
PrintSaveBtn();</script>
</form>
</section>
</main>
<script>
showMenu('header-toggle','navbar');
linkColor.forEach(l => l.addEventListener('click', colorLink))
</script>
</body>
</html>

51
HTML/style.css
View File

@ -1,51 +0,0 @@
.mono,.mono td,input,.plz td,body,.stg table,.mform {color:#000;font:14px consolas,monospace;padding-left:3px;}
body {background-color:#fff;margin:0px;}
.btn, #bt {color:#fff;font: 14px consolas,monospace;padding:15px 5px;min-width:100px;border-style:none;}
.brd,.mform {margin: 0px; overflow-y: auto; }
.mform {width: 100%; height:auto; margin-top:5px; box-sizing:border-box; padding:0 0 20px 0}
.frm {width:400px; margin:auto;}
.mono input {position:relative; left: 0px;}
.brd,.mform,#bt,.mform input,.mform select {border:solid 1px #CCCCCC;}
.btn, #bt{background-color:#ff0000;}
.wnd, .lwnd {overflow-y:auto;box-sizing:border-box;width:100%;height:410px;font:11px consolas,monospace;text-align:left}
.wnd td{font:11px consolas,monospace;text-align:left}
.lwnd{height:400px;}
#name{margin: 5px; padding:0px; font-size:14px}
.wd,.ctbox,.btbox {font: 11px consolas,monospace;line-height:1.0;margin:-2px 0 -1px 0;}
.btbox{width:100%;text-align:center;margin:5px}
.ctbox{width:80%; height:auto; padding:5px; margin-top:40px; margin-left:10%; box-sizing:border-box;}
.pwrbox{width:60%; height:auto; padding:5px; margin-top:50px; margin-left:20%; box-sizing:border-box;}
.pwrbox td,.ctbox td{font:12px consolas,monospace; width:30%;padding:0;margin:0}
.tmrbox{overflow-y: auto;box-sizing:border-box; width: 100%; height:400px;}
.tmrbox input,.tmrbox select,.tmrbox td {height:21px;margin:-1px 4px;font:12px consolas,monospace;background-color:#FFFFFF;}
.plz {padding:10px;}
.plz input{width:220px;height:40px}
.stg td{width:50%;padding:1px;margin:0}
.stg input, select {height:25px}
input[type="radio"] { margin-top: -1px; vertical-align: middle;}
.stg table{margin: 5px auto}
.rl{text-align:right;}
.resfail{padding:0;margin:auto; }
.btn:active{background-color: #606060;color: #ffffff;}
.btn:focus {outline: none;}
.vspc{margin:30px 0}
.sbtn{font:12px consolas,monospace;padding:5px;width:70px;}
#cont, #menu1{font-family:Tahoma,Arial,Helvetica,sans-serif;font-size:14px;}
#cont {float: left;text-align: center;list-style-type:none;padding:0 0;margin: 0 0;width: 100%;}
#conteiner{width:auto;height:auto;padding-top:5px;margin-right:0px;}
#menu1{position:relative;display:block;width:100%;height:auto;z-index:10;margin:0px 0px;}
#menu1 ul{position:relative;display:block;margin:0px;padding:0px;width:auto;height:auto;list-style:none;background:#ff0000;}
#menu1 > ul:after{display:block;width:100%;height:0px;clear:both;content:" ";}
#menu1 ul li{position:relative;display:block;float:left;width:25%;height:auto;}
#menu1 ul li a{display:block;padding:15px 5px;color:#ffffff;text-decoration:none;
text-align: center;box-sizing:border-box;user-select: none;}
#menu1 ul li > a:hover, #menu1 ul li:hover > a{background:#606060;color:#ffffff;}
#menu1 ul li ul{position:absolute;top:auto;left:0px;display:none;width:100%;background:#ff0000;}
#menu1 ul li:hover ul{display:block;}
#menu1 ul li ul li{float:none;width:100%;}
#menu1 ul li ul li a{display:block;text-transform:none;}
#menu1 ul li ul li:first-child a{border-top:0px;}
#menu1 ul li ul li a:hover{background:#606060;color:#ffffff;}
.dot {height: 30px;width: 30px;background-color: #d0d0d0;border-radius: 40%;display: inline-block; margin: 7px 20px}

59
HTML/new/styles.css → HTML/styles.css
View File

@ -4,23 +4,23 @@
/*========== VARIABLES CSS ==========*/
:root {
--header-height: 3.5rem;
--nav-width: 200px;
--nav-width: 220px;
/*========== Colors ==========*/
--first-color: #FFFFFF;
--first-color-light: #ABEBC6 ;
--title-color: #ABEBC6;
--first-color-light: #D6DBDF ;
--title-color: #85929E;
--text-color: #444444;
--text-color-light: #ABEBC6;
--text-color-light: #85929E;
--body-color: #FFFFFF;
--container-color: #28B463;
--container-color: #AEB6BF;
/*========== Font and typography ==========*/
--body-font: 'Arial', sanf-serif;
--large-font-size: 2.0rem;
--large-font-size: 1.5rem;
--normal-font-size: 1.0rem;
--small-font-size: .75rem;
--smaller-font-size: .75rem;
--small-font-size: .9rem;
--smaller-font-size: .8rem;
/*========== Font weight ==========*/
--font-medium: 500;
@ -32,9 +32,9 @@
@media screen and (min-width: 1024px) {
:root {
--normal-font-size: 1rem;
--small-font-size: .875rem;
--smaller-font-size: .813rem;
--normal-font-size: 1.0rem;
--small-font-size: .9rem;
--smaller-font-size: .8rem;
}
}
@ -86,7 +86,7 @@ img {
.header__img {
width: 50px;
height: ;
height: 50px;
border-radius: 5%;
}
@ -99,25 +99,6 @@ img {
display: none;
}
.header__search {
display: flex;
padding: .40rem .75rem;
background-color: var(--first-color-light);
border-radius: .25rem;
}
.header__input {
width: 100%;
border: none;
outline: none;
background-color: var(--first-color-light);
}
.header__input::placeholder {
font-family: var(--body-font);
color: var(--text-color);
}
.header__icon,
.header__toggle {
font-size: 1.2rem;
@ -215,7 +196,7 @@ img {
.nav__dropdown-collapse {
background-color: var(--first-color-light);
border-radius: .25rem;
border-radius: .5rem;
margin-top: 1rem;
}
@ -335,8 +316,14 @@ img {
}
}
.cntr { margin-left: 150px;
margin-right: auto;
color:#000;
font:14px consolas,monospace;}
.btn {color:var(--text-color);
font: 14px consolas,monospace;padding:15px 5px;
min-width:100px;
border-style:none;
}
.cntr {
margin:auto;
color:#000;
font:14px consolas, monospace;}

30
HTML/sys/control.html
View File

@ -1,30 +0,0 @@
~inc:head.inc~</head>
<body>
<div class = 'frm'>
<script>PrintMenu();</script>
<div class = "mform">
<div class='stg'>
<div id = 'name'>
Сервис|Управление[~dname~]
</div>
<form name="conf" method="post" accept-charset='UTF-8'>
<div style='margin:auto;text-align:center'>
</br>
<button type="submit" class ='btn' name='cmd' value='1'>BAT ON</button>
<button type="submit" class ='btn' name='cmd' value='2'>BAT OFF</button></br></br>
<button type="submit" class ='btn' name='cmd' value='3'>MQTT ON</button>
<button type="submit" class ='btn' name='cmd' value='4'>MQTT OFF</button></br></br>
<button type="submit" class ='btn' name='cmd' value='5'>LORA RJN</button>
<button type="submit" class ='btn' name='cmd' value='6'>FREE</button></br></br>
<button type="submit" class ='btn' name='cmd' value='7'>DEF ETH</button>
<button type="submit" class ='btn' name='cmd' value='8'>DEF WIFI</button></br></br>
<button type="submit" class ='btn' name='cmd' value='9'>DEF PPP</button>
<button type="submit" class ='btn' name='cmd' value='10'>IF NEXT</button></br></br>
<button type="submit" class ='btn' name='cmd' value='11'>IF PRINT</button>
<button type="submit" class ='btn' name='cmd' value='12'>TEST</button></br></br>
</div>
</form>
</div>
</div>
</body>
</html>

28
HTML/sys/set_eth.html
View File

@ -1,28 +0,0 @@
~inc:head.inc~</head>
<body>
<div class = 'frm'>
<script>PrintMenu();</script>
<div class = "mform">
<div class='stg'>
<div id = 'name'>
Сеть|Ethernet[~dname~]
</div>
<form name="conf" method="post">
<table><tr>
<script>PrintCheckBox('Включить ETHERNET','ethen','~ethen~','configIPBoxes()');
PrintCheckBox('Включить DHCP','dhcp','~ecbdh~','configIPBoxes()');
PrintIPInput('IP Станции:','ipa','~eip~');
PrintIPInput('Маска подсети:','mas','~emsk~');
PrintIPInput(' Адрес шлюза:','gte','~egate~');
PrintIPInput('DNS1:','dns1','~edns~');
PrintIPInput('DNS2:','dns2','~bkedns~');
PrintIPInput('DNS3:','dns3','~fledns~');
PrintMACInput('MAC:','mac','~emacadr~');</script>
<tr><td></td></tr></table><br/>
</div>
<script>PrintSaveFail('~status_fail~');
PrintSaveBtn();</script>
</form>
</div>
</body>
</html>

30
HTML/sys/set_gprs.html
View File

@ -1,30 +0,0 @@
~inc:head.inc~</head>
<body>
<div class = 'frm'>
<script>PrintMenu();</script>
<div class = "mform">
<div class='stg'>
<div id = 'name'>
Сеть|GPRS[~dname~]
</div>
<form name="conf" method="post">
<table>
<script>PrintCheckBox('Включить GSM','gsmen','~gsmen~',null);
PrintLabel('Модуль:','~gsmmod~');
PrintLabel('Оператор:','~gsmopr~');
PrintLabel('IMEI:','~gimei~');
PrintLabel('IMSI:','~gimsi~');
PrintLabel('IP адрес:','~gsmip~');
PrintLabel('Маска подсети:','~gsmmsk~');
PrintLabel('Адрес шлюза:','~gsmgate~');
PrintLabel('DNS1:','~gsmdns~');
PrintLabel('DNS2:','~bkgsmdns~');
PrintLabel('DNS3:','~flgsmdns~');</script>
<tr><td></td></tr></table><br/>
</div>
<script>PrintSaveFail('~status_fail~');
PrintSaveBtn();</script>
</form>
</div>
</body>
</html>

27
HTML/sys/set_lora.html
View File

@ -1,27 +0,0 @@
~inc:head.inc~</head>
<body>
<div class = 'frm'>
<script>PrintMenu();</script>
<div class = "mform">
<div class='stg'>
<div id = 'name'>
Сеть|LoRaWAN[~dname~]
</div>
<form name="conf" method="post">
<table>
<script>
PrintCheckBox('Включить LoRaWAN','lren','~lren~',null);
PrintHexInput('ID устройства:','lrdvid','~lrdvid~',16,16);
PrintHexInput('ID приложения:','lrapid','~lrapid~',16,16);</script>
</table>
<table><tr><td align="center">Ключ приложения:</td></tr>
<tr><td align="center"><input type="text" size="40" name='lrapkey' value="~lrapkey~" title="64 символа A-H,a-h,0-9" pattern="^[0-9a-hA-H]{32}$"/></td></tr>
</table>
<br/>
</div>
<script>PrintSaveFail('~status_fail~');
PrintSaveBtn();</script>
</form>
</div>
</body>
</html>

35
HTML/sys/set_mqtt.html
View File

@ -1,35 +0,0 @@
~inc:head.inc~</head>
<body>
<div class = 'frm'>
<script>PrintMenu();</script>
<div class = "mform">
<div class='stg'>
<div id = 'name'>
Настройки|Станция[~dname~]
</div>
<form name="conf" method="post">
<table>
<script>PrintCheckBox('Включить MQTT 1','mqttenb1','~mqtten1~',null);
PrintTextInput('URL шлюза сообщений','cld1','~ipcld1~',3,31);
PrintInt('Порт шлюза сообщений','mprt1','~mport1~',1000,65534);
PrintTextInput('ID станции','idd1','~idcld1~',3,31);
PrintTextInput('Корневая тема','top1','~topic1~',3,31);
PrintTextInput('Логин','clnm1','~clname1~',3,31);
PrintTextInput('Пароль','clps1','~clpass1~',3,31);
PrintSep();
PrintCheckBox('Включить MQTT 2','mqttenb2','~mqtten2~',null);
PrintTextInput('URL шлюза сообщений','cld2','~ipcld2~',3,31);
PrintInt('Порт шлюза сообщений','mprt2','~mport2~',1000,65534);
PrintTextInput('ID станции','idd2','~idcld2~',3,31);
PrintTextInput('Корневая тема','top2','~topic2~',3,31);
PrintTextInput('Логин','clnm2','~clname2~',3,31);
PrintTextInput('Пароль','clps2','~clpass2~',3,31);</script>
</table>
</div>
<script>PrintSaveFail('~status_fail~');
PrintSaveBtn();</script>
</form>
</div>
</div>
</body>
</html>

40
HTML/sys/set_sys.html
View File

@ -1,40 +0,0 @@
~inc:head.inc~</head>
<body>
<div class = 'frm'>
<script>PrintMenu();</script>
<div class = "mform">
<div class='stg'>
<div id = 'name'>
Настройки|Система[~dname~]
</div>
</br></br>
<form name="conf" method="post" accept-charset='UTF-8'>
<table><script>PrintTextInputNoReg('Имя устройства:','nam','~dname~', 3, 31 );
PrintTextInput('Имя пользователя:','lgn','~login~', 3, 31 );
PrintTextInput('Пароль пользователя','psn','~pass~', 5, 31 );
PrintCheckBox('Подтверждать TCP','tcpdel','~tcpdel~',null);
PrintCheckBox('Подтверждать LoRaWAN','lrdel','~lrdel~',null);
PrintCheckBox('Включить OTA обновление','ota','~ota~',null);</script></table>
<table><tr><td align="center">URL файла обновления:</td></tr>
<tr><td align="center"><textarea type="text" cols="40" raws="5" name='otaurl' title="64 символа" ">~otaurl~</textarea></td></tr>
</table>
<table><script>
PrintSep();
PrintLabel('Версия ПО:','~fver~');
PrintLabel('Версия IDF:','~idfver~');
PrintLabel('Дата сборки:','~builddate~');
PrintLabel('Серийный номер:','~serial10~');</script></table>
</div>
<div class="resfail" style="text-align:center;display:~status_fail~" color="#F00" >
<font color="red">
Data format error!</font><br /> </div>
<div style='margin:auto;text-align:center'>
<button type="submit" class ='btn' name='upd' value='prs'>Обновить ПО</button>
<button type="submit" class ='btn' name='rst' value='prs'>Перезагрузить</button><br /><br />
<button type="submit" class ='btn' name='sav' value='prs'>Сохранить</button>
</div>
</form>
</div>
</div>
</body>
</html>

41
HTML/sys/set_time.html
View File

@ -1,41 +0,0 @@
~inc:head.inc~</head>
<body>
<div class = 'frm'>
<script>PrintMenu();</script>
<div class = "mform">
<div id = 'name'>
Настройки|Время[~dname~]
</div>
<form name="conf" method="post" accept-charset='UTF-8'>
<div class='stg'>
<table>
<tr><td class='rl'>Включить SNTP клиент</td><td><input type="checkbox" name="sntpen" value="1" ~sntpen~></td></tr>
<tr><td class='rl'>Адрес SNTP сервера:</td><td><input type="text" required size="20" name='tsr' value="~tmsrv~" title="3-32 символов A-Z,a-z,0-9,." pattern="^[0-9a-zA-Z\.]{3,32}$"/></td></tr><tr><td></td></tr><tr><td></td></tr>
</table>
</div>
<div class='stg'>
<table>
<tr><td width=90% align='center'>
Установить текущее время вручную:<br/>
<input type='datetime-local' id="curdt">
<button id='sendt' type='button' class ='btn sbtn'>Передать</button><br/><br/><br/>
</td></tr>
</table>
</div>
<div class="resfail" style="text-align:center;display:~status_fail~" color="#F00" >
<font color="red">
<h2>Ошибка формата данных!</h2></font><br /> </div>
<div style='margin:auto;text-align:center'>
<button type="submit" class ='btn' name='sav' value='prs'>Сохранить</button>
</div>
</form>
</div>
</div>
<script>
document.getElementById('sendt').addEventListener('click', sendtime);
var d1 = new Date(new Date() - (new Date()).getTimezoneOffset()*60*1000);
var str = d1.toISOString();
document.getElementById('curdt').value = str.substring(0,16);
</script>
</body>
</html>

39
HTML/sys/set_wifi.html
View File

@ -1,39 +0,0 @@
~inc:head.inc~</head>
<body>
<div class = 'frm'>
<script>PrintMenu();</script>
<div class = "mform">
<div class='stg'>
<div id = 'name'>
Сеть|WiFi[~dname~]
</div>
<form name="conf" method="post">
<table>
<tr><td class='rl'>Включить WiFi</td><td><input type="checkbox" name="wifien" value="1" ~wfen~/></td></tr>
<td class='rl'>Режим WiFi</td></td><td><input name="netm" type="radio" value="2" onclick="configIPBoxes()" ~cln~>Клиент(CLN)</input></td></tr>
<tr><td></td><td><input name="netm" type="radio" value="1" onclick="configIPBoxes()" ~apn~>Точка доступа(AP)</input></td></tr>
<script>PrintTextInput('Имя WiFi сети(AP):','wfiap','~ssidap~',3,31);
PrintTextInput('Ключ WiFi сети(AP):','wfpap','~wkeyap~',8,31);
PrintIPInput('IP адрес(AP):','ipaap','~ipap~');
PrintTextInput('Имя WiFi сети(CLN):','wfi','~ssid~',3,31);
PrintTextInput('Ключ WiFi сети(CLN):','wfp','~wkey~',8,31);
PrintCheckBox('Включить DHCP','dhcp','~cbdh~','configIPBoxes()');
PrintIPInput('IP адрес(CLN):','ipa','~ip~');
PrintIPInput('Маска подсети(CLN):','mas','~msk~');
PrintIPInput('Адрес шлюза(CLN):','gte','~gate~');
PrintIPInput('DNS1:','dns','~dns~');
PrintIPInput('DNS2:','dns2','~dns2~');
PrintIPInput('DNS3:','dns3','~dns3~');
PrintMACInput('MAC(CLN):','mac','~macadr~');
PrintMACInput('MAC(AP):','mac2','~apmacadr~');</script>
<tr><td></td></tr></table><br/>
</div>
<script>PrintSaveFail('~status_fail~');
PrintSaveBtn();</script>
</form>
</div>
<script language="javascript">
configIPBoxes();
</script>
</body>
</html>

51
HTML/sys/stats.html
View File

@ -1,51 +0,0 @@
~inc:head.inc~</head>
<body>
<div class = 'frm'>
<script>PrintMenu();</script>
<div class = "mform">
<div class='stg'>
<div id = 'name'>
Статистика[~dname~]
</div>
<table>
<tr><td class='rl'>Ethernet:</td><td><span id='eth'>?</span></td></tr>
<tr><td class='rl'>WiFi:</td><td><span id='wfi'>?</span></td></tr>
<tr><td class='rl'>GPRS:</td><td><span id='gpr'>?</span></td></tr>
<tr><td class='rl'>LoRaWAN:</td><td><span id='lrw'>?</span></td></tr>
<tr><td height='20px'></td></tr>
<tr><td class='rl'>Основной адаптер:</td><td><span id='adp'>?</span></td></tr>
<tr><td height='20px'></td></tr>
<tr><td class='rl'>MQTT соединение 1:</td><td><span id='mq1'>?</span></td></tr>
<tr><td class='rl'>MQTT соединение 2:</td><td><span id='mq2'>?</span></td></tr>
<tr><td height='20px'></td></tr>
<tr><td class='rl'>Свободной памяти:</td><td><span id='mem'>?</span></td></tr>
<tr><td class='rl'>Минимум памяти:</td><td><span id='mmem'>?</span></td></tr>
</table>
</div>
</div>
</div>
</body>
<script>
function updateStatus(data) {
var dat = JSON.parse(data);
try
{
document.getElementById('eth').innerHTML= dat.ethstat;
document.getElementById('wfi').innerHTML= dat.wfstat;
document.getElementById('gpr').innerHTML= dat.gsmstat;
document.getElementById('lrw').innerHTML= dat.lrstat;
document.getElementById('adp').innerHTML= dat.defadp;
document.getElementById('mq1').innerHTML= dat.mqtt1st;
document.getElementById('mq2').innerHTML= dat.mqtt2st;
document.getElementById('mem').innerHTML= dat.freeram;
document.getElementById('mmem').innerHTML= dat.minram;
}
catch(e){return;}
}
function ReadAndUpdate() {
GetDataFile("/stat.json", function(data){updateStatus(data);});
}
ReadAndUpdate();
setInterval("ReadAndUpdate()",1000);
</script>
</html>