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

src/main/kotlin/dev/dnpm/etl/processor/web/StatisticsRestController.kt

@@ -132,6 +132,7 @@ class StatisticsRestController(
     @GetMapping(path = ["events"], produces = [MediaType.TEXT_EVENT_STREAM_VALUE])
     fun updater(): Flux<ServerSentEvent<Any>> {
         return statisticsUpdateProducer.asFlux().flatMap {
+            println(it)
             Flux.fromIterable(
                 listOf(
                     ServerSentEvent.builder<Any>()
@@ -152,6 +153,10 @@ class StatisticsRestController(
                         .build(),
                     ServerSentEvent.builder<Any>()
                         .event("deleterequestpatientstates").id("none").data(this.requestPatientStates(true))
+                        .build(),
+
+                    ServerSentEvent.builder<Any>()
+                        .event("newrequest").id("none").data("newrequest")
                         .build()
                 )
             )

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>