document.addEventListener("DOMContentLoaded", function () {

    function color(heat) {
        if (heat < 30) return "#2ecc71";
        if (heat < 60) return "#f1c40f";
        if (heat < 80) return "#e67e22";
        return "#e74c3c";
    }

    document.getElementById("load").addEventListener("click", function () {

        cockpit.spawn(
            ["python3", "/usr/share/cockpit/fester/backend/nodes.py"],
            { superuser: "require" }
        )
        .then(data => {

            const parsed = JSON.parse(data);

            let html = `<h3>Master</h3>
                        <pre>${JSON.stringify(parsed.master, null, 2)}</pre>
                        <h3>Nodes</h3>`;

            parsed.nodes.forEach(n => {

                html += `
                    <div style="
                        padding:10px;
                        margin:5px;
                        background:${color(n.heat)};
                        color:black;
                        border-radius:6px;
                    ">
                        <b>${n.name}</b><br>
                        state: ${n.state}<br>
                        heat: ${n.heat}<br>
                    </div>
                `;
            });

            document.getElementById("nodes").innerHTML = html;
        })
        .catch(err => {
            document.getElementById("nodes").textContent = err.toString();
        });
    });

});