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 device_descriptor;

            if (devices[i][1] == null) {
                device_descriptor = device_id
            } else {
                device_descriptor = devices[i][1];
            }

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

            let device_name_entry = document.createElement('td');
            let device_name = document.createElement('input');
            device_name.value = device_descriptor;
            device_name.readOnly = true;
            let device_name_edit = document.createElement('button');
            device_name_edit.onclick = async () => {
                if (device_name.readOnly) {
                    device_name.readOnly = false;
                    device_name.focus();
                } else {
                    device_name.readOnly = true;
                    await change_device_name(device_id, device_name.value);
                }
            }
            let button_icon = document.createElement('i');
            button_icon.className = "fa fa-edit";

            device_name_entry.appendChild(device_name);
            device_name_edit.appendChild(button_icon);
            device_name_entry.appendChild(device_name_edit);
            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 change_plug_state(plug, module, state) {
    const response = await fetch(
        "/plug/" + plug + "/" + module + "_" + state,
        {
            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(module + "_" + plug).innerHTML = device_state[module];
    }
}

async function led_on(plug) {
    await change_plug_state(plug, "led", "on")
}

async function led_off(plug) {
    await change_plug_state(plug, "led", "off")
}

async function power_on(plug) {
    await change_plug_state(plug, "power", "on")
}

async function power_off(plug) {
    await change_plug_state(plug, "pwoer", "off")
}

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

    if (!response.ok) {
        console.error(response.body);
    }
}