var count = 10; // Anzahl Schaltzeiten(analog Sketch) einstellen 2 bis 40
var nrRelais = 3;
var d = document;
var cTabIds = ['#ctab1', '#ctab2', '#ctab3'];
d.addEventListener('DOMContentLoaded', () => {
dom(), renew();
d.querySelector('#bu').addEventListener('click', () => {
let arr = [], formData = new FormData();
formData.append('sTime', Array.from(d.querySelectorAll('input[type=time]')).map(x => x.value != 0 ? x.value : 0));
for (let i = 0; i < count / 2 * nrRelais; i++) {
let x = 0;
d.querySelectorAll(`input[name=c${i}]`).forEach((el, i) => { if (el.checked) x = x | (1 << i) });
arr.push(x);
}
formData.append(`sDay`, arr);
send(formData);
});
d.querySelector('#tab1').addEventListener('click', openTab);
d.querySelector('#tab2').addEventListener('click', openTab);
d.querySelector('#tab3').addEventListener('click', openTab);
d.querySelector('#tog0').addEventListener('click', renew);
d.querySelector('#tog1').addEventListener('click', renew);
d.querySelector('#tog2').addEventListener('click', renew);
for (var i = 0; i < count / 2 * nrRelais;) d.querySelector(`[name=bu${i++}]`).addEventListener('click', setActive);
}, send(), setInterval(renew, 1000));
function dom() {
var i = 0;
for (var iRelais = 0; iRelais < nrRelais; iRelais++) {
var buf = '';
for (var iTime = 0; iTime < count; iTime++) {
buf += `${i % 2 ? `<span> -- </span>` : `<div id="ak${i / 2}"><span name="bu${i / 2}"></span>`}<input type="time" name="sz${i}" value="">${i % 2 ? `</div><span id="t${i / 2 | 0}">` : ""}`;
if (i % 2) {
['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'].forEach(v => {
buf += `<input type="checkbox" name="c${(i - 1) / 2}"><label>${v} </label>`;
});
buf += "</span>";
}
i++;
}
d.querySelector(cTabIds[iRelais]).insertAdjacentHTML('beforeend', buf);
}
}
function setActive() {
let formData = new FormData();
formData.append(this.parentNode.id.substr(2, 5), this.textContent == 'ON' ? '0' : '1');
send(formData);
}
function send(arg) {
fetch('/timer', {
method: 'post',
body: arg
}).then(resp => {
if (resp.ok) {
if (arg && arg.has('sTime')) {
let el = d.querySelector('u').classList;
el.add('note');
setTimeout(() => {
el.remove('note');
}, 5e3);
}
}
return resp.json();
}).then(array => {
if (array.length > count) {
array.forEach((v, i) => {
if (i < count * 2) d.querySelector(`[name=sz${i}]`).value = v;
if (i == count * 2) getActive(v);
if (i > count * 2) {
let el = d.getElementsByName(`c${i - count * 2 - 1}`);
for (let k in el) {
v & (1 << k) ? el[k].checked = true : el.checked = false;
}
}
});
}
else {
getActive(array);
}
});
}
function getActive(arg) {
for (var i = 0; i < count / 2 * nrRelais; i++) {
d.querySelector(`[name=bu${i}]`).textContent = (arg[i] % 2 ? 'ON' : 'OFF');
let el = d.getElementById(`ak${i}`).classList;
arg[i] % 2 ? el.remove("none") : el.add("none");
d.getElementById(`t${i}`).childNodes.forEach(v => { arg[i] % 2 ? v.classList.remove("none") : v.classList.add("none") });
}
}
function openTab() {
for (var i = 0; i < nrRelais; i++) {
d.getElementById(`ctab${i + 1}`).style.display = "none";
d.getElementById(`tab${i + 1}`).classList.remove("active");
}
d.getElementById('c' + event.target.id).style.display = "block";
event.target.classList.add("active")
}
function renew(ev) {
if (ev) ev = ev.currentTarget.id.slice(3, 4);
fetch(`timer?tog=${ev}`).then(resp => {
return resp.json();
}).then(array => {
for (var i = 0; i < 2; i++) {
d.getElementById(`color${i}`).style.fill = array[i] == 0 ? '' : '#ff0';
d.getElementById(`on${i}`).style.visibility = array[i] == 0 ? 'hidden' : 'visible';
}
d.querySelector('time').innerHTML = array[2];
});
}
