HomeServer/resources/js/main.js

266 lines
8.7 KiB
JavaScript
Raw Normal View History

2023-09-21 09:22:03 +00:00
window.onload = startup;
2023-09-21 08:46:23 +00:00
2023-09-21 09:22:03 +00:00
async function startup() {
const response = await fetch(
"/devices",
{
method: "GET"
}
);
2023-09-21 08:46:23 +00:00
2023-09-21 11:32:44 +00:00
let table = document.createElement('table');
let json = JSON.parse(await response.json());
2023-09-21 09:22:03 +00:00
console.log(json);
2023-09-21 11:32:44 +00:00
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];
2023-09-21 11:56:03 +00:00
let device_descriptor;
if (devices[i][1] == null) {
device_descriptor = device_id
} else {
device_descriptor = devices[i][1];
}
2023-09-21 11:32:44 +00:00
let row_device = document.createElement('tr');
2023-09-21 20:20:42 +00:00
// create device name column
2023-09-21 11:32:44 +00:00
let device_name_entry = document.createElement('td');
2023-09-21 11:56:03 +00:00
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');
2023-09-22 05:43:56 +00:00
button_icon.className = "fa fa-pencil-square-o";
2023-09-21 11:32:44 +00:00
device_name_entry.appendChild(device_name);
2023-09-21 11:56:03 +00:00
device_name_edit.appendChild(button_icon);
device_name_entry.appendChild(device_name_edit);
2023-09-21 11:32:44 +00:00
row_device.appendChild(device_name_entry);
2023-09-21 20:20:42 +00:00
// get plug status
2023-09-21 11:32:44 +00:00
const device_status_response = await fetch(
"/plug_state/" + device_id,
{
method: "GET"
}
);
let device_state = JSON.parse(await device_status_response.json());
2023-09-21 20:20:42 +00:00
// create device led state column
2023-09-21 11:32:44 +00:00
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);
2023-09-21 20:20:42 +00:00
// create device power state column
2023-09-21 11:32:44 +00:00
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);
2023-09-22 05:43:56 +00:00
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);
}
2023-09-21 11:32:44 +00:00
row_device.appendChild(device_power_state_entry);
2023-09-21 20:20:42 +00:00
// create device power draw column
2023-09-21 11:32:44 +00:00
let device_power_draw_entry = document.createElement('td');
2023-09-21 20:20:42 +00:00
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');
2023-09-22 04:21:58 +00:00
device_power_draw_graph_button.onclick = async () => { await render_graph(device_id, device_descriptor) };
2023-09-21 20:20:42 +00:00
let device_power_draw_graph_button_icon = document.createElement('i');
2023-09-22 05:43:56 +00:00
device_power_draw_graph_button_icon.className = "fa fa-line-chart";
2023-09-21 20:20:42 +00:00
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);
2023-09-21 11:32:44 +00:00
row_device.appendChild(device_power_draw_entry);
table.appendChild(row_device);
}
}
document.getElementById("main").appendChild(table);
}
2023-09-21 11:56:03 +00:00
async function change_plug_state(plug, module, state) {
2023-09-21 11:32:44 +00:00
const response = await fetch(
2023-09-21 11:56:03 +00:00
"/plug/" + plug + "/" + module + "_" + state,
2023-09-21 11:32:44 +00:00
{
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());
2023-09-21 11:56:03 +00:00
document.getElementById(module + "_" + plug).innerHTML = device_state[module];
2023-09-21 11:32:44 +00:00
}
2023-09-21 11:56:03 +00:00
}
2023-09-21 11:32:44 +00:00
2023-09-21 11:56:03 +00:00
async function led_on(plug) {
await change_plug_state(plug, "led", "on")
2023-09-21 11:32:44 +00:00
}
async function led_off(plug) {
2023-09-21 11:56:03 +00:00
await change_plug_state(plug, "led", "off")
2023-09-21 11:32:44 +00:00
}
2023-09-21 09:22:03 +00:00
2023-09-21 11:32:44 +00:00
async function power_on(plug) {
2023-09-21 11:56:03 +00:00
await change_plug_state(plug, "power", "on")
2023-09-21 09:22:03 +00:00
}
2023-09-21 11:32:44 +00:00
async function power_off(plug) {
2023-09-21 20:20:42 +00:00
await change_plug_state(plug, "power", "off")
2023-09-21 11:56:03 +00:00
}
async function change_device_name(plug, name) {
2023-09-21 11:32:44 +00:00
const response = await fetch(
2023-09-21 11:56:03 +00:00
"/device_name/" + plug + "/" + name,
2023-09-21 11:32:44 +00:00
{
method: "POST"
}
);
2023-09-21 11:56:03 +00:00
if (!response.ok) {
console.error(response.body);
2023-09-21 11:32:44 +00:00
}
2023-09-21 20:20:42 +00:00
}
2023-09-22 04:21:58 +00:00
async function render_graph(plug, name) {
2023-09-21 20:20:42 +00:00
// 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];
2023-09-22 04:21:58 +00:00
x.push(new Date(time * 1000));
2023-09-21 20:20:42 +00:00
y.push(watts);
}
const chart_data = {
labels: x,
datasets: [{
2023-09-22 04:21:58 +00:00
label: name,
2023-09-21 20:20:42 +00:00
data: y,
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
};
new Chart(chart, {
type: 'line',
data: chart_data,
2023-09-22 04:21:58 +00:00
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'
}
2023-09-21 20:20:42 +00:00
});
2023-09-22 04:21:58 +00:00
document.getElementById("main").appendChild(chart);
2023-09-21 11:56:03 +00:00
}