HomeServer/resources/js/main.js

function group_name({ name }) {
    return (
        <tr>
            <td>{name}</td>
        </tr>
    );
}

function table_header() {
    return (
        <tr>
            <td>Name</td>
            <td>LED</td>
            <td>Power</td>
            <td>Power Draw</td>
        </tr>
    );
}

function table_row({ row_data }) {
    return (
        <tr>
            {/* Name */}
            <td>
                <input id={"name_" + row_data.device_id} readonly="true">{row_data.device_name}</input>
                <button on_click={async () => { await change_name(row_data.device_id) }}>
                    <i class="fa fa-pencil-square-o"></i>
                </button>
            </td>

            {/* LED */}
            <td>
                <label id={"led_" + row_data.device_id}>{row_data.led_state}</label>
                <button on_click={async () => { await led_on(row_data.device_id) }}>On</button>
                <button on_click={async () => { await led_off(row_data.device_id) }}>Off</button>
            </td>

            {/* Power */}
            <td>
                <label id={"power_" + row_data.device_id}>{row_data.power_state}</label>
                {
                    row_data.power_control &&
                    <button on_click={async () => { await power_on(row_data.device_id) }}>On</button> &&
                    <button on_click={async () => { await power_off(row_data.device_id) }}>Off</button>
                }
            </td>

            {/* Power Draw */}
            <td>
                <label>{row_data.power_draw} W</label>
                <button><i class="fa fa-line-chart"></i></button>
            </td>
        </tr >
    );
}

function create_table(group, device_data) {
    return (
        <table>
            <group_name name={group} />
            <table_header />
            <table_row row_data={device_data} />
        </table>
    );
}

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

    let json = JSON.parse(await response.json());

    for (const [group_name, devices] of Object.entries(json)) {
        let device_infos = [];

        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];
            }

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

            let device_info = {
                device_id: device_id,
                device_descriptor: device_descriptor,
                led_state: device_state["led"],
                power_state: device_state["power"],
                power_control: devices[i][2] && device_state["power_draw"] < 15,
                power_draw: device_state["power_draw"],
            };

            device_infos.push(device_info);
        }

        document.getElementById("main").appendChild(create_table(group_name, device_infos));
    }
}

async function change_name(device_id) {
    let device_name = document.getElementById("name_" + device_id);

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

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) {
    // 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());

    if (device_state["power_draw"] < 15) {
        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();
    }

    // get start date
    let start_text = document.getElementById("start").value;
    let start_date = parseInt(new Date(start_text).getTime() / 1000).toFixed(0);

    // get end date1
    let end_text = document.getElementById("end").value;
    let end_date = parseInt(new Date(end_text).getTime() / 1000).toFixed(0);

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

    const response = await fetch(
        "/plug_data/" + plug + "/" + start_date + "/" + end_date + "/" + "hourly",
        {
            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: {
                        }
                    }
                }
            },
            locale: 'de-DE'
        }
    });

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