{{define "body_content"}}
{{ if ne .UserName "" }}

{{ index (index .QueryValues "deveui") 0 }}

<link href="static/bulma-calendar/css/bulma-calendar.min.css" rel="stylesheet">
<script src="static/bulma-calendar/js/bulma-calendar.min.js"></script>

<div class="columns">
  <div class="column is-one-third">
    <input type="date" id="daterangepicker" data-type="date" data-display-mode="dialog" data-lang="de" data-is-range="true" data-close-on-select="true" data-date-format="DD.MM.YYYY">
  </div>
</div>

<div>
  <section id="chart">
    <!-- Content ... -->
  </section>
</div>

    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>




<script>
console.log('Initialize Bulma Calendar');
// Initialize all input of type date
var calendars = bulmaCalendar.attach('[type="date"]', {});

// To access to bulmaCalendar instance of an element
var element = document.querySelector('#daterangepicker');
if (element) {
  // bulmaCalendar instance is available as element.bulmaCalendar
  element.bulmaCalendar.on('select', function(datepicker) {
     console.log(datepicker.data.value());
     s = datepicker.data.value();
     // 04.08.2019 - 08.08.2019
     start = s.substring(6,10).concat("-",s.substring(3,5),"-",s.substring(0,2),"T00:00:00Z");
     end = s.substring(19,23).concat("-",s.substring(16,18),"-",s.substring(13,15),"T00:00:00Z");
     console.log("Reload Graph start:"+start);
     console.log("Reload Graph end:"+end);
     reloadGraph(start,end);
  });
}
</script>	

<script>
var chart;

function reloadGraph(start, stop) {
  range = ""
  range = range + "&start=" + start;
  range = range + "&stop=" + stop;
  $.getJSON('https://mini-beieli.ch/metrics?' + sPageURL + range, function(mydata) {
    chart.updateSeries([{
      data: mydata
    }])
  });
}

var urlParams = new URLSearchParams(window.location.search);
var deveui = urlParams.get('deveui');
var start = urlParams.get('start');
var stop = urlParams.get('stop');

range="";
if (start == null) {
  var d = new Date();
  d.setHours(0,0,0,0);
  d.setSeconds(0,0);
  var start = d.toISOString().substring(0,19)+'Z';
  range = range + "&start=" + start;
}

if (stop == null) {
  var d = new Date();
  var stop = d.toISOString().substring(0,19)+'Z';
  range = range + "&stop=" + stop;
}

console.log("Start: "+start);
console.log("Stop: "+stop);

var sPageURL = window.location.search.substring(1);
var label;
if (sPageURL.search("property=t") > -1) {
  label = 'Temperatur';
  minfunc = function(min) { if (min > 0) { return 0 } else { return min } }
  maxfunc = function(max) { return max + 5 }
} else if (sPageURL.search("property=vp") > -1) {
  label = 'Akkuladung';
  minfunc = function(min) { return 0 }
  maxfunc = function(max) { return 100 }
} else if (sPageURL.search("property=w") > -1) {
  label = 'Gewicht';
  minfunc = function(min) { if (min < 1000) { return 0 } else { return min - 1000 } } 
  maxfunc = function(max) { return max + 1000 }
} else if (sPageURL.search("property=h") > -1) {
  label = 'Luftfeuchtigkeit';
  minfunc = function(min) { return 0 } 
  maxfunc = function(max) { return 100 }
} else if (sPageURL.search("property=p") > -1) {
  label = 'Luftdruck';
  minfunc = function(min) { return 900 } 
  maxfunc = function(max) { return 1060 }
} else {
  label = 'Unknown';
}

$.getJSON('https://mini-beieli.ch/metrics?' + sPageURL + range, function(mydata) {
  var options = {
    chart: {
      type: 'line',
      animations: {
        enabled: false
      }
    },
    stroke: {
      curve: 'smooth'
    },
    xaxis: {
      type: "datetime"
    },
    yaxis: {
      min: minfunc,
      max: maxfunc
    },
    tooltip: {
      x: {
        format: 'dd.MM.yyyy HH:mm'
      }
    },
    series: [{
      name: label,
      data: mydata
    }]
  }

  chart = new ApexCharts(document.querySelector("#chart"), options);
  
  chart.render();
});

</script>

{{ else }}
<h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
{{end}}
{{end}}