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