{% extends "base.html" %}

{% load static %}

{% load crispy_forms_tags %}

{% block head %}

 <!-- <meta http-equiv="refresh" content="20"> -->

 <script src="/static/lib/Highcharts-10.2.1/highcharts.js"></script>
 <script src="/static/lib/Highcharts-10.2.1/modules/data.js"></script>
 <script src="/static/lib/Highcharts-10.2.1/modules/series-label.js"></script>
 <script src="/static/lib/Highcharts-10.2.1/modules/exporting.js"></script>
 <script src="/static/lib/Highcharts-10.2.1/modules/export-data.js"></script>
 <script src="/static/lib/Highcharts-10.2.1/modules/accessibility.js"></script>
 <style type="text/css">
    .highcharts-figure,
    .highcharts-data-table table {
        min-width: 360px;
        max-width: 800px;
        margin: 1em auto;
    }

    .highcharts-data-table table {
        font-family: Verdana, sans-serif;
        border-collapse: collapse;
        border: 1px solid #ebebeb;
        margin: 10px auto;
        text-align: center;
        width: 100%;
        max-width: 500px;
    }

    .highcharts-data-table caption {
        padding: 1em 0;
        font-size: 1.2em;
        color: #555;
    }

    .highcharts-data-table th {
        font-weight: 600;
        padding: 0.5em;
    }

    .highcharts-data-table td,
    .highcharts-data-table th,
    .highcharts-data-table caption {
        padding: 0.5em;
    }

    .highcharts-data-table thead tr,
    .highcharts-data-table tr:nth-child(even) {
        background: #f8f8f8;
    }

    .highcharts-data-table tr:hover {
        background: #f1f7ff;
    }

 </style>


{% endblock head %}

{% block content %}

<div class="breadcrumbs">
    <div class="breadcrumbs-inner">
        <div class="row m-0">
            <div class="col-sm-12">
                <div class="page-header float-left">
                    <div class="page-title">
                        <h1>SUBDIRECCIÓN DE INGENIERÍA BIOMÉDICA</h1>
                        
                    </div>

                </div>
            </div>
            <div class="col-sm-12">
                <div class="page-header float-right">
                    <form method="POST" action="{% url 'sensoresfijosdia' %}" class="mt-2" autocomplete="off">
                        {% csrf_token %}
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <button type="submit" class="btn btn-success">Consultar</button>
                            </div>
                            <div class="input-group-prepend">
                              <label class="input-group-text" for="inputGroupSelect01">Sensor</label>
                            </div>
                            <div class="input-group-prepend">
                            <select class="custom-select" name="sensor" >
                              <option selected>Sensor....</option>
                              {% for sensor in sensores %}
                                <option value="{{ sensor.idsensor }}">{{ sensor.nombre }}</option>
                              {% endfor %}
                            </select>
                            </div>
                            <div class="input-group-prepend">
                                <label class="input-group-text" for="inputGroupSelect01">INICIO</label>
                              </div>
                            <div class="input-group-prepend">
                                <input name="fecha_ini" type="date" placeholder="" class="form-control" value="" required>
                            </div>
                            <div class="input-group-prepend">
                                <label class="input-group-text" for="inputGroupSelect01">FIN</label>
                              </div>
                            <div class="input-group-prepend">
                                <input name="fecha_fin" type="date" placeholder="" class="form-control" value="" required>
                            </div>
                            
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="page-header float-left">
            {% for menu in menus %}
                {% if menu.activo == 'SI' %}
                    <a href="{% url 'sensoresfijosdianew' menu.idsensor %}" class="btn btn-success ">{{ menu.nombre }}</a> 
                {% endif %}
            {% endfor %}
                </div>
            </div>
            
        </div>
    </div>
</div>

 

        <div class="content">
            <div class="animated fadeIn">
                <div class="row">

                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <strong class="card-title">DATOS OBTENIDOS DE SENSORES</strong>
                                
                            </div>
                            <div class="card-body">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <figure class="highcharts-figure">
                                                <div id="containert001"></div>
                                                <p class="highcharts-description">
                                                    TEMPERATURA SENSOR  {{ sensort.nombre }} TOTAL REGISTROS {{ count }}<br>
                                                    <code>Fecha: {{ fecha_ini }} hasta {{ fecha_fin }}<br> Tmin: {{ temmin.temp }} H:{{ temmin.hora }} <br>  Tmax: {{ temmax.temp }} H:{{ temmax.hora }}</code> 
                                                </p>
                                                <hr>
                                                <div id="containert001h"></div>
                                                <p class="highcharts-description">
                                                    HUMEDAD SENSOR  {{ sensort.nombre }} <br>
                                                    <code>Fecha: {{ fecha_ini }} hasta {{ fecha_fin }} <br> Hmin: {{ humemin.hume }} Hora:{{ humemin.hora }} <br>  Hmax: {{ humemax.hume }} Hora:{{ humemax.hora }}</code> 
                                                </p>
                                                <hr>
                                                <div id="containert001dual"></div>
                                                <p class="highcharts-description">
                                                    TEMPERATURA SENSOR  {{ sensort.nombre }} <br>
                                                    <code>Fecha: {{ fecha_ini }} hasta {{ fecha_fin }} <br> Tmin: {{ temmin.temp }} H:{{ temmin.hora }} <br>  Tmax: {{ temmax.temp }} H:{{ temmax.hora }}</code> 
                                                </p>
                                                <hr>
                                                
                                            </figure>
                                            
                                        </div>
                                        <div class="col-sm-12">
                                            <div class="page-header float-right">
                                                <form method="POST" action="{% url 'sensoresrango' %}" class="mt-2" autocomplete="off">
                                                    {% csrf_token %}
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                            <button type="submit" class="btn btn-success">Ver Tabla</button>
                                                        </div>
                                                        
                                                        <div class="input-group-prepend">
                                                            <input name="sensor" type="hidden" placeholder="" class="form-control" value="{{ sensort }}" >
                                                        </div>
                                                       
                                                        <div class="input-group-prepend">
                                                            <input name="fecha_ini" type="hidden" placeholder="" class="form-control" value="{{ fecha_ini }}" >
                                                        </div>
                                                        
                                                        <div class="input-group-prepend">
                                                            <input name="fecha_fin" type="hidden" placeholder="" class="form-control" value="{{ fecha_fin }}" >
                                                        </div>
                                                        
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                        
                                    </div>
                                    
                                    <br>
                                </div>

                            </div>
                        </div>

                        
                    </div>



                </div>
            </div><!-- .animated -->
        </div><!-- .content -->




<script type="application/javascript">
Highcharts.chart('containert001', {
    chart: {
        type: 'spline'
    },
    title: {
        {% if sensort.nombre == NULL %} 
            text: 'TEMPERATURA SENSOR {{ sensort }} de {{ fecha_ini }} hasta {{ fecha_fin }}'
        {% else %}
            text: 'TEMPERATURA SENSOR {{ sensort.nombre }} de {{ fecha_ini }} hasta {{ fecha_fin }}'
        {% endif %} 
        
    },
    subtitle: {
        text: 'Fecha: {{ fecha }} <br> Tmin: {{ temmin.temp }} H:{{ temmin.hora }} & Tmax: {{ temmax.temp }} H:{{ temmax.hora }}'
    },
    xAxis: {
        categories: [
            {% for dato in datos %}

                '{{ dato.fecha|date:'d/m' }}-{{ dato.hora }}',
            {% endfor %}
        ],
        accessibility: {
            description: 'Months of the year'
        }
    },
    yAxis: {
        title: {
            text: 'Temperatura'
        },
        labels: {
            formatter: function () {
                return this.value + '°';
            }
        }
    },
    tooltip: {
        crosshairs: true,
        shared: true
    },
    plotOptions: {
        spline: {
            marker: {
                radius: 4,
                lineColor: '#666666',
                lineWidth: 1
            }
        }
    },
    series: [{
        name: '{{ sensort }}',
        marker: {
            symbol: 'square'
        },
        data: [
            {% for dato in datos %}
                {{ dato.temp }},
            {% endfor %}
        ]

    }]
});



Highcharts.chart('containert001h', {
    chart: {
        type: 'spline'
    },
    title: {
        {% if sensort.nombre == NULL %} 
            text: 'HUMEDAD SENSOR {{ sensort }} de {{ fecha_ini }} hasta {{ fecha_fin }}'
        {% else %}
            text: 'HUMEDAD SENSOR {{ sensort.nombre }} de {{ fecha_ini }} hasta {{ fecha_fin }}'
        {% endif %} 
        
    },
    subtitle: {
        text: 'Fecha: {{ fecha }} <br> Hmin: {{ humemin.hume }} H:{{ humemin.hora }} & Hmax: {{ humemax.hume }} H:{{ humemax.hora }}'
    },
    xAxis: {
        categories: [
            {% for dato in datos %}

                '{{ dato.fecha|date:'d/m' }}-{{ dato.hora }}',
            {% endfor %}
        ],
        accessibility: {
            description: 'Months of the year'
        }
    },
    yAxis: {
        title: {
            text: 'Humedad'
        },
        labels: {
            formatter: function () {
                return this.value + '%';
            }
        }
    },
    tooltip: {
        crosshairs: true,
        shared: true
    },
    plotOptions: {
        spline: {
            marker: {
                radius: 4,
                lineColor: '#666666',
                lineWidth: 1
            }
        }
    },
    series: [{
        name: '{{ sensort }}',
        marker: {
            symbol: 'square'
        },
        data: [
            {% for dato in datos %}
                {{ dato.hume }},
            {% endfor %}
        ]

    } 
]
});


Highcharts.chart('containert001dual', {
    chart: {
        type: 'spline'
    },
    title: {
        {% if sensort.nombre == NULL %} 
            text: 'TEMPERATURA Y HUMEDAD SENSOR {{ sensort }} de {{ fecha_ini }} hasta {{ fecha_fin }}'
        {% else %}
            text: 'TEMPERATURA Y HUMEDAD SENSOR {{ sensort.nombre }} de {{ fecha_ini }} hasta {{ fecha_fin }}'
        {% endif %} 
        
    },
    subtitle: {
        text: 'Fecha: {{ fecha }} <br> Hmin: {{ humemin.hume }} H:{{ humemin.hora }} & Hmax: {{ humemax.hume }} H:{{ humemax.hora }}'
    },
    xAxis: {
        categories: [
            {% for dato in datos %}

                '{{ dato.fecha|date:'d/m' }}-{{ dato.hora }}',
            {% endfor %}
        ],
        accessibility: {
            description: 'Months of the year'
        }
    },
    yAxis: {
        title: {
            text: 'Humedad'
        },
        labels: {
            formatter: function () {
                return this.value + '%|°';
            }
        }
    },
    tooltip: {
        crosshairs: true,
        shared: true
    },
    plotOptions: {
        spline: {
            marker: {
                radius: 4,
                lineColor: '#666666',
                lineWidth: 1
            }
        }
    },
    series: [{
        name: '{{ sensort.nombre }}',
        marker: {
            symbol: 'square'
        },
        data: [
            {% for dato in datos %}
                {{ dato.temp }},
            {% endfor %}
        ]

    } ,
    {
        name: '{{ sensort.nombre }}',
        marker: {
            symbol: 'square'
        },
        data: [
            {% for dato in datos %}
                {{ dato.hume }},
            {% endfor %}
        ]

    } 
]
});
    


</script>






{% endblock content %}

{% block javascript %} 



{% endblock javascript %}