S allius/issue387 (#388)

* add optional java script to fetch data regullary

* change file extension to `html.j2` for templates

* fix route for fetch data

- for running in iframes (e.g. HA ingress) we must
  use relative path in the URLs

* increase test coverage

* remove unused statements

app/src/web/templates/base.html.j2

@@ -106,6 +106,36 @@
         mySidebar.style.display = "none";
         overlayBg.style.display = "none";
       }
+      {% if fetch_url is defined %}
+      function fetch_data() {
+        fetch("{{fetch_url}}")
+          .then(response => response.json())
+          .then(function (data) {
+            Object.keys(data).forEach(key => {
+              //console.log(`${key}: ${data[key]}`);
+              try {
+                elm = document.getElementById(key)
+                elm.innerHTML = data[key]
+              }
+              catch(err) {
+                console.log('error: ' + err + ' (for key: ' + key + ')');
+              }
+            });
+          })
+          .catch(function (err) {
+            console.log('error: ' + err);
+          });
+      }
+
+      window.addEventListener('load', function () {
+        // Your document is loaded.
+        var fetchInterval = 5000; // 5 seconds.
+
+        // Invoke the request every 5 seconds.
+        setInterval(fetch_data, fetchInterval);
+      });
+      {% endif %}
+
     </script>
     {% endblock trailer %}
   

app/src/web/templates/empty.html.j2

@@ -1,4 +1,4 @@
-{% extends 'base.html' %}
+{% extends 'base.html.j2' %}
 
 {% block title %} TSUN Proxy - View {% endblock title%}
 {% block menu2_class %}w3-blue{% endblock %}

app/src/web/templates/index.html.j2

@@ -1,4 +1,4 @@
-{% extends 'base.html' %}
+{% extends 'base.html.j2' %}
 
 {% block title %} TSUN Proxy - Dashboard {% endblock title%}
 {% block menu1_class %}w3-blue{% endblock %}
@@ -10,7 +10,7 @@
       <div class="w3-container w3-red w3-padding-16">
         <div class="w3-left"><i class="fa fa-comment w3-xxxlarge"></i></div>
         <div class="w3-right">
-          <h3>52</h3>
+          <h3>{{inv_count}}</h3>
         </div>
         <div class="w3-clear"></div>
         <h4>Messages</h4>
@@ -20,7 +20,7 @@
       <div class="w3-container w3-blue w3-padding-16">
         <div class="w3-left"><i class="fa fa-eye w3-xxxlarge"></i></div>
         <div class="w3-right">
-          <h3>99</h3>
+          <h3>{{tsun_count}}</h3>
         </div>
         <div class="w3-clear"></div>
         <h4>Views</h4>
@@ -29,7 +29,7 @@
     <div class="w3-quarter">
       <div class="w3-container w3-teal w3-padding-16">
         <div class="w3-left"><i class="fa fa-share-alt w3-xxxlarge"></i></div>
-        <div class="w3-right">
+        <div id = "geology-fact" class="w3-right">
           <h3>23</h3>
         </div>
         <div class="w3-clear"></div>
@@ -52,7 +52,6 @@
     <div class="w3-row-padding" style="margin:0 -16px">
       <div class="w3-third">
         <h5>Regions</h5>
-        <img src="/w3images/region.jpg" style="width:100%" alt="Google Regional Map">
       </div>
       <div class="w3-twothird">
         <h5>Feeds</h5>
@@ -178,5 +177,3 @@
     </div>
   </div>
 {% endblock content%}
-
-