Commit 12/08/2025
This commit is contained in:
109
html/webpage/assets/js/hardwarestatus.js
Normal file
109
html/webpage/assets/js/hardwarestatus.js
Normal file
@@ -0,0 +1,109 @@
|
||||
$(document).ready(function() {
|
||||
const path = window.location.pathname;
|
||||
const ws = new WebSocket('ws://' + window.location.host + path + '/ws');
|
||||
|
||||
ws.onopen = function() {
|
||||
//console.log('WebSocket connection opened');
|
||||
$('#indicatorDisconnected').addClass('visually-hidden');
|
||||
$('#indicatorConnected').removeClass('visually-hidden');
|
||||
setInterval(function() {
|
||||
sendCommand({ command: "getCPUStatus" });
|
||||
sendCommand({ command: "getMemoryStatus" });
|
||||
sendCommand({ command: "getDiskStatus" });
|
||||
sendCommand({ command: "getEthernetStatus" });
|
||||
sendCommand({ command: "getModemStatus" });
|
||||
sendCommand({ command: "getTunnelStatus" });
|
||||
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
ws.onmessage = function(event) {
|
||||
//console.log('WebSocket message received:', event.data);
|
||||
let msg = {};
|
||||
try {
|
||||
msg = JSON.parse(event.data);
|
||||
} catch (e) {
|
||||
console.error('Invalid JSON:', event.data);
|
||||
return;
|
||||
}
|
||||
|
||||
if (msg.reply && msg.reply.length>0 && msg.data && msg.data.length > 0) {
|
||||
switch (msg.reply) {
|
||||
case "getCPUStatus":
|
||||
const cpuData = JSON.parse(msg.data);
|
||||
//console.log('CPU Status Data:', cpuData);
|
||||
$('#cpuUsage').text(cpuData.average ? cpuData.average + '%' : 'N/A');
|
||||
$('#core0Usage').text(cpuData.core0 ? cpuData.core0 + '%' : 'N/A');
|
||||
$('#core1Usage').text(cpuData.core1 ? cpuData.core1 + '%' : 'N/A');
|
||||
$('#core2Usage').text(cpuData.core2 ? cpuData.core2 + '%' : 'N/A');
|
||||
$('#core3Usage').text(cpuData.core3 ? cpuData.core3 + '%' : 'N/A');
|
||||
$('#cpuTemperature').text(cpuData.temperature ? cpuData.temperature + '°C' : 'N/A');
|
||||
break;
|
||||
case "getMemoryStatus":
|
||||
const memoryData = JSON.parse(msg.data);
|
||||
//console.log('Memory Status Data:', memoryData);
|
||||
$('#ramTotal').text(memoryData.total ? memoryData.total : 'N/A');
|
||||
$('#ramUsed').text(memoryData.used ? memoryData.used : 'N/A');
|
||||
$('#ramFree').text(memoryData.free ? memoryData.free : 'N/A');
|
||||
$('#ramFreePercent').text(memoryData.freePercent ? memoryData.freePercent + '%' : 'N/A');
|
||||
break;
|
||||
case "getDiskStatus":
|
||||
const diskData = JSON.parse(msg.data);
|
||||
//console.log('Disk Status Data:', diskData);
|
||||
$('#diskTotal').text(diskData.total ? diskData.total : 'N/A');
|
||||
$('#diskUsed').text(diskData.used ? diskData.used : 'N/A');
|
||||
$('#diskFree').text(diskData.free ? diskData.free : 'N/A');
|
||||
$('#diskFreePercent').text(diskData.freePercent ? diskData.freePercent + '%' : 'N/A');
|
||||
break;
|
||||
case "getEthernetStatus":
|
||||
const ethernetData = JSON.parse(msg.data);
|
||||
//console.log('Ethernet Status Data:', ethernetData);
|
||||
$('#eth0Status').text(ethernetData.status ? ethernetData.status : 'N/A');
|
||||
$('#eth0IP').text(ethernetData.ip ? ethernetData.ip : 'N/A');
|
||||
$('#eth0TXBytes').text(ethernetData.txBytes ? ethernetData.txBytes : 'N/A');
|
||||
$('#eth0RXBytes').text(ethernetData.rxBytes ? ethernetData.rxBytes : 'N/A');
|
||||
$('#eth0TXSpeed').text(ethernetData.txSpeed ? ethernetData.txSpeed : 'N/A');
|
||||
$('#eth0RXSpeed').text(ethernetData.rxSpeed ? ethernetData.rxSpeed : 'N/A');
|
||||
break;
|
||||
case "getModemStatus":
|
||||
const modemData = JSON.parse(msg.data);
|
||||
//console.log('Modem Status Data:', modemData);
|
||||
$('#modemStatus').text(modemData.status ? modemData.status : 'N/A');
|
||||
$('#modemIP').text(modemData.ip ? modemData.ip : 'N/A');
|
||||
$('#modemTXBytes').text(modemData.txBytes ? modemData.txBytes : 'N/A');
|
||||
$('#modemRXBytes').text(modemData.rxBytes ? modemData.rxBytes : 'N/A');
|
||||
$('#modemTXSpeed').text(modemData.txSpeed ? modemData.txSpeed : 'N/A');
|
||||
$('#modemRXSpeed').text(modemData.rxSpeed ? modemData.rxSpeed : 'N/A');
|
||||
break;
|
||||
case "getTunnelStatus":
|
||||
const tunnelData = JSON.parse(msg.data);
|
||||
//console.log('Tunnel Status Data:', tunnelData);
|
||||
$('#tunnelStatus').text(tunnelData.status ? tunnelData.status : 'N/A');
|
||||
$('#tunnelIP').text(tunnelData.ip ? tunnelData.ip : 'N/A');
|
||||
$('#tunnelTXBytes').text(tunnelData.txBytes ? tunnelData.txBytes : 'N/A');
|
||||
$('#tunnelRXBytes').text(tunnelData.rxBytes ? tunnelData.rxBytes : 'N/A');
|
||||
$('#tunnelTXSpeed').text(tunnelData.txSpeed ? tunnelData.txSpeed : 'N/A');
|
||||
$('#tunnelRXSpeed').text(tunnelData.rxSpeed ? tunnelData.rxSpeed : 'N/A');
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = function() {
|
||||
//console.log('WebSocket connection closed');
|
||||
$('#indicatorDisconnected').removeClass('visually-hidden');
|
||||
$('#indicatorConnected').addClass('visually-hidden');
|
||||
};
|
||||
|
||||
ws.onerror = function(error) {
|
||||
console.error('WebSocket error:', error);
|
||||
};
|
||||
|
||||
function sendCommand(command) {
|
||||
if (ws.readyState === WebSocket.OPEN) {
|
||||
ws.send(JSON.stringify(command));
|
||||
} else {
|
||||
console.error('WebSocket is not open. Unable to send command:', command);
|
||||
}
|
||||
}
|
||||
});
|
||||
260
html/webpage/hardwarestatus.html
Normal file
260
html/webpage/hardwarestatus.html
Normal file
@@ -0,0 +1,260 @@
|
||||
<!DOCTYPE html>
|
||||
<html data-bs-theme="light" lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<title>EWS_POC</title>
|
||||
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="assets/css/Navbar-With-Button-icons.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-md bg-body py-3">
|
||||
<div class="container"><a class="navbar-brand d-flex align-items-center" href="#"><span class="bs-icon-sm bs-icon-rounded bs-icon-primary d-flex justify-content-center align-items-center me-2 bs-icon"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-bezier">
|
||||
<path fill-rule="evenodd" d="M0 10.5A1.5 1.5 0 0 1 1.5 9h1A1.5 1.5 0 0 1 4 10.5v1A1.5 1.5 0 0 1 2.5 13h-1A1.5 1.5 0 0 1 0 11.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm10.5.5A1.5 1.5 0 0 1 13.5 9h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM6 4.5A1.5 1.5 0 0 1 7.5 3h1A1.5 1.5 0 0 1 10 4.5v1A1.5 1.5 0 0 1 8.5 7h-1A1.5 1.5 0 0 1 6 5.5zM7.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"></path>
|
||||
<path d="M6 4.5H1.866a1 1 0 1 0 0 1h2.668A6.517 6.517 0 0 0 1.814 9H2.5c.123 0 .244.015.358.043a5.517 5.517 0 0 1 3.185-3.185A1.503 1.503 0 0 1 6 5.5zm3.957 1.358A1.5 1.5 0 0 0 10 5.5v-1h4.134a1 1 0 1 1 0 1h-2.668a6.517 6.517 0 0 1 2.72 3.5H13.5c-.123 0-.243.015-.358.043a5.517 5.517 0 0 0-3.185-3.185z"></path>
|
||||
</svg></span><span>Early Warning System Receiver</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
||||
<div class="collapse navbar-collapse" id="navcol-1">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item"><a class="nav-link" href="pocreceiver.html">POC Receiver</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="prerecordedbroadcast.html">Pre-Recorded Broadcast</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="setting.html">Setting and Content</a></li>
|
||||
<li class="nav-item"><a class="nav-link active" href="#">Hardware Status</a></li>
|
||||
</ul><a class="btn btn-primary" role="button" href="index.html">Logout<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="visually-hidden" id="indicatorDisconnected" style="color: var(--bs-danger);width: 26px;height: 26px;font-weight: bold;">
|
||||
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
|
||||
<path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"></path>
|
||||
</svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="visually-hidden" id="indicatorConnected" style="color: var(--bs-success);width: 26px;height: 26px;font-weight: bold;">
|
||||
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
|
||||
<path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"></path>
|
||||
</svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<h1 class="text-center">Hardware Status</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">CPU (Average)</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">C0</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">C1</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">C2</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">C3</p>
|
||||
</div>
|
||||
<div class="col-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">Temp</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="cpuUsage">0.0</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="core0Usage">0.0</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="core1Usage">0.0</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="core2Usage">0.0</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="core3Usage">0.0</p>
|
||||
</div>
|
||||
<div class="col-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="cpuTemp">0</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">RAM Total</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">Free</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">Used</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">Free %</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="ramTotal">0.0</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="ramFree">0.0</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="ramUsed">0.0</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="ramFreePercent">0.0</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">Disk Total</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">Free</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">Used</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">Free %</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="diskTotal">0.0</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="diskFree">0.0</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="diskUsed">0.0</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="diskFreePercent">0.0</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">ETH 0 Status</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">IP</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">TX Bytes</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">RX Bytes</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">TX Speed</p>
|
||||
</div>
|
||||
<div class="col-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">RX Speed</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="eth0Status">0.0</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="eth0IP">0.0</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="eth0TXBytes">0.0</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="eth0RXBytes">0.0</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="eth0TXSpeed">0.0</p>
|
||||
</div>
|
||||
<div class="col-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="eth0RXSpeed">0</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">Modem Status</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">IP</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">TX Bytes</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">RX Bytes</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">TX Speed</p>
|
||||
</div>
|
||||
<div class="col-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">RX Speed</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="modemStatus">0.0</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="modemIP">0.0</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="modemTXBytes">0.0</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="modemRXBytes">0.0</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="modemTXSpeed">0.0</p>
|
||||
</div>
|
||||
<div class="col-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="modemRXSpeed">0</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">Tunnel Status</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">IP</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">TX Bytes</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">RX Bytes</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">TX Speed</p>
|
||||
</div>
|
||||
<div class="col-2 col-md-2">
|
||||
<p class="fw-bold d-flex h-100 justify-content-center align-items-center">RX Speed</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="tunnelStatus">0.0</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="tunnelIP">0.0</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="tunnelTXBytes">0.0</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="tunnelRXBytes">0.0</p>
|
||||
</div>
|
||||
<div class="col-1 col-sm-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="tunnelTXSpeed">0.0</p>
|
||||
</div>
|
||||
<div class="col-2 col-md-2">
|
||||
<p class="d-flex h-100 justify-content-center align-items-center" id="tunnelRXSpeed">0</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="assets/js/jquery-3.7.1.min.js"></script>
|
||||
<script src="assets/js/hardwarestatus.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -20,6 +20,7 @@
|
||||
<li class="nav-item"><a class="nav-link active" href="#">POC Receiver</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="prerecordedbroadcast.html">Pre-Recorded Broadcast</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="setting.html">Setting and Content</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="hardwarestatus.html">Hardware Status</a></li>
|
||||
</ul><a class="btn btn-primary" role="button" href="index.html">Logout<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="visually-hidden" id="indicatorDisconnected" style="color: var(--bs-danger);width: 26px;height: 26px;font-weight: bold;">
|
||||
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
|
||||
<path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"></path>
|
||||
@@ -35,7 +36,7 @@
|
||||
<h1 class="text-center">Zello Status</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p class="d-flex justify-content-center" id="zelloStatus">Paragraph</p>
|
||||
<p class="d-flex justify-content-center" id="zelloStatus">No Status</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
<li class="nav-item"><a class="nav-link" href="pocreceiver.html">POC Receiver</a></li>
|
||||
<li class="nav-item"><a class="nav-link active" href="#">Pre-Recorded Broadcast</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="setting.html">Setting and Content</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="hardwarestatus.html">Hardware Status</a></li>
|
||||
</ul><a class="btn btn-primary" role="button" href="index.html">Logout<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="visually-hidden" id="indicatorDisconnected" style="color: var(--bs-danger);width: 26px;height: 26px;font-weight: bold;">
|
||||
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
|
||||
<path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"></path>
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
<li class="nav-item"><a class="nav-link" href="pocreceiver.html">POC Receiver</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="prerecordedbroadcast.html">Pre-Recorded Broadcast</a></li>
|
||||
<li class="nav-item"><a class="nav-link active" href="#">Setting and Content</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="hardwarestatus.html">Hardware Status</a></li>
|
||||
</ul><a class="btn btn-primary" role="button" href="index.html">Logout<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="visually-hidden" id="indicatorDisconnected" style="color: var(--bs-danger);width: 26px;height: 26px;font-weight: bold;">
|
||||
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
|
||||
<path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"></path>
|
||||
@@ -168,14 +169,9 @@
|
||||
<div class="row w-100">
|
||||
<h1 class="text-center">Content Upload</h1>
|
||||
</div>
|
||||
<div class="row"><input type="file" id="chosenFile"></div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="progress h-100" id="contentUploadProgress">
|
||||
<div class="progress-bar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">50%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2"><button class="btn btn-primary mt-2 mb-2" id="btnUploadContent" type="button">Upload</button></div>
|
||||
<div class="row w-100">
|
||||
<div class="col-10"><input type="file" id="chosenFile"></div>
|
||||
<div class="col-2"><button class="btn btn-primary" id="btnUploadContent" type="button">Upload</button></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user