Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[Kellerassel75]

Hallo.
Ich habe ein html Widget erstellt. Im Editor ist es sichtbar aber wenn ich es im neuen Fenster öffne ist es nicht zu sehen!
Wo ist das Problem?

<div id="fuelTable"></div>

<script type="text/javascript">

let jsonStr = vis.states["tankerkoenig.0.stations.jsonTable.val"];

if (jsonStr) {
    try {
        let data = JSON.parse(jsonStr);
        renderTable(data);
    } catch(e) {
        console.log("JSON Error:", e);
    }
}

function renderTable(data) {

    const minE5 = Math.min.apply(null, data.map(x => x.e5));
    const minE10 = Math.min.apply(null, data.map(x => x.e10));
    const minDiesel = Math.min.apply(null, data.map(x => x.diesel));

    let html = "";
    html += '<table id="sortableTable" style="width:100%; border-collapse: collapse; font-size:14px;">';
    html += '<thead>';
    html += '<tr style="background:#ccc; cursor:pointer;">';
    html += '<th onclick="sortTable(0)">Station</th>';
    html += '<th onclick="sortTable(1)">E5</th>';
    html += '<th onclick="sortTable(2)">Δ E5</th>';
    html += '<th onclick="sortTable(3)">E10</th>';
    html += '<th onclick="sortTable(4)">Δ E10</th>';
    html += '<th onclick="sortTable(5)">Diesel</th>';
    html += '<th onclick="sortTable(6)">Δ Diesel</th>';
    html += '</tr>';
    html += '</thead><tbody>';

    function diffColor(v) {
        if (v < 0) return "green";
        if (v > 0) return "red";
        return "black";
    }

    function bestColor(p, minP) {
        return (p === minP) ? "yellow" : "transparent";
    }

    data.forEach(function(item){
        html += "<tr>";

        html += "<td>" + item.station + "</td>";

        html += "<td style='background:" + bestColor(item.e5, minE5) + ";'>" +
                item.e5.toFixed(3) + "</td>";

        html += "<td style='color:" + diffColor(item.differenceE5) + ";'>" +
                item.differenceE5 + "</td>";

        html += "<td style='background:" + bestColor(item.e10, minE10) + ";'>" +
                item.e10.toFixed(3) + "</td>";

        html += "<td style='color:" + diffColor(item.differenceE10) + ";'>" +
                item.differenceE10 + "</td>";

        html += "<td style='background:" + bestColor(item.diesel, minDiesel) + ";'>" +
                item.diesel.toFixed(3) + "</td>";

        html += "<td style='color:" + diffColor(item.differenceDiesel) + ";'>" +
                item.differenceDiesel + "</td>";

        html += "</tr>";
    });

    html += "</tbody></table>";

    document.getElementById("fuelTable").innerHTML = html;
}


// ---- Sortieren ----
let sortDirection = true;

function sortTable(col) {
    const table = document.getElementById("sortableTable");
    let rows = Array.prototype.slice.call(table.rows, 1);

    rows.sort(function(a, b) {
        let x = a.cells[col].innerText;
        let y = b.cells[col].innerText;

        let nx = parseFloat(x);
        let ny = parseFloat(y);

        if (!isNaN(nx) && !isNaN(ny)) {
            return sortDirection ? (nx - ny) : (ny - nx);
        }
        return sortDirection ? x.localeCompare(y) : y.localeCompare(x);
    });

    sortDirection = !sortDirection;
    rows.forEach(r => table.appendChild(r));
}

</script>

Vielen Dank!
Falko

[OliverIO]

@Kellerassel75

prüfe mal bitte die browser konsole mit F12
Ich denke der Datenpunkt ist zum Zeitpunkt an dem das javascript ausgeführt wird noch nicht in vis verfügbar. Daher endet das Skript in Zeile 7
zum überprüfen könntest du vor die folgende zeile das befehlswort debugger eintragen.
wenn du dann bei geöffneter konsole F5 drückst, wird die Seite neu geladen und du kannst zeilenweise ausführen und prüfen was passiert.

debugger;
let jsonStr = vis.states["tankerkoenig.0.stations.jsonTable.val"];

ggfs könnte ich dir das widget jsontemplate aus dem adapter jsontemplate empfehlen.
dort kannst du deinen datenpunkt eintragen.
mittels dem template system ejs
kannst du dann dein html erstellen und die daten eintragen lassen
der adapter mit version 4.2.0 befindet sich auch im stable repository.

https://github.com/oweitman/ioBroker.vis-jsontemplate
und Supportthread
https://forum.iobroker.net/topic/31521/test-widget-json-template

Dein Skript kannst du da aber auch nicht 1:1 übernehmen

[Kellerassel75]

OK.
Debugger: Zeile 3 dann 5 dann 77
sonst nix!

[OliverIO]

@Kellerassel75

wie zu erwarten.
in jsonStr steht nix drin. deswegen ruft das if in Zeile 4
die Funktion renderTable nicht auf.

[Kellerassel75]

Super geht!
Ich habe vis-jsontemplate mit eingefügt (mit Datenpunkt) und auf einmal geht mein html Widget!
Warum auch immer?
Falko

[OliverIO]

@kellerassel75

Ja das kann sein. Das Widget sorgt dafür das der datenpunkt abonniert wird und ruft dann erst das Template auf.