Первый комит в котором пока почти ничего не работает
This commit is contained in:
353
data/index.html
Normal file
353
data/index.html
Normal file
@ -0,0 +1,353 @@
|
||||
<!DOCTYPE html><html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" href="data:image/gif;base64,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">
|
||||
<title>Конфигурация</title>
|
||||
<style>
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}
|
||||
body{
|
||||
background-color: #4f4f4f;
|
||||
}
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
line-height: 50px;
|
||||
color: #1655f5
|
||||
}
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
h4 {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
p{
|
||||
font-size: 20px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
input[type="text"],input[type="number"]
|
||||
{
|
||||
font-size:24px;
|
||||
width: 100%;
|
||||
}
|
||||
.wifi_list{
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid #000000;
|
||||
}
|
||||
.content1 {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-color: lightblue;
|
||||
}
|
||||
.content2 {
|
||||
width: 95%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.counter {
|
||||
position: sticky;
|
||||
top: 8px;
|
||||
font-weight: bold;
|
||||
color: #f53410;
|
||||
}
|
||||
.button{
|
||||
background-color: #4CAF50;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 16px 40px;
|
||||
text-decoration: none;
|
||||
font-size: 30px;
|
||||
margin: 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.lock {
|
||||
width:16px;
|
||||
height:24px;
|
||||
background: url('data:image/gif;base64,R0lGODlhEAAYAIQWADVMdVlhbIF5YGqDuo6AXWuDummEumqEumuEu6WOVrmjc7qkcrukccKna9erSdesSey3Q/K6QfK7QPK7QfO7QfK8QgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAB8ALAAAAAAQABgAAAVf4CeOQzmM6FiY5pGKbHyiLCIaZkGXr7nPv2DKR+INjTBkEfghCj8LBaMxqVobDMXiY+16rZHKdzwRk89dSCIBQVcTAEDCPRHEBXQ7AO8mxAl0DgEBD3SGhxSGElx0iyEAOw==') no-repeat;
|
||||
}
|
||||
.field{
|
||||
font-size:24px;
|
||||
}
|
||||
.restore_box
|
||||
{
|
||||
width: 24px;
|
||||
height: 23px;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAXCAYAAAARIY8tAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAMzQAADM0B9/0h3QAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAGkSURBVEiJtdUxSFVRGAfwn+WgQaJN4dRUBPnGl5BDNQQNYQjR0tIS4RLtEVlIjQYFtWRTDW01RQSiEUhtBW3hIAkaFBSk2fM5XKXzzjvvvXPD/vDBOff+z/87/+/e850u1DXiIS4H80GM4iQOYB9+YBFv8QIftEE9igeB8GOsJThxzKBaJsE5fMsQDqOGO9gVindpLtEcjsVEfME8VtCHCg5vaYR4igvYaOVgI5q/wYkW7g9iOrHmdkhqZ/tmwkkKZ/Az2uRIpwR3MRBFT5skp/EnWP8+x0Ec1zo4uRfxh3Psl8GkwsU2zu90giXMBvPqTicgqD0OdWOqxOL5DM73YNzTjaslEuSgLxiv/Y8SVYLx51ak+PjnYgC//P1N78eE3biBJ/+Y4JbGc3AqfLkfr4OXV0qKH9XY2j+K2kxFo70aLmWKV/E12v1oinhRc3t4puiaKfQryhJfSo+2CamPOYHr0bM63m3FMvbiCI5rboAvcRarLTYFxvE74aZTTKO3nXCIIbzKFP6EsZRIzv8+pLgChxVX5B6sY0HROp4rylJLLd4ExpG2mIQ1Ut0AAAAASUVORK5CYII=");
|
||||
background-repeat: no-repeat;
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
|
||||
var g_ticks=999;
|
||||
|
||||
function delChild(obj)
|
||||
{
|
||||
if (typeof obj === 'string' || obj instanceof String)
|
||||
obj=document.getElementById(obj);
|
||||
if(obj!=null)
|
||||
{
|
||||
while(true)
|
||||
{
|
||||
let c=obj.firstChild;
|
||||
if(c!=null) obj.removeChild(c); else break;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
function loadData(){
|
||||
let req = new XMLHttpRequest();
|
||||
req.onreadystatechange = function(req)
|
||||
{
|
||||
return function()
|
||||
{
|
||||
if (req.readyState == 4)
|
||||
{
|
||||
let obj=JSON.parse(req.responseText);
|
||||
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;
|
||||
|
||||
updateSensors();
|
||||
}
|
||||
}
|
||||
}(req);
|
||||
req.open("GET",'/data/',true);
|
||||
req.send();
|
||||
}
|
||||
|
||||
function updateSensors(){
|
||||
let req = new XMLHttpRequest();
|
||||
req.onreadystatechange = function(req)
|
||||
{
|
||||
return function()
|
||||
{
|
||||
if (req.readyState == 4)
|
||||
{
|
||||
let obj=JSON.parse(req.responseText);
|
||||
g_ticks = obj.ticks;
|
||||
document.getElementById("cold").innerHTML=obj.cold;
|
||||
document.getElementById("hot").innerHTML=obj.hot;
|
||||
if(obj.leak) {
|
||||
document.getElementById("leak").innerHTML = "Протечка обнаружена";
|
||||
document.getElementById("leak").style.color='red';
|
||||
}else {
|
||||
document.getElementById("leak").innerHTML = "Протечка не обнаружена";
|
||||
document.getElementById("leak").style.color='black';
|
||||
}
|
||||
|
||||
let networks = document.getElementById("networks");
|
||||
delChild(networks);
|
||||
obj.networks.sort((a, b) => a.strength < b.strength ? 1 : -1);
|
||||
for(let i=0;i<obj.networks.length;i++)
|
||||
{
|
||||
let quality;
|
||||
if(obj.networks[i].strength <= -100)
|
||||
quality = 0;
|
||||
else if(obj.networks[i].strength >= -50)
|
||||
quality = 100;
|
||||
else
|
||||
quality = 2 * (obj.networks[i].strength + 100);
|
||||
|
||||
let radio=`<table class="wifi_list" style="width: 100%;" onclick="document.getElementById('ssid').value='{name}'; document.getElementById('ch{id}').checked=true;"><tr><td style="width: 20px;"><input id="ch{id}" type="radio" name="radio" {checked}></td><td style="font-family:Verdana,sans-serif;">{name}</td><td class="divTableCell" style="width: 18px;"><div {lock}></div></td><td style="width: 45px;">{quality}%</td></tr></table>`;
|
||||
radio = radio.replaceAll('{id}',i);
|
||||
radio = radio.replaceAll('{name}',obj.networks[i].name.substring(0,22));
|
||||
if(obj.networks[i].name==document.getElementById("ssid").value)
|
||||
radio = radio.replace('{checked}','checked="checked"');
|
||||
else
|
||||
radio = radio.replace('{checked}','');
|
||||
if(obj.networks[i].lock!=7)
|
||||
radio = radio.replace('{lock}','class="lock"');
|
||||
radio = radio.replaceAll('{quality}',quality);
|
||||
|
||||
let div = document.createElement('div');
|
||||
div.innerHTML=radio;
|
||||
networks.appendChild(div);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}(req);
|
||||
req.open("GET",'/sensors/',true);
|
||||
req.send();
|
||||
}
|
||||
|
||||
function sendData() {
|
||||
let formData = new FormData();
|
||||
formData.append("ssid", document.getElementById("ssid").value);
|
||||
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);
|
||||
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open("POST","/save/");
|
||||
xhr.send(formData);
|
||||
xhr.onload = function() {
|
||||
if (xhr.status != 200) {
|
||||
alert(`Ошибка ${xhr.status}: ${xhr.statusText}`);
|
||||
} else {
|
||||
//alert(`Готово, получили ${xhr.response.length} байт = `+xhr.response);
|
||||
if(xhr.response!='ok') {
|
||||
alert("Ошибка при записи, обновите страницу и попробуйте ещё раз.");
|
||||
location.reload();
|
||||
}else {
|
||||
alert("Данные записаны.");
|
||||
location.reload();
|
||||
}
|
||||
document.getElementById("newhot").value="";
|
||||
document.getElementById("newcold").value="";
|
||||
}
|
||||
};
|
||||
xhr.onerror = function() {
|
||||
alert("Запрос не удался");
|
||||
};
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
loadData();
|
||||
setInterval(function () {
|
||||
if(g_ticks>0) {
|
||||
updateSensors();
|
||||
}
|
||||
}, 5000);
|
||||
setInterval(function () {
|
||||
if(g_ticks>0) {
|
||||
if(g_ticks!=999) {
|
||||
document.getElementById("timerId").innerText = g_ticks;
|
||||
g_ticks--;
|
||||
}
|
||||
if (g_ticks==0) {
|
||||
alert('Нептун заснул.');
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
}, 1000);
|
||||
document.getElementById("chbox").checked=false;
|
||||
};
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content1"><div class="content2">
|
||||
|
||||
<h1>Настройка</h1>
|
||||
<p class="counter">Устройство заснёт через: <a id="timerId">___</a> секунд</p>
|
||||
<h3>Выберите свою Wi-Fi сеть</h3>
|
||||
|
||||
<div id="networks" style="width: 100%; height: 150px; overflow-y: scroll; background-color: #e9e9e9; border-width: 1px;border-color: #4f4f4f; border-style: solid;">
|
||||
</div>
|
||||
|
||||
<h3>Точка доступа</h3>
|
||||
<input id="ssid" name="ssid" type="text" size="40">
|
||||
<h3>Пароль</h3>
|
||||
<input id="pass" name="pass" type="text" size="40">
|
||||
|
||||
<p>
|
||||
Для проверки работоспособности спустите не меньше 4х литров воды
|
||||
</p>
|
||||
|
||||
<h4>Текущее показание холодной воды</h4>
|
||||
<h4 id="cold" style="color: #1655f5">___</h4>
|
||||
<h3>Новое показание холодной воды</h3>
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td>
|
||||
<input class="it" id="newcold" min="0" max="99999999" step="1" type="number" autocomplete="off">
|
||||
</td>
|
||||
<td>
|
||||
Литры
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<h4>Текущее показание горячей воды</h4>
|
||||
<h4 id="hot" style="color: #f53410">___</h4>
|
||||
|
||||
<h3>Новое показание горячей воды</h3>
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td>
|
||||
<input class="it" id="newhot" min="0" max="99999999" step="1" type="number" autocomplete="off">
|
||||
</td>
|
||||
<td>
|
||||
Литры
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
<h3 id="leak">Протечка не обнаружена</h3>
|
||||
|
||||
<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">
|
||||
<label for="chbox" style="font-size:20px;">Дополнительные настройки</label>
|
||||
</p>
|
||||
|
||||
<div id="settings" style="display: none;">
|
||||
<p>Адрес MQTT сервера(брокера)</p>
|
||||
<table style="width: 100%;">
|
||||
<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>
|
||||
</tr>
|
||||
</table>
|
||||
<p>Уникальный ID клиента</p>
|
||||
<input id="uuid" name="uuid" type="text" size="40" disabled="disabled">
|
||||
<p>Топик</p>
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td>
|
||||
<input id="topic" name="topic" type="text" size="40" value="neptune">
|
||||
</td>
|
||||
<td>
|
||||
<div class="restore_box" onclick="document.getElementById('topic').value='neptune';"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>Логин</p>
|
||||
<input id="login" name="login" type="text" size="40" value="">
|
||||
<p>Пароль</p>
|
||||
<input id="password" name="password" type="text" size="40" value="">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<button class="button" onclick="sendData();">Сохранить</button>
|
||||
<br><br>
|
||||
|
||||
|
||||
</div></div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user