X-Git-Url: https://git.rvb.name/weathermon.git/blobdiff_plain/7edb3771717d15f7c36d8459fa12b3d6f76d7d9a..e32107a7fe79ce34f3bdf860410a6d5455efdca7:/openwrt-web/meteo/archive.js

diff --git a/openwrt-web/meteo/archive.js b/openwrt-web/meteo/archive.js
new file mode 100644
index 0000000..20aa7aa
--- /dev/null
+++ b/openwrt-web/meteo/archive.js
@@ -0,0 +1,322 @@
+urlbase="/meteo/cgi?";
+
+archive_base="/meteo/archive";
+current_base = "/meteo/graph";
+
+var url = window.location.pathname;
+
+if (url.startsWith(archive_base)) {
+  url = url.substr(archive_base.length);
+}
+
+var params = url.split('/');
+
+var year = params[1];
+var month = params[2];
+var day = params[3];
+var devid = params[4];
+var sensor = params[5];
+var param = params[6];
+
+var properties;
+var years;
+var months;
+var days;
+var sensors;
+
+function composeUrl() {
+  url = window.location.protocol+"//"+window.location.host+archive_base+"/";
+  if (year) {
+    url = url + year;
+    if (month) {
+      url = url + "/" + month;
+      if (day) {
+        url = url + "/" + day;
+        if (devid) {
+          url = url + "/" + devid;
+          if (sensor) {
+            url = url + "/" + sensor;
+            if (param) {
+              url = url + "/" + param;
+            }
+          }
+        }
+      }
+    }
+  }
+  history.pushState({}, null, url);
+}
+
+function selectChange() {
+  new_year = document.getElementById("year").value;
+  new_month = document.getElementById("month").value;
+  new_day = document.getElementById("day").value;
+  sensor_id = document.getElementById("sensor").value.split(".");
+  new_devid = sensor_id[0];
+  new_sensor = sensor_id[1];
+  new_param = sensor_id[2];
+  if (year != new_year) {
+    year = new_year;
+    GetMonths();
+  } else if (month != new_month) {
+    month = new_month;
+    GetDays();
+  } else if (day != new_day) {
+    day = new_day;
+    GetSensors();
+  } else if ((new_devid != devid) || (new_sensor != sensor) || (new_param != param)) {
+    devid = new_devid;
+    sensor = new_sensor;
+    param = new_param;
+    RefreshGraph();
+  }
+  composeUrl();
+}
+
+function processDataset(dataset,devid,sensorname,paramname) {
+  var scale = properties["scale"][devid+"."+sensorname+"."+paramname]
+  if (scale) {
+    var result=[];
+    for (idx in dataset) {
+      newRec = {};
+      newRec.t = dataset[idx].t
+      newRec.y = dataset[idx].y * scale[0];
+      result.push(newRec);
+    }  
+    return result;
+  } else { 
+    return dataset;
+  }
+}
+
+function drawGraph(graphData) {
+
+  document.getElementById("current").href = current_base+"/"+devid + "/" + sensor + "/" + param;
+
+  var div = document.getElementById("chartdiv");
+  var canvas = document.getElementById("chart");
+  
+  canvas.width = div.style.width;
+  canvas.height = div.style.height;
+
+  var ctx = canvas.getContext('2d');
+  var color = Chart.helpers.color;
+
+  var cfg = {
+      type: 'bar',
+      data: {
+        datasets: [
+          {
+            label: properties["names"][devid+"."+sensor+"."+param],
+            backgroundColor: color(properties["colors"][devid+"."+sensor+"."+param]).alpha(0.5).rgbString(),
+            borderColor: properties["colors"][devid+"."+sensor+"."+param],
+            data: processDataset(graphData,devid,sensor,param),
+            type: 'line',
+            pointRadius: 0,
+            fill: true,
+            borderWidth: 2
+          }
+        ]      
+      },
+      options: {
+        animation: {
+          duration: 0,
+        },
+        hover: {
+          animationDuration: 0,
+        },
+        responsiveAnimationDuration: 0,
+        legend: {
+          labels: {
+            fontColor: properties["fonts"]["legend"]["color"],
+            fontSize: properties["fonts"]["legend"]["size"],
+            fontStyle: properties["fonts"]["legend"]["style"],
+          }
+        },
+        scales: {
+          xAxes: [{
+            type: 'time',
+            distribution: 'series',
+            scaleLabel: {
+              fontColor: properties["fonts"]["axes"]["color"],
+              fontSize: properties["fonts"]["axes"]["size"],
+              fontStyle: properties["fonts"]["axes"]["style"],
+            }
+          }],
+          yAxes: [{
+            scaleLabel: {
+              display: true,
+              labelString: properties["names"][sensor+"."+param],
+              fontColor: properties["fonts"]["axes"]["color"],
+              fontSize: properties["fonts"]["axes"]["size"],
+              fontStyle: properties["fonts"]["axes"]["style"],
+            }
+          }]
+        }  
+      }
+
+  }
+  var chart = new Chart(ctx, cfg);
+}
+
+function RefreshGraph() {
+
+  var req = new XMLHttpRequest();
+
+  req.onreadystatechange = function () {
+    if (this.readyState != 4) return; 
+    if (this.status != 200) {
+      setTimeout(RefreshGraph,30000);
+      return;
+    }
+    var graphData = JSON.parse(this.responseText);
+    drawGraph(graphData);
+  };
+  
+  req.open("GET", urlbase+"get-archive/"+year+"/"+month+"/"+day+"/"+devid+"/"+sensor+"/"+param, true);
+  req.send();
+
+}
+
+function GetProperties() {
+  var req = new XMLHttpRequest();
+
+  req.onreadystatechange = function () {
+    if (this.readyState != 4) return; 
+    if (this.status != 200) {
+      setTimeout(GetProperties,30000);
+      return;
+    }
+    properties = JSON.parse(this.responseText);
+    GetYears();
+  };
+  
+  req.open("GET", urlbase+"props", true);
+  req.send();
+
+}
+
+function fillSelector(id,data,value,nameFunc) {
+
+  var element = document.getElementById(id);
+  var html = "";
+  var line;
+  
+  for (i in data) {
+    if (nameFunc) {
+      line = "<option value=\""+data[i]+"\">"+nameFunc(data[i])+"</option>"
+    } else {
+      line = "<option value=\""+data[i]+"\">"+data[i]+"</option>"
+    }
+    html = html + line;
+  } 
+  
+  element.innerHTML = html;
+  if (value) {
+    element.value = value;
+  }
+  return element.value;
+
+}
+
+function GetYears() {
+  var req = new XMLHttpRequest();
+
+  req.onreadystatechange = function () {
+    if (this.readyState != 4) return; 
+    if (this.status != 200) {
+      setTimeout(GetYears,30000);
+      return;
+    }
+    years = JSON.parse(this.responseText);
+    year = fillSelector("year", years, year);
+    composeUrl();
+    if (year) {
+      GetMonths();
+    }
+  };
+  
+  req.open("GET", urlbase+"years", true);
+  req.send();
+  
+}
+
+function GetMonths() {
+  var req = new XMLHttpRequest();
+
+  req.onreadystatechange = function () {
+    if (this.readyState != 4) return; 
+    if (this.status != 200) {
+      setTimeout(GetMonths,30000);
+      return;
+    }
+    months = JSON.parse(this.responseText);
+    month = fillSelector("month", months, month);
+    composeUrl();
+    if (month) {
+      GetDays();
+    }
+  };
+  
+  req.open("GET", urlbase+"months/"+year, true);
+  req.send();
+  
+}
+
+function GetDays() {
+  var req = new XMLHttpRequest();
+
+  req.onreadystatechange = function () {
+    if (this.readyState != 4) return; 
+    if (this.status != 200) {
+      setTimeout(GetDays,30000);
+      return;
+    }
+    days = JSON.parse(this.responseText);
+    day = fillSelector("day", days, day);
+    composeUrl();
+    if (day) {
+      GetSensors();
+    }  
+  };
+  
+  req.open("GET", urlbase+"days/"+year+"/"+month, true);
+  req.send();
+  
+}
+
+function SensorName(id) {
+  return properties["names"][id];
+}
+
+function GetSensors() {
+  var req = new XMLHttpRequest();
+
+  req.onreadystatechange = function () {
+    if (this.readyState != 4) return; 
+    if (this.status != 200) {
+      setTimeout(GetSensors,30000);
+      return;
+    }
+    sensors = JSON.parse(this.responseText);
+    if (devid && sensor && param) {
+      sensor_id = devid+"."+sensor+"."+param;
+    } else {
+      sensor_id = null;
+    }  
+    sensor_id = fillSelector("sensor", sensors, sensor_id, SensorName).split(".");
+    devid = sensor_id[0];
+    sensor = sensor_id[1];
+    param = sensor_id[2];
+    composeUrl();
+    if (sensor_id) {
+      RefreshGraph();
+    }
+  };
+  
+  req.open("GET", urlbase+"sensors/"+year+"/"+month+"/"+day, true);
+  req.send();
+  
+}
+
+setTimeout(GetProperties,100);