[gelöst] Werte aus einer JSON-Datei

[OliverIO]

@marcio

1
du solltest da kein body tag einfügen. in einem html dokument darf es nur ein body tag geben. das errechnete html im widget wird dynamisch dem elemente baum hinzugefügt. dabei wird wahrscheinlich der browser das überflüssige body tag entfernen.

2
wenn du abhängig von einer zeile etwas machen willst, dann musst du das auch innerhalb der schleife machen. also zwischen zeile 13 und 23. dort wird das html für jede einzelne zeile erzeugt. dort kannst du (eigentlich wie in meinem beispiel) dann auf das aktuelle element mit item zugreifen. das wird in zeile 14 ja jeweils zugewiesen. in m,einem beispiel hatte ich die farbgebung im tr tag definiert

3
du hast nicht nur die farbgebung in zeile 2 geändert sondern auch die wertebereiche. ich weiß jetzt nicht ob du auch die erzeugung der daten angepasst hast. dort war doch das differenzfeld immer negativ?

4
den folgenden satz habe ich nicht verstanden

Aber dann wollte ich die Hintergrundfarbe der Widget abhängig von der Countdown, vergeblich

[MarcIO]

@oliverio

Hmm ok langsam wird es auch verständlicher für mich. Aber wie kann ich denn sonst die Hintergrundfarbe abhängig vom Wert machen ohne Body?

[OliverIO]

@marcio

du kannst die css anweisungen über das style attribut an jedem (ok fast an jedem) tag hinschreiben. wenn du mein beispiel gesehen hast hab ich das ja auch gemacht.
gut ich habe die schriftfarbe genommen und du willst die hintergrundfarbe bestimmen. also musst du einfach aus color nur noch background-color machen

  <tr style="color:<%= item.color%>">

für bessere infos zu html und css empfehle ich
https://wiki.selfhtml.org/wiki/HTML
https://wiki.selfhtml.org/wiki/CSS

[MarcIO]

@oliverio

es hieß ja aber, dass die Attribute auch nur in der Schleife zugewiesen werden können. Da bleibt ja nichts anderes als die "tr"

[OliverIO]

@marcio

nö, du könntest auch nur auf einer einzelnen tabellenzelle etwas zuweisen

[MarcIO]

@oliverio

Sollt ich davon ausgehen, dass der Hintergrund von dem kompletten Widget nicht abhängig von dem Zustand gemacht werden kann?

[OliverIO]

@marcio

Nein, aber du musst dir eine Regel überlegen wie verschiedene teilzustände zu einem aggregiert werden sollen. Bisher haben wir nur für jeden teilzustand die Farbe berechnet und angezeigt

Welche Farbe soll der Hintergrund haben wenn für die Daten 2xgelb und 2xrot enthalten sind?

[MarcIO]

@oliverio

Es sollte theoretisch nur eine Wartung geben können, da ich es nach Gerät gefiltert habe. Doch sollten mal es zwei sein, dann eben die erste bzw. nächste Wartung

[MarcIO]

Ok also mit viel Geduld hat es am Ende doch geklappt, mit dem Motto weniger ist eben manchmal mehr.

<% 
debugger;
let newList = data
    .filter(el => el && el.machine_id)
    .map(el => {
        return {
            ...el, 
            color: parseInt(el.differenz_in_tagen) <= 0 ? "red" : parseInt(el.differenz_in_tagen) <= 3 ? "yellow" : "green"
        };
    }).filter(item => item.machine_id === "Auto");
    

let widgetColor = newList.length > 0 ? newList[0].color : 'grey'; 
%>

<div style="width: 100%; height: 100%; border-radius:32px; background-color:<%= widgetColor %>;">
</div>

Ich habe es auch komplett frei von Inhalt gelassen, dadurch habe ich so gesehen eine "Wartungsampel" in Form von LED-Anzeige. Finde ich persönlich übersichtlicher.

@OliverIO Ich danke dir nochmals sehr für die Unterstützung, ohne dich würde es nicht so leicht gehen

[OliverIO]

@marcio

ok, dann passt es