feat #23: add reload button to display on new request

src/main/resources/static/style.css

@@ -520,4 +520,19 @@ input.inline:focus-visible {
 
 .notification.error {
     color: var(--bg-red);
+}
+
+a.reload {
+    display: none;
+    position: absolute;
+    height: 1.2em;
+    width: 1.2em;
+    background: var(--bg-red);
+    border-radius: 50%;
+
+    color: white;
+    text-decoration: none;
+    font-size: .6em;
+    align-content: center;
+    justify-content: center;
 }

src/main/resources/templates/index.html

@@ -9,7 +9,7 @@
     <div th:replace="~{fragments.html :: nav}"></div>
     <main>
 
-        <h1>Letzte Anfragen</h1>
+        <h1>Letzte Anfragen<a id="reload-notify" class="reload" title="Neue Anfragen" th:href="@{/}">⟳</a></h1>
 
         <div class="border">
             <div class="page-control">
@@ -68,6 +68,12 @@
                 }
             };
         });
+
+        const eventSource = new EventSource('statistics/events');
+        eventSource.addEventListener('newrequest', event => {
+            console.log(event);
+            document.getElementById('reload-notify').style.display = 'inline-flex';
+        });
     </script>
 </body>
 </html>