From 2165416f1b1d7d66510ef0f22456c6292a7b0f17 Mon Sep 17 00:00:00 2001 From: AuxiliumCDNG Date: Tue, 3 May 2022 16:09:35 +0200 Subject: [PATCH 01/16] non interruptive loader --- pages/index.html | 13 ++++++++++++- public/css/app.css | 10 ++++++++++ public/js/app.js | 15 ++++++++------- public/js/charts.js | 5 +++-- 4 files changed, 33 insertions(+), 10 deletions(-) diff --git a/pages/index.html b/pages/index.html index 72d7ec4..dec2b67 100644 --- a/pages/index.html +++ b/pages/index.html @@ -29,7 +29,18 @@
- edit_calendar + edit_calendar +
+ +
diff --git a/public/css/app.css b/public/css/app.css index 4e3894b..d2d9686 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -139,4 +139,14 @@ footer { .display-info { text-align: center; margin-bottom: 0%; +} + +/* Credit: https://stackoverflow.com/a/55788640/18085012 */ +.loader { + position: absolute; + margin: auto; + top: 50vh; + bottom: 50vh; + left: 0; + right: 0; } \ No newline at end of file diff --git a/public/js/app.js b/public/js/app.js index cee8fc6..ab17096 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -109,6 +109,7 @@ document.addEventListener('DOMContentLoaded', async () => { * @returns {Promise} Resolves when done re-drawing the charts and rejects on error */ function applyDateRange() { + console.log('Applying date range'); return new Promise(async (resolve, reject) => { document.getElementById('beelogger-charts-error-box').classList.add('hide'); @@ -120,12 +121,13 @@ function applyDateRange() { diff = Math.abs(diff.toObject().days); // Append 'compressed' option when difference is > 10 days - var compressed = diff > 10 ? true : false; + var compressed = diff > 10; fromDate = fromDate.toISODate(); toDate = toDate.toISODate(); - document.getElementById('beelogger-charts-loader').classList.remove('hide'); + document.getElementById('beelogger-daterange-icon').classList.add('hide'); + document.getElementById('beelogger-preloader').classList.add('active'); // Get data for the specified time span var data = await beeLogger.getData(fromDate, toDate, compressed) @@ -156,11 +158,8 @@ function applyDateRange() { */ async function createChartsForDateRange() { var chartsSection = document.getElementById('charts'); - // Hide charts section for the time being - chartsSection.classList.add('hide'); applyDateRange() - .then(() => chartsSection.classList.remove('hide')) // Error already handled by `applyDateRange()` .catch(() => chartsSection.classList.add('hide')); } @@ -301,8 +300,10 @@ function errorHandler(scope, err) { let chartsErrorBox = document.getElementById('beelogger-charts-error-box'); chartsErrorBox.innerHTML = error.title + error.description; chartsErrorBox.classList.remove('hide'); - document.getElementById('charts').classList.add('hide'); - document.getElementById('beelogger-charts-loader').classList.add('hide'); + // document.getElementById('charts').classList.add('hide'); + document.getElementById('beelogger-preloader').classList.remove('active'); + document.getElementById('beelogger-daterange-icon').classList.remove('hide'); + break; // Something mandatory is broken, show error message across the entire screen diff --git a/public/js/charts.js b/public/js/charts.js index 5fc9e44..6b90e59 100644 --- a/public/js/charts.js +++ b/public/js/charts.js @@ -41,14 +41,15 @@ async function drawCharts(data) { infoTextElement.innerHTML = infoText; }); - document.getElementById('charts').classList.remove('hide'); + // document.getElementById('charts').classList.remove('hide'); await drawCompareChart(data, false); await drawTempChart(data); await drawWeightChart(data); await drawHumidityChart(data); - document.getElementById('beelogger-charts-loader').classList.add('hide'); + document.getElementById('beelogger-daterange-icon').classList.remove('hide'); + document.getElementById('beelogger-preloader').classList.remove('active'); } /** From 6da8169523361a3c2d1af701dfd2fa28c8a1c39f Mon Sep 17 00:00:00 2001 From: Fabian Reinders Date: Thu, 5 May 2022 18:47:33 +0200 Subject: [PATCH 02/16] Front End: Round values in frontend #112 Round values on the front end side with a fixed amount of decimal digits using `Number.prototype.toFixed()`. Also adds unit to the weight delta string. Resolves Round values in frontend #112 --- public/js/app.js | 30 +++++++++++++++++------------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/public/js/app.js b/public/js/app.js index cee8fc6..66c8b0b 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -181,20 +181,24 @@ async function updateCurrentData(data) { return; } - // Get the measured timestamp from latest record - var measuredLast = data[Object.keys(data).length - 1].measured; - var measured = luxon.DateTime.fromISO(measuredLast).toRelative({ locale: 'de' }); + // Get the latest record in the dataset. + let latestRecord = data[Object.keys(data).length - 1]; + + // Get values for current data displays and round them to 2 decimals + let temperature = Number(latestRecord.temperature).toFixed(2); + let weight = Number(latestRecord.weight).toFixed(3); + let humidity = Number(latestRecord.humidity).toFixed(2); + let weightDelta = getWeightDeltaString(data); + + // Get date and time of the last record and convert it to a relative string + // Example: 'Measured 2 minutes ago.' + let measured = luxon.DateTime.fromISO(latestRecord.measured).toRelative({ locale: 'de' }); document.querySelector('main').classList.remove('hide'); - document.querySelector('#temperature').innerHTML = data[Object.keys(data).length - 1].temperature + ' °C'; - - var weightCurrent = data[Object.keys(data).length - 1].weight; - var weightDelta = getWeightDelta(data); - var humidityCurrent = data[Object.keys(data).length - 1].humidity; - - document.querySelector('#weight').innerHTML = weightCurrent + ' kg'; + document.querySelector('#temperature').innerHTML = temperature + ' °C'; + document.querySelector('#weight').innerHTML = weight + ' kg'; document.querySelector('#weight-delta').innerHTML = weightDelta; - document.querySelector('#humidity').innerHTML = humidityCurrent + ' %'; + document.querySelector('#humidity').innerHTML = humidity + ' %'; document.querySelector('#updated').innerHTML = measured; document.querySelector('#loading').classList.add('hide'); } @@ -206,7 +210,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) { // 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) @@ -218,7 +222,7 @@ function getWeightDelta(data) { // 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}

`; + var weightDeltaString = weightDelta >= 0 ? `

+${weightDelta} kg

` : `

${weightDelta} kg

`; return weightDeltaString; } From 6f7cfd9b21f69b85e8f169b30747bfa649f33710 Mon Sep 17 00:00:00 2001 From: Fabian Reinders Date: Thu, 5 May 2022 18:51:48 +0200 Subject: [PATCH 03/16] Front End: Allow 3-Digit Weight Delta --- public/js/app.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/public/js/app.js b/public/js/app.js index 66c8b0b..7cd190d 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -212,17 +212,17 @@ async function updateCurrentData(data) { */ function getWeightDeltaString(data) { // Get weight from most recent record - var weightCurrent = data[Object.keys(data).length - 1].weight; + let 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; + let weightStartIndex = Math.floor(((Object.keys(data).length - 1) / 2)) + let weightStart = data[weightStartIndex].weight; // Calculate the delta of the current and start weight - var weightDelta = weightCurrent - weightStart; + let weightDelta = Number(weightCurrent) - Number(weightStart); // Limit float to 2 decimal places - weightDelta = Number(weightDelta.toFixed(2)); + weightDelta = weightDelta.toFixed(3); // Format HTML string with green color for weight growth and red color for weight decline - var weightDeltaString = weightDelta >= 0 ? `

+${weightDelta} kg

` : `

${weightDelta} kg

`; + let weightDeltaString = weightDelta >= 0 ? `

+${weightDelta} kg

` : `

${weightDelta} kg

`; return weightDeltaString; } From f8c10f1d14149f32e3af4bcc83dee9d4d3448246 Mon Sep 17 00:00:00 2001 From: AuxiliumCDNG Date: Thu, 5 May 2022 20:42:42 +0200 Subject: [PATCH 04/16] WIP: Front End: Quality of life improvements * Fixed header * Fixed sidenav on big screens * non disruptive preloader Problems: * Scrollspy (sidebar nav) doesn't work * Janky layout i think tbh xD * Preloader not very noticeable (add "spotlight" effect?) * You can open multiple different modals at once --- pages/components/charts.html | 52 ++++++++++++--------- pages/components/current-data.html | 58 ++++++++++++------------ pages/components/header.html | 22 ++++----- pages/components/mainpage.html | 47 +++++++++++++++++++ pages/components/sidenav.html | 30 +++++++------ pages/index.html | 72 +++--------------------------- public/css/app.css | 33 ++++++++++++-- public/js/app.js | 1 + requirements.txt | 3 +- 9 files changed, 175 insertions(+), 143 deletions(-) create mode 100644 pages/components/mainpage.html diff --git a/pages/components/charts.html b/pages/components/charts.html index be30103..94d42af 100644 --- a/pages/components/charts.html +++ b/pages/components/charts.html @@ -1,27 +1,35 @@ -

Vergleichsansicht

-

-
-
-
+
+

Vergleichsansicht

+

+
+
+
-
-
- -
+
+
+ +
+
-

Temperatur

-

-
+
+

Gewicht

+

+
+
-

Gewicht

-

-
+
+

Temperatur

+

+
+
-

Luftfeuchtigkeit

-

-
\ No newline at end of file +
+

Luftfeuchtigkeit

+

+
+
diff --git a/pages/components/current-data.html b/pages/components/current-data.html index 798a674..f3391b0 100644 --- a/pages/components/current-data.html +++ b/pages/components/current-data.html @@ -1,39 +1,41 @@ -
-

Aktuell

- -
+
+
+

Aktuell

-
-
-
-
- thermostat - Temperatur -

Loading...

+
+ +
+
+
+
+ thermostat + Temperatur +

Loading...

+
-
-
-
-
- monitor_weight - Gewicht -

Loading...

-

Loading...

+
+
+
+ monitor_weight + Gewicht +

Loading...

+

Loading...

+
-
-
-
-
- water - Luftfeuchtigkeit -

Loading...

+
+
+
+ water + Luftfeuchtigkeit +

Loading...

+
+

Gemessen:

-

Gemessen:

-
\ No newline at end of file +
diff --git a/pages/components/header.html b/pages/components/header.html index 3183b73..59232ef 100644 --- a/pages/components/header.html +++ b/pages/components/header.html @@ -1,12 +1,14 @@
- +
+ +
\ No newline at end of file diff --git a/pages/components/mainpage.html b/pages/components/mainpage.html new file mode 100644 index 0000000..edb33c4 --- /dev/null +++ b/pages/components/mainpage.html @@ -0,0 +1,47 @@ +
+ {% include './components/about-modal.html' %} + {% include './components/modals.html' %} + +
+ + edit_calendar +
+ +
+ +
+ + {% 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' %} +
\ No newline at end of file diff --git a/pages/components/sidenav.html b/pages/components/sidenav.html index bce30a7..6cb8b6f 100644 --- a/pages/components/sidenav.html +++ b/pages/components/sidenav.html @@ -1,19 +1,23 @@ - diff --git a/pages/index.html b/pages/index.html index dec2b67..b9a6d6e 100644 --- a/pages/index.html +++ b/pages/index.html @@ -1,79 +1,21 @@ {% extends "base.html" %} {% block custom_header %} - + {% endblock %} -{% block content %} -
-
-
- Daten werden geladen... -
-
-
-

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

-
-
-
+{% include './components/header.html' %} -
- {% include './components/header.html' %} - +{% block content %} {% with links=pages %} {% include './components/sidenav.html' %} {% endwith %} - {% include './components/about-modal.html' %} - {% include './components/modals.html' %} - -
- - edit_calendar -
- -
- -
- - {% 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 %} - - - + + + {% endblock %} \ No newline at end of file diff --git a/public/css/app.css b/public/css/app.css index d2d9686..a987f6a 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -35,7 +35,7 @@ header a:hover { color: #fff; } -main, #chart { +#chart { height: 90vh !important; } @@ -120,7 +120,7 @@ h3.chart-title { text-align: center; color: #fff; margin: 5px 20px 5px 20px; - padding: 0px 30px 0px 30px; + padding: 0 30px 0 30px; } footer { @@ -138,7 +138,7 @@ footer { } .display-info { text-align: center; - margin-bottom: 0%; + margin-bottom: 0; } /* Credit: https://stackoverflow.com/a/55788640/18085012 */ @@ -149,4 +149,29 @@ footer { bottom: 50vh; left: 0; right: 0; -} \ No newline at end of file +} + +main { + position: fixed; + right: 0; + width: calc(100vw - 300px); + height: calc(100vh - 64px); + overflow-y: scroll; +} +@media screen and (max-width: 992px) { + main { + width: 100vw; + } +} +@media screen and (min-width: 992px) { + .modal { + width: calc(100vw - 400px) !important; + margin-right: 50px !important; + } +} +#slide-out { + position: fixed; + height: calc(100vh - 64px); + top: 64px; + left: 0; +} diff --git a/public/js/app.js b/public/js/app.js index ab17096..fdeb908 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -19,6 +19,7 @@ document.addEventListener('DOMContentLoaded', async () => { M.Modal.init(document.querySelectorAll('.modal'), {}); M.FormSelect.init(document.querySelectorAll('select'), {}); M.Dropdown.init(document.querySelectorAll('.dropdown-trigger'), {}); + M.ScrollSpy.init(document.querySelectorAll('.scrollspy'), {}); datePickerFrom = M.Datepicker.init(document.getElementById('from-date-input'), { minDate: luxon.DateTime.now().minus({ years: 1 }).toJSDate(), diff --git a/requirements.txt b/requirements.txt index 113d9f1..a8501eb 100644 --- a/requirements.txt +++ b/requirements.txt @@ -10,4 +10,5 @@ pyTelegramBotAPI~=4.1.1 schedule~=1.1.0 geopy~=2.2.0 requests~=2.27.1 -babel~=2.9.1 \ No newline at end of file +babel~=2.9.1 +secret_key_generator==0.0.8 \ No newline at end of file From e394cee3a99fbfd499496ea606f4da62dbe59871 Mon Sep 17 00:00:00 2001 From: AuxiliumCDNG Date: Fri, 6 May 2022 20:47:07 +0200 Subject: [PATCH 05/16] 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 ef4a6327c6b457412ef25b901c663e4553bed1cf Mon Sep 17 00:00:00 2001 From: AuxiliumCDNG Date: Fri, 6 May 2022 21:35:10 +0200 Subject: [PATCH 06/16] Front End: Switched from (buggy ?) scrollspy to normal href anchors --- pages/components/charts.html | 50 +++++++++++--------------- pages/components/current-data.html | 56 ++++++++++++++---------------- pages/components/sidenav.html | 20 +++++------ 3 files changed, 56 insertions(+), 70 deletions(-) diff --git a/pages/components/charts.html b/pages/components/charts.html index 94d42af..1391997 100644 --- a/pages/components/charts.html +++ b/pages/components/charts.html @@ -1,35 +1,27 @@ -

-

Vergleichsansicht

-

-
-
-
+

Vergleichsansicht

+

+
+
+
-
-
- -
+
+
+
-
-

Gewicht

-

-
-
+

Gewicht

+

+
-
-

Temperatur

-

-
-
+

Temperatur

+

+
-
-

Luftfeuchtigkeit

-

-
-
+

Luftfeuchtigkeit

+

+
diff --git a/pages/components/current-data.html b/pages/components/current-data.html index f3391b0..e653608 100644 --- a/pages/components/current-data.html +++ b/pages/components/current-data.html @@ -1,41 +1,39 @@ -
-
-

Aktuell

+
+

Aktuell

-
+
-
-
-
-
- thermostat - Temperatur -

Loading...

-
+
+
+
+
+ thermostat + Temperatur +

Loading...

+
-
-
-
- monitor_weight - Gewicht -

Loading...

-

Loading...

-
+
+
+
+ monitor_weight + Gewicht +

Loading...

+

Loading...

+
-
-
-
- water - Luftfeuchtigkeit -

Loading...

-
+
+
+
+ water + Luftfeuchtigkeit +

Loading...

-

Gemessen:

+

Gemessen:

-
+
\ No newline at end of file diff --git a/pages/components/sidenav.html b/pages/components/sidenav.html index 6cb8b6f..3edd3df 100644 --- a/pages/components/sidenav.html +++ b/pages/components/sidenav.html @@ -1,22 +1,18 @@ - -

  • BeeLogger

    • - +
  • Andere Ansichten
    • +
  • monitor_weightGewicht
    • +
  • thermostatTemperatur
    • +
  • waterLuftfeuchtigkeit
    • {% if links.keys()|length >= 1 %}
    • From c7b619a027efdd831ce8cd14b9c3b60d6355f138 Mon Sep 17 00:00:00 2001 From: Fabian Reinders Date: Sat, 7 May 2022 11:14:36 +0200 Subject: [PATCH 07/16] Front End: Smooth Scrolling For Nav Links Use smooth scroll behavior when scrolling to an anchor using a link in the navbar. --- public/css/app.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/public/css/app.css b/public/css/app.css index a987f6a..4252cdc 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -1,3 +1,7 @@ +*, html { + scroll-behavior: smooth !important; +} + body { background-color: #fff; } From 0f7c81d75863f1bddf069d578350218263a3c2af Mon Sep 17 00:00:00 2001 From: Fabian Reinders Date: Sat, 7 May 2022 11:58:24 +0200 Subject: [PATCH 08/16] 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 31fb88561061a18c27ec6f691782d9d470d0fdd0 Mon Sep 17 00:00:00 2001 From: Fabian Reinders Date: Sat, 7 May 2022 12:07:36 +0200 Subject: [PATCH 09/16] Front End: Change Weight Unit to Grams Change weight unit to grams as that's the unit returned by the API. --- public/js/app.js | 6 +++--- public/js/charts.js | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/public/js/app.js b/public/js/app.js index 969e333..a4d062b 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -186,7 +186,7 @@ async function updateCurrentData(data) { // Get values for current data displays and round them to 2 decimals let temperature = Number(latestRecord.temperature).toFixed(2); - let weight = Number(latestRecord.weight).toFixed(3); + let weight = Number(latestRecord.weight).toFixed(2); let humidity = Number(latestRecord.humidity).toFixed(2); let weightDelta = getWeightDeltaString(data); @@ -196,7 +196,7 @@ async function updateCurrentData(data) { document.querySelector('main').classList.remove('hide'); document.querySelector('#temperature').innerHTML = temperature + ' °C'; - document.querySelector('#weight').innerHTML = weight + ' kg'; + document.querySelector('#weight').innerHTML = weight + ' g'; document.querySelector('#weight-delta').innerHTML = weightDelta; document.querySelector('#humidity').innerHTML = humidity + ' %'; document.querySelector('#updated').innerHTML = measured; @@ -222,7 +222,7 @@ function getWeightDeltaString(data) { // Limit float to 2 decimal places weightDelta = weightDelta.toFixed(3); // Format HTML string with green color for weight growth and red color for weight decline - let weightDeltaString = weightDelta >= 0 ? `

    +${weightDelta} kg

    ` : `

    ${weightDelta} kg

    `; + let weightDeltaString = weightDelta >= 0 ? `

    +${weightDelta} g

    ` : `

    ${weightDelta} g

    `; return weightDeltaString; } diff --git a/public/js/charts.js b/public/js/charts.js index 6b90e59..d10a3e8 100644 --- a/public/js/charts.js +++ b/public/js/charts.js @@ -60,7 +60,7 @@ async function drawCharts(data) { */ async function drawCompareChart(data, separateWeight) { var compareData = [ - ['Tag', 'Temperatur (°C)', 'Gewicht (kg)', 'Luftfeuchtigkeit (%)'] + ['Tag', 'Temperatur (°C)', 'Gewicht (g)', 'Luftfeuchtigkeit (%)'] ]; for (row in data) { @@ -145,7 +145,7 @@ async function drawTempChart(data) { * @param {Array} data Array containing the data records that the graph should be generated from */ async function drawWeightChart(data) { - var weightData = [['Gemessen', 'Gewicht (kg)']]; + var weightData = [['Gemessen', 'Gewicht (g)']]; for (row in data) { var measured = new Date(data[row].measured); From ccc0f08f6b321b81f0e77c6369f7731b385a7359 Mon Sep 17 00:00:00 2001 From: AuxiliumCDNG Date: Sat, 7 May 2022 21:02:42 +0200 Subject: [PATCH 10/16] Chore: Change unit for telegram warning notifications --- api/insert_data.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/api/insert_data.py b/api/insert_data.py index aef43ef..30c4153 100644 --- a/api/insert_data.py +++ b/api/insert_data.py @@ -23,7 +23,7 @@ def insert_data(): if current["weight"] - float(r_data["w"]) > 0.5: notifications.Feed().push_notification("warning", "Gewichtsabfall!", - "Das Gewicht ist bei der aktuellen Messung um %skg abgefallen!" + "Das Gewicht ist bei der aktuellen Messung um %sg abgefallen!" % str(round(float(r_data["w"]) - current["weight"], 2))) except Exception as e: print("Error while performing data checks!\n" From 58484ea222e582a99d4c8d4e8ea170bd44e4f2dd Mon Sep 17 00:00:00 2001 From: Fabian Reinders Date: Sat, 7 May 2022 21:09:24 +0200 Subject: [PATCH 11/16] 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 12/16] 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 13/16] 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 14/16] 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 { From 1e6a63fec68db378410405afac4e01adc68c9be5 Mon Sep 17 00:00:00 2001 From: AuxiliumCDNG Date: Sat, 7 May 2022 22:19:41 +0200 Subject: [PATCH 15/16] Chore: Added back lost reload button --- pages/components/mainpage.html | 5 +++++ public/css/app.css | 6 ++++++ 2 files changed, 11 insertions(+) diff --git a/pages/components/mainpage.html b/pages/components/mainpage.html index edb33c4..048a44c 100644 --- a/pages/components/mainpage.html +++ b/pages/components/mainpage.html @@ -2,6 +2,11 @@ {% include './components/about-modal.html' %} {% include './components/modals.html' %} +
    edit_calendar diff --git a/public/css/app.css b/public/css/app.css index 4252cdc..c38b9fb 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -145,6 +145,12 @@ footer { margin-bottom: 0; } +#reload-button { + position: fixed; + bottom: 100px; + right: 23px; +} + /* Credit: https://stackoverflow.com/a/55788640/18085012 */ .loader { position: absolute; From 3c30fd61055d2f0a2617b15ea4e5ceec9448099c Mon Sep 17 00:00:00 2001 From: AuxiliumCDNG Date: Sun, 15 May 2022 18:55:24 +0200 Subject: [PATCH 16/16] Core: Fix data compression for small datasets --- api/get_data.py | 3 +++ 1 file changed, 3 insertions(+) diff --git a/api/get_data.py b/api/get_data.py index 944dd34..3c053e3 100644 --- a/api/get_data.py +++ b/api/get_data.py @@ -39,6 +39,9 @@ def get_data(): else: amount = int(request.args["amount"]) + if amount > row_count: + amount = row_count + compress_count = round(row_count / amount) print(">> Compressing from %s to %s values with interval %s" % (row_count, amount, compress_count))