You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
478 lines
20 KiB
478 lines
20 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link href="style.css" rel="stylesheet" type="text/css">
|
|
<link rel="icon" href="favicon.ico">
|
|
|
|
<link rel="icon" type="png" sizes="32x32" href="favicon-32x32.png">
|
|
<link rel="icon" type="png" sizes="16x16" href="favicon-16x16.png">
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
|
|
<div class="topnav" ;id="header" >
|
|
<p><h3>ESP-Настройки таймера</h3></p>
|
|
</div>
|
|
|
|
<div id="sidebar">
|
|
|
|
<div class="manth">
|
|
<p><span id="munthserv">месяц</span></p>
|
|
</div>
|
|
<div class="data">
|
|
<p><span id="dataserv">01</span></p>
|
|
<div class="week">
|
|
<p><span id="weekserv">день</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="times">
|
|
<p><span id="timeserv1">:</span></p>
|
|
</div>
|
|
<div class="levnav">
|
|
|
|
|
|
|
|
|
|
<p> <a href="index.html" title="Главная"> Главная</a></p>
|
|
<p><a href="setting.html" title="настройки">настройки</a></p>
|
|
<p><a href="upravlenie.html" title="управление">управление</a></p>
|
|
<p><a href="inform.html" title="информация">информация</a></p>
|
|
<p><a href="timer.html" title="таймер">таймер</a></p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<font size="3" color="#1E4486">
|
|
<label for="timerSelector">Выберите таймер:</label>
|
|
<select id="timerSelector">
|
|
<font size="5" color="#1E4486">
|
|
<option value="timer1">Таймер 1</option>
|
|
<option value="timer2">Таймер 2</option>
|
|
<option value="timer3">Таймер 3</option>
|
|
</font>
|
|
</select>
|
|
<div id="content">
|
|
|
|
|
|
<div id="timers">
|
|
<!-- Таймер 1 -->
|
|
<div class="timer" id="timer1">
|
|
<h2>Таймер 1</h2>
|
|
<font size="5" color="#1E4486">
|
|
<ul>
|
|
<!-- 10 временных интервалов для Таймера 1 -->
|
|
<div class="days">
|
|
<label><input type="checkbox" name="week1"> Пн</label>
|
|
<label><input type="checkbox" name="week1"> Вт</label>
|
|
<label><input type="checkbox" name="week1"> Ср</label>
|
|
<label><input type="checkbox" name="week1"> Чт</label>
|
|
<label><input type="checkbox" name="week1"> Пт</label>
|
|
<label><input type="checkbox" name="week1"> Сб</label>
|
|
<label><input type="checkbox" name="week1"> Вс</label>
|
|
</div>
|
|
|
|
<li><small>on_1 </small><input type="time" value="00:00"></li>
|
|
<li><small>off_1 </small><input type="time" value="00:00"></li>
|
|
<li><small>on_2 </small><input type="time" value="00:00"></li>
|
|
<li><small>off_2 </small><input type="time" value="00:00"></li>
|
|
<li><small>on_3 </small><input type="time" value="00:00"></li>
|
|
<li><small>off_3 </small><input type="time" value="00:00"></li>
|
|
<li><small>on_4 </small><input type="time" value="00:00"></li>
|
|
<li><small>off_4 </small><input type="time" value="00:00"></li>
|
|
<li><small>on_5 </small><input type="time" value="00:00"></li>
|
|
<li><small>off_5 </small><input type="time" value="00:00"></li>
|
|
|
|
<div class="days">
|
|
<label><input type="checkbox" name="out1"> 1</label>
|
|
<label><input type="checkbox" name="out1"> 2</label>
|
|
<label><input type="checkbox" name="out1"> 3</label>
|
|
</div>
|
|
</ul>
|
|
</font>
|
|
</div>
|
|
|
|
<!-- Таймер 2 -->
|
|
<div class="timer" id="timer2">
|
|
<h2>Таймер 2</h2>
|
|
<font size="5" color="#1E4486">
|
|
<ul>
|
|
<!-- 10 временных интервалов для Таймера 2 -->
|
|
<div class="days">
|
|
<label><input type="checkbox" name="week2"> Пн</label>
|
|
<label><input type="checkbox" name="week2"> Вт</label>
|
|
<label><input type="checkbox" name="week2"> Ср</label>
|
|
<label><input type="checkbox" name="week2"> Чт</label>
|
|
<label><input type="checkbox" name="week2"> Пт</label>
|
|
<label><input type="checkbox" name="week2"> Сб</label>
|
|
<label><input type="checkbox" name="week2"> Вс</label>
|
|
</div>
|
|
<li><small>on_1 </small><input type="time" value="00:00"></li>
|
|
<li><small>off_1 </small><input type="time" value="00:00"></li>
|
|
<li><small>on_2 </small><input type="time" value="00:00"></li>
|
|
<li><small>off_2 </small><input type="time" value="00:00"></li>
|
|
<li><small>on_3 </small><input type="time" value="00:00"></li>
|
|
<li><small>off_3 </small><input type="time" value="00:00"></li>
|
|
<li><small>on_4 </small><input type="time" value="00:00"></li>
|
|
<li><small>off_4 </small><input type="time" value="00:00"></li>
|
|
<li><small>on_5 </small><input type="time" value="00:00"></li>
|
|
<li><small>off_5 </small><input type="time" value="00:00"></li>
|
|
<div class="days">
|
|
<label><input type="checkbox" name="out2"> 1</label>
|
|
<label><input type="checkbox" name="out2"> 2</label>
|
|
<label><input type="checkbox" name="out2"> 3</label>
|
|
</div>
|
|
</ul>
|
|
</font>
|
|
</div>
|
|
|
|
<!-- Таймер 3 -->
|
|
<div class="timer" id="timer3">
|
|
<h2>Таймер 3</h2>
|
|
<font size="5" color="#1E4486">
|
|
<ul>
|
|
<div class="days">
|
|
<label><input type="checkbox" name="week3"> Пн</label>
|
|
<label><input type="checkbox" name="week3"> Вт</label>
|
|
<label><input type="checkbox" name="week3"> Ср</label>
|
|
<label><input type="checkbox" name="week3"> Чт</label>
|
|
<label><input type="checkbox" name="week3"> Пт</label>
|
|
<label><input type="checkbox" name="week3"> Сб</label>
|
|
<label><input type="checkbox" name="week3"> Вс</label>
|
|
</div>
|
|
<!-- 10 временных интервалов для Таймера 3 -->
|
|
<li><small>on_1 </small><input type="time" value="00:00"></li>
|
|
<li><small>off_1 </small><input type="time" value="00:00"></li>
|
|
<li><small>on_2 </small><input type="time" value="00:00"></li>
|
|
<li><small>off_2 </small><input type="time" value="00:00"></li>
|
|
<li><small>on_3 </small><input type="time" value="00:00"></li>
|
|
<li><small>off_3 </small><input type="time" value="00:00"></li>
|
|
<li><small>on_4 </small><input type="time" value="00:00"></li>
|
|
<li><small>off_4 </small><input type="time" value="00:00"></li>
|
|
<li><small>on_5 </small><input type="time" value="00:00"></li>
|
|
<li><small>off_5 </small><input type="time" value="00:00"></li>
|
|
<div class="days">
|
|
<label><input type="checkbox" name="out3"> 1</label>
|
|
<label><input type="checkbox" name="out3"> 2</label>
|
|
<label><input type="checkbox" name="out3"> 3</label>
|
|
</div>
|
|
</ul>
|
|
</font>
|
|
</div>
|
|
</div>
|
|
<button id="saveButton">Сохранить</button>
|
|
<div id="clear">
|
|
<p></p>
|
|
<p></p>
|
|
<p></p>
|
|
</div>
|
|
<div class="top">
|
|
<font size="4" >Время работы сервера: </font>
|
|
<font color="#CF7071" size="5"><span id="t10">0:00</span></font>
|
|
<p>Count:<span id="countData1">0:00</span></p>
|
|
</div>
|
|
|
|
<div id="clear">
|
|
<p></p>
|
|
<p></p>
|
|
<p></p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
let defaultData = {
|
|
timer1: ["00:00", "00:00", "00:00", "00:00", "00:00", "00:00", "00:00", "00:00", "00:00", "00:00"],
|
|
timer2: ["00:00", "00:30", "00:00", "00:00", "00:00", "00:00", "00:00", "00:00", "00:00", "00:00"],
|
|
timer3: ["00:00", "00:00", "00:00", "00:00", "00:00", "00:00", "00:00", "00:00", "00:00", "00:00"]};
|
|
//****************************WebSocket***************************************************
|
|
connectWebSocket();
|
|
function connectWebSocket() {
|
|
webSocket = new WebSocket('ws://' + window.location.hostname + '/ws');
|
|
|
|
webSocket.onopen = function(event) {//реакция на подключение вебсекета
|
|
console.log('WebSocket connected');
|
|
};
|
|
|
|
|
|
webSocket.onmessage = function(event) {//реакция на данные
|
|
var dat=event.data;
|
|
if ( dat.startsWith("{\"timer1"))//если начало строки {"timer1 то парсим ее как данные таймера
|
|
{console.log("dat", dat[2]+dat[7]);//(dat[2]+dat[7]=='t1')
|
|
defaultData = JSON.parse(event.data);
|
|
//let defaultData = Object.assign({}, defaultData1);// перевод объекта в JSON
|
|
|
|
console.log("t2", defaultData);
|
|
// Заполните поля ввода (время для таймеров) данными из JSON
|
|
Object.keys(defaultData).forEach(function (timerId) {
|
|
const timer = document.getElementById(timerId);
|
|
const intervals = defaultData[timerId];
|
|
const timerItems = timer.querySelectorAll('input[type="time"]');
|
|
timerItems.forEach(function (item, index) {
|
|
item.value = intervals[index];
|
|
});
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
var data = JSON.parse(event.data);//парсим JSON
|
|
|
|
if (data.id === '0') {
|
|
// document.getElementById("tim2").innerHTML = data.tim2;
|
|
// document.getElementById("tim3").innerHTML = data.tim3;
|
|
document.getElementById("dataserv").innerHTML = data.dataserv;
|
|
document.getElementById("munthserv").innerHTML = data.munthserv;
|
|
document.getElementById("weekserv").innerHTML = data.weekserv;
|
|
}
|
|
if (data.label3 === 'count1') {//счетчик секунд
|
|
document.getElementById("countData1").innerHTML = data.value;
|
|
};
|
|
if (data.label3 === 'count') {//работа сервера время
|
|
document.getElementById("t10").innerHTML = data.value;
|
|
};
|
|
if (data.label3 === 'count2') {//NTP время
|
|
document.getElementById("timeserv1").innerHTML = data.value;
|
|
};
|
|
if (data.id === 'week') {//'{"id":"week","timer1_week":"1111100","timer2_week":"0000011","timer3_week":"0000000"}';
|
|
var DataWeek = event.data;
|
|
console.log("week", event.data);
|
|
week_json(DataWeek);
|
|
}
|
|
|
|
if (data.id === 'tout') {//{"id":"tout","t1":"011","t2":"100","t3":"010"}
|
|
var DataOut = event.data;
|
|
console.log("Out", event.data);
|
|
out_json(DataOut);
|
|
}
|
|
}
|
|
webSocket.onclose = function(event) {//реакция на отключение вебсекета
|
|
console.log('WebSocket disconnected');
|
|
var messageElement = document.getElementById('message');
|
|
messageElement.innerHTML ='WebSocket disconnected. Reconnecting...';
|
|
setTimeout(connectWebSocket, 2000);
|
|
setTimeout(function() { messageElement.innerHTML = ''; }, 5000);
|
|
}
|
|
webSocket.onerror = function(event) {
|
|
console.error('WebSocket error:', event);
|
|
}
|
|
}
|
|
|
|
//*******************************************************************************************************
|
|
|
|
|
|
function week_json(data){//парсим строку week
|
|
const weekt = JSON.parse(data);
|
|
if (weekt.id === 'week') {
|
|
//{"id":"week","timer1_week":"0111100","timer2_week":"1000011","timer3_week":"0101010"};
|
|
const weekt1 = Array.from(weekt.timer1_week).map(Number);//"1111100"=>{1,1,1,1,1,0,0} строку в массив чисел
|
|
// console.log(weekt1);
|
|
// Заполните поля чекбоксов данными из JSON
|
|
var checkboxes1 = document.getElementsByName('week1');//заполняем чекбоксы с именем week1
|
|
for (let i = 0; i < checkboxes1.length; i++) {
|
|
checkboxes1[i].checked = weekt1[i];//значение в чекбоксе берем из массива {1,1,1,1,1,0,0}
|
|
}
|
|
const weekt2 = Array.from(weekt.timer2_week).map(Number);
|
|
// console.log(weekt2);
|
|
// Заполните поля чекбоксов данными из JSON
|
|
var checkboxes2 = document.getElementsByName('week2');
|
|
for (let i = 0; i < checkboxes2.length; i++) {
|
|
checkboxes2[i].checked = weekt2[i];
|
|
}
|
|
const weekt3 = Array.from(weekt.timer3_week).map(Number);
|
|
// console.log(weekt3);
|
|
// Заполните поля чекбоксов данными из JSON
|
|
var checkboxes3 = document.getElementsByName('week3');
|
|
for (let i = 0; i < checkboxes2.length; i++) {
|
|
checkboxes3[i].checked = weekt3[i];
|
|
}
|
|
|
|
}
|
|
}
|
|
//*****************************************************************************************
|
|
function out_json(data){//{"id":"tout","t1":"011","t2":"100","t3":"010"}запись данных в чекбоксы 1 2 3
|
|
const out = JSON.parse(data);
|
|
if (out.id === 'tout') {
|
|
const out1 = Array.from(out.t1).map(Number);//"100"=>{1,0,0} строку в массив чисел
|
|
// Заполните поля чекбоксов данными из JSON
|
|
var checkboxes1 = document.getElementsByName('out1');//заполняем чекбоксы с именем out1
|
|
for (let i = 0; i < checkboxes1.length; i++) {
|
|
checkboxes1[i].checked = out1[i];//значение в чекбоксе берем из массива {1,0,0}
|
|
}
|
|
const out2 = Array.from(out.t2).map(Number);//"110"=>{1,1,0} строку в массив чисел
|
|
// Заполните поля чекбоксов данными из JSON
|
|
var checkboxes2 = document.getElementsByName('out2');//заполняем чекбоксы с именем out2
|
|
for (let i = 0; i < checkboxes2.length; i++) {
|
|
checkboxes2[i].checked = out2[i];//значение в чекбоксе берем из массива {1,1,0}
|
|
}
|
|
const out3 = Array.from(out.t3).map(Number);//"000"=>{0,0,0} строку в массив чисел
|
|
// Заполните поля чекбоксов данными из JSON
|
|
var checkboxes3 = document.getElementsByName('out3');//заполняем чекбоксы с именем out3
|
|
//console.log("out3", checkboxes1);
|
|
for (let i = 0; i < checkboxes3.length; i++) {
|
|
checkboxes3[i].checked = out3[i];//значение в чекбоксе берем из массива {0,0,0}
|
|
}
|
|
}
|
|
}
|
|
//***************************************************************************************************
|
|
|
|
// Скрываем все таймеры, кроме выбранного
|
|
function hideTimers(timerId) {
|
|
const timerElements = document.querySelectorAll('.timer');
|
|
timerElements.forEach(function (element) {
|
|
element.style.display = 'none';
|
|
});
|
|
const selectedTimer = document.getElementById(timerId);
|
|
if (selectedTimer) {
|
|
selectedTimer.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
// Изначально скрываем все таймеры
|
|
hideTimers('timer1');
|
|
|
|
// Обработчик изменения выбора таймера
|
|
document.getElementById('timerSelector').addEventListener('change', function () {
|
|
const selectedTimerId = this.value;
|
|
hideTimers(selectedTimerId);
|
|
});
|
|
|
|
document.getElementById('saveButton').addEventListener('click', function () {
|
|
const selectedTimerId = document.getElementById('timerSelector').value;
|
|
const selectedTimer = document.getElementById(selectedTimerId);
|
|
|
|
// Создаем объект, содержащий настройки таймера
|
|
const timersData = {//время
|
|
timer1: [],
|
|
timer2: [],
|
|
timer3: []
|
|
};
|
|
const weekData = {//день недели
|
|
"id":"week",
|
|
timer1_week:"",
|
|
timer2_week:"",
|
|
timer3_week:""
|
|
};
|
|
const outData = {//номер выхода на кот подключаем
|
|
"id":"tout",
|
|
t1:"",
|
|
t2:"",
|
|
t3:""
|
|
};
|
|
// Собираем данные для Таймера 1
|
|
const timer1Items = document.querySelectorAll('.timer:nth-child(1) input[type="time"]');
|
|
timer1Items.forEach(function (item) {
|
|
let days = "";
|
|
var checkboxes = document.getElementsByName('week1');//считываем чекбокс в строку типа 1111100
|
|
for (var checkbox of checkboxes)
|
|
{
|
|
days+=(checkbox.checked ? 1 : 0);
|
|
}
|
|
let out = "";
|
|
var checkboxes = document.getElementsByName('out1');//считываем чекбокс в строку типа 1111100
|
|
for (var checkbox of checkboxes)
|
|
{
|
|
out+=(checkbox.checked ? 1 : 0);
|
|
}
|
|
|
|
|
|
outData.t1 = out;
|
|
weekData.timer1_week = days;
|
|
timersData.timer1.push(item.value);
|
|
|
|
});
|
|
|
|
// Собираем данные для Таймера 2
|
|
const timer2Items = document.querySelectorAll('.timer:nth-child(2) input[type="time"]');
|
|
timer2Items.forEach(function (item) {
|
|
timersData.timer2.push(item.value);
|
|
let days = "";
|
|
var checkboxes = document.getElementsByName('week2');
|
|
for (var checkbox of checkboxes)
|
|
{
|
|
days+=(checkbox.checked ? 1 : 0);
|
|
};
|
|
let out = "";
|
|
var checkboxes = document.getElementsByName('out2');//считываем чекбокс в строку типа 1111100
|
|
for (var checkbox of checkboxes)
|
|
{
|
|
out+=(checkbox.checked ? 1 : 0);
|
|
}
|
|
|
|
|
|
outData.t2 = out;
|
|
weekData.timer2_week = days;
|
|
});
|
|
|
|
// Собираем данные для Таймера 3
|
|
const timer3Items = document.querySelectorAll('.timer:nth-child(3) input[type="time"]');
|
|
timer3Items.forEach(function (item) {
|
|
timersData.timer3.push(item.value);
|
|
|
|
let days = "";
|
|
var checkboxes = document.getElementsByName('week3');
|
|
for (var checkbox of checkboxes)
|
|
{
|
|
days+=(checkbox.checked ? 1 : 0);
|
|
};
|
|
let out = "";
|
|
var checkboxes = document.getElementsByName('out3');//считываем чекбокс в строку типа 1111100
|
|
for (var checkbox of checkboxes)
|
|
{
|
|
out+=(checkbox.checked ? 1 : 0);
|
|
}
|
|
outData.t3 = out;
|
|
weekData.timer3_week = days;
|
|
});
|
|
|
|
// Преобразуем объект в JSON-строку
|
|
const jsonData = JSON.stringify(timersData);
|
|
const jsonWeek = JSON.stringify(weekData);
|
|
const jsonout = JSON.stringify(outData);
|
|
|
|
// Выводим JSON-данные в консоль
|
|
console.log(jsonData);
|
|
console.log(jsonWeek);
|
|
console.log(jsonout);
|
|
|
|
webSocket.send(jsonWeek);//отправка строки через websoket
|
|
webSocket.send(jsonData);
|
|
webSocket.send(jsonout);
|
|
});
|
|
|
|
// Получаем элементы DOM
|
|
const checkboxes = document.querySelectorAll('.myCheckbox');
|
|
const checkboxValues = document.getElementById('checkboxValues');
|
|
|
|
// Создаем строку для хранения значений
|
|
let valuesString = '0000000';
|
|
|
|
// Добавляем обработчик события "change" к каждому чекбоксу
|
|
checkboxes.forEach((checkbox, index) => {
|
|
checkbox.addEventListener('change', function () {
|
|
// Обновляем значение в строке
|
|
valuesString = valuesString.substring(0, index) + (checkbox.checked ? '1' : '0') + valuesString.substring(index + 1);
|
|
|
|
// Выводим обновленную строку в элементе DOM
|
|
//checkboxValues.textContent = valuesString;
|
|
|
|
// Выводим значение в консоль браузера
|
|
console.log('Checkbox values: ' + valuesString);
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html> |