<!Doctype html>
<html lang="en">
    <head>
        <!-- Plugin creado por María Vico Martín en 2ºASIR del IES Punta del verde de Sevilla -->
        <title>Plugin Bermejales</title>
        <%- include('../../partials/_head'); -%>
    </head>
    <body>
        <header>
            <%- include('../../partials/_header'); -%>
        </header>
        <main>
            <div class="col-md-2"> 
                <table class="table table-bordered d" >
                    <thead>
                        <th colspan="4" >
                            <span data-toggle="tooltip" id="author">
                                <center><b>CALIDAD DEL AIRE<a href='https://github.com/MVico21/Pluginaqi' target="_blank" >*</a></b></center>
                            </span>
                        </th>
                        <tr>
                            <td colspan="4"><div align='center'><img src="images/logo_v2.jpg" width="100%" height="40%" ></div></td>
                        </tr>
                        <tr>
                            <td colspan="2" id="city" style="text-align: center; padding-top:20px; white-space: nowrap;"></td>
                            <th colspan="2"> <div id="estado" style="text-align: center; font-size:150%; white-space: nowrap; "> </div> <div id="fecha" style="text-align: center; font-size:95%;"></div> </th>
                        </tr>
                    </thead>
                    <tbody id="myTable">
                        <th colspan="4" style="text-align: center ; font-size:300%; margin:30px; padding:30px;" id="cmax">
                            <!-- Tooltip (pop-up) en formato table con el valor de los indices (leyenda)-->
                            <span id="max" data-toggle="tooltip"></span>
                        </th>
                        <tr>
                            <!-- Tooltip con información de los distintos contaminantes -->
                            <th style="text-align: center; font-size: 92%; white-space: nowrap;">
                                <span data-toggle="tooltip" data-html="true" title="SO<sub>2</sub> puede afectar al sistema respiratario aumentando la propensión
                                de sus infecciones causando tos, secreción mucosa, irritación ocular y agravamiento del asma y la bronquitis crónica. Los ingresos
                                hospitalarios por cardiopatías y la mortalidad aumentan en los días en que los niveles de SO<sub>2</sub> son más elevados. En combinación con
                                el agua supone el principal componente de la lluvia ácida que causa la deforestación.">
                                    SO<sub>2</sub>*
                                </span>
                            </th>
                            <th style="text-align: center; font-size: 92%; white-space: nowrap;"> 
                                <span data-toggle="tooltip" data-html="true" title="La exposición continuada de NO<sub>2</sub> provoca diversas enfermedades de 
                                las vía respiratorias como disminución de la capacidad pulmonar, bronquitis agudas, asma y se considera el culpable de los 
                                procesos alérgicos, sobre todo en niños. Además los síntomas de bronquitis en niños asmáticos aumentan en relación con
                                 dicha exposición.">
                                    NO<sub>2</sub>*
                                </span>
                            </th>
                            <th style="text-align: center; font-size: 92%; white-space: nowrap;"> 
                                <span data-toggle="tooltip" title="La exposición a estas partículas puede afectar tanto a los pulmones
                                como al corazón debido a su pequeño tamaño; contribuye al riesgo de desarrollar enfermedades cardiovasculares y respiratorias, así como 
                                cáncer de pulmón. Afecta en su mayoría a personas con enfermedades cardíacas o pulmonares, niños y adultos mayores.">
                                    PM<sub>10</sub>*
                                </span>
                            </th>
                            <th style="text-align: center; font-size: 92%; white-space: nowrap;"> 
                                <span data-toggle="tooltip" title="El exceso de ozono en el aire puede causar problemas respiratorios, 
                                provocar asma, reducir la función pulmonar y originar enfermedades pulmonares. Los niveles de ozono más 
                                elevados se registran durante los períodos de tiempo soleado.">
                                    O<sub>3</sub>*
                                </span>
                            </th>
                        </tr>
                        <tr>
                            <!-- Pintamos lo contaminantes con su color-->
                            <td id="so2" style="text-align: center;"></td>
                            <td id="no2" style="text-align: center;"> </td>
                            <td id="pm10" style="text-align: center;"> </td>
                            <td id="o3" style="text-align: center;"> </td>
                        </tr>
                        <tr>
                            <!-- Pintamos las fotos con su color -->
                            <td id="dep"  style="padding:0px;"> </td>
                            <td id="mayores" style="padding:0px;"> </td>
                            <td id="family" style="padding:0px;"> </td>
                            <td id="respira" style="padding:0px;"> </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </main>
        <script>
            /*Usamos fetch para hacer una solicitud a la api rest y obtener así los datos*/
            fetch('https://api.waqi.info/feed/@8495/?token=43b146051093d2a179f84802c061870088a7ce91')
                .then(response => response.json())
                .then(json =>{
    
                        // Obtenemos el time de la api rest y separamos este en dia, mes y hora
                        var time = json.data.time.s
                        var dia = time.slice(8,-9)
                        var hora = time.slice(-9,-3)
                        //Tras tener el valor númerico del mes, lo pasamos a su forma alfabetica 
                        var fecha = new Date(time.slice(0,-9))
                        var meses = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];
    
                        // Obtenemos la variable del lugar (estación) de la medición 
                        var city = json.data.city.name
                        var city0 = city.slice(0,-16)
                        var city1 = city.slice(12,-7)
    
                        /*Redondeamos para no tener decimales, y calculamos el valor absoluto del contaminate(indice),
                         para poder compararlos entre ellos y asignamos según este (indice) el color; Haremos esto con cada uno. */
    
                        // SO2
                        var so2 = Math.round(json.data.iaqi.so2.v) 
                        var iso2 = so2 / 20
                        if (iso2 > 0.75 && iso2 <= 1) {
                            var cso2 = '#ffff4d'
                            var eso2 = 'Bad'
                        } else if (iso2 > 1) {
                            var cso2 = 'firebrick'
                            var eso2 = 'Dangerous'
                        } else {
                            var cso2 = '#89d571'
                            var eso2 = 'Good'
                        }
    
                        // NO2
                        var no2 = Math.round(json.data.iaqi.no2.v)
                        var ino2 = no2 / 40
                        if (ino2 > 0.75 && ino2 <= 1) {
                            var cno2 = '#ffff4d'
                            var eno2 = 'Bad'
                        } else if (ino2 > 1) {
                            var cno2 = 'firebrick'
                            var eno2 = 'Dangerous'
                        } else {
                            var cno2 = '#89d571'
                            var eno2 = 'Good'
                        }
                        
                        
                        //PM10
                        var pm10 = Math.round(json.data.iaqi.pm10.v )
                        var ipm10 = pm10 / 50
                        if (ipm10 > 0.7 && ipm10 <= 1) {
                            var cpm10 = '#ffff4d'
                            var epm10 = 'Bad'
                        } else if (ipm10 > 1) {
                            var cpm10 = 'firebrick'
                            var epm10 = 'Dangerous'
                        } else {
                            var cpm10 = '#89d571'
                            var epm10 = 'Good'
                        }
    
                        // O3
                        var o3 = Math.round(json.data.iaqi.o3.v)
                        var io3 = o3 / 100
                        if (io3 > 0.75 && io3 <= 1) {
                            var co3 = '#ffff4d'
                            var eo3 = 'Bad'
                        } else if (io3 > 1) {
                            var co3 = 'firebrick'
                            var eo3 = 'Dangerous'
                        } else {
                            var co3 = '#89d571'
                            var eo3 = 'Good'
                        }
    
    
                        // Calculamos que contaminante tiene un indice de mayor valor
                        var all = [iso2,ino2,ipm10,io3]
                        var max =  Math.max(...all)
    
                        /* Obtenemos la posición del contaminante que tiene mayor valor según su indice para 
                        posteriormente tomar el valor relativo de dicho contaminante*/
                        var n = all.indexOf(max)
                        switch(n) {
                            case 0:
                                var maximo = so2
                                var color = cso2
                                var estado = eso2
                                break;
                            case 1:
                                var maximo = no2
                                var color = cno2
                                var estado = eno2
                                break;
                            case 2:
                                var maximo = pm10
                                var color = cpm10
                                var estado = epm10
                                break;
                            case 3:
                                var maximo = o3
                                var color = co3
                                var estado = eo3
                                break;
                            }
                      
                        // Calculamos según el indice maximo la calidad del aire
                        if (max > 0.75 && max <= 1) {
                            var estado = 'Mala'
                        } else if (max > 1) {
                            var estado = 'Peligro'
                        } else {
                            var estado = 'Buena'
                        }
                        
                        //Pintamos todos los datos obtenidos anteriormente en el html(tabla) por id y pintamos los estilos asignados (colores)
                        document.getElementById("so2").innerHTML = so2;
                        document.getElementById("so2").style.backgroundColor = cso2;
    
                        document.getElementById("no2").innerHTML = no2;
                        document.getElementById("no2").style.backgroundColor = cno2;
    
                        document.getElementById("pm10").innerHTML = pm10;
                        document.getElementById("pm10").style.backgroundColor = cpm10;
    
                        document.getElementById("o3").innerHTML = o3;
                        document.getElementById("o3").style.backgroundColor = co3;
                        
                        document.getElementById("max").innerHTML = maximo + '*';
                        document.getElementById("cmax").style.backgroundColor = color;
                        document.getElementById("estado").innerHTML = estado  ;
    
                        document.getElementById("fecha").innerHTML = dia + ' de ' + meses[fecha.getMonth()] + "<br/>"  + hora  ; 
                        document.getElementById("city").innerHTML = city0 + '<br/>' + ' (' + city1 + ')';
                                    
                        // Seleccionamos los iconos de recomendaciones y sus mensajes según el color del valor máximo
                        if (color=='#89d571') {
                            document.getElementById("dep").innerHTML = '<img src="images/depgre.jpg" width="100%" height="83" title="Buen momento para hacer deporte"/>';
                            document.getElementById("mayores").innerHTML = '<img src="images/mayoresgre.jpg"  width="100%" height="83" title="Buen momento para pasear"/>';
                            document.getElementById("family").innerHTML = '<img src="images/familygre.jpg"   width="100%" height="83" title="Buen momento para salir"/>';
                            document.getElementById("respira").innerHTML = '<img src="images/respiragre.jpg" width="100%" height="83" title="Buen momento para disfrutar del exterior"/>';
                        } else if (color=='#ffff4d') {
                            document.getElementById("dep").innerHTML = '<img src="images/depyel.jpg" width="100%" height="83" title="Practique deporte en zonas verdes"/>';
                            document.getElementById("mayores").innerHTML = '<img src="images/mayoresyel.jpg"  width="100%" height="83" title="Pasee por zonas verdes"/>';
                            document.getElementById("family").innerHTML = '<img src="images/familyyel.jpg"   width="100%" height="83" title="Pasee por zonas arboladas"/>';
                            document.getElementById("respira").innerHTML = '<img src="images/respirayel.jpg" width="100%" height="83" title="Evite la actividad física intensa en el exterior"/>';
                        } else if (color=='firebrick') {
                            document.getElementById("dep").innerHTML = '<img src="images/depred.jpg" width="100%" height="83" title="No practique deporte en el exterior"/>';
                            document.getElementById("mayores").innerHTML = '<img src="images/mayoresred.jpg"  width="100%" height="83" title="No es buen momento para pasear"/>';
                            document.getElementById("family").innerHTML = '<img src="images/familyred.jpg"   width="100%" height="83" title="Mejor quedarse en casa"/>';
                            document.getElementById("respira").innerHTML = '<img src="images/respirared.jpg" width="100%" height="83" title="No salgas si tienes problemas respiratorios"/>';
                        }     
        })
            // Tooltip (pop-up) 
            $(document).ready(function() {
                $("body").tooltip({ selector: '[data-toggle=tooltip]' });
            });

            $('#author').tooltip({ html: true, placement: 'bottom', sanitize: false, title:
            `<font color='blue'> Autora: María Vico Martín </font><br><font size=1>GNU General Public License</font>`
            })

            $('#max').tooltip({ html: true, placement: 'top', sanitize: false, title: `
            <table border='2' >
                <tr> 
                    <td colspan='4'>
                         <b>Valores máximos de la OMS: </b><br>
                             SO<sub>2</sub>: 20 μg/m<sup>3</sup> media en 24h <br>
                             NO<sub>2</sub>: 40 μg/m<sup>3</sup> de media anual <br>
                             PM<sub>10</sub>: 50 μg/m<sup>3</sup> de media en 24h  <br>
                             O<sub>3</sub>: 100 μg/m<sup>3</sup> de media en 8h <br>
                    </td>
                 </tr>
                 <tr>
                     <td>SO<sub>2</sub></td>
                     <td bgcolor='#89d571'>&lt;15</td>
                     <td bgcolor='#ffff4d'>&lt;=20</td>
                     <td bgcolor='#FF0040'>&gt;20</td>
                 </tr>
                 <tr>
                     <td>NO<sub>2</sub></td>
                     <td bgcolor='#89d571'>&lt;30</td>
                     <td bgcolor='#ffff4d'>&lt;=40</td>
                     <td bgcolor='#FF0040'&gt;>40</td>
                 </tr>
                 <tr>
                     <td>PM<sub>10</sub></td>
                     <td bgcolor='#89d571'>&lt;35</td>
                     <td bgcolor='#ffff4d'>&lt;=50</td>
                     <td bgcolor='#FF0040'>&gt;50</td>
                 </tr>
                 <tr>
                     <td>O<sub>3</sub></td>
                     <td bgcolor='#89d571'>&lt;75</td>
                     <td bgcolor='#ffff4d'>&lt;=100</td>
                     <td bgcolor='#FF0040'>&gt;100</td>
                 </tr>
            <table>`
            })

        </script>
    </body>
</html>

        