157 lines
4.2 KiB
JavaScript
157 lines
4.2 KiB
JavaScript
function $(n) {
|
||
return document.querySelector(n)
|
||
}
|
||
|
||
function $$(n) {
|
||
return document.querySelectorAll(n)
|
||
}
|
||
|
||
function refresh() {
|
||
window.location.reload()
|
||
}
|
||
|
||
function sleep(ms) {
|
||
return new Promise(resolve => setTimeout(resolve, ms))
|
||
}
|
||
|
||
function setProgressBar(id, value, name) {
|
||
$(id).setAttribute('aria-valuenow', value);
|
||
$(id).title = name + ': ' + value + '%'
|
||
const pb = $(id + ' .progress-bar');
|
||
pb.style.width = value + '%';
|
||
pb.classList = 'progress-bar';
|
||
if (value > 95) {
|
||
pb.classList.add('bg-danger');
|
||
} else if (value > 90) {
|
||
pb.classList.add('bg-warning');
|
||
} else {
|
||
pb.classList.add('bg-success');
|
||
}
|
||
}
|
||
|
||
async function* makeTextFileLineIterator(url) {
|
||
const td = new TextDecoder('utf-8');
|
||
const response = await fetch(url);
|
||
const rd = response.body.getReader();
|
||
let { value: chunk, done: readerDone } = await rd.read();
|
||
chunk = chunk ? td.decode(chunk) : '';
|
||
const re = /\r?\n/gm;
|
||
let startIndex = 0;
|
||
let result;
|
||
|
||
for (;;) {
|
||
result = re.exec(chunk);
|
||
if (!result) {
|
||
if (readerDone) {
|
||
break;
|
||
}
|
||
|
||
let remainder = chunk.substr(startIndex);
|
||
({ value: chunk, done: readerDone } = await rd.read());
|
||
chunk = remainder + (chunk ? td.decode(chunk) : '');
|
||
startIndex = re.lastIndex = 0;
|
||
continue;
|
||
}
|
||
|
||
yield chunk.substring(startIndex, result.index);
|
||
startIndex = re.lastIndex;
|
||
}
|
||
|
||
if (startIndex < chunk.length) {
|
||
yield chunk.substr(startIndex);
|
||
}
|
||
|
||
if (el.dataset['reboot'] === "true") {
|
||
location.href = '/cgi-bin/fw-restart.cgi'
|
||
}
|
||
|
||
if ($('form input[type=submit]')) {
|
||
$('form input[type=submit]').disabled = false;
|
||
}
|
||
}
|
||
|
||
async function runCmd(msg) {
|
||
for await (let line of makeTextFileLineIterator('/cgi-bin/j/run.cgi?' + msg + '=' + btoa(el.dataset['cmd']))) {
|
||
const regex = /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g;
|
||
line = line.replace(regex, '');
|
||
el.innerHTML += line + '\n';
|
||
}
|
||
}
|
||
|
||
function heartbeat() {
|
||
fetch('/cgi-bin/j/pulse.cgi')
|
||
.then((response) => response.json())
|
||
.then((json) => {
|
||
if (json.soc_temp !== '') {
|
||
const st = $('#soc-temp')
|
||
st.textContent = json.soc_temp;
|
||
st.classList.add(['text-primary','bg-white','rounded','small']);
|
||
st.title = 'SoC temperature ' + json.soc_temp;
|
||
}
|
||
|
||
if (json.time_now !== '') {
|
||
const d = new Date(json.time_now * 1000);
|
||
$('#time-now').textContent = d.toLocaleString() + ' ' + json.timezone;
|
||
}
|
||
|
||
if (json.mem_used !== '') {
|
||
setProgressBar('#pb-memory', json.mem_used, 'Memory Usage');
|
||
}
|
||
|
||
if (json.overlay_used !== '') {
|
||
setProgressBar('#pb-overlay', json.overlay_used, 'Overlay Usage');
|
||
}
|
||
|
||
if (json.daynight_value !== '-1') {
|
||
$('#daynight_value').textContent = '🌟 ' + json.daynight_value;
|
||
}
|
||
|
||
if (typeof(json.uptime) !== 'undefined' && json.uptime !== '') {
|
||
$('#uptime').textContent = 'Uptime:️ ' + json.uptime;
|
||
}
|
||
})
|
||
.then(setTimeout(heartbeat, 2000));
|
||
}
|
||
|
||
function initAll() {
|
||
$$('form').forEach(el => el.autocomplete = 'off');
|
||
|
||
// For .warning and .danger buttons, ask confirmation on action.
|
||
$$('.btn-danger, .btn-warning, .confirm').forEach(el => {
|
||
// for input, find its parent form and attach listener to it submit event
|
||
if (el.nodeName === "INPUT") {
|
||
while (el.nodeName !== "FORM") el = el.parentNode
|
||
el.addEventListener('submit', ev => (!confirm("Are you sure?")) ? ev.preventDefault() : null)
|
||
} else {
|
||
el.addEventListener('click', ev => (!confirm("Are you sure?")) ? ev.preventDefault() : null)
|
||
}
|
||
});
|
||
|
||
$$('.refresh').forEach(el => el.addEventListener('click', refresh));
|
||
|
||
// open links to external resources in a new window.
|
||
$$('a[href^=http]').forEach(el => el.target = '_blank');
|
||
|
||
// add auto toggle button and value display for range elements.
|
||
$$('input[type=range]').forEach(el => {
|
||
el.addEventListener('input', ev => {
|
||
const id = ev.target.id.replace(/-range/, '');
|
||
$('#' + id + '-show').textContent = ev.target.value;
|
||
$('#' + id).value = ev.target.value;
|
||
})
|
||
});
|
||
|
||
// show password when "show" checkbox is checked
|
||
$$(".password input[type=checkbox]").forEach(el => {
|
||
el.addEventListener('change', ev => {
|
||
const pw = $('#' + ev.target.dataset['for']);
|
||
pw.type = (el.checked) ? 'text' : 'password';
|
||
pw.focus();
|
||
});
|
||
});
|
||
|
||
heartbeat();
|
||
}
|
||
|
||
window.addEventListener('load', initAll);
|