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/Makefile

@@ -10,7 +10,7 @@ APP=.
 SRC=$(APP)/src
 # Folders for Babel translation
 BABEL_INPUT_JINJA=$(SRC)/web/templates
-BABEL_INPUT= $(foreach dir,$(BABEL_INPUT_JINJA),$(wildcard $(dir)/*.html)) \
+BABEL_INPUT= $(foreach dir,$(BABEL_INPUT_JINJA),$(wildcard $(dir)/*.html.j2)) \
 
 BABEL_TRANSLATIONS=$(APP)/translations
 

app/src/.babel.cfg

@@ -1,2 +1,3 @@
 [python: **.py]
-[jinja2: web/templates/**.html]
+[jinja2: web/templates/**.html]
+[jinja2: web/templates/**.html.j2]

app/src/web/routes.py

@@ -1,5 +1,5 @@
 from quart import Blueprint
-from quart import render_template
+from quart import render_template, url_for
 from quart import send_from_directory
 import os
 
@@ -13,14 +13,44 @@ async def get_icon(file: str, mime: str = 'image/png'):
         mimetype=mime)
 
 
+def get_inv_count():
+    return 1234
+
+
+TsunCnt = 0
+
+
+def get_tsun_count():
+    global TsunCnt
+    TsunCnt += 1
+    return TsunCnt
+
+
+@web_routes.context_processor
+def utility_processor():
+    return dict(inv_count=get_inv_count(),
+                tsun_count=get_tsun_count())
+
+
 @web_routes.route('/')
 async def index():
-    return await render_template('index.html')
+    return await render_template(
+        'index.html.j2',
+        fetch_url='.'+url_for('web_routes.data_fetch'))
 
 
 @web_routes.route('/page')
 async def empty():
-    return await render_template('empty.html')
+    return await render_template('empty.html.j2')
+
+
+@web_routes.route('/data-fetch')
+async def data_fetch():
+    global TsunCnt
+    TsunCnt += 1
+    return {
+        "geology-fact": f"<h3>{TsunCnt}</h3>",
+    }
 
 
 @web_routes.route('/favicon-96x96.png')

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%}
-
-

app/tests/test_web_route.py

@@ -61,3 +61,13 @@ async def test_manifest():
     response = await client.get('/site.webmanifest')
     assert response.status_code == 200
     assert response.mimetype == 'application/manifest+json'
+
+@pytest.mark.asyncio
+async def test_data_fetch():
+    """Test the healthy route."""
+    client = app.test_client()
+    response = await client.get('/data-fetch')
+    assert response.status_code == 200
+
+    response = await client.get('/data-fetch')
+    assert response.status_code == 200

app/translations/de/LC_MESSAGES/messages.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: tsun-gen3-proxy 0.14.0\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2025-04-18 20:46+0200\n"
+"POT-Creation-Date: 2025-04-20 00:01+0200\n"
 "PO-Revision-Date: 2025-04-18 16:24+0200\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: de\n"
@@ -19,7 +19,7 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Generated-By: Babel 2.17.0\n"
 
-#: src/web/templates/index.html:5
+#: src/web/templates/index.html.j2:5
 msgid "My Dashboard"
 msgstr "Mein Dashboard"