Start using react
This commit is contained in:
parent
aff80fa0f7
commit
633245fe36
2 changed files with 100 additions and 109 deletions
|
|
@ -1,6 +1,70 @@
|
||||||
window.onload = startup;
|
function group_name({ name }) {
|
||||||
|
return (
|
||||||
|
<tr>
|
||||||
|
<td>{name}</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
async function startup() {
|
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(
|
const response = await fetch(
|
||||||
"/devices",
|
"/devices",
|
||||||
{
|
{
|
||||||
|
|
@ -8,36 +72,10 @@ async function startup() {
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
let table = document.createElement('table');
|
|
||||||
let json = JSON.parse(await response.json());
|
let json = JSON.parse(await response.json());
|
||||||
|
|
||||||
console.log(json);
|
|
||||||
|
|
||||||
for (const [group_name, devices] of Object.entries(json)) {
|
for (const [group_name, devices] of Object.entries(json)) {
|
||||||
let row_group = document.createElement('tr');
|
let device_infos = [];
|
||||||
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++) {
|
for (let i = 0; i < devices.length; i++) {
|
||||||
let device_id = devices[i][0];
|
let device_id = devices[i][0];
|
||||||
|
|
@ -49,31 +87,6 @@ async function startup() {
|
||||||
device_descriptor = devices[i][1];
|
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
|
// get plug status
|
||||||
const device_status_response = await fetch(
|
const device_status_response = await fetch(
|
||||||
"/plug_state/" + device_id,
|
"/plug_state/" + device_id,
|
||||||
|
|
@ -84,64 +97,32 @@ async function startup() {
|
||||||
|
|
||||||
let device_state = JSON.parse(await device_status_response.json());
|
let device_state = JSON.parse(await device_status_response.json());
|
||||||
|
|
||||||
// create device led state column
|
let device_info = {
|
||||||
let device_led_state_entry = document.createElement('td');
|
device_id: device_id,
|
||||||
let device_led_state = document.createElement('label');
|
device_descriptor: device_descriptor,
|
||||||
device_led_state.innerText = device_state["led"];
|
led_state: device_state["led"],
|
||||||
device_led_state.id = "led_" + device_id;
|
power_state: device_state["power"],
|
||||||
let device_led_on = document.createElement('button');
|
power_control: devices[i][2] && device_state["power_draw"] < 15,
|
||||||
device_led_on.innerText = "On"
|
power_draw: device_state["power_draw"],
|
||||||
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_infos.push(device_info);
|
||||||
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);
|
document.getElementById("main").appendChild(create_table(group_name, device_infos));
|
||||||
|
|
||||||
// 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_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) {
|
async function change_plug_state(plug, module, state) {
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,15 @@
|
||||||
integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
|
integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" href="https://cdn.korzh.com/metroui/v4/css/metro-all.min.css">
|
<link rel="stylesheet" href="https://cdn.korzh.com/metroui/v4/css/metro-all.min.css">
|
||||||
<link href="/css/index.css" rel="stylesheet">
|
<link href="/css/index.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"
|
||||||
|
integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ=="
|
||||||
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"
|
||||||
|
integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ=="
|
||||||
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -22,6 +31,7 @@
|
||||||
<script type="text/javascript" src="/js/main.js"></script>
|
<script type="text/javascript" src="/js/main.js"></script>
|
||||||
<script src="https://cdn.korzh.com/metroui/v4/js/metro.min.js"></script>
|
<script src="https://cdn.korzh.com/metroui/v4/js/metro.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
<input id="start" type="text" data-role="calendarpicker">
|
<input id="start" type="text" data-role="calendarpicker">
|
||||||
<input id="end" type="text" data-role="calendarpicker">
|
<input id="end" type="text" data-role="calendarpicker">
|
||||||
<div id="graph">
|
<div id="graph">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue