From 633245fe36efc3157684d03e7509fe61746fd1a4 Mon Sep 17 00:00:00 2001 From: hodasemi Date: Thu, 5 Oct 2023 10:09:25 +0200 Subject: [PATCH] Start using react --- resources/js/main.js | 199 ++++++++++++++++-------------------- resources/static/index.html | 10 ++ 2 files changed, 100 insertions(+), 109 deletions(-) diff --git a/resources/js/main.js b/resources/js/main.js index f998528..e54c967 100644 --- a/resources/js/main.js +++ b/resources/js/main.js @@ -1,6 +1,70 @@ -window.onload = startup; +function group_name({ name }) { + return ( + + {name} + + ); +} -async function startup() { +function table_header() { + return ( + + Name + LED + Power + Power Draw + + ); +} + +function table_row({ row_data }) { + return ( + + {/* Name */} + + {row_data.device_name} + + + + {/* LED */} + + + + + + + {/* Power */} + + + { + row_data.power_control && + && + + } + + + {/* Power Draw */} + + + + + + ); +} + +function create_table(group, device_data) { + return ( + + + + +
+ ); +} + +export default async function MyApp() { const response = await fetch( "/devices", { @@ -8,36 +72,10 @@ async function startup() { } ); - 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); + let device_infos = []; for (let i = 0; i < devices.length; i++) { let device_id = devices[i][0]; @@ -49,31 +87,6 @@ async function startup() { 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, @@ -84,64 +97,32 @@ async function startup() { 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) }; + 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_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 && device_state["power_draw"] < 15) { - 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); + device_infos.push(device_info); } - } - document.getElementById("main").appendChild(table); + 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) { diff --git a/resources/static/index.html b/resources/static/index.html index 756c5ec..94bfcaf 100644 --- a/resources/static/index.html +++ b/resources/static/index.html @@ -11,6 +11,15 @@ integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous"> + + + + + @@ -22,6 +31,7 @@ +