{% extends 'data/base.html' %}
{% block title %}Dashboard{% endblock %}
{% block body %}
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        Highcharts.setOptions({
          time: {
            timezone: 'Europe/Paris'
          }
        });
        const chart = Highcharts.chart('container', {
          chart: {
            type: 'spline',
	    zoomType: 'x',
	    panning: true,
	    panKey: 'shift'
          },
          title: {
            text: 'Brightness by time'
          },
          xAxis: {
            title: {
              text: 'Time'
            },
            type: 'datetime',
            dateTimeLabelFormats: {
              second: '%H:%M:%S',
              minute: '%H:%M',
              hour: '%H:%M',
              day: '%e. %b',
              month: '%Y %m',
              year: '%Y',
            },
          },
          yAxis: {
            title: {
              text: 'Brightness'
            }
          },
          series: [
	  {% for d in data %}
	    {
	    name: '{{ d[0].device_id }}',
            data: [
		  {% for item in d %}
			    [Date.parse('{{ item.created }} GMT +0000'), {{ item.data }}],
		  {% endfor %}
	    ]},
	  {% endfor %}
	  ]
        });
        const chart1 = Highcharts.chart('container1', {
          chart: {
	    zoomType: 'x',
	    panning: true,
	    panKey: 'shift'
          },
          title: {
            text: 'Button by time'
          },
          xAxis: {
            title: {
              text: 'Time'
            },
            type: 'datetime',
            dateTimeLabelFormats: {
              second: '%H:%M:%S',
              minute: '%H:%M',
              hour: '%H:%M',
              day: '%e. %b',
              month: '%Y %m',
              year: '%Y',
            },
          },
          yAxis: {
	    min: 0,
	    max: 1,
            title: {
              text: 'Button'
            },
          },
          series: [
	  {% for d in data %}
	    {
	    name: '{{ d[0].device_id }}',
	    type: 'column',
            data: [
		  {% for item in d %}
		    	{% if item.sensor_type == "button" %}
			    [Date.parse('{{ item.created }} GMT +0000'), {{ item.data }}],
			{% endif %}
		  {% endfor %}
	    ]},
	  {% endfor %}
	  ]
        });
      let d = new Date();
      chart.xAxis[0].setExtremes(
	    Date.UTC(d.getFullYear(), d.getMonth(), d.getDate() - 1),
	    Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes()));
      chart.showResetZoom();
      chart1.xAxis[0].setExtremes(
	    Date.UTC(d.getFullYear(), d.getMonth(), d.getDate() - 1),
	    Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes()));
      chart1.showResetZoom();
      });
    </script>
    <div id="container" style="width:50%; height:400px;"></div>
    <div id="container1" style="width:50%; height:400px;"></div>
    {% for id, value in button_count.items() %}
    <h3>Button {{ id }} was pressed: {{ value }} times.</h3>
    {% endfor %}
{% endblock %}