add optional java scriot to fetch data regullary

app/src/web/routes.py

@@ -13,9 +13,28 @@ 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', fetch_url='/data-fetch')
 
 
 @web_routes.route('/page')
@@ -23,6 +42,15 @@ async def empty():
     return await render_template('empty.html')
 
 
+@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')
 async def favicon():
     return await get_icon('favicon-96x96.png')

app/src/web/templates/base.html

@@ -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/index.html

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