working on web interface, pages grouped, design changed

This commit is contained in:
Bogdan Pilyugin 2022-08-26 10:10:46 +02:00
parent 5fdc39f695
commit 93288cff63
13 changed files with 153 additions and 351 deletions

View File

@ -1,76 +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="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>

View File

@ -9,7 +9,6 @@ api/set3.json
api/stat.json
api/status.json
api/tmr.json
control.html
favicon.ico
iconsfont.css
iconsfont.woff2
@ -19,11 +18,7 @@ reboot.html
res
res.js
res/ca_cert.pem
set_eth.html
set_gprs.html
set_mqtt.html
set_network.html
set_sys.html
set_time.html
set_wifi.html
set_adapters.html
set_services.html
set_system.html
styles.css

View File

@ -21,34 +21,17 @@ var hedmen = `
<div class="nav__dropdown">
<a href="#" class="nav__link">
<i class='icon-chart-bar nav__icon'></i>
<span class="nav__name">APPLICATION1</span>
<span class="nav__name">APPLICATION</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>
<a href="#" class="nav__dropdown-item">Menu1</a>
<a href="#" class="nav__dropdown-item">Menu2</a>
<a href="#" class="nav__dropdown-item">Menu3</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>
@ -58,17 +41,14 @@ var hedmen = `
<div class="nav__dropdown">
<a href="#" class="nav__link">
<i class='icon-wifi nav__icon' ></i>
<span class="nav__name">NETWORK</span>
<span class="nav__name">CONNECTION</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_network.html" class="nav__dropdown-item">Network</a>
<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>
<a href="set_network.html" class="nav__dropdown-item">Adapters</a>
<a href="set_services.html" class="nav__dropdown-item">Services</a>
</div>
</div>
@ -82,9 +62,7 @@ var hedmen = `
<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>
<a href="set_system.html" class="nav__dropdown-item">System</a>
</div>
</div>
</div>

View File

@ -1,40 +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="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>

View File

@ -1,42 +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="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>

View File

@ -14,7 +14,38 @@
<!--========== CONTENTS ==========-->
<main>
<section>
<form name="conf" method="post">
<div class="masonry-layout">
<div class="masonry-layout__panel">
<div class="masonry-layout__panel-content">
<form name="conf1" method="post">
<h3>SNTP</h3>
<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>
</div>
<div class="masonry-layout__panel">
<div class="masonry-layout__panel-content">
<form name="conf2" method="post">
<h3>MQTT</h3>
<table class='cntr'>
<script>PrintCheckBox('Включить MQTT 1','mqttenb1','~mqtten1~',null);
PrintTextInput('URL шлюза сообщений','cld1','~ipcld1~',3,31);
@ -32,10 +63,13 @@
PrintTextInput('Логин','clnm2','~clname2~',3,31);
PrintTextInput('Пароль','clps2','~clpass2~',3,31);</script>
</table>
</div>
<script>PrintSaveFail('~status_fail~');
PrintSaveBtn();</script>
PrintSaveBtn();</script>
</form>
</div>
</div>
</div>
</section>
</main>
<script>

View File

@ -1,50 +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="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>

99
HTML/set_system.html Normal file
View File

@ -0,0 +1,99 @@
<!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="masonry-layout">
<div class="masonry-layout__panel">
<div class="masonry-layout__panel-content">
<form name="conf1" method="post">
<h3>SYSTEM</h3>
<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>
<script>PrintSaveFail('~status_fail~');</script>
<button type="submit" class ='btn' name='upd' value='prs'>Обновить ПО</button>
<button type="submit" class ='btn' name='rst' value='prs'>Перезагрузить</button>
<button type="submit" class ='btn' name='sav' value='prs'>Сохранить</button>
</form>
</div>
</div>
<div class="masonry-layout__panel">
<div class="masonry-layout__panel-content">
<form name="conf2" method="post">
<h3>STAT</h3>
<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>
</div>
</div>
<div class="masonry-layout__panel">
<div class="masonry-layout__panel-content">
<form name="conf2" method="post">
<h3>CONTROL</h3>
<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>
</div>
</section>
</main>
<script>
showMenu('header-toggle','navbar');
linkColor.forEach(l => l.addEventListener('click', colorLink))
</script>
</body>
</html>

View File

@ -1,49 +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="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>

View File

@ -1,48 +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="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>

View File

@ -8,12 +8,12 @@
/*========== Colors ==========*/
--first-color: #FFFFFF;
--first-color-light: #D6DBDF ;
--title-color: #85929E;
--first-color-light: #90C0E0;
--title-color: #336699;
--text-color: #444444;
--text-color-light: #85929E;
--text-color-light: #336699;
--body-color: #FFFFFF;
--container-color: #AEB6BF;
--container-color: #3399CC;
/*========== Font and typography ==========*/
--body-font: 'Arial', sanf-serif;
@ -327,6 +327,7 @@ input {
font:14px consolas,monospace;
padding-left:3px;
border:solid 1px #CCCCCC;
height:2.0rem;
}
.cntr {

@ -1 +1 @@
Subproject commit ccf93b696a1d7144ae62b87363751b7d2a8924ec
Subproject commit 936d2db0807024fc99c6fe92c1ca46ac315072e7