Select Git revision
index.html 5.32 KiB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Server Dashboard</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #333;
}
.server-parameters {
margin-bottom: 20px;
}
.device-list {
width: 50%;
margin-top: 20px;
border-collapse: collapse;
}
.device-list th, .device-list td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.device-list th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Server Dashboard</h1>
<div class="server-parameters">
<h2>Server Parameters</h2>
<label for="numberOfMeasurements">Number of Measurements:</label>
<input type="text" id="numberOfMeasurements" placeholder="Enter number of measurements">
<br>
<label for="intervals">Intervals:</label>
<input type="text" id="intervals" placeholder="Enter intervals">
<br>
<label for="delay">Delay:</label>
<input type="text" id="delay" placeholder="Enter delay">
<br>
<button onclick="updateServerConfig()">Update Server Config</button>
</div>
<h2>Device List</h2>
<table class="device-list">
<thead>
<tr>
<th>ID</th>
<th>State</th>
</tr>
</thead>
<tbody id="deviceTableBody">
<!-- Device entries will be added dynamically here -->
</tbody>
</table>
<script>
async function updateServerConfig() {
const numberOfMeasurements = document.getElementById('numberOfMeasurements').value;
const intervals = document.getElementById('intervals').value;
const delay = document.getElementById('delay').value;
try {
const response = await fetch('/set-server-config', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
NumberOfMeasurements: numberOfMeasurements,
Intervals: intervals,
Delay: delay,
}),
});
const data = await response.text();
alert(data);
} catch (error) {
console.error('Error updating server config:', error);
}
}
async function populateDeviceList() {
try {
const response = await fetch('/get-devices');
const data = await response.json();
const deviceTableBody = document.getElementById('deviceTableBody');
deviceTableBody.innerHTML = '';
data.forEach(device => {
const row = document.createElement('tr');
const idCell = document.createElement('td');
const stateCell = document.createElement('td');
idCell.textContent = device.id;
stateCell.textContent = device.state;
// Create dots based on current_cnt and numberOfMeasurements
const numberOfMeasurements = document.getElementById('numberOfMeasurements').value;
const dotContainer = document.createElement('div');
dotContainer.style.display = 'flex';
for (let i = 0; i < numberOfMeasurements; i++) {
const dot = document.createElement('div');
dot.style.width = '10px';
dot.style.height = '10px';
dot.style.borderRadius = '50%';
dot.style.marginRight = '2px';
// Check if the measurement is done (green) or will be done (gray)
if (i < (device.current_cnt || 0)) {
dot.style.backgroundColor = 'green';
} else {
dot.style.backgroundColor = 'gray';
}
dotContainer.appendChild(dot);
}
// Append cells to the row
row.appendChild(idCell);
row.appendChild(stateCell);
deviceTableBody.appendChild(row);
});
} catch (error) {
console.error('Error fetching devices:', error);
}
}
async function handleStillHereMessageAndRefresh(deviceID) {
try {
const response = await fetch(`/stillHere/${deviceID}`, {
method: 'POST',
});
const data = await response.json();
// Refresh the device list after receiving "stillHere" message
await populateDeviceList();
} catch (error) {
console.error('Error handling stillHere message:', error);
}
}
async function handleReadyMessageAndRefresh(deviceID) {
try {
const response = await fetch(`/ready/${deviceID}`, {
method: 'POST',
});
const data = await response.json();
// Refresh the device list after receiving "ready" message
await populateDeviceList();
} catch (error) {
console.error('Error handling ready message:', error);
}
}
// Populate device list on page load
populateDeviceList();
</script>
</body>
</html>