NODE RED - Přepinaci tlačitko. – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Zdrvim.Hleda se dobra duše co pomuže.
Je to pro Node Red template, což je HTML + javascript.
Hned na začatku se přiznam, že v tom moc neumim a snažim se to zmastit za pomoci IA ale nějak to nefunguje.
Grafiku zvlad na .
https://ibb.co/v4S2prPz

Do template se posila string "state_l1: "ON"" nebo state_l1: "OFF"
A tlačitko by se mělo překlapt.
Efunguje to.
 

<style>
    .switch {
        position: relative;
        display: inline-block;
        width: 34px;
        height: 20px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: 0.4s;
        border-radius: 20px;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 14px;
        width: 14px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
    }

    input:checked+.slider {
        background-color: #60a5fa;
    }

    input:checked+.slider:before {
        transform: translateX(14px);
    }

    .row {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #374151;
        gap: 20px;
    }

    .row span {
        display: flex;
        align-items: center;
    }

    .row img {
        width: 16px;
        height: 16px;
        margin-right: 8px;
    }

    .row label {
        margin-left: 20px;
    }
</style>

<div
    style="font-family: Arial, sans-serif; background: #1e293b; color: #e2e8f0; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); width: 200px;">
    <div style="display: flex; align-items: center; margin-bottom: 15px;">
        <img src="https://cdn-icons-png.flaticon.com/512/847/847969.png" alt="Rele" style="width: 24px; height: 24px; margin-right: 10px;">
        <span style="font-size: 18px; font-weight: bold; color: #60a5fa;">Rele<span style="font-weight: normal;">1</span></span>
    </div>

    <div style="margin-top: 10px;">
        <div class="row">
            <span>
                <img src="https://cdn-icons-png.flaticon.com/512/616/616489.png" alt="Star">
                State L 1 (L1)
            </span>
            <label class="switch">
                <input type="checkbox" id="state_l1">
                <span class="slider"></span>
            </label>
        </div>
    </div>
</div>

<script>
function updateSwitchState(payload) {
try {
let data = (typeof payload === "string") ? JSON.parse(payload) : payload; // Ošetření typu

if (data.hasOwnProperty("state_l1")) {
document.getElementById("state_l1").checked = (data["state_l1"] === "ON");
}
} catch (error) {
console.error("Invalid JSON payload", error);
}
}

// Testovací volání
updateSwitchState({ "state_l1": "ON" }); // Zkus objekt místo JSON stringu
</script>