added some widgets in grid layour (mostly dummies)

webapp/src/climateChartConfig.ts

@@ -40,6 +40,8 @@ export function generateClimateChartConfig(settings: ClimateChartSettings): Char
             }]
         },
         options: {
+            responsive: true,
+            maintainAspectRatio: false,
             legend: {
                 position: "top",
                 align: "end",

webapp/src/config.json

@@ -1,3 +1,5 @@
 {
-  "development": false
+  "development": true,
+  "defaultMinuteSpan": 60,
+  "reloadIntervalSec": 30
 }

webapp/src/main.ts

@@ -3,6 +3,10 @@ import config from "./config.json";
 export {config};
 
 const CHART_DOM_ID: string = "myChart";
+let climateChart: ClimateChart;
+let timer = config.reloadIntervalSec * 1000;
+let timerElement: HTMLElement;
+let lastTimerUpdate = new Date().getTime();
 let rootUrl: string = "";
 
 function createClimateChart() {
@@ -10,7 +14,7 @@ function createClimateChart() {
     if (pathname !== "/") {
         rootUrl += pathname.match(/\/[^?\s]*/)[0];
     }
-    let minutesDisplayed = 60;
+    let minutesDisplayed = config.defaultMinuteSpan;
     const argsStart = window.location.search.search(/\?minute-span=/);
     if (argsStart !== -1) {
         const parsedMins = Number(window.location.search.substring(13));
@@ -21,6 +25,17 @@ function createClimateChart() {
     return new ClimateChart(CHART_DOM_ID, minutesDisplayed);
 }
 
+async function updateChart() {
+    timer = config.reloadIntervalSec * 1000;
+    climateChart.update();
+}
+
+function updateTimer() {
+    timer -= new Date().getTime() - lastTimerUpdate;
+    timerElement.innerText = (timer / 1000).toFixed(2);
+    lastTimerUpdate = new Date().getTime();
+}
+
 const overlay = document.createElement('div');
 overlay.classList.add('overlay', 'center');
 const textContainer = document.createElement('span');
@@ -28,11 +43,13 @@ textContainer.innerText = 'Loading data...';
 overlay.appendChild(textContainer);
 
 document.onreadystatechange = (e) => {
+    timerElement = document.getElementById('timer');
     document.getElementById("root").appendChild(overlay);
-    const climateChart = createClimateChart();
+    climateChart = createClimateChart();
     climateChart.onLoaded(() => {
         overlay.classList.add('hidden');
-        setInterval(() => climateChart.update(), 30 * 1000);
+        setInterval(updateTimer, 10);
+        setInterval(updateChart, config.reloadIntervalSec * 1000);
     });
     climateChart.onErrored((e) => {
         overlay.classList.remove('hidden');