141 lines
5.3 KiB
HTML
141 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Endurance Test Bench</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<style>
|
|
.status-indicator {
|
|
display: inline-block;
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: 50%;
|
|
}
|
|
.status-unknown {
|
|
background-color: gray;
|
|
}
|
|
.valve-table-wrapper {
|
|
max-height: 500px;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-light text-dark">
|
|
<div class="container-fluid p-4">
|
|
<div class="row mb-4">
|
|
<div class="col-12 d-flex justify-content-between align-items-center flex-wrap">
|
|
<div class="mb-2 mb-md-0">
|
|
<button id="startTest" class="btn btn-outline-success me-2">✅ Start Test</button>
|
|
<button id="stopTest" class="btn btn-outline-danger">❌ Stop Test</button>
|
|
</div>
|
|
<button id="showGraphs" class="btn btn-outline-info">🖥 Show Graphs</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row gx-4">
|
|
<div class="col-lg-9 col-md-12 mb-4">
|
|
<h4 class="fw-bold mb-3">Valve Overview</h4>
|
|
<div class="table-responsive valve-table-wrapper">
|
|
<table class="table table-bordered align-middle text-center">
|
|
<thead class="table-primary text-white">
|
|
<tr>
|
|
<th>Status</th>
|
|
<th>Node ID</th>
|
|
<th>Serial No.</th>
|
|
<th>Setpoint</th>
|
|
<th>Feedback</th>
|
|
<th>Drift</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="valve-table-body">
|
|
<!-- JS will populate this -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-12">
|
|
<h5 class="fw-bold mb-3">System Feedback</h5>
|
|
|
|
<div class="card mb-3">
|
|
<div class="card-header bg-primary text-white fw-bold">Pressure Sensor</div>
|
|
<ul class="list-group list-group-flush" id="pressureList">
|
|
<li class="list-group-item">Pressure 1: 0 bar</li>
|
|
<li class="list-group-item">Pressure 2: 0 bar</li>
|
|
<li class="list-group-item">Pressure 3: 0 bar</li>
|
|
<li class="list-group-item">Pressure 4: 0 bar</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="card mb-3">
|
|
<div class="card-header bg-primary text-white fw-bold">Flowmeter</div>
|
|
<ul class="list-group list-group-flush" id="flowList">
|
|
<li class="list-group-item">Flowmeter 1: 0 L/h</li>
|
|
<li class="list-group-item">Flowmeter 2: 0 L/h</li>
|
|
<li class="list-group-item">Flowmeter 3: 0 L/h</li>
|
|
<li class="list-group-item">Flowmeter 4: 0 L/h</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header bg-primary text-white fw-bold">Pump RPM</div>
|
|
<div class="card-body">
|
|
<h3 class="card-title text-center" id="pumpRPM">0</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function fetchAllData() {
|
|
fetch("/data")
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
const tbody = document.getElementById("valve-table-body");
|
|
tbody.innerHTML = "";
|
|
for (let i = 5; i <= 24; i++) {
|
|
const valve = data.valves?.[i.toString()] || {
|
|
node_id: "--", serial: "--", setpoint: "--",
|
|
feedback: "--", drift: "--", status: "UNKNOWN"
|
|
};
|
|
const row = document.createElement("tr");
|
|
row.innerHTML = `
|
|
<td><span class="status-indicator status-${valve.status?.toLowerCase() || 'unknown'}"></span></td>
|
|
<td>${valve.node_id}</td>
|
|
<td>${valve.serial ?? "--"}</td>
|
|
<td>${valve.setpoint}</td>
|
|
<td>${valve.feedback}</td>
|
|
<td>${valve.drift}</td>
|
|
`;
|
|
tbody.appendChild(row);
|
|
}
|
|
|
|
const flowEls = document.querySelectorAll("#flowList li");
|
|
Object.values(data.flow || {}).forEach((val, i) => {
|
|
if (flowEls[i]) flowEls[i].textContent = `Flowmeter ${i + 1}: ${val} L/h`;
|
|
});
|
|
|
|
const pressureEls = document.querySelectorAll("#pressureList li");
|
|
Object.values(data.pressure || {}).forEach((val, i) => {
|
|
if (pressureEls[i]) pressureEls[i].textContent = `Pressure ${i + 1}: ${val} bar`;
|
|
});
|
|
|
|
document.getElementById("pumpRPM").textContent = data.pump ?? "0";
|
|
})
|
|
.catch(err => console.error("Failed to fetch /data", err));
|
|
}
|
|
|
|
setInterval(fetchAllData, 1000);
|
|
</script>
|
|
|
|
<script>
|
|
document.getElementById("showGraphs").addEventListener("click", () => {
|
|
window.open("/graphs", "_blank");
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|