Format air temperature and time values in template.
[chrisu/seepark.git] / web / templates / seepark_web.html
index 4d136e3e6dc2bcf538c61ead8c59f8454b7ea328..2fccfd6ba030e78be45265bbf5e82cdf4886ef4b 100644 (file)
@@ -1,8 +1,14 @@
 <!DOCTYPE html>
 <html lang="de">
        <head>
+               <!-- mobile first, yeah -->
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+               <!-- don't cache; refresh -->
+               <meta http-equiv="Pragma" content="no-cache" />
+               <meta http-equiv="Cache-Control" content="no-cache" />
+               <meta http-equiv="Refresh" content="300" />
+
                <!-- Load c3.css -->
                <link href="{{url_for('static', filename='c3.css')}}" rel="stylesheet">
 
        </head>
        <body>
                <h1>Daten zum Seepark Obsteig</h1>
-               <div id="chart"></div>
-               <div id="buttonbar">
-                       <button onclick="loaddays(1)">Tag</button>
-                       <button onclick="loaddays(7)">Woche</button>
-                       <button onclick="loaddays(30)">Monat</button>
-                       <button onclick="loaddays(365)">Jahr</button>
+               <h2>Aktuelle Werte</h2>
+               <div id="current">
+               <p id="currentair">
+                       {% if airvalue is none %}
+                       <strong>Luft: N/A</strong>
+                       {% else %}
+                       <strong>Luft: {{ airvalue|round(1) }}°C</strong><br />
+                       <small>({{ airtime.strftime('%Y-%m-%d %H:%M') }})</small>
+                       {% endif %}
+               </p>
+               <p id="currentwater">
+                       <strong>Wasser: {{ watervalue }}°C</strong><br />
+                       <small>({{ watertime }})</small>
+               </p>
                </div>
 
+               <h2>Der See</h2>
+               <div id="chart1"></div>
+               <div id="chart7"></div>
+               <div id="chart31"></div>
+               <div id="chart365"></div>
+
                <!-- openweathermap widget -->
                <div id="openweathermap-widget-15"></div>
                <script>