{% extends 'layout.html' %}

{% block headline %}{% block title %}Dashboard{% endblock %}{% endblock %}

{% block content %}
<script src="static/d3.js"></script>
<script src="static/plot.js"></script>
<script>
  async function fetchDeviceData(url = "", payload = {}) {
	  const response = await fetch(url, {
		  method: "POST",
		  headers: {
			  "Content-Type": "application/json"
		  },
		  body: JSON.stringify(payload)
	  });
	  return response.json();
  }

  const deviceIdMap = new Map();
  {% for entry in deviceList %}
  deviceIdMap.set({{ entry.deviceId }}, "{{ entry.name }}");
  {% endfor %}
</script>

<main>
	{% if deviceList|length == 0 %}
Hmmm nothing seems to be logged yet
	{% endif %}

	<div id="graphAllIndoor" class="graph"></div>
	<script type="module">
	  const url = "/data/device";
	  const payload = {
		  "devices": [ {% for entry in deviceList %} "{{ entry.deviceId }}", {% endfor %} ],
		  "environment": "indoor",
		  "measurements": ["temperature"]
	  };
	  var data = await fetchDeviceData(url, payload);
	  const div = document.querySelector("#graphAllIndoor");
	  
	  const plot = Plot.plot({
		  title: "Indoor Temperatures",
		  subtitle: "Showing the last 24 hours",
		  y: {
			  grid: true,
			  label: "Temperature (F)"
		  },
		  x: {label: "Timestamp"},
		  color: {legend: true},
		  width: div.getBoundingClientRect().width,
		  marks: [
			  Plot.frame(),
			  Plot.lineY(data, {
				  x: (d) => new Date(d.timeStamp),
				  y: (d) => d.temperature * 9 / 5 + 32,
				  stroke: (d) => deviceIdMap.get(d.deviceId),
				  tip: true
			  })
		  ]
	  });
	  
	  div.append(plot);
	</script>
	
	{% for entry in deviceList %}

 	<h2> {{ entry.name }} | {{ entry.location }} </h2>
	<h3> {{ entry.environment }} | {{ entry.environmentDesc }} </h3>
	<div id="graph{{ entry.deviceId }}" class="graph">
	  <figure id="graphTemperature{{ entry.deviceId }}"></figure>
	  <figure id="graphHumidity{{ entry.deviceId }}"></figure>
	</div>
	<script type="module">
	  const url = "/data/device/{{ entry.deviceId }}";
	  const payload = {
		  "environment": "{{ entry.environment }}",
		  "measurements": ["temperature", "humidity"]
	  };
	  var data = await fetchDeviceData(url, payload);
	  
	  const figTemp = document.querySelector("#graphTemperature{{ entry.deviceId }}");
	  const plotTemp = Plot.plot({
		  y: {
			  axis: "left",
			  grid: true,
			  label: "Temperature (F)"
		  },
		  x: {label: "Timestamp"},
		  width: figTemp.getBoundingClientRect().width,
		  marks: [
			  Plot.frame(),
			  Plot.lineY(data, {
				  x: (d) => new Date(d.timeStamp),
				  y: (d) => d.temperature * 9 / 5 + 32,
				  stroke: "orange",
				  tip: true
			  })
		  ]
	  });
	  figTemp.append(plotTemp);

	  const figHumid = document.querySelector("#graphHumidity{{ entry.deviceId }}");
	  const plotHumid = Plot.plot({
		  y: {
			  axis: "left",
			  grid: true,
			  label: "Humidity (%)"
		  },
		  x: {label: "Timestamp"},
		  width: figHumid.getBoundingClientRect().width,
		  marks: [
			  Plot.frame(),
			  Plot.lineY(data, {
				  x: (d) => new Date(d.timeStamp),
				  y: "humidity",
				  stroke: "steelBlue",
				  tip: true
			  })
		  ]
	  });
	  figHumid.append(plotHumid);
	</script>

	{% endfor %}

</main>
{% endblock %}

{% block footer %} Best by: {{ generatedAt }} {% endblock %}