Starthilfe bei Code Erweiterung.

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

-Nicole-

Neues Mitglied
13 Juni 2020
15
0
1
49
Danke für den neuen Code !
Es wird immer besser !

Was funktioniert noch nicht ?

Die Zeiten kann ich jetzt unter tab 1 und tab 2 sehen unter tab 3 nicht.
Zusätzlich sind die Zeiten ausgeblendet, sie sind da aber Grau normal sind diese ja hervorgehoben und farbig.
Die On/OFF Funktion wo man die einzelnen Zeiten an der linken Seite an oder aus machen kann sind da aber man kann diese nicht aktivieren oder deaktivieren.
Der Speicher Button ganz unten ist ohne Funktion.

Was ich noch nicht ganz verstehe ist, warum schreibst Du die Relais Funktion so groß um ?
Die Relais haben ja fehlerfrei funktioniert, es war lediglich die Zeiten Anzeige im tab 3 das Problem.
Ich glaube das es nur ein ganz kleines Problem ist.
An der Relais Funktionen würde ich nichts verändern, da es bestens funktioniert hat.
 
Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.084
404
83
67
Was ich noch nicht ganz verstehe ist, warum schreibst Du die Relais Funktion so groß um ?
Die Relais haben ja fehlerfrei funktioniert, es war lediglich die Zeiten Anzeige im tab 3 das Problem.
Der Grund ist, dass ich diese komplizierten Berechnungen mit Modulo, Division und Multiplikation nicht verstanden habe und versuche habe, es zu vereinfachen, damit ich es für das dritte Relais erweitern konnte.

Was meinst Du eigentlich, wenn Du von "Zeiten" sprichst. Die Eingabefelder, wo bei mir im Moment Minus-Zeichen drin sind oder die Zahlenwerte, die angezeigt werden?
 

-Nicole-

Neues Mitglied
13 Juni 2020
15
0
1
49
Ok, dann ist das verständlich :wink:

Genau, ich meine die Eingabefelder wo bei dir die Minus-Zeichen drin sind.
Unter tab3 sind keine Minus-Zeichen, keine Zahlenwerte und auch ganz vorne das OFF ist nicht zu sehen.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.084
404
83
67
So, ich denke, ich habe das mit der Zählung wieder ein Stück besser verstanden und einige Fehler behoben:
Code:
        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];
            });
        }
Das ganze ist zwar ziemlich trickreich programmiert, aber für mich schlecht lesbar und änderbar.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.084
404
83
67
PS: Ich denke, ich habe jetzt auch die Funktion renew verstanden und konnte sie korrigieren:
Code:
        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 < nrRelais; 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[nrRelais];
            });
        }
 

-Nicole-

Neues Mitglied
13 Juni 2020
15
0
1
49
Habe es gerade getestet,

leider hat sich absolut nichts verändert :eek:
Alles gleich wie im letzten Code.

Das gibt es doch nicht :confused:
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.084
404
83
67
Ich habe jetzt das Problem, dass ich die Hardware nicht habe und das meiste nicht testen kann.
Ich hänge noch Mal einen neuen Screenshot mit dem Tab für das dritte Relais an:
zeitschaltuhr2.png
Was ich dort sehe:
Die Zeiten sind bunt.
Der ON/OFF-Status ist nicht sichtbar. Ich vermute, deshalb nicht, weil er von der Hardware kommt.

Kannst Du vielleicht einen Screenshot posten, wie es bei dir aussieht?

Und wir sollten noch Mal einen Versuch mit console.log machen und zwar mit dem renew weil dieses zyklisch statt findet, so dass wir in jedem Fall etwas zu sehen bekommen sollten:
Code:
        function renew(ev) {
            if (ev) ev = ev.currentTarget.id.slice(3, 4);
            fetch(`timer?tog=${ev}`).then(resp => {
                return resp.json();
            }).then(array => {
                console.log(array); // <--
                for (var i = 0; i < nrRelais; 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[nrRelais];
            });
        }

Für mich ist es jetzt spät genug, ich sage gute Nacht!
 

-Nicole-

Neues Mitglied
13 Juni 2020
15
0
1
49
Hallo,

danke für deine große Mühe !

Ich habe jetzt nochmals mit dem log getestet.
Folgendes habe ich rausgefunden.

Wenn ich Links auf OFF klicke sagt er mir folgendes im Log.

Code:
[Error] Unhandled Promise Rejection: TypeError: undefined is not a function (near '...array.forEach...')
    (anonyme Funktion) (index.html:175)
    promiseReactionJob

Wenn ich unten auf Speichern klicke sagt er mir folgendes.

Code:
[Error] Failed to load resource: the server responded with a status of 400 (Bad Request) (timer, line 0)

[Error] Unhandled Promise Rejection: SyntaxError: The string did not match the expected pattern.
    (anonyme Funktion)
    promiseReactionJob

Du hast Recht, ich habe es gerade getestet, der ON/OFF-Status ist nicht sichtbar weil er von der Hardware kommt.
Somit ist die Darstellung bei Dir in Ordnung !
 

Tronjer

Senior HTML'ler
8 Oktober 2010
5.232
482
83
Berlin
Beim 400er ist der Request falsch formuliert. Vielleicht fehlt etwas im Header. Dafür gibt es Tools wie Postman.

Außerdem sollten Fehler im Fetch-Request abgefangen werden.

Pattern:
Javascript:
myFunc() {
  return fetch('my-url')
    .then((resp) =>  {
      if (!resp.ok) {
        throw resp.json();
      }
      return resp.json();
    })
    .then(() => {
      // success
    })
    .catch(e => {
      // error
      return e;
    });
}
 

-Nicole-

Neues Mitglied
13 Juni 2020
15
0
1
49
Hallo Tronjer,

danke für deine Hilfe.

Soll ich das einfach mit hinzufügen und nochmals testen ?
 

Tronjer

Senior HTML'ler
8 Oktober 2010
5.232
482
83
Berlin
Das würde einen crash verhindern, aber das Problem mit dem bad request nicht lösen.

Was ich an deiner Stelle tun würde: Das Script auseinander nehmen und Stück für Stück neu aufbauen, um zu verstehen, wie es funktioniert.
 
Werbung:

Neueste Beiträge