Перед тем как сделать сохранения текущих показаний на STM8L
This commit is contained in:
126
data/index.html
126
data/index.html
@ -35,7 +35,11 @@
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
input[type="text"],input[type="number"]
|
||||
select{
|
||||
font-size:24px;
|
||||
width: 100%;
|
||||
}
|
||||
input[type="text"],input[type="number"],input[type="password"]
|
||||
{
|
||||
font-size:24px;
|
||||
width: 100%;
|
||||
@ -111,6 +115,15 @@ function delChild(obj)
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function updateFields(){
|
||||
if(document.getElementById("mqtt_protocol").value=="tls") {
|
||||
document.getElementById("fingerprint").style.display = "block";
|
||||
}else{ //tcp
|
||||
document.getElementById("fingerprint").style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
function loadData(){
|
||||
let req = new XMLHttpRequest();
|
||||
req.onreadystatechange = function(req)
|
||||
@ -123,12 +136,17 @@ function loadData(){
|
||||
document.getElementById("ssid").value=obj.ssid;
|
||||
document.getElementById("pass").value=obj.pass;
|
||||
|
||||
document.getElementById("mqtt").value=obj.mqtt;
|
||||
document.getElementById("uuid").value=obj.uuid;
|
||||
document.getElementById("topic").value=obj.topic;
|
||||
document.getElementById("login").value=obj.login;
|
||||
document.getElementById("password").value=obj.password;
|
||||
|
||||
document.getElementById("mqtt_protocol").value=obj.mqtt_protocol;
|
||||
document.getElementById("mqtt_host").value=obj.mqtt_host;
|
||||
document.getElementById("mqtt_port").value=obj.mqtt_port;
|
||||
document.getElementById("mqtt_fingerprint").value=obj.mqtt_fingerprint;
|
||||
document.getElementById("mqtt_topic").value=obj.mqtt_topic;
|
||||
document.getElementById("mqtt_user").value=obj.mqtt_user;
|
||||
document.getElementById("mqtt_pass").value=obj.mqtt_pass;
|
||||
|
||||
updateFields();
|
||||
updateSensors();
|
||||
}
|
||||
}
|
||||
@ -147,15 +165,37 @@ function updateSensors(){
|
||||
{
|
||||
let obj=JSON.parse(req.responseText);
|
||||
g_ticks = obj.ticks;
|
||||
document.getElementById("cold").innerHTML=obj.cold;
|
||||
document.getElementById("hot").innerHTML=obj.hot;
|
||||
if(obj.cold!=null){ document.getElementById("cold").innerHTML=obj.cold; }else{
|
||||
document.getElementById("cold").innerHTML="___";
|
||||
}
|
||||
if(obj.hot!=null){ document.getElementById("hot").innerHTML=obj.hot; }else{
|
||||
document.getElementById("hot").innerHTML="___";
|
||||
}
|
||||
|
||||
if(obj.leak) {
|
||||
document.getElementById("leak").innerHTML = "Протечка обнаружена";
|
||||
document.getElementById("leak").style.color='red';
|
||||
document.getElementById("leak").innerHTML = "обнаружена";
|
||||
document.getElementById("leak").style.color='darkred';
|
||||
}else {
|
||||
document.getElementById("leak").innerHTML = "Протечка не обнаружена";
|
||||
document.getElementById("leak").innerHTML = "не обнаружена";
|
||||
document.getElementById("leak").style.color='black';
|
||||
}
|
||||
if(obj.volt!=null){
|
||||
document.getElementById("volt_cnt").style.display='table-row';
|
||||
let p;
|
||||
if(obj.volt==300) p=0;
|
||||
else p=Math.round(((obj.volt-300)/(420-300))*100);
|
||||
if(p<0) p=0;
|
||||
if(p>100) p=100;
|
||||
document.getElementById("volt").innerHTML=p+"%";
|
||||
}else{
|
||||
document.getElementById("volt_cnt").style.display='none';
|
||||
}
|
||||
if(obj.tmpr!=null){
|
||||
document.getElementById("tmpr_cnt").style.display='table-row';
|
||||
document.getElementById("tmpr").innerHTML=obj.tmpr+"°C";
|
||||
}else{
|
||||
document.getElementById("tmpr_cnt").style.display='none';
|
||||
}
|
||||
|
||||
let networks = document.getElementById("networks");
|
||||
delChild(networks);
|
||||
@ -199,12 +239,14 @@ function sendData() {
|
||||
formData.append("pass", document.getElementById("pass").value);
|
||||
formData.append("hot", document.getElementById("newhot").value);
|
||||
formData.append("cold", document.getElementById("newcold").value);
|
||||
|
||||
formData.append("mqtt", document.getElementById("mqtt").value);
|
||||
formData.append("uuid", document.getElementById("uuid").value);
|
||||
formData.append("topic", document.getElementById("topic").value);
|
||||
formData.append("login", document.getElementById("login").value);
|
||||
formData.append("password", document.getElementById("password").value);
|
||||
//formData.append("uuid", document.getElementById("uuid").value);
|
||||
formData.append("mqtt_protocol", document.getElementById("mqtt_protocol").value);
|
||||
formData.append("mqtt_host", document.getElementById("mqtt_host").value);
|
||||
formData.append("mqtt_port", document.getElementById("mqtt_port").value);
|
||||
formData.append("mqtt_fingerprint", document.getElementById("mqtt_fingerprint").value);
|
||||
formData.append("mqtt_topic", document.getElementById("mqtt_topic").value);
|
||||
formData.append("mqtt_user", document.getElementById("mqtt_user").value);
|
||||
formData.append("mqtt_pass", document.getElementById("mqtt_pass").value);
|
||||
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open("POST","/save/");
|
||||
@ -231,6 +273,9 @@ function sendData() {
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
|
||||
document.getElementById("mqtt_protocol").onchange=updateFields;
|
||||
|
||||
loadData();
|
||||
setInterval(function () {
|
||||
if(g_ticks>0) {
|
||||
@ -267,14 +312,14 @@ window.onload = function () {
|
||||
<h3>Точка доступа</h3>
|
||||
<input id="ssid" name="ssid" type="text" size="40">
|
||||
<h3>Пароль</h3>
|
||||
<input id="pass" name="pass" type="text" size="40">
|
||||
<input id="pass" name="pass" type="password" size="40">
|
||||
|
||||
<p>
|
||||
Для проверки работоспособности спустите не меньше 4х литров воды
|
||||
</p>
|
||||
|
||||
<h4>Текущее показание холодной воды</h4>
|
||||
<h4 id="cold" style="color: #1655f5">___</h4>
|
||||
<h4 id="cold" style="color: darkblue;">___</h4>
|
||||
<h3>Новое показание холодной воды</h3>
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
@ -289,7 +334,7 @@ window.onload = function () {
|
||||
|
||||
|
||||
<h4>Текущее показание горячей воды</h4>
|
||||
<h4 id="hot" style="color: #f53410">___</h4>
|
||||
<h4 id="hot" style="color: darkred;">___</h4>
|
||||
|
||||
<h3>Новое показание горячей воды</h3>
|
||||
<table style="width: 100%;">
|
||||
@ -303,9 +348,11 @@ window.onload = function () {
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
<h3 id="leak">Протечка не обнаружена</h3>
|
||||
<table style="width: 100%;">
|
||||
<tr style="width: 100%;"><td style="text-align:left;">Протечка:</td><td id="leak" style="width: 50px;text-align:right;white-space: nowrap;">___</td></tr>
|
||||
<tr id="volt_cnt" style="display: none;"><td style="text-align:left; width: 90%;">Заряд аккумулятора:</td><td id="volt" style="width: 50px;text-align:right;">___</td></tr>
|
||||
<tr id="tmpr_cnt" style="display: none;"><td style="text-align:left; width: 90%;">Температура:</td><td id="tmpr" style="width: 50px;text-align:right;">___</td></tr>
|
||||
</table>
|
||||
|
||||
<p>
|
||||
<input id="chbox" name="chbox" style="width:20px;height:20px;" onclick="if(this.checked) document.getElementById('settings').style.display='block'; else document.getElementById('settings').style.display='none';" type="checkbox">
|
||||
@ -313,34 +360,43 @@ window.onload = function () {
|
||||
</p>
|
||||
|
||||
<div id="settings" style="display: none;">
|
||||
|
||||
<p>Адрес MQTT сервера(брокера)</p>
|
||||
<table style="width: 100%;">
|
||||
<table>
|
||||
<tr><td>соед.</td><td>хост</td><td>порт</td><td></td></tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input id="mqtt" name="mqtt" type="text" size="40" style="width: 100%;">
|
||||
</td>
|
||||
<td>
|
||||
<div class="restore_box" onclick="document.getElementById('mqtt').value='ssl://observer.kz:8883';"></div>
|
||||
</td>
|
||||
<td><select name="mqtt_protocol" id="mqtt_protocol" style="width:80px;"><option value="tcp">TCP</option><option value="tls">TCP(TLS)</option></select></td>
|
||||
<td><input id="mqtt_host" name="mqtt_host" type="text" size="40"></td>
|
||||
<td><input id="mqtt_port" name="mqtt_port" type="text" size="40" style="width:60px;"></td>
|
||||
<td><div class="restore_box" onclick="document.getElementById('mqtt_protocol').value='tcp'; document.getElementById('mqtt_host').value='observer.kz'; document.getElementById('mqtt_port').value='1883'; updateFields(); "></div></td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>Уникальный ID клиента</p>
|
||||
<input id="uuid" name="uuid" type="text" size="40" disabled="disabled">
|
||||
|
||||
<div id="fingerprint" style="display: none;">
|
||||
<p>Отпечаток сертификата</p>
|
||||
<input id="mqtt_fingerprint" name="mqtt_fingerprint" type="text" size="61" value="">
|
||||
</div>
|
||||
|
||||
<p>Топик</p>
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td>
|
||||
<input id="topic" name="topic" type="text" size="40" value="neptune">
|
||||
<input id="mqtt_topic" name="mqtt_topic" type="text" size="40" value="home/water/main">
|
||||
</td>
|
||||
<td>
|
||||
<div class="restore_box" onclick="document.getElementById('topic').value='neptune';"></div>
|
||||
<div class="restore_box" onclick="document.getElementById('mqtt_topic').value='home/water/main';"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p>Логин</p>
|
||||
<input id="login" name="login" type="text" size="40" value="">
|
||||
<input id="mqtt_user" name="mqtt_user" type="text" size="40" value="">
|
||||
<p>Пароль</p>
|
||||
<input id="password" name="password" type="text" size="40" value="">
|
||||
<input id="mqtt_pass" name="mqtt_pass" type="password" size="40" value="">
|
||||
|
||||
<p>Уникальный ID клиента</p>
|
||||
<input id="uuid" name="uuid" type="text" size="40" disabled="disabled">
|
||||
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
Reference in New Issue
Block a user