From 8dfc2a80c73edd2dba0a0517d36f32e8e03d1bf4 Mon Sep 17 00:00:00 2001 From: AuxiliumCDNG Date: Fri, 6 May 2022 11:42:36 +0200 Subject: [PATCH 1/8] Front End: Added delta chart and delta settings Also added a reload button and changed call structure a bit for easier data updating --- pages/components/charts.html | 14 ++++++---- pages/components/modals.html | 2 ++ pages/index.html | 3 +++ public/css/app.css | 6 +++++ public/js/app.js | 35 ++++++++++++++----------- public/js/charts.js | 51 +++++++++++++++++++++++++++++++++++- 6 files changed, 90 insertions(+), 21 deletions(-) diff --git a/pages/components/charts.html b/pages/components/charts.html index be30103..5e4a5aa 100644 --- a/pages/components/charts.html +++ b/pages/components/charts.html @@ -14,14 +14,18 @@

Vergleichsansicht

-

Temperatur

-

-
-

Gewicht

+

Gewichtsdelta

+

+
+ +

Temperatur

+

+
+

Luftfeuchtigkeit

-
\ No newline at end of file +
diff --git a/pages/components/modals.html b/pages/components/modals.html index 65661d8..16db74e 100644 --- a/pages/components/modals.html +++ b/pages/components/modals.html @@ -70,6 +70,8 @@

Zeitraum ändern Experimentelle Funktion< Datum an dem die angezeigten Daten enden sollen: + Zeitspanne für die Berechnung von Delta Werten (in Minuten): +

Warum sehen die Diagramme bei einem Zeitraum größer als 10 Tage anders aus? Die Daten werden, besonders bei großen Datenmengen (über 10 Tage), dadurch reduziert, dass ein Durchschnittswert für jeden Tag gebildet wird. Da es insgesamt 48 gemessene Datensätze pro Tag gibt, wäre das Diagramm ansonsten schwer bis kaum ablesbar. So sind auch bei großen Zeiträumen langfristige Tendenzen ablesbar. Die unreduzierten Daten sind per API abrufbar. diff --git a/pages/index.html b/pages/index.html index 72d7ec4..6452bfe 100644 --- a/pages/index.html +++ b/pages/index.html @@ -32,6 +32,9 @@ edit_calendar + + refresh + {% with weather=weather_data %} {% include './components/weather.html' %} diff --git a/public/css/app.css b/public/css/app.css index 4e3894b..10483fb 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -139,4 +139,10 @@ footer { .display-info { text-align: center; margin-bottom: 0%; +} + +#reload-button { + position: fixed; + bottom: 100px; + right: 23px; } \ No newline at end of file diff --git a/public/js/app.js b/public/js/app.js index cee8fc6..6eb95bc 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -46,7 +46,7 @@ document.addEventListener('DOMContentLoaded', async () => { errorHandler('current-data', 204); } - await updateCurrentData(data); + //await updateCurrentData(data); // Handled by applyDateRange() // Set up background task for keeping the 'measured' date up-to-date setInterval(() => { @@ -144,7 +144,8 @@ function applyDateRange() { reject(); return; } - + + await updateCurrentData(dataObject); await drawCharts(data); resolve(); }); @@ -207,19 +208,23 @@ async function updateCurrentData(data) { * @returns {string} HTML containing the weight delta (in a fitting color) */ function getWeightDelta(data) { - // Get weight from most recent record - var weightCurrent = data[Object.keys(data).length - 1].weight; - // Get weight from the record in the middle of the array (measured approximately 24 hours ago) - // This is done in case there is no record from *exactly* 24 hours ago - var weightStartIndex = Math.floor(((Object.keys(data).length - 1) / 2)) - var weightStart = data[weightStartIndex].weight; - // Calculate the delta of the current and start weight - var weightDelta = weightCurrent - weightStart; - // Limit float to 2 decimal places - weightDelta = Number(weightDelta.toFixed(2)); - // Format HTML string with green color for weight growth and red color for weight decline - var weightDeltaString = weightDelta >= 0 ? `

+${weightDelta}

` : `

${weightDelta}

`; - return weightDeltaString; + let timespan = document.getElementById("delta-span-input").value * 60000; // in ms + if (timespan === undefined || timespan == null || timespan === 0) { + timespan = 86400000; // 24h + } + let i = Object.keys(data).length - 1; + let newer_measured = new Date(data[i].measured); + let newer_weight = data[i].weight; + + while (newer_measured.getTime() - Date.parse(data[i].measured) < timespan && i > 0) { + i--; + } + let older_weight = data[i].weight; + + let weightDelta = newer_weight - older_weight; + weightDelta = weightDelta.toFixed(2); + + return weightDelta >= 0 ? `

+${weightDelta}

` : `

${weightDelta}

`; } /** diff --git a/public/js/charts.js b/public/js/charts.js index 5fc9e44..18ca79e 100644 --- a/public/js/charts.js +++ b/public/js/charts.js @@ -29,6 +29,10 @@ async function drawCharts(data) { } data = data['data']; + let timespan = document.getElementById("delta-span-input").value * 60000; // in ms + if (timespan === undefined || timespan == null || timespan === 0) { + timespan = 86400000; // 24h + } if (data == undefined || data == [] || Object.keys(data) == 0) { errorHandler('charts', 204); @@ -46,6 +50,7 @@ async function drawCharts(data) { await drawCompareChart(data, false); await drawTempChart(data); await drawWeightChart(data); + await drawDeltaChart(data, timespan); await drawHumidityChart(data); document.getElementById('beelogger-charts-loader').classList.add('hide'); @@ -139,7 +144,7 @@ async function drawTempChart(data) { } /** - * Generates and renders the weight chart on the page. + * Generates and renders the weight delta chart on the page. * * @param {Array} data Array containing the data records that the graph should be generated from */ @@ -171,6 +176,50 @@ async function drawWeightChart(data) { }); } +/** + * Generates and renders the weight chart on the page. + * + * @param {Array} data Array containing the data records that the graph should be generated from + * @param {number} timespan The amount of time between records used for delta calculation (in between will be ignored) + */ +async function drawDeltaChart(data, timespan) { + let deltaData = [['Gemessen', 'Delta (g)']]; + + let i = Object.keys(data).length - 1; + while (i !== 0) { + let newer_measured = new Date(data[i].measured); + let newer_weight = data[i].weight; + + while (newer_measured.getTime() - Date.parse(data[i].measured) < timespan && i > 0) { + i--; + } + let older_weight = data[i].weight; + + let delta = newer_weight - older_weight; + + deltaData.push([newer_measured, delta]); + } + + let weightDataTable = google.visualization.arrayToDataTable(deltaData); + let weightChart = new google.visualization.LineChart(document.getElementById('delta_chart')); + + weightChart.draw(weightDataTable, { + height: '100%', + lineWidth: 2, + colors: ['black'], + chartArea: { + left: '10%', + top: '10%', + right: '10%', + width: '100%', + height: '70%' + }, + legend: { + position: 'bottom' + }, + }); +} + /** * Generates and renders the humidity chart on the page. * From e394cee3a99fbfd499496ea606f4da62dbe59871 Mon Sep 17 00:00:00 2001 From: AuxiliumCDNG Date: Fri, 6 May 2022 20:47:07 +0200 Subject: [PATCH 2/8] Front End: Now saving settings in local storage You can choose if you want to save the to date The rest gets saved and restored automatically TODO: Add delta-timespan when ready --- pages/components/modals.html | 6 +++++ public/js/app.js | 46 ++++++++++++++++++++++++------------ public/js/charts.js | 2 +- 3 files changed, 38 insertions(+), 16 deletions(-) diff --git a/pages/components/modals.html b/pages/components/modals.html index 65661d8..de50a57 100644 --- a/pages/components/modals.html +++ b/pages/components/modals.html @@ -70,6 +70,12 @@

Zeitraum ändern Experimentelle Funktion< Datum an dem die angezeigten Daten enden sollen: +

+ +

Warum sehen die Diagramme bei einem Zeitraum größer als 10 Tage anders aus? Die Daten werden, besonders bei großen Datenmengen (über 10 Tage), dadurch reduziert, dass ein Durchschnittswert für jeden Tag gebildet wird. Da es insgesamt 48 gemessene Datensätze pro Tag gibt, wäre das Diagramm ansonsten schwer bis kaum ablesbar. So sind auch bei großen Zeiträumen langfristige Tendenzen ablesbar. Die unreduzierten Daten sind per API abrufbar. diff --git a/public/js/app.js b/public/js/app.js index cee8fc6..aee9256 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -20,17 +20,33 @@ document.addEventListener('DOMContentLoaded', async () => { M.FormSelect.init(document.querySelectorAll('select'), {}); M.Dropdown.init(document.querySelectorAll('.dropdown-trigger'), {}); + let fromDate = window.localStorage.getItem("daterange-from"); + let toDate = window.localStorage.getItem("daterange-to"); + + if (fromDate === "null" || toDate === "null") { + // If no date range is set, use the last 7 days + fromDate = luxon.DateTime.now().minus({ days: 7 }).toJSDate(); + toDate = luxon.DateTime.now().toJSDate(); + } else { + fromDate = luxon.DateTime.fromISO(fromDate).toJSDate(); + toDate = luxon.DateTime.fromISO(toDate).toJSDate(); + } + document.getElementById("daterange-save-to").checked = window.localStorage.getItem("daterange-save-to") == true; + if (window.localStorage.getItem("daterange-save-to") != true) { + toDate = luxon.DateTime.now().toJSDate(); + } + datePickerFrom = M.Datepicker.init(document.getElementById('from-date-input'), { - minDate: luxon.DateTime.now().minus({ years: 1 }).toJSDate(), + //minDate: luxon.DateTime.now().minus({ years: 1 }).toJSDate(), maxDate: luxon.DateTime.now().toJSDate(), - defaultDate: luxon.DateTime.now().minus({ days: 4 }).toJSDate(), + defaultDate: fromDate, setDefaultDate: true }); datePickerTo = M.Datepicker.init(document.getElementById('to-date-input'), { - minDate: luxon.DateTime.now().minus({ years: 1 }).toJSDate(), + //minDate: luxon.DateTime.now().minus({ years: 1 }).toJSDate(), maxDate: luxon.DateTime.now().toJSDate(), - defaultDate: luxon.DateTime.now().toJSDate(), + defaultDate: toDate, setDefaultDate: true }); @@ -67,22 +83,16 @@ document.addEventListener('DOMContentLoaded', async () => { // Load charts when the library is ready await createChartsForDateRange(); - checkbox = document.getElementById('scale-switch'); + let checkbox = document.getElementById('scale-switch'); checkbox.addEventListener('change', async (e) => { - let fromDate = luxon.DateTime.fromJSDate(datePickerFrom.date); - let toDate = luxon.DateTime.fromJSDate(datePickerTo.date); - - // Calculate difference between dates - let diff = fromDate.diff(toDate, 'days'); - diff = Math.abs(diff.toObject().days); - // Redraw chart when the state of the switch changed element = document.getElementById('scale-switch'); + window.localStorage.setItem("separate-weight", element.checked ? '1' : '0'); await drawCompareChart(beeLogger.cachedData['data'], element.checked); }); - checkbox.checked = false; + checkbox.checked = window.localStorage.getItem("separate-weight") == true; // Timeout function in variable to later be able to stop it again // when the window was resized again @@ -114,7 +124,12 @@ function applyDateRange() { var fromDate = luxon.DateTime.fromJSDate(datePickerFrom.date); var toDate = luxon.DateTime.fromJSDate(datePickerTo.date); - + + // TODO: Add delta-timespan when ready + window.localStorage.setItem('daterange-from', fromDate.toISO()); + window.localStorage.setItem('daterange-to', toDate.toISO()); + window.localStorage.setItem('daterange-save-to', document.getElementById("daterange-save-to").checked ? '1' : '0'); + // Calculate difference between dates var diff = fromDate.diff(toDate, 'days'); diff = Math.abs(diff.toObject().days); @@ -144,7 +159,8 @@ function applyDateRange() { reject(); return; } - + + await updateCurrentData(dataObject); await drawCharts(data); resolve(); }); diff --git a/public/js/charts.js b/public/js/charts.js index 5fc9e44..d487c2f 100644 --- a/public/js/charts.js +++ b/public/js/charts.js @@ -43,7 +43,7 @@ async function drawCharts(data) { document.getElementById('charts').classList.remove('hide'); - await drawCompareChart(data, false); + await drawCompareChart(data, window.localStorage.getItem("separate-weight") == true); await drawTempChart(data); await drawWeightChart(data); await drawHumidityChart(data); From a1acbc11beda90dc86ac35fceaaeff010d6a9bda Mon Sep 17 00:00:00 2001 From: Fabian Reinders Date: Fri, 6 May 2022 20:56:58 +0200 Subject: [PATCH 3/8] Front End: Delta Graph: Improve Comments & Naming (Hopefully) improved type-checking logic, naming and some comments for the code. --- public/js/charts.js | 49 ++++++++++++++++++++++++++++++--------------- 1 file changed, 33 insertions(+), 16 deletions(-) diff --git a/public/js/charts.js b/public/js/charts.js index 18ca79e..6b8f43f 100644 --- a/public/js/charts.js +++ b/public/js/charts.js @@ -29,9 +29,16 @@ async function drawCharts(data) { } data = data['data']; - let timespan = document.getElementById("delta-span-input").value * 60000; // in ms - if (timespan === undefined || timespan == null || timespan === 0) { - timespan = 86400000; // 24h + + // Try to get the time interval between records to use for delta graph. + let deltaGraphInterval = document.getElementById("delta-span-input").value; + + // If none or invalid interval is specified, use 24 hours by default (in ms). + if (typeof deltaGraphInterval !== 'string' || deltaGraphInterval === '' || deltaGraphInterval === '0' ) { + deltaGraphInterval = 86400000; + } else { + // Turn input string into number and convert to milliseconds. + deltaGraphInterval = parseInt(deltaGraphInterval) * 60000; } if (data == undefined || data == [] || Object.keys(data) == 0) { @@ -50,7 +57,7 @@ async function drawCharts(data) { await drawCompareChart(data, false); await drawTempChart(data); await drawWeightChart(data); - await drawDeltaChart(data, timespan); + await drawDeltaChart(data, deltaGraphInterval); await drawHumidityChart(data); document.getElementById('beelogger-charts-loader').classList.add('hide'); @@ -177,27 +184,37 @@ async function drawWeightChart(data) { } /** - * Generates and renders the weight chart on the page. + * Generates and renders the weight delta chart on the page. * * @param {Array} data Array containing the data records that the graph should be generated from - * @param {number} timespan The amount of time between records used for delta calculation (in between will be ignored) + * @param {number} interval The amount of time between records used for delta calculation (in between will be ignored) */ -async function drawDeltaChart(data, timespan) { +async function drawDeltaChart(data, interval) { + // Create array to visualize as a chart. let deltaData = [['Gemessen', 'Delta (g)']]; - let i = Object.keys(data).length - 1; - while (i !== 0) { - let newer_measured = new Date(data[i].measured); - let newer_weight = data[i].weight; + // Start with newest record. + let recordIndex = Object.keys(data).length - 1; + + // Go through each record. + while (recordIndex !== 0) { + let newerRecord = data[recordIndex]; + let newerRecordTimestamp = new Date(newerRecord.measured); + let newerWeight = newerRecord.weight; - while (newer_measured.getTime() - Date.parse(data[i].measured) < timespan && i > 0) { - i--; + // Go further in the dataset until the set interval is reached again. + while (newerRecordTimestamp.getTime() - Date.parse(data[recordIndex].measured) < interval && recordIndex > 0) { + recordIndex--; } - let older_weight = data[i].weight; + + // The weight of the record one interval further. + let olderWeight = data[recordIndex].weight; - let delta = newer_weight - older_weight; + // Calculate the difference between the two weights. + let weightDelta = newerWeight - olderWeight; - deltaData.push([newer_measured, delta]); + // Push timestamp and weight data to visualization data array. + deltaData.push([newerRecordTimestamp, weightDelta]); } let weightDataTable = google.visualization.arrayToDataTable(deltaData); From 0f7c81d75863f1bddf069d578350218263a3c2af Mon Sep 17 00:00:00 2001 From: Fabian Reinders Date: Sat, 7 May 2022 11:58:24 +0200 Subject: [PATCH 4/8] Front End: Improve Settings Saving - Unset localStorage items if user opted-out of localStorage using checkbox - Add global variable 'saveInLocalStorage' representing whether or not settings are supposed to be saved in localStorage - Fix issues with seperate scale switch for weight in compare chart --- public/js/app.js | 58 +++++++++++++++++++++++++++++++++++++----------- 1 file changed, 45 insertions(+), 13 deletions(-) diff --git a/public/js/app.js b/public/js/app.js index 225df86..f29d0a1 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -20,19 +20,35 @@ document.addEventListener('DOMContentLoaded', async () => { M.FormSelect.init(document.querySelectorAll('select'), {}); M.Dropdown.init(document.querySelectorAll('.dropdown-trigger'), {}); + // Initialize scale switch for weight graph in compare chart. + document.getElementById('scale-switch').checked = false; + + // Try to get previously set date range from localStorage (if set) let fromDate = window.localStorage.getItem("daterange-from"); let toDate = window.localStorage.getItem("daterange-to"); - if (fromDate === "null" || toDate === "null") { - // If no date range is set, use the last 7 days + // If no date range is set, use the last 7 days + if (fromDate == null || toDate == null) { fromDate = luxon.DateTime.now().minus({ days: 7 }).toJSDate(); toDate = luxon.DateTime.now().toJSDate(); } else { + // Otherwise, parse and use date provided in localStorage fromDate = luxon.DateTime.fromISO(fromDate).toJSDate(); toDate = luxon.DateTime.fromISO(toDate).toJSDate(); } - document.getElementById("daterange-save-to").checked = window.localStorage.getItem("daterange-save-to") == true; - if (window.localStorage.getItem("daterange-save-to") != true) { + + // Whether or not to save the settings (eg. date range) in localStorage + let saveInLocalStorage = window.localStorage.getItem("daterange-save-to") == '1' ? true : false; + // Adjust the checkbox accordingly + document.getElementById("daterange-save-to").checked = saveInLocalStorage; + + // Check if localStorage is supposed to be used for saving settings + if (saveInLocalStorage !== true) { + // Remove values possibly saved previously + window.localStorage.removeItem('separate-weight'); + window.localStorage.removeItem("daterange-from"); + window.localStorage.removeItem('daterange-to'); + // Reset date range to default values (last 7 days) toDate = luxon.DateTime.now().toJSDate(); } @@ -83,16 +99,23 @@ document.addEventListener('DOMContentLoaded', async () => { // Load charts when the library is ready await createChartsForDateRange(); - let checkbox = document.getElementById('scale-switch'); + let scaleSwitch = document.getElementById('scale-switch'); - checkbox.addEventListener('change', async (e) => { + scaleSwitch.addEventListener('change', async (event) => { // Redraw chart when the state of the switch changed - element = document.getElementById('scale-switch'); - window.localStorage.setItem("separate-weight", element.checked ? '1' : '0'); - await drawCompareChart(beeLogger.cachedData['data'], element.checked); + let checkbox = event.target; + + if (saveInLocalStorage) { + window.localStorage.setItem("separate-weight", checkbox.checked ? '1' : '0'); + } + + await drawCompareChart(beeLogger.cachedData['data'], checkbox.checked); }); - checkbox.checked = window.localStorage.getItem("separate-weight") == true; + // If the scale switch is set to 'separate weight' in localStorage, update in DOM + if (saveInLocalStorage) { + scaleSwitch.checked = window.localStorage.getItem("separate-weight") == '1' ? true : false; + } // Timeout function in variable to later be able to stop it again // when the window was resized again @@ -125,10 +148,19 @@ function applyDateRange() { var fromDate = luxon.DateTime.fromJSDate(datePickerFrom.date); var toDate = luxon.DateTime.fromJSDate(datePickerTo.date); + // Save updated values to localStorage (if enabled). // TODO: Add delta-timespan when ready - window.localStorage.setItem('daterange-from', fromDate.toISO()); - window.localStorage.setItem('daterange-to', toDate.toISO()); - window.localStorage.setItem('daterange-save-to', document.getElementById("daterange-save-to").checked ? '1' : '0'); + saveInLocalStorage = document.getElementById("daterange-save-to").checked; + if (saveInLocalStorage) { + window.localStorage.setItem('daterange-from', fromDate.toISO()); + window.localStorage.setItem('daterange-to', toDate.toISO()); + window.localStorage.setItem('daterange-save-to', document.getElementById("daterange-save-to").checked ? '1' : '0'); + } + + // User possibly opted-out of saving settings, make sure 'save-to' is set to false. + if (!saveInLocalStorage) { + window.localStorage.setItem('daterange-save-to', '0'); + } // Calculate difference between dates var diff = fromDate.diff(toDate, 'days'); From 58484ea222e582a99d4c8d4e8ea170bd44e4f2dd Mon Sep 17 00:00:00 2001 From: Fabian Reinders Date: Sat, 7 May 2022 21:09:24 +0200 Subject: [PATCH 5/8] Revert "Front End: Improve Settings Saving" This reverts commit 0f7c81d75863f1bddf069d578350218263a3c2af. --- public/js/app.js | 58 +++++++++++------------------------------------- 1 file changed, 13 insertions(+), 45 deletions(-) diff --git a/public/js/app.js b/public/js/app.js index f29d0a1..225df86 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -20,35 +20,19 @@ document.addEventListener('DOMContentLoaded', async () => { M.FormSelect.init(document.querySelectorAll('select'), {}); M.Dropdown.init(document.querySelectorAll('.dropdown-trigger'), {}); - // Initialize scale switch for weight graph in compare chart. - document.getElementById('scale-switch').checked = false; - - // Try to get previously set date range from localStorage (if set) let fromDate = window.localStorage.getItem("daterange-from"); let toDate = window.localStorage.getItem("daterange-to"); - // If no date range is set, use the last 7 days - if (fromDate == null || toDate == null) { + if (fromDate === "null" || toDate === "null") { + // If no date range is set, use the last 7 days fromDate = luxon.DateTime.now().minus({ days: 7 }).toJSDate(); toDate = luxon.DateTime.now().toJSDate(); } else { - // Otherwise, parse and use date provided in localStorage fromDate = luxon.DateTime.fromISO(fromDate).toJSDate(); toDate = luxon.DateTime.fromISO(toDate).toJSDate(); } - - // Whether or not to save the settings (eg. date range) in localStorage - let saveInLocalStorage = window.localStorage.getItem("daterange-save-to") == '1' ? true : false; - // Adjust the checkbox accordingly - document.getElementById("daterange-save-to").checked = saveInLocalStorage; - - // Check if localStorage is supposed to be used for saving settings - if (saveInLocalStorage !== true) { - // Remove values possibly saved previously - window.localStorage.removeItem('separate-weight'); - window.localStorage.removeItem("daterange-from"); - window.localStorage.removeItem('daterange-to'); - // Reset date range to default values (last 7 days) + document.getElementById("daterange-save-to").checked = window.localStorage.getItem("daterange-save-to") == true; + if (window.localStorage.getItem("daterange-save-to") != true) { toDate = luxon.DateTime.now().toJSDate(); } @@ -99,23 +83,16 @@ document.addEventListener('DOMContentLoaded', async () => { // Load charts when the library is ready await createChartsForDateRange(); - let scaleSwitch = document.getElementById('scale-switch'); + let checkbox = document.getElementById('scale-switch'); - scaleSwitch.addEventListener('change', async (event) => { + checkbox.addEventListener('change', async (e) => { // Redraw chart when the state of the switch changed - let checkbox = event.target; - - if (saveInLocalStorage) { - window.localStorage.setItem("separate-weight", checkbox.checked ? '1' : '0'); - } - - await drawCompareChart(beeLogger.cachedData['data'], checkbox.checked); + element = document.getElementById('scale-switch'); + window.localStorage.setItem("separate-weight", element.checked ? '1' : '0'); + await drawCompareChart(beeLogger.cachedData['data'], element.checked); }); - // If the scale switch is set to 'separate weight' in localStorage, update in DOM - if (saveInLocalStorage) { - scaleSwitch.checked = window.localStorage.getItem("separate-weight") == '1' ? true : false; - } + checkbox.checked = window.localStorage.getItem("separate-weight") == true; // Timeout function in variable to later be able to stop it again // when the window was resized again @@ -148,19 +125,10 @@ function applyDateRange() { var fromDate = luxon.DateTime.fromJSDate(datePickerFrom.date); var toDate = luxon.DateTime.fromJSDate(datePickerTo.date); - // Save updated values to localStorage (if enabled). // TODO: Add delta-timespan when ready - saveInLocalStorage = document.getElementById("daterange-save-to").checked; - if (saveInLocalStorage) { - window.localStorage.setItem('daterange-from', fromDate.toISO()); - window.localStorage.setItem('daterange-to', toDate.toISO()); - window.localStorage.setItem('daterange-save-to', document.getElementById("daterange-save-to").checked ? '1' : '0'); - } - - // User possibly opted-out of saving settings, make sure 'save-to' is set to false. - if (!saveInLocalStorage) { - window.localStorage.setItem('daterange-save-to', '0'); - } + window.localStorage.setItem('daterange-from', fromDate.toISO()); + window.localStorage.setItem('daterange-to', toDate.toISO()); + window.localStorage.setItem('daterange-save-to', document.getElementById("daterange-save-to").checked ? '1' : '0'); // Calculate difference between dates var diff = fromDate.diff(toDate, 'days'); From acc47389e679c5eb4c524f19e96e84f2a734fb7c Mon Sep 17 00:00:00 2001 From: AuxiliumCDNG Date: Sat, 7 May 2022 21:49:11 +0200 Subject: [PATCH 6/8] Front End: Fixed localStorage weirdness when values are not set Works for me in Firefox and Vivaldi --- public/js/app.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/public/js/app.js b/public/js/app.js index 225df86..992d15c 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -22,8 +22,11 @@ document.addEventListener('DOMContentLoaded', async () => { let fromDate = window.localStorage.getItem("daterange-from"); let toDate = window.localStorage.getItem("daterange-to"); + let deltaTimespan = window.localStorage.getItem('delta-timespan'); - if (fromDate === "null" || toDate === "null") { + if (fromDate === null || toDate === null || deltaTimespan === null) { + console.warn("Cleared localStorage because one or more saved values are not initialized."); + window.localStorage.clear(); // If no date range is set, use the last 7 days fromDate = luxon.DateTime.now().minus({ days: 7 }).toJSDate(); toDate = luxon.DateTime.now().toJSDate(); @@ -31,8 +34,9 @@ document.addEventListener('DOMContentLoaded', async () => { fromDate = luxon.DateTime.fromISO(fromDate).toJSDate(); toDate = luxon.DateTime.fromISO(toDate).toJSDate(); } - document.getElementById("daterange-save-to").checked = window.localStorage.getItem("daterange-save-to") == true; - if (window.localStorage.getItem("daterange-save-to") != true) { + // Set daterange save checkbox to setting saved in localStorage + document.getElementById("daterange-save-to").checked = window.localStorage.getItem("daterange-save-to") === "1"; + if (window.localStorage.getItem("daterange-save-to") === "0") { toDate = luxon.DateTime.now().toJSDate(); } @@ -50,6 +54,8 @@ document.addEventListener('DOMContentLoaded', async () => { setDefaultDate: true }); + document.getElementById("delta-span-input").value = window.localStorage.getItem("delta-timespan"); + // Get data from the last 24 hours and populate beeLogger.currentData var data = await beeLogger.getCurrentData() .catch(err => errorHandler('current-data', err)); @@ -125,10 +131,10 @@ function applyDateRange() { var fromDate = luxon.DateTime.fromJSDate(datePickerFrom.date); var toDate = luxon.DateTime.fromJSDate(datePickerTo.date); - // TODO: Add delta-timespan when ready window.localStorage.setItem('daterange-from', fromDate.toISO()); window.localStorage.setItem('daterange-to', toDate.toISO()); window.localStorage.setItem('daterange-save-to', document.getElementById("daterange-save-to").checked ? '1' : '0'); + window.localStorage.setItem('delta-timespan', document.getElementById("delta-span-input").value) // Calculate difference between dates var diff = fromDate.diff(toDate, 'days'); From 1406715fa35f30dacf3a648d40b51d7b4a8ed6eb Mon Sep 17 00:00:00 2001 From: AuxiliumCDNG Date: Sat, 7 May 2022 22:07:03 +0200 Subject: [PATCH 7/8] Chore: Fixed issues with merging frontend-improvements into local-storage --- pages/index.html | 39 +-------------------------------------- public/js/app.js | 2 +- 2 files changed, 2 insertions(+), 39 deletions(-) diff --git a/pages/index.html b/pages/index.html index 1ff134a..b9a6d6e 100644 --- a/pages/index.html +++ b/pages/index.html @@ -11,44 +11,7 @@ {% include './components/sidenav.html' %} {% endwith %} - {% include './components/about-modal.html' %} - {% include './components/modals.html' %} - -

- - edit_calendar - -
- - refresh - - - {% with weather=weather_data %} - {% include './components/weather.html' %} - {% endwith %} - - {% include './components/current-data.html' %} - -
- -
-
-
- Daten werden geladen... -
-
-
-

Die Daten werden aus unserer Datenbank abgerufen. Dies kann einen Moment dauern.

-
-
-
- -
- {% include './components/charts.html' %} -
- - {% include './components/footer.html' %} - + {% include './components/mainpage.html' %} {% endblock %} {% block custom_footer %} diff --git a/public/js/app.js b/public/js/app.js index b03e880..2194b80 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -232,7 +232,7 @@ async function updateCurrentData(data) { * @param {Object} data Data object from the data API * @returns {string} HTML containing the weight delta (in a fitting color) */ -function getWeightDelta(data) { +function getWeightDeltaString(data) { let timespan = document.getElementById("delta-span-input").value * 60000; // in ms if (timespan === undefined || timespan == null || timespan === 0) { timespan = 86400000; // 24h From 1e9886c267e69a9c96831ca6db52d2f5a5bb780b Mon Sep 17 00:00:00 2001 From: AuxiliumCDNG Date: Sat, 7 May 2022 22:11:46 +0200 Subject: [PATCH 8/8] Chore: Fixed broken app.css file --- public/css/app.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/public/css/app.css b/public/css/app.css index ec6b56e..f515392 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -150,8 +150,6 @@ footer { bottom: 100px; right: 23px; } - margin-bottom: 0; -} /* Credit: https://stackoverflow.com/a/55788640/18085012 */ .loader {