X-Git-Url: https://git.toastfreeware.priv.at/chrisu/seepark.git/blobdiff_plain/0851c4f3b1edeae5f12107cd38a2fb241c724244..4d0eef893a499d6078a60b8b703cef05e95c1092:/web/static/seepark_web.js diff --git a/web/static/seepark_web.js b/web/static/seepark_web.js index 816b6a5..5cdeca5 100644 --- a/web/static/seepark_web.js +++ b/web/static/seepark_web.js @@ -1,5 +1,8 @@ var api_base_url_sensors = '/api/1/sensor/type/Wassertemperatur?mode=consolidated&format=c3'; var api_base_url_weather = '/api/1/openweathermap/city/3319578?mode=consolidated&format=c3'; +var api_url_currentair = '/api/1/currentairtemperature'; +var api_url_currentwater = '/api/1/currentwatertemperature'; +var refresh_interval = 5 * 60 * 1000; function dayschart(element, title, days, xtickformat) { var chartdata; @@ -8,18 +11,36 @@ function dayschart(element, title, days, xtickformat) { url: api_base_url_sensors + beginend(days), mimeType: 'json', xs: { - '0316a2193bff': '0316a2193bff_x', - '0316a21383ff': '0316a21383ff_x' + '0416a1ac66ff': '0416a1ac66ff_x', + '0516a207a4ff': '0516a207a4ff_x', + '0416a1bab9ff': '0416a1bab9ff_x', + '0316a2193bff': '0316a2193bff_x' }, names: { - '0316a2193bff': 'Wassertemperatur in 4 m Tiefe', - '0316a21383ff': 'Wassertemperatur in 5 m Tiefe' + '0416a1ac66ff': 'Wassertemperatur 30cm Tiefe', + '0516a207a4ff': 'Wassertemperatur 50cm Tiefe', + '0416a1bab9ff': 'Wassertemperatur 1m Tiefe', + '0316a2193bff': 'Wassertemperatur in 30 cm Tiefe' }, xFormat: '%Y-%m-%d %H:%M:%S', + // https://en.wikipedia.org/wiki/Web_colors colors: { - '0316a2193bff': 'lightblue', - '0316a21383ff': 'darkblue' + '0416a1ac66ff': 'lightskyblue', + '0516a207a4ff': 'royalblue', + '0416a1bab9ff': 'mediumblue', + '0316a2193bff': 'midnightblue' + }, + /* + xSort: false, + order: function (a, b) { + // gets 2 x objects. seems to be a "sort function" for js's sort() + // -1: a before b etc. + // only handle cases that appear in the wild + // console.log("a.id", a.id, "b.id", b.id); + if (a.id == '0416a1ac66ff') {return -1}; + if (a.id == '0416a1bab9ff') {return 1}; } + */ }; } else { chartdata = { @@ -40,7 +61,13 @@ function dayschart(element, title, days, xtickformat) { var chart = c3.generate({ bindto: '#' + element, size: { - width: document.getElementById(element).parentElement.clientWidth * 80 / 100 + width: getwidth(element) + }, + onresized: function () { + chart.resize({ + width: getwidth(element) + }); + // chart.flush(); }, transition: { duration: null @@ -49,11 +76,17 @@ function dayschart(element, title, days, xtickformat) { text: title }, data: chartdata, + point: { + r: 1.5 // default 2.5 + }, axis: { x: { type: 'timeseries', tick: { - format: xtickformat, + format: function (d) { + var strftimeDE = strftime.localizeByIdentifier('de_DE'); + return strftimeDE(xtickformat, new Date(d)); + }, fit: false, multiline: true, // broken? so → rotate: -90 @@ -73,18 +106,16 @@ function dayschart(element, title, days, xtickformat) { }, zoom: { enabled: true, + /* onzoomend: function (domain) { - // UNIX epoch - var start = domain[0].getTime()/1000; - var end = domain[1].getTime()/1000; - var duration = end - start; - // duration is now the diff of the "viewport in seconds" - // FIXME - var days = Math.round(duration / 86400 / 2); + var duration = (domain[1] - domain[0]) / 1000; // duration is now the diff of the "viewport in seconds" + // FIXME? + var days = duration / 86400; if (days > 0) { - loaddays(days); + loaddays(this, element, days); // this = chart } } + */ }, tooltip: { format: { @@ -92,7 +123,7 @@ function dayschart(element, title, days, xtickformat) { name: function (name, ratio, id, index) { var prefix = ''; if (element.substr(0, 7) == 'chart_w') { - var re = /\d m/; + var re = /\d+ ?c?m/; prefix = 'Wasser '; } else { var re = /Luft/; @@ -103,15 +134,24 @@ function dayschart(element, title, days, xtickformat) { value: function (value, ratio, id, index) { return value.toFixed(2) + '°'; }, - title: function (x) { - // TODO: format datetime into something readable - return x; + title: function (datetime) { + // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString + options = { + weekday: 'short', + year: 'numeric', month: 'numeric', day: 'numeric', + hour: 'numeric', minute: 'numeric', second: 'numeric', + timeZone: 'Europe/Vienna', timeZoneName: 'short' + }; + return datetime.toLocaleString('de-AT', options); } } }, grid: { y: { show: true + }, + x: { + show: true } }, regions: [ @@ -121,13 +161,35 @@ function dayschart(element, title, days, xtickformat) { {axis: 'y', start: 100, end: 999, class: 'region-boiling'} ] }); + + // workaround for unrendered dots + setTimeout(function () { chart.flush(); }, 5000); + + // reload data in charts + setInterval( + function() { + loaddays(chart, element, days); + }, + refresh_interval + ); }; -function loaddays(days) { - chart.load({ - url: api_base_url_sensors + beginend(days), - mimeType: 'json' - }); +function loaddays(chart, element, days) { + // TODO: maybe move to top or factor out somehow + if (element.substr(0, 7) == 'chart_w') { + chart.load({ + url: api_base_url_sensors + beginend(days), + mimeType: 'json', + unload: true + }); + } else { + chart.load({ + url: api_base_url_weather + beginend(days), + mimeType: 'json', + unload: true + }); + }; + chart.flush(); } function beginend(days) { @@ -142,12 +204,45 @@ function beginend(days) { return '&begin=' + begin + '&end=' + end; } +function getwidth(element) { + return document.getElementById(element).parentElement.clientWidth * 80 / 100; +} + dayschart('chart_water_1', 'Der See (Tag)', 1, '%H:%M'); dayschart('chart_water_7', 'Der See (Woche)', 7, '%a %d'); -dayschart('chart_water_31', 'Der See (Monat)', 31, 'Woche %V'); -dayschart('chart_water_365', 'Der See (Jahr)', 365, '%b %d'); +dayschart('chart_water_31', 'Der See (Monat)', 31, '%Y-%m-%d'); +dayschart('chart_water_365', 'Der See (Jahr)', 365, '%b %Y'); dayschart('chart_air_1', 'Die Luft (Tag)', 1, '%H:%M'); dayschart('chart_air_7', 'Die Luft (Woche)', 7, '%a %d'); -dayschart('chart_air_31', 'Die Luft (Monat)', 31, 'Woche %V'); -dayschart('chart_air_365', 'Die Luft (Jahr)', 365, '%b %d'); +dayschart('chart_air_31', 'Die Luft (Monat)', 31, '%Y-%m-%d'); +dayschart('chart_air_365', 'Die Luft (Jahr)', 365, '%b %Y'); + +// reload current values +setInterval( + function() { + var airvalue = document.getElementById('currentairvalue'); + var airtime = document.getElementById('currentairtime'); + var watervalue = document.getElementById('currentwatervalue'); + var watertime = document.getElementById('currentwatertime'); + fetch(api_url_currentair) + .then((resp) => resp.json()) + .then(function(data) { + airvalue.innerText = data['value'].toFixed(1); + airtime.innerText = strftime('%Y-%m-%d %H:%M', new Date(data['timestamp'])); + }) + .catch(function(error) { + console.log(error); + }); + fetch(api_url_currentwater) + .then((resp) => resp.json()) + .then(function(data) { + watervalue.innerText = data['value'].toFixed(1); + watertime.innerText = strftime('%Y-%m-%d %H:%M', new Date(data['timestamp'])); + }) + .catch(function(error) { + console.log(error); + }); + }, + refresh_interval +);