HomeServer/resources/js/main.js

window.onload = startup;

async function startup() {
    const response = await fetch(
        "/devices",
        {
            method: "GET"
        }
    );

    let table = document.createElement('table');
    let json = JSON.parse(await response.json());

    console.log(json);

    for (const [group_name, devices] of Object.entries(json)) {
        let row_group = document.createElement('tr');
        let data_group = document.createElement('td');
        let group_label = document.createElement('label');
        group_label.innerText = group_name;

        data_group.appendChild(group_label);
        row_group.appendChild(data_group);
        table.appendChild(row_group);

        let row_header = document.createElement('tr');
        let header_name_entry = document.createElement('td');
        header_name_entry.innerText = "Name"
        let header_led_entry = document.createElement('td');
        header_led_entry.innerText = "LED"
        let header_power_entry = document.createElement('td');
        header_power_entry.innerText = "Power"
        let header_power_draw_entry = document.createElement('td');
        header_power_draw_entry.innerText = "Power Draw";

        row_header.appendChild(header_name_entry);
        row_header.appendChild(header_led_entry);
        row_header.appendChild(header_power_entry);
        row_header.appendChild(header_power_draw_entry);
        table.appendChild(row_header);

        for (let i = 0; i < devices.length; i++) {
            let device_id = devices[i][0];

            let row_device = document.createElement('tr');

            let device_name_entry = document.createElement('td');
            let device_name = document.createElement('label');
            device_name.innerText = device_id;

            device_name_entry.appendChild(device_name);
            row_device.appendChild(device_name_entry);

            const device_status_response = await fetch(
                "/plug_state/" + device_id,
                {
                    method: "GET"
                }
            );

            let device_state = JSON.parse(await device_status_response.json());

            let device_led_state_entry = document.createElement('td');
            let device_led_state = document.createElement('label');
            device_led_state.innerText = device_state["led"];
            device_led_state.id = "led_" + device_id;
            let device_led_on = document.createElement('button');
            device_led_on.innerText = "On"
            device_led_on.onclick = async () => { await led_on(device_id) };
            let device_led_off = document.createElement('button');
            device_led_off.innerText = "Off"
            device_led_off.onclick = async () => { await led_off(device_id) };

            device_led_state_entry.appendChild(device_led_state);
            device_led_state_entry.appendChild(device_led_on);
            device_led_state_entry.appendChild(device_led_off);
            row_device.appendChild(device_led_state_entry);

            let device_power_state_entry = document.createElement('td');
            let device_power_state = document.createElement('label');
            device_power_state.innerText = device_state["power"];
            device_power_state.id = "power_" + device_id;
            let device_power_on = document.createElement('button');
            device_power_on.innerText = "On"
            device_power_on.onclick = async () => { await power_on(device_id) };
            let device_power_off = document.createElement('button');
            device_power_off.innerText = "Off"
            device_power_off.onclick = async () => { await power_off(device_id) };

            device_power_state_entry.appendChild(device_power_state);
            device_power_state_entry.appendChild(device_power_on);
            device_power_state_entry.appendChild(device_power_off);
            row_device.appendChild(device_power_state_entry);

            let device_power_draw_entry = document.createElement('td');
            let device_power_draw_ = document.createElement('label');
            device_power_draw_.innerText = device_state["power_draw"] + " W";

            device_power_draw_entry.appendChild(device_power_draw_);
            row_device.appendChild(device_power_draw_entry);

            table.appendChild(row_device);
        }
    }

    document.getElementById("main").appendChild(table);
}

async function led_on(plug) {
    const response = await fetch(
        "/plug/" + plug + "/led_on",
        {
            method: "POST"
        }
    );

    if (response.ok) {
        const device_status_response = await fetch(
            "/plug_state/" + plug,
            {
                method: "GET"
            }
        );

        let device_state = JSON.parse(await device_status_response.json());

        document.getElementById("led_" + plug).innerHTML = device_state["led"];
    }


}

async function led_off(plug) {
    const response = await fetch(
        "/plug/" + plug + "/led_off",
        {
            method: "POST"
        }
    );

    if (response.ok) {
        const device_status_response = await fetch(
            "/plug_state/" + plug,
            {
                method: "GET"
            }
        );

        let device_state = JSON.parse(await device_status_response.json());

        document.getElementById("led_" + plug).innerHTML = device_state["led"];
    }
}

async function power_on(plug) {
    const response = await fetch(
        "/plug/" + plug + "/power_on",
        {
            method: "POST"
        }
    );

    if (response.ok) {
        const device_status_response = await fetch(
            "/plug_state/" + plug,
            {
                method: "GET"
            }
        );

        let device_state = JSON.parse(await device_status_response.json());

        document.getElementById("power_" + plug).innerHTML = device_state["power"];
    }
}

async function power_off(plug) {
    const response = await fetch(
        "/plug/" + plug + "/power_off",
        {
            method: "POST"
        }
    );

    if (response.ok) {
        const device_status_response = await fetch(
            "/plug_state/" + plug,
            {
                method: "GET"
            }
        );

        let device_state = JSON.parse(await device_status_response.json());

        document.getElementById("power_" + plug).innerHTML = device_state["power"];
    }
}