Guten Tag zusammen,
ich bin die Neue
Leider habe ich auch gleich mein erstes Problem.
Ich hoffe das mir ein Profi von Euch weiter helfen kann.
Um was geht es genau ?
Ich habe aus dem Internet eine Zeitschaltuhr die ich von 2 auf 3 Relais erweitern muss.
Soweit funktioniert auch alles, bis auf das aktualisieren der Zeiten im Tab Relais 3.
Bedeutet, wenn man auf das Tab Relais 3 drückt kann ich keine Zeiten sehen !
Bei Tab 1 und 2 funktioniert es ohne Fehler.
Was genau mache ich falsch ?
Ich glaube ich muss in diesem Bereich noch das ctab 3 einfügen.
Leider weiß ich es aber nicht genau.
Es wäre sehr nett wenn mir jemand von Euch sagen könnte was ich falsch mache.
Vielen Dank im Voraus
Nicole
ich bin die Neue
Leider habe ich auch gleich mein erstes Problem.
Ich hoffe das mir ein Profi von Euch weiter helfen kann.
Um was geht es genau ?
Ich habe aus dem Internet eine Zeitschaltuhr die ich von 2 auf 3 Relais erweitern muss.
Soweit funktioniert auch alles, bis auf das aktualisieren der Zeiten im Tab Relais 3.
Bedeutet, wenn man auf das Tab Relais 3 drückt kann ich keine Zeiten sehen !
Bei Tab 1 und 2 funktioniert es ohne Fehler.
Was genau mache ich falsch ?
Code:
<!DOCTYPE HTML> <!-- For more information visit: https://fipsok.de -->
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Dual Zeitschaltuhr</title>
<style>
main, #bu, .tab button, input:checked + label {
color: #15dfdf;
}
div {
display: flex;
}
span {
padding: 0.5em;
}
input {
height: auto;
font-weight: bold;
}
label {
font-size: .9em;
}
svg {
height: 4em;
}
* + [id*=ak]{
margin-top: .6em;
}
div+span {
margin-left: 3em;
}
input + label {
color: #777;
font-style: italic;
}
#tog0,#tog1,#tog2 {
margin: .7em 1.2em;
cursor: pointer;
color: #777;
}
time {
text-shadow: 2px 2px 2px black;
font-size: 1.3em;
font-weight: bold;
margin: auto;
}
.note:after {
content: "Schaltzeiten gespeichert";
color: #777;
}
#bu {
background-color: #333;
border: outset #555;
}
.tab {
overflow: hidden;
}
.tab button {
background-color: #999;
border: none;
margin-top: 0em;
transition: 0.8s;
border-top-right-radius: .5em;
border-top-left-radius: .5em;
}
.tab button:hover {
background-color: #666;
}
.tab button.active {
background-color: #333;
}
.tabcontent {
display: none;
padding: .5em .7em .5em .1em;
box-shadow: 5px 3px 10px #4e4d4d;
background-color: #333;
}
.tabcontent input {
background-color: inherit;
font-size: 3em;
color: inherit;
border: solid #555;
}
.tabcontent [name^=bu] {
width: 2em;
cursor: pointer;
}
.none {
color: #777 !important;
}
@media only screen and (max-width: 600px) {
.tabcontent input,input {
font-size: 2.4em;
width: auto;
border: none;
}
.tab button,#bu {
width: 7em;
}
#tog1,#tog2, {
margin: .7em .9em 0 1.2em;
}
div+span {
margin-left: .2em;
}
}
</style>
<script>
var count = 10; <!-- Anzahl Schaltzeiten (analog Sketch) einstellen 2 bis 40 -->
var d = document;
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; 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;) d.querySelector(`[name=bu${i++}]`).addEventListener('click', setActive);
},send(), setInterval(renew, 1000));
function dom() {
var buf = '';
for (var i = 0; i < count*2; i++) {
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>";
}
if (i == (count%2 ? count : count-1)) {
d.querySelector('#ctab1').insertAdjacentHTML('beforeend', buf);
buf = '';
}if (i == count*2-1) d.querySelector('#ctab2').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; 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() {
let a = event.target.id.charAt(3)%2+1;
d.getElementById(`ctab${a}`).style.display = "none";
d.getElementById(`tab${a}`).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];
});
}
</script>
</head>
<body>
<h2>Zeitschaltuhr</h2>
<main>
<div class="tab">
<button class="button active" id="tab1">⏳ Relais 1</button>
<button class="button" id="tab2">⏳ Relais 2</button>
<button class="button" id="tab3">⏳ Relais 3</button>
<time>00:00:00</time>
</div>
<div id="ctab1" class="tabcontent" style="display: block;">
</div>
<div id="ctab2" class="tabcontent">
</div>
<div id="ctab3" class="tabcontent">
</div>
</div>
</main>
<div>
<button class="button" id="bu">⏰ Speichern</button>
<div id="tog0">
R1
<svg viewBox="0 0 486 486">
<g id="color0">
<use xlink:href="#body"/>
<use id="on0" xlink:href="#beam"/>
</g>
</svg>
</div>
<div id="tog1">
R2
<svg viewBox="0 0 486 486">
<g id="color1">
<use xlink:href="#body"/>
<use id="on1" xlink:href="#beam"/>
</g>
</svg>
</div>
<div id="tog2">
R3
<svg viewBox="0 0 486 486">
<g id="color2">
<use xlink:href="#body"/>
<use id="on2" xlink:href="#beam"/>
</g>
</svg>
</div>
</div>
<u></u>
<svg style="display: none;">
</svg>
</body>
</html>Ich glaube ich muss in diesem Bereich noch das ctab 3 einfügen.
Code:
if (i == (count%2 ? count : count-1)) {
d.querySelector('#ctab1').insertAdjacentHTML('beforeend', buf);
buf = '';
}if (i == count*2-1) d.querySelector('#ctab2').insertAdjacentHTML('beforeend', buf);
}
}Leider weiß ich es aber nicht genau.
Es wäre sehr nett wenn mir jemand von Euch sagen könnte was ich falsch mache.
Vielen Dank im Voraus
Nicole
