hodasemi/HomeServer
1
0
Fork 0
Code Issues 1 Pull requests 5 Actions Projects Releases Wiki Activity

Start using react

Browse source
This commit is contained in:
hodasemi 2023-10-05 10:09:25 +02:00
parent aff80fa0f7
commit 633245fe36
2 changed files with 100 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

195
resources/js/main.js
View file

@ -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) {

10
resources/static/index.html
View file

@ -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">