Skip to content
Snippets Groups Projects
Select Git revision
  • 9a8beb400396ba7f821eda3d2fa86840229cc228
  • main default protected
2 results

index.html

Blame
  • 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>