add status light and error text if Grocy is not reachable

templates/index.html

@@ -1,15 +1,73 @@
 {% extends 'base.html' %}
 
 {% block content %}
+  <style>
+    .status-light {
+      /* Background color */
+      background-color: gray;
+  
+      /* Rounded border */
+      border-radius: 9999px;
+  
+      /* Size */
+      height: 0.5rem;
+      width: 0.5rem;
+
+      display: inline-flex;
+      margin-bottom: 0.5rem;
+
+
+      animation: blink 2s step-start 0s infinite;
+  }
+
+  @keyframes blink {
+    50% {
+      opacity: 0.8;
+    }
+  }
+  </style>
+
   <section>
-    <h1 aria-busy="true">Čekám až nascanuješ pitíčko</h1>
+    
+    <h1><a class="status-light" id="status-light"></a> Čekám až nascanuješ pitíčko</h1> 
+    <h5 id="status-message"></h5>
   </section>
   <form action="/checkout" method="post">
-    <input type="text" name="barcode" autofocus>
+    <input id="barcode-input-field" type="text" name="barcode" autofocus>
     <input type="submit" hidden>
   </form> 
 
+  
   <p> Sem by mělo přijít jednoduché info o pokladně </p>
   
   <a href="/admin" role="button" style="position: fixed;  bottom: 10px; right: 10px;">⚙</a>
+
+
+  <script>
+    checkConnection();
+    setInterval(checkConnection, 5000);
+    function checkConnection() {
+      var request = new XMLHttpRequest();  
+      request.open('GET', 'https://org.trhlina.org/login', true);
+      request.timeout = 500;
+      request.onreadystatechange = function(){
+        if (request.readyState === 4){
+            if (request.status === 200) {  
+              document.getElementById("status-light").style.backgroundColor = "#16a34a";
+              document.getElementById("status-message").innerHTML = "";
+              document.getElementById("barcode-input-field").style.display = "block";
+              console.log("Connection to Grocy is OK")
+            }  
+            else {
+              document.getElementById("status-light").style.backgroundColor = "red";
+              document.getElementById("status-message").innerHTML = "S pokladnou je něco špatně. Nemůže se připojit k databázi.";
+              document.getElementById("barcode-input-field").style.display = "none";
+              console.log("Connection to Grocy is not working")
+            }
+        } 
+      };
+      request.send();
+    }
+
+  </script>
 {% endblock %}