Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Raleway:wght@300&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Raleway', sans-serif;
            background-color: #004c8c; /* Aarhus University blue */
            color: #fff; /* Setting text color to white for better contrast on blue background */
            height: 100vh;
            text-align: center;
        }
 
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
 
        h1, h2 {
            font-family: 'Playfair Display', serif;
            text-align: center;
        }   
 
        h1 {
            font-size: 2.5em;
            margin-bottom: 20px;
        }
 
        h2 {
            font-size: 2em;
            margin: 20px 0;
        }
 
        p {
            background-color: rgba(255, 255, 255, 0.1); /* Slight white background for better readability */
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 10px 15px;
            border-radius: 5px;
            margin: 5px 0;
            width: 300px; /* Fixed width for symmetry */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        #div{
            align-items: center;
            text-align: center;
            display: flex;
            margin-left: 50vh;
        }

        #ecoValues th, #tvocValues th{
            width: 100px;
        }


    </style>
</head>
<body>
    <h1>Measurements</h1>
    <div id="div">
        <table id="ecoValues">
            <thead>
                <th>ECO2</th>
                <th>ECO2 MIN</th>
                <th>ECO2 MAX</th>
            </thead>
            <tbody id="tableBody">

            </tbody>
        </table>
        <table id="tvocValues">
            <thead>
                <th>TVOC</th>
                <th>TVOC MIN</th>
                <th>TVOC MAX</th>
            </thead>
            <tbody id="tableBody2">
                
            </tbody>
        </table>
    </div>
    
</body>
   <script>
        function fetchEco2() {
            const apiUrlEco = '/eco2';

        // Make an HTTP GET request to fetch JSON data for ECO2
        fetch(apiUrlEco)
          .then(response => {
            console.debug(response);
            if (!response.ok) {
              throw new Error('Network response was not ok');
            }
            return response.json();
          })
          .then(data => {
            // Assign the fetched data to variables
            const dataEco = data.eco;
            const dataEcoMin = data.ecoMin;
            const dataEcoMax = data.ecoMax;
            
            // Create a new row and cells for the ECO2 table
            const ecoTable = document.getElementById("tableBody");
            const row = ecoTable.insertRow(-1);

            let c1 = row.insertCell(0);
            let c2 = row.insertCell(1);
            let c3 = row.insertCell(2);

            c1.innerText = dataEco;
            c2.innerText = dataEcoMin;
            c3.innerText = dataEcoMax;
          })
          .catch(error => {
            console.error('Fetch Error:', error);
          });

        }

        function fetchTvoc() {
        const apiUrlTvoc = '/tvoc';

        // Make an HTTP GET request to fetch JSON data for TVOC
        fetch(apiUrlTvoc)
          .then(response => {
            if (!response.ok) {
              throw new Error('Network response was not ok');
            }
            return response.json();
          })
          .then(data => {  
            // Assign the fetched data to variables
            const dataTvoc = data.tvoc;
            const dataTvocMin = data.tvocMin;
            const dataTvocMax = data.tvocMax;

            // Create a new row and cells for the TVOC table
            const tvocTable = document.getElementById("tableBody2");
            var row = tvocTable.insertRow(0);
            


            var td1 = document.createElement('td');
            var td2 = document.createElement('td');
            var td3 = document.createElement('td');
            row.appendChild(td1);
            row.appendChild(td2);
            row.appendChild(td3);

            var textTvoc = document.createTextNode(dataTvoc); 
            var textTvocMin = document.createTextNode(dataTvocMin);
            var textTvocMax = document.createTextNode(dataTvocMax);
            td1.appendChild(textTvoc);
            td2.appendChild(textTvocMin);
            td3.appendChild(textTvocMax);

          })
          .catch(error => {
            console.error('Fetch Error:', error);
          });
        }

        setInterval(fetchEco2, 10000);
        setInterval(fetchTvoc, 10000);
    </script>
</html>
Editor is loading...