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

Compare commits

base: hodasemi:5dbc860cc37f597a1cdf25d66d5e746ce2727050
Branches Tags
hodasemi:master
hodasemi:renovate/gradle-8.x
hodasemi:renovate/com.android.tools.build-gradle-8.x
hodasemi:renovate/kotlin-monorepo
hodasemi:renovate/rusqlite-0.x
hodasemi:renovate/reqwest-0.x
hodasemi:flutter
hodasemi:react
..
compare: hodasemi:3758b6eea37d7e26f09fbcbd2b6320a3f7f19fae
Branches Tags
hodasemi:renovate/gradle-8.x
hodasemi:renovate/com.android.tools.build-gradle-8.x
hodasemi:renovate/kotlin-monorepo
hodasemi:renovate/rusqlite-0.x
hodasemi:renovate/reqwest-0.x
hodasemi:master
hodasemi:flutter
hodasemi:react

No commits in common. "5dbc860cc37f597a1cdf25d66d5e746ce2727050" and "3758b6eea37d7e26f09fbcbd2b6320a3f7f19fae" have entirely different histories.
5dbc860cc3 ... 3758b6eea3

2 changed files with 119 additions and 99 deletions
Show stats Expand all files Collapse all files

204
resources/js/main.js
View file

@ -1,70 +1,6 @@
function group_name({ name }) { window.onload = startup;
return (
<tr>
<td>{name}</td>
</tr>
);
}
function table_header() { async function startup() {
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",
{ {
@ -72,10 +8,37 @@ export default async function MyApp() {
} }
); );
let table = document.createElement('table');
table.className = "pure-table pure-table-bordered";
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 device_infos = []; 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++) { for (let i = 0; i < devices.length; i++) {
let device_id = devices[i][0]; let device_id = devices[i][0];
@ -87,6 +50,33 @@ export default async function MyApp() {
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.className = "pure-u-2";
device_name.value = device_descriptor;
device_name.readOnly = true;
let device_name_edit = document.createElement('button');
device_name_edit.className = "pure-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,
@ -97,32 +87,72 @@ export default async function MyApp() {
let device_state = JSON.parse(await device_status_response.json()); let device_state = JSON.parse(await device_status_response.json());
let device_info = { // create device led state column
device_id: device_id, let device_led_state_entry = document.createElement('td');
device_descriptor: device_descriptor, let device_led_state = document.createElement('label');
led_state: device_state["led"], device_led_state.innerText = device_state["led"];
power_state: device_state["power"], device_led_state.className = "pure-u-2";
power_control: devices[i][2] && device_state["power_draw"] < 15, device_led_state.id = "led_" + device_id;
power_draw: device_state["power_draw"], let device_led_on = document.createElement('button');
}; device_led_on.innerText = "On";
device_led_on.className = "pure-button";
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.className = "pure-button";
device_led_off.onclick = async () => { await led_off(device_id) };
device_infos.push(device_info); 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.className = "pure-u-2";
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.className = "pure-button";
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.className = "pure-button";
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);
} }
document.getElementById("main").appendChild(create_table(group_name, device_infos)); row_device.appendChild(device_power_state_entry);
}
}
async function change_name(device_id) { // create device power draw column
let device_name = document.getElementById("name_" + device_id); let device_power_draw_entry = document.createElement('td');
let device_power_draw = document.createElement('label');
device_power_draw.className = "pure-u-2";
device_power_draw.innerText = device_state["power_draw"] + " W";
let device_power_draw_graph_button = document.createElement('button');
device_power_draw_graph_button.className = "pure-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";
if (device_name.readOnly) { device_power_draw_graph_button.appendChild(device_power_draw_graph_button_icon);
device_name.readOnly = false; device_power_draw_entry.appendChild(device_power_draw);
device_name.focus(); device_power_draw_entry.appendChild(device_power_draw_graph_button);
} else { row_device.appendChild(device_power_draw_entry);
device_name.readOnly = true;
await change_device_name(device_id, device_name.value); table.appendChild(row_device);
} }
}
document.getElementById("main").appendChild(table);
} }
async function change_plug_state(plug, module, state) { async function change_plug_state(plug, module, state) {

10
resources/static/index.html
View file

@ -13,15 +13,6 @@
integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous"> integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" 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>
@ -33,7 +24,6 @@
<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">