esphome-docs/_static/webserver-v1.js

const source = new EventSource("/events");

source.addEventListener('log', function (e) {
    const log = document.getElementById("log");
    let klass = '';
    if (e.data.startsWith("")) {
        klass = 'e';
    } else if (e.data.startsWith("")) {
        klass = 'w';
    } else if (e.data.startsWith("")) {
        klass = 'i';
    } else if (e.data.startsWith("")) {
        klass = 'c';
    } else if (e.data.startsWith("")) {
        klass = 'd';
    } else if (e.data.startsWith("")) {
        klass = 'v';
    } else {
        log.innerHTML += e.data + '\n';
    }
    log.innerHTML += '<span class="' + klass + '">' + e.data.substr(7, e.data.length - 10) + "</span>\n";
});

source.addEventListener('state', function (e) {
    const data = JSON.parse(e.data);
    document.getElementById(data.id).children[1].innerText = data.state;
});

const states = document.getElementById("states");
let i = 0, row;
for (; row = states.rows[i]; i++) {
    if (!row.children[2].children.length) {
        continue;
    }

    if (row.classList.contains("switch")) {
        (function(id) {
            row.children[2].children[0].addEventListener('click', function () {
                const xhr = new XMLHttpRequest();
                xhr.open("POST", '/switch/' + id.substr(7) + '/toggle', true);
                xhr.send();
            });
        })(row.id);
    }
    if (row.classList.contains("fan")) {
        (function(id) {
            row.children[2].children[0].addEventListener('click', function () {
                const xhr = new XMLHttpRequest();
                xhr.open("POST", '/fan/' + id.substr(4) + '/toggle', true);
                xhr.send();
            });
        })(row.id);
    }
    if (row.classList.contains("light")) {
        (function(id) {
            row.children[2].children[0].addEventListener('click', function () {
                const xhr = new XMLHttpRequest();
                xhr.open("POST", '/light/' + id.substr(6) + '/toggle', true);
                xhr.send();
            });
        })(row.id);
    }
    if (row.classList.contains("cover")) {
        (function(id) {
            row.children[2].children[0].addEventListener('click', function () {
                const xhr = new XMLHttpRequest();
                xhr.open("POST", '/cover/' + id.substr(6) + '/open', true);
                xhr.send();
            });
            row.children[2].children[1].addEventListener('click', function () {
                const xhr = new XMLHttpRequest();
                xhr.open("POST", '/cover/' + id.substr(6) + '/close', true);
                xhr.send();
            });
        })(row.id);
    }
    if (row.classList.contains("select")) {
        (function(id) {
            row.children[2].children[0].addEventListener('change', function () {
                const xhr = new XMLHttpRequest();
                xhr.open("POST", '/select/' + id.substr(7) + '/set?option=' + encodeURIComponent(this.value), true);
                xhr.send();
            });
        })(row.id);
    }
    if (row.classList.contains("number")) {
        (function(id) {
            row.children[2].children[0].addEventListener('change', function () {
                const xhr = new XMLHttpRequest();
                xhr.open("POST", '/number/' + id.substr(7) + '/set?value=' + encodeURIComponent(this.value), true);
                xhr.send();
            });
        })(row.id);
    }
    if (row.classList.contains("button")) {
        (function(id) {
            row.children[2].children[0].addEventListener('click', function () {
                const xhr = new XMLHttpRequest();
                xhr.open("POST", '/button/' + id.substr(7) + '/press', true);
                xhr.send();
            });
        })(row.id);
    }
}