Files
pyasic/tools/web_testbench/public/create_layout.js

261 lines
9.3 KiB
JavaScript

import { generate_graphs } from "./generate_graphs.js"
function pauseMiner(ip, checkbox) {
// if the checkbox is checked we need to pause, unchecked is unpause
if (checkbox.checked){
sio.emit("pause", ip)
} else if (!(checkbox.check)) {
sio.emit("unpause", ip)
}
}
function checkPause(ip, checkbox) {
// make sure the checkbox exists, removes an error
if (checkbox) {
// get status of pause and set checkbox to this status
sio.emit("check_pause", ip, (result) => {
checkbox.checked = result
}
);
}
}
function lightMiner(ip, checkbox) {
// if the checkbox is checked turn the light on, otherwise off
if (checkbox.checked){
sio.emit("light", ip)
} else if (!(checkbox.check)) {
sio.emit("unlight", ip)
}
}
function checkLight(ip, checkbox) {
// make sure the checkbox exists, removes an error
if (checkbox) {
// get status of light and set checkbox to this status
sio.emit("check_light", ip, (result) => {
checkbox.checked = result
}
);
}
}
export function generate_layout(miners) {
// get the container for all the charts and data
var container_all = document.getElementById('chart_container');
// empty the container out
container_all.innerHTML = ""
miners.forEach(function(miner) {
// create main div column for all data to sit inside
var column = document.createElement('div');
column.className = "col border border-dark p-3"
// create IP address header
var header = document.createElement('button');
header.className = "text-center btn btn-primary w-100"
header.onclick = function(){window.open("http://" + miner.IP, '_blank');}
header.innerHTML += miner.IP
// add the header to col first
column.append(header)
// create light button container
var container_light = document.createElement('div');
container_light.className = "form-check form-switch d-flex justify-content-evenly"
// create light button
var light_switch = document.createElement('input');
light_switch.type = "checkbox"
light_switch.id = "light_" + miner.IP
light_switch.className = "form-check-input"
// check if the light is turned on and add click listener
checkLight(miner.IP, light_switch);
light_switch.addEventListener("click", function(){lightMiner(miner.IP, light_switch);}, false);
// add a light label to the button
var label_light = document.createElement("label");
label_light.setAttribute("for", "light_" + miner.IP);
label_light.innerHTML = "Light";
// add the button and label to the container
container_light.append(light_switch)
container_light.append(label_light)
if (miner.hasOwnProperty('text')) {
// create text row
var row_text = document.createElement('div');
row_text.className = "row"
// create text container
var text_container = document.createElement('div')
text_container.className = "col w-100 p-3"
// create text area for data
var text_area = document.createElement('textarea');
text_area.rows = "10"
text_area.className = "form-control"
text_area.style = "font-size: 12px"
text_area.disabled = true
text_area.readonly = true
// add data to the text area
var text = miner.text
text += text_area.innerHTML
text_area.innerHTML = text
// add the text area to the row
row_text.append(text_area)
// create a row for buttons
var row_buttons = document.createElement('div');
row_buttons.className = "row mt-3"
// create pause button container
var container_pause = document.createElement('div');
container_pause.className = "form-check form-switch d-flex justify-content-evenly"
// create the pause button
var pause_switch = document.createElement('input');
pause_switch.type = "checkbox"
pause_switch.id = "pause_" + miner.IP
pause_switch.className = "form-check-input"
// check if it is paused and add the click listener
checkPause(miner.IP, pause_switch);
pause_switch.addEventListener("click", function(){pauseMiner(miner.IP, pause_switch);}, false);
// add a pause label
var label_pause = document.createElement("label");
label_pause.setAttribute("for", "pause_" + miner.IP);
label_pause.innerHTML = "Pause";
// add the label and button to the container
container_pause.append(pause_switch);
container_pause.append(label_pause);
text_container.append(row_text);
// add the container to the row
row_buttons.append(container_pause);
if (miner.Light == "show") {
// add the light container to the row
row_buttons.append(container_light)
}
//add the row to the main column
column.append(text_container);
column.append(row_buttons);
// add the column onto the page
container_all.append(column);
} else {
// get fan rpm
var fan_rpm_1 = miner.Fans.fan_0.RPM;
var fan_rpm_2 = miner.Fans.fan_1.RPM;
// create hr canvas
var hr_canvas = document.createElement('canvas');
// create temp canvas
var temp_canvas = document.createElement('canvas');
// create fan 1 title
var fan_1_title = document.createElement('p');
fan_1_title.innerHTML += "Fan L: " + fan_rpm_1 + " RPM";
fan_1_title.className = "text-center"
// create fan 2 title
var fan_2_title = document.createElement('p');
fan_2_title.innerHTML += "Fan R: " + fan_rpm_2 + " RPM";
fan_2_title.className = "text-center"
// create fan 1 canvas
var fan_1_canvas = document.createElement('canvas');
// create fan 2 canvas
var fan_2_canvas = document.createElement('canvas');
// create row for hr and temp data
var row_hr = document.createElement('div');
row_hr.className = "row"
// create row for titles of fans
var row_fan_title = document.createElement('div');
row_fan_title.className = "row"
// create row for fan graphs
var row_fan = document.createElement('div');
row_fan.className = "row"
// create hr container
var container_col_hr = document.createElement('div');
container_col_hr.className = "col w-50 ps-0 pe-4"
// create temp container
var container_col_temp = document.createElement('div');
container_col_temp.className = "col w-50 ps-0 pe-4"
// create fan title 1 container
var container_col_title_fan_1 = document.createElement('div');
container_col_title_fan_1.className = "col"
// create fan title 2 container
var container_col_title_fan_2 = document.createElement('div');
container_col_title_fan_2.className = "col"
// create fan 1 data container
var container_col_fan_1 = document.createElement('div');
container_col_fan_1.className = "col w-50 ps-3 pe-1"
// create fan 2 data container
var container_col_fan_2 = document.createElement('div');
container_col_fan_2.className = "col w-50 ps-3 pe-1"
// append canvases to the appropriate container columns
container_col_hr.append(hr_canvas)
container_col_temp.append(temp_canvas)
container_col_title_fan_1.append(fan_1_title)
container_col_title_fan_2.append(fan_2_title)
container_col_fan_1.append(fan_1_canvas)
container_col_fan_2.append(fan_2_canvas)
// add container columns to the correct rows
row_hr.append(container_col_hr)
row_hr.append(container_col_temp)
row_fan_title.append(container_col_title_fan_1)
row_fan_title.append(container_col_title_fan_2)
row_fan.append(container_col_fan_1)
row_fan.append(container_col_fan_2)
// append the rows to the columns
column.append(row_hr)
column.append(row_fan_title)
column.append(row_fan)
// create a row for buttons
var row_buttons = document.createElement('div');
row_buttons.className = "row mt-3"
if (miner.Light == "show") {
// add the light container to the row
row_buttons.append(container_light)
}
// add the row to the main column
column.append(row_buttons)
// add the column to the page
container_all.append(column);
// generate the graphs
generate_graphs(miner, hr_canvas, temp_canvas, fan_1_canvas, fan_2_canvas);
}
});
}