261 lines
9.3 KiB
JavaScript
261 lines
9.3 KiB
JavaScript
import { sio } from "./sio.js"
|
|
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(data_graph) {
|
|
// get the container for all the charts and data
|
|
var container_all = document.getElementById('chart_container');
|
|
// empty the container out
|
|
container_all.innerHTML = ""
|
|
|
|
data_graph.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);
|
|
}
|
|
});
|
|
} |