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');

            // create device name column
            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-pencil-square-o";

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

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

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

            // create device led state column
            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);

            // create device power state column
            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;

            device_power_state_entry.appendChild(device_power_state);

            if (devices[i][2] == true) {
                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_on);
                device_power_state_entry.appendChild(device_power_off);
            }

            row_device.appendChild(device_power_state_entry);

            // create device power draw column
            let device_power_draw_entry = document.createElement('td');
            let device_power_draw = document.createElement('label');
            device_power_draw.innerText = device_state["power_draw"] + " W";
            let device_power_draw_graph_button = document.createElement('button');
            device_power_draw_graph_button.onclick = async () => { await render_graph(device_id, device_descriptor) };
            let device_power_draw_graph_button_icon = document.createElement('i');
            device_power_draw_graph_button_icon.className = "fa fa-line-chart";

            device_power_draw_graph_button.appendChild(device_power_draw_graph_button_icon);
            device_power_draw_entry.appendChild(device_power_draw);
            device_power_draw_entry.appendChild(device_power_draw_graph_button);
            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, "power", "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);
    }
}

async function render_graph(plug, name) {
    // remove old graph, if present
    let old = document.getElementById("chart");

    if (old !== null) {
        old.remove();
    }

    // create new chart div
    let chart = document.createElement('canvas');
    chart.id = "chart";

    const response = await fetch(
        "/plug_data/" + plug,
        {
            method: "GET"
        }
    );

    const j = await response.json();
    const data = JSON.parse(j);

    let y = [];
    let x = [];

    for (let i = 0; i < data.length; i++) {
        let [time, watts] = data[i];

        x.push(new Date(time * 1000));
        y.push(watts);
    }

    const chart_data = {
        labels: x,
        datasets: [{
            label: name,
            data: y,
            fill: false,
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
        }]
    };

    new Chart(chart, {
        type: 'line',
        data: chart_data,
        options: {
            scales: {
                y: {
                    beginAtZero: true
                },
                x: {
                    type: 'time',
                    time: {
                        displayFormats: {
                            'day': 'DD.MM hh:mm',
                            'hour': 'DD.MM hh:mm',
                            'week': 'DD.MM hh:mm',
                            'month': 'DD.MM hh:mm',
                        }
                    }
                }
            },
            locale: 'de-DE'
        }
    });

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