Frontend improvements

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))

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"

pages/components/charts.html

@@ -5,13 +5,13 @@ <h3 id="compare" class="chart-title">Vergleichsansicht</h3>
 </div>
 
 <div class="container center">
-  <div class="switch">
-    <label>
-      <input id="scale-switch" type="checkbox">
-      <span class="lever"></span>
-      <p style="font-size: 20px;">Separater Maßstab für Gewicht</p>
-    </label>
-  </div>
+    <div class="switch">
+        <label>
+            <input id="scale-switch" type="checkbox">
+            <span class="lever"></span>
+            <p style="font-size: 20px;">Separater Maßstab für Gewicht</p>
+        </label>
+    </div>
 </div>
 
 <h3 id="weight-chart-title" class="chart-title">Gewicht</h3>

pages/components/current-data.html

@@ -1,6 +1,6 @@
 <div id="beelogger-current" class="row center">
     <h3 id="summary" style="margin-left: 20px;">Aktuell</h3>
-    
+
     <div id="beelogger-current-data-error-box" class="beelogger-error-box card blue-grey darken-1 hide"></div>
 
     <div id="beelogger-current-data" class="row">

pages/components/header.html

@@ -1,12 +1,14 @@
 <header>
-    <nav>
-        <div class="nav-wrapper blue accent-3">
-            <a href="#!" class="brand-logo">BeeLogger</a>
-            <a href="#" data-target="slide-out" class="sidenav-trigger show-on-large"><i
-                    class="material-icons">menu</i></a>
-            <ul class="right">
-                <li><a href="#" onclick="window.location.reload(true);" title="Aktualisieren"><i class="material-icons">refresh</i></a></li>
-            </ul>
-        </div>
-    </nav>
+    <div class="navbar-fixed">
+        <nav>
+            <div class="nav-wrapper blue accent-3">
+                <div class="brand-logo center" style="margin: auto auto">BeeLogger</div>
+                <a data-target="slide-out" class="sidenav-trigger show-on-medium-and-down" style="cursor: pointer"><i class="material-icons">menu</i></a>
+
+                <ul class="right">
+                    <li><a onclick="window.location.reload();" title="Aktualisieren"><i class="material-icons">refresh</i></a></li>
+                </ul>
+            </div>
+        </nav>
+    </div>
 </header>

pages/components/mainpage.html

@@ -0,0 +1,52 @@
+<main>
+    {% include './components/about-modal.html' %}
+    {% include './components/modals.html' %}
+
+    <div id="reload-button" class="fixed-action-btn">
+        <a class="btn-floating btn-large blue accent-3" onclick="applyDateRange();">
+            <i class="large material-icons">refresh</i>
+        </a>
+    </div>
+    <div class="fixed-action-btn">
+        <a class="btn-floating btn-large blue accent-3 modal-trigger" href="#dateRangeModal">
+            <i id="beelogger-daterange-icon" class="large material-icons hide">edit_calendar</i>
+            <div id="beelogger-preloader" class="preloader-wrapper small loader active">
+                <div class="spinner-layer spinner-red-only">
+                    <div class="circle-clipper left">
+                        <div class="circle"></div>
+                    </div><div class="gap-patch">
+                    <div class="circle"></div>
+                </div><div class="circle-clipper right">
+                    <div class="circle"></div>
+                </div>
+                </div>
+            </div>
+        </a>
+    </div>
+
+    {% with weather=weather_data %}
+        {% include './components/weather.html' %}
+    {% endwith %}
+
+    {% include './components/current-data.html' %}
+
+    <div id="beelogger-charts-error-box" class="beelogger-error-box card blue-grey darken-1 hide"></div>
+
+    <div id="beelogger-charts-loader" class="beelogger-error-box card blue-grey darken-1 hide">
+        <div class="row center" id="loading">
+            <div class="card-content white-text">
+                <span id="loading-title" class="card-title">Daten werden geladen...</span>
+                <div id="loading-progress" class="progress">
+                    <div class="indeterminate"></div>
+                </div>
+                <p id="loading-text">Die Daten werden aus unserer Datenbank abgerufen. Dies kann einen Moment dauern.</p>
+            </div>
+        </div>
+    </div>
+
+    <div id="charts">
+        {% include './components/charts.html' %}
+    </div>
+
+    {% include './components/footer.html' %}
+</main>

pages/components/modals.html

@@ -70,6 +70,13 @@ <h4>Zeitraum ändern <span class="badge red white-text">Experimentelle Funktion<
         <input id="from-date-input" type="text" class="datepicker" placeholder="Alle Daten von ...">
         <b>Datum an dem die angezeigten Daten enden sollen:</b>
         <input id="to-date-input" type="text" class="datepicker" placeholder="Alle Daten bis ...">
+        <p>
+            <label>
+                <input id="daterange-save-to" type="checkbox" class="filled-in" checked="checked" />
+                <span>Enddatum für den nächsten Besuch speichern</span>
+            </label>
+        </p>
+
         <b>Zeitspanne für die Berechnung von Delta Werten (in Minuten):</b>
         <input id="delta-span-input" type="number" class="input" placeholder="Standardmäßig 1 Tag also 1440">
 

pages/components/sidenav.html

@@ -1,4 +1,4 @@
-<ul id="slide-out" class="sidenav">
+<ul id="slide-out" class="sidenav sidenav-fixed">
     <li><h3 class="center">BeeLogger</h3></li>
 
     <li><div class="divider"></div></li>
@@ -13,7 +13,7 @@
     <li><a class="waves-effect" href="#weight-chart-title"><i class="material-icons-outlined">monitor_weight</i>Gewicht</a></li>
     <li><a class="waves-effect" href="#temperature-chart-title"><i class="material-icons-outlined">thermostat</i>Temperatur</a></li>
     <li><a class="waves-effect" href="#humidity-chart-title"><i class="material-icons-outlined">water</i>Luftfeuchtigkeit</a></li>
-    
+
     {% if links.keys()|length >= 1 %}
         <li><div class="divider"></div></li>
         <li><a class="subheader">Externe Seiten</a></li>
@@ -27,12 +27,12 @@
     <li><a class="waves-effect" href="/rss/feeds/"><i class="material-icons-outlined">feed</i>Feeds</a></li>
     <li><div class="divider"></div></li>
     <br>
-    
+
     <div class="container center">
         <a href="#aboutModal" style="margin-right: 10px;"
-            class="modal-trigger">About</a>
+           class="modal-trigger">About</a>
         <a href="#contactModal" class="modal-trigger">Kontakt</a>
         <br>
         <a href="/opt-out/">Cookies ablehnen</a>
     </div>
-</ul>
+</ul>

pages/index.html

@@ -1,71 +1,21 @@
 {% extends "base.html" %}
 
 {% block custom_header %}
-<link rel="stylesheet" href="/css/app.css">
+    <link rel="stylesheet" href="/css/app.css">
 {% endblock %}
 
-{% block content %}
-<div class="row center" id="loading">
-    <div class="card col s10 m6 offset-s1 offset-m3 blue-grey darken-1" style="margin-top: 40px;">
-        <div class="card-content white-text">
-            <span id="loading-title" class="card-title">Daten werden geladen...</span>
-            <div id="loading-progress" class="progress">
-                <div class="indeterminate"></div>
-            </div>
-            <p id="loading-text">Die Daten werden aus unserer Datenbank abgerufen. Dies kann einen Moment dauern.</p>
-        </div>
-    </div>
-</div>
+{% include './components/header.html' %}
 
-<main class="hide">
-    {% include './components/header.html' %}
-
+{% block content %}
     {% with links=pages %}
         {% include './components/sidenav.html' %}
     {% endwith %}
 
-    {% include './components/about-modal.html' %}
-    {% include './components/modals.html' %}
-
-    <div class="fixed-action-btn">
-        <a class="btn-floating btn-large blue accent-3 modal-trigger" href="#dateRangeModal">
-            <i class="large material-icons">edit_calendar</i>
-        </a>
-    </div>
-    <a id="reload-button" class="btn-floating btn-large blue accent-3" onclick="applyDateRange();">
-        <i class="large material-icons">refresh</i>
-    </a>
-
-    {% with weather=weather_data %}
-        {% include './components/weather.html' %}
-    {% endwith %}
-
-    {% include './components/current-data.html' %}
-
-    <div id="beelogger-charts-error-box" class="beelogger-error-box card blue-grey darken-1 hide"></div>
-
-    <div id="beelogger-charts-loader" class="beelogger-error-box card blue-grey darken-1 hide">
-        <div class="row center" id="loading">
-            <div class="card-content white-text">
-                <span id="loading-title" class="card-title">Daten werden geladen...</span>
-                <div id="loading-progress" class="progress">
-                    <div class="indeterminate"></div>
-                </div>
-                <p id="loading-text">Die Daten werden aus unserer Datenbank abgerufen. Dies kann einen Moment dauern.</p>
-            </div>
-        </div>
-    </div>
-
-    <div id="charts">
-        {% include './components/charts.html' %}
-    </div>
-
-    {% include './components/footer.html' %}
-</main>
+    {% include './components/mainpage.html' %}
 {% endblock %}
 
 {% block custom_footer %}
-<script src="/js/beelogger.js"></script>
-<script src="/js/charts.js"></script>
-<script src="/js/app.js"></script>
+    <script src="/js/beelogger.js"></script>
+    <script src="/js/charts.js"></script>
+    <script src="/js/app.js"></script>
 {% endblock %}

public/css/app.css

@@ -1,3 +1,7 @@
+*, html {
+    scroll-behavior: smooth !important;
+}
+
 body {
     background-color: #fff;
 }
@@ -35,7 +39,7 @@ header a:hover {
     color: #fff;
 }
 
-main, #chart {
+#chart {
     height: 90vh !important;
 }
 
@@ -120,7 +124,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 {
@@ -145,4 +149,45 @@ footer {
     position: fixed;
     bottom: 100px;
     right: 23px;
-}
+}
+
+#reload-button {
+    position: fixed;
+    bottom: 100px;
+    right: 23px;
+}
+
+/* Credit: https://stackoverflow.com/a/55788640/18085012 */
+.loader {
+  position: absolute;
+  margin: auto;
+  top: 50vh;
+  bottom: 50vh;
+  left: 0;
+  right: 0;
+}
+
+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;
+}