<html>

    <head>
        <title>AQI Reading</title>
        <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
        <!-- CSS only -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
        <style>
            .data-header {
                padding: .5em;
                margin: 0;
            }

            .data-subheader {
                color: darkblue;
                background-color: lightgray;
                padding: .25em;
                margin: 0;
            }

            .data-container {
                background-clip: border-box;
                border: 1px solid darkgray;
                border-radius: .25rem;
            }

            .page-header {
                padding: .25em;
                margin-bottom: .5em;
                border-bottom: 1px solid darkgray;
            }

            .header-row {
                margin-bottom: 1em;
            }

            #alert-banner {
                display: none;
            }
        </style>
    </head>

    <body>
        <div class="page-header bg-light text-center h1">AQI Monitor</div>
        <div id="alert-banner" class="alert alert-danger text-center" role="alert">
            <h4 class="alert-heading">Reader Failed To Start</h4>
            <div id="alert-exception"></div>
        </div>
        <div class="header-row">
            <div class="row justify-content-md-center">
              <div class="col-lg-3">
                <div class="container data-container">
                    <div class="row">
                        <h1 id="aqi-header" class="col data-header text-center" style="color: white; background-color: green"></h1>
                    </div>
                    <div class="row">
                        <h5 class="col data-subheader text-center">EPA PM2.5 AQI</h5>
                    </div>
                </div>
              </div>
              <div class="col-lg-3">
                <div class="container data-container">
                    <div class="row">
                        <h1 id="pm25-header" class="col data-header text-center" style="color: white; background-color: lightblue"></h1>
                    </div>
                    <div class="row">
                        <h5 class="col data-subheader text-center">Raw PM2.5</h5>
                    </div>
                </div>
              </div>

              <div class="col-lg-3">
                <div class="container data-container">
                    <div class="row">
                        <h1 id="pm10-header" class="col data-header text-center" style="color: white; background-color:  lightblue"></h1>
                    </div>
                    <div class="row">
                        <h5 class="col data-subheader text-center">Raw PM10</h5>
                    </div>
                </div>
              </div>
            </div>
        </div>

        <div class="row justify-content-md-center">
             <div class="col-lg-8">
                <div class="card">
                    <canvas id="AQI-line-chart" width="800" height="400"></canvas>
                </div>
             </div>
        </div>

         <script>
            var aqichart = new Chart(document.getElementById("AQI-line-chart"), {
                type: 'line',
                data: {
                    labels : [],
                    datasets : [{
                        data : [],
                        label : "AQI",
                        borderColor: "#3e95cd",
                        fill: false
                    },
                    {
                        data : [],
                        label : "PM2.5",
                        borderColor: "#8e5ea2",
                        fill: false
                    },
                    {
                        data : [],
                        label : "PM10",
                        borderColor: "#c45850",
                        fill: false
                    }]
                }
            });

            function pollForStatus(){
                $.getJSON('api/status', function(data) {
                    if(data.reader_alive === false){
                        $("#alert-banner").show();
                        $("#alert-exception").text(data.reader_exception);
                    }
                    setTimeout(pollForStatus,5000);
                });
            }

            pollForStatus();

            function pollForData(){
                $.getJSON('api/alldata', function(data) {
                    aqichart.data.labels = data.t;

                    aqichart.data.datasets[0].data = data.epa;
                    aqichart.data.datasets[1].data = data.pm25;
                    aqichart.data.datasets[2].data = data.pm10;

                    // re-render the chart
                    aqichart.update();

                    $("#aqi-header").text(data.epa[data.epa.length - 1]);
                    $("#pm25-header").text(data.pm25[data.pm25.length - 1]);
                    $("#pm10-header").text(data.pm10[data.pm10.length - 1]);

                    setTimeout(pollForData,15000);
                });
            }

            pollForData();

        </script>
    </body>

</html>
