tempestas

commit b5febcad8bd1771f646b2bf756e6111a632904b6
parent e5deb10808ce4f11e1d25eba10fdfd06eb8b415a
Author: Chris Bracken <chris@bracken.jp>
Date:   Fri, 12 Nov 2021 22:58:08 -0800

Use fetch rather than XMLHttpRequest

This uses the newer fetch() web API to fetch JSON data from the server,
rather than XMLHttpRequest.

Diffstat:
M
static/tempestas.js
 | 
27
+++++++++++++--------------

1 file changed, 13 insertions(+), 14 deletions(-)
diff --git a/static/tempestas.js b/static/tempestas.js
@@ -1,6 +1,9 @@
 /* Warning: I am not a web developer and have absolutely zero idea what I'm
    doing. This is almost certainly composed entirely of Very Bad Ideas. */
 
+// The JSON API server base URL.
+const API_SERVER = 'http://minerva'
+
 var sensors = [
 	{id: '8558074',  name: 'Back yard', color: 'rgb(75, 192, 192)'},
 	{id: '10714323', name: 'Master bedroom', color: 'rgb(255, 99, 132)'},
@@ -19,20 +22,16 @@ sensors.forEach((sensor, i) => fetchSensorData(sensor.id, charts[1]));
 sensors.forEach((sensor, i) => fetchSensorData(sensor.id, charts[2]));
 
 function fetchSensorData(sensorId, chart) {
-  var xmlhttp = new XMLHttpRequest();
-  var url = '/sensor/reading/' + sensorId + '/' + chart.readingType;
-  xmlhttp.onreadystatechange = function() {
-    if (this.readyState == 4 && this.status == 200) {
-  	  var readings = JSON.parse(this.responseText);
-  		if (readings.length > 0) {
-  			sensorId = readings[0].sensor_id;
-  			sensorReadings[chart.id][sensorId] = readings;
-  		}
-  		updateChart(chart);
-  	}
-  };
-  xmlhttp.open("GET", url, true);
-  xmlhttp.send();
+  var url = API_SERVER + '/sensor/reading/' + sensorId + '/' + chart.readingType;
+  fetch(url).then((response) => {
+    return response.json();
+  }).then((data) => {
+    if (data != null && data.length > 0) {
+      sensorId = data[0].sensor_id;
+      sensorReadings[chart.id][sensorId] = data;
+    }
+    updateChart(chart);
+  });
 }
 
 function updateChart(chart) {