{% extends 'base.html' %}
{% load static %}
{% block title %}Ibertec IT | CPDS{% endblock %}
{% block content %}
{% csrf_token %}
{% if user.is_authenticated %}
{% load custom_tags %}


{% get_all_cpds_temperature_by_group request.user '_temp' 3 as values_temp %}
{% get_all_cpds_temperature_by_group request.user '_hum' 3 as values_hum %}


<p>
	<span> Días Gráfica: <span id="output_slider_temperature_days"></span></span>
	<input type="range" min="1" max="10" value="1" class="slider" id="cambiar_dias_temperatura"></input>
</p>
	<div class="card-deck">
		<div class="card " >	
		<h4 class="card-header">Temperaturas en los CPD`s</b></h4>		
			<div class="card-body">				
				<figure class="highcharts-figure">
					<div id="temperature_chart_temp" ></div>
				</figure>
			</div>
		</div>
		<div class="card " >
		<h4 class="card-header">Humedad en los CPD`s</b></h4>			
			<div class="card-body">
				<figure class="highcharts-figure ">
				<div id="temperature_chart_hum" ></div>
				</figure>
			</div>
		</div>	
	</div>

<script>
	var temperature_chart_temp=Highcharts.chart("temperature_chart_temp", {
		title: {
			text: ''
		},
		credits: {
			enabled: false
		},
		yAxis: {
			title: {
			text: 'ºC'
			}
		},
		xAxis: {
			accessibility: {
			rangeDescription: 'Momento'
			}
		},
		legend: {
			layout: 'vertical',
			align: 'right',
			verticalAlign: 'middle',
		},
		xAxis: {
				type: 'datetime',
				labels: {
					format: '{value:%Y-%m-%d %H:%m:%S}',
					rotation: 10,
					align: 'left'
				}
			},
		series: [
			{% for k, v in values_temp.items %}
			{									
				name: "{{k}}",
				data: {{ v|safe }}
			},
			{% endfor %}
		],
		tooltip: {
				xDateFormat: '%Y-%m-%d %H:%m:%S',
			},
		responsive: {
			rules: [{
			condition: {
				maxWidth: 500
			},
			chartOptions: {
				legend: {
				layout: 'horizontal',
				align: 'center',
				verticalAlign: 'bottom'
				}
			}
			}]
		}
	});
	
	var temperature_chart_hum =Highcharts.chart("temperature_chart_hum", {
		title: {
			text: ''
		},
		credits: {
			enabled: false
		},
		colors: ["#DDDF0D", "#7798BF", "#55BF3B", "#DF5353", "#aaeeee", "#ff0066", "#eeaaee", 
					"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
		yAxis: {
			title: {
			text: '%%'
			}
		},
		xAxis: {
			accessibility: {
			rangeDescription: 'Momento'
			}
		},
		legend: {
			layout: 'vertical',
			align: 'right',
			verticalAlign: 'middle',
		},
		xAxis: {
				type: 'datetime',
				labels: {
					format: '{value:%Y-%m-%d %H:%m:%S}',
					rotation: 10,
					align: 'left'
				}
			},
		series: [
			{% for k, v in values_hum.items %}
			{									
				name: "{{k}}",
				data: {{ v|safe }}
			},
			{% endfor %} 
		],
		tooltip: {
				xDateFormat: '%Y-%m-%d %H:%m:%S',
			},
		responsive: {
			rules: [{
			condition: {
				maxWidth: 500
			},
			chartOptions: {
				legend: {
				layout: 'horizontal',
				align: 'center',
				verticalAlign: 'bottom'
				}
			}
			}]
		}
	});		
</script>
<br>
<div class="card">
	<div class="table-responsive">
		<table class="table table-striped">
			<thead>
				<tr>
					<th scope="col">Nombre</th>
					<th scope="col">Sensor</th>
					<th scope="col"></th>
					<th scope="col">Valor</th>
				</tr>
			</thead>
			<script>
				var values_django = "{{values_temp}}";
			</script>
			
			{% for cpd in object_list %}		
			<script>
				suscribe("{{cpd.device.device_MQTT_ID}}"+"/")
			</script>
					<tr> 
					<td>{{cpd.name}}</td>
						{% for action in cpd.device.action_set.all %}
							{% if action.aplication.name == 'cpds_monitor' %}
								<td>{{action.pin_description}}</td>
								<td>
									<p><a href="{% url 'device' cpd.device.id %}" ><i class="bi bi-cpu"></i></a></p>
								</td>
								{% if action.pin_type_id == 'readdht22' %}
									<td id="temperatureandhumidity">
										<p id="{{cpd.device.device_MQTT_ID}}/readdht22/{{action.pin_number}}">
										{% last_temperature action as temperature%}
										{% last_humidity action as humidity%}
										{{temperature}}
										{{humidity}}
										<script>
											maxTemperatureAlarm ={{cpd.max_temperature_alarm}};
											maxHumidityAlarm ={{cpd.max_humidity_alarm}};										
										</script> 
										</p>
									</td>							
								{% endif  %}
							{% endif %}
						{% endfor %}
					</tr>
			{% endfor %}
		</table>

	</div>
</div>
<br><br>
<script>
var sliderTemperature = document.getElementById("cambiar_dias_temperatura");
var outputTemperature = document.getElementById("output_slider_temperature_days");
outputTemperature.innerHTML = sliderTemperature.value;

sliderTemperature.oninput = function() {
	outputTemperature.innerHTML = this.value;
}

$("#cambiar_dias_temperatura").change(function () {
			
			var days = $(this).val();
			getCpdData(days,temperature_chart_hum,temperature_chart_temp);
});


function getCpdData(days,chart_hum,chart_temp) {
		$.ajax({
			url: '{% url "cpdGetDataAjax" %}',
			data: {
			'days': days,
			'user': "{{request.user}}"
			},
			dataType: 'json',
			success: function (data) {
				i=0;
				//chart_hum.series[0].setData(data["CPD 1"]);
				for (var key in data) {
					chart_temp.series[i].setData([]);
					chart_temp.series[i].setData(data[key]["temp"]);
					chart_hum.series[i].setData([]);
					chart_hum.series[i].setData(data[key]["hum"]);
					i=i+1;					
				}
			}
		});
	};




getCpdData(2,temperature_chart_hum,temperature_chart_temp);

</script>



{% else %}
		<p>No estas autenticado, por favor, inicia sesion.</p>
		<a href="{% url 'login' %}">Iniciar Sesion</a>
{% endif %} 
{% endblock %}