Use openweathermap module in web app.
[chrisu/seepark.git] / web / templates / seepark_web.html
index 29057bed93052b45da87555676631ae5f467ea8c..7715013e18ab98dba9fd3617eb75dddccf162a9c 100644 (file)
@@ -1,17 +1,71 @@
-<html>
+<!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">
 
+               <!-- Load own css -->
+               <link href="{{url_for('static', filename='seepark_web.css')}}" rel="stylesheet">
+
                <!-- Load d3.js and c3.js -->
                <script src="{{url_for('static', filename='d3.js')}}" charset="utf-8"></script>
                <script src="{{url_for('static', filename='c3.js')}}"></script>
 
-               <title>Hi! :-)</title>
+               <title>Seepark Obsteig</title>
        </head>
        <body>
-               <h1>Hello world</h1>
-               <div id="chart"></div>
+               <h1>Daten zum Seepark Obsteig</h1>
+               <h2>Aktuelle Werte</h2>
+               <div id="current">
+               <p id="currentair">
+                       {% if airvalue is none %}
+                       <strong>Luft: N/A</strong>
+                       {% else %}
+                       <strong>Luft: {{ airvalue }}°C</strong><br />
+                       <small>({{ airtime }})</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>
+               window.myWidgetParam ? window.myWidgetParam : window.myWidgetParam = [];
+               window.myWidgetParam.push({
+                       id: 15,
+                       cityid: '3319578',
+                       appid: '{{ apikey }}',
+                       units: 'metric',
+                       containerid: 'openweathermap-widget-15',
+                       lang: 'de',
+               });
+               (function() {
+                       var script = document.createElement('script');
+                       script.async = true;
+                       script.charset = "utf-8";
+                       script.src = "//openweathermap.org/themes/openweathermap/assets/vendor/owm/js/weather-widget-generator.js";
+                       var s = document.getElementsByTagName('script')[0];
+                       s.parentNode.insertBefore(script, s);
+               })();
+               </script>
 
                <!-- Load own javascript code -->
                <script src="{{url_for('static', filename='seepark_web.js')}}"></script>