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>