Merge pull request #28 from CCC-MF/issue_24

feat #24: use htmx to refresh connection status every 20s

3 files changed, 27 insertions, 18 deletions

diff --git a/src/main/kotlin/dev/dnpm/etl/processor/web/ConfigController.kt b/src/main/kotlin/dev/dnpm/etl/processor/web/ConfigController.kt
index 82c1fc0..18bf8d7 100644
--- a/src/main/kotlin/dev/dnpm/etl/processor/web/ConfigController.kt
+++ b/src/main/kotlin/dev/dnpm/etl/processor/web/ConfigController.kt
@@ -49,4 +49,13 @@ class ConfigController(
         return "configs"
     }
 
+    @GetMapping(params = ["connectionAvailable"])
+    fun connectionAvailable(model: Model): String {
+        model.addAttribute("mtbFileSender", mtbFileSender.javaClass.simpleName)
+        model.addAttribute("mtbFileEndpoint", mtbFileSender.endpoint())
+        model.addAttribute("connectionAvailable", connectionCheckService.connectionAvailable())
+
+        return "configs/connectionAvailable"
+    }
+
 }
\ No newline at end of file
diff --git a/src/main/resources/templates/configs.html b/src/main/resources/templates/configs.html
index 1048a39..1d6dd20 100644
--- a/src/main/resources/templates/configs.html
+++ b/src/main/resources/templates/configs.html
@@ -37,24 +37,7 @@
             </table>
         </section>
 
-        <section>
-            <h2><span th:if="${connectionAvailable}">✅</span><span th:if="${not(connectionAvailable)}">⚡</span> Verbindung zum bwHC-Backend</h2>
-            <div>
-                Verbindung über <code>[[ ${mtbFileSender} ]]</code>. Die Verbindung ist aktuell
-                <strong th:if="${connectionAvailable}" style="color: green">verfügbar.</strong>
-                <strong th:if="${not(connectionAvailable)}" style="color: red">nicht verfügbar.</strong>
-            </div>
-            <div class="connection-display border">
-                <img th:src="@{/server.png}" alt="ETL-Processor" />
-                <span class="connection" th:classappend="${connectionAvailable ? 'available' : ''}"></span>
-                <img th:if="${mtbFileSender.startsWith('Rest')}" th:src="@{/server.png}" alt="bwHC-Backend" />
-                <img th:if="${mtbFileSender.startsWith('Kafka')}" th:src="@{/kafka.png}" alt="Kafka-Broker" />
-                <span>ETL-Processor</span>
-                <span></span>
-                <span th:if="${mtbFileSender.startsWith('Rest')}">bwHC-Backend</span>
-                <span th:if="${mtbFileSender.startsWith('Kafka')}">Kafka-Broker</span>
-            </div>
-        </section>
+        <section th:insert="~{configs/connectionAvailable.html}" th:hx-get="@{/configs?connectionAvailable}" hx-trigger="every 20s"></section>
 
         <section>
             <h2><span th:if="${not transformations.isEmpty()}">✅</span><span th:if="${transformations.isEmpty()}">⛔</span> Transformationen</h2>
@@ -100,5 +83,6 @@
             </th:block>
         </section>
     </main>
+    <script th:src="@{/webjars/htmx.org/dist/htmx.min.js}"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/configs/connectionAvailable.html b/src/main/resources/templates/configs/connectionAvailable.html
new file mode 100644
index 0000000..6d52d70
--- /dev/null
+++ b/src/main/resources/templates/configs/connectionAvailable.html
@@ -0,0 +1,16 @@
+<h2><span th:if="${connectionAvailable}">✅</span><span th:if="${not(connectionAvailable)}">⚡</span> Verbindung zum bwHC-Backend</h2>
+<div>
+    Verbindung über <code>[[ ${mtbFileSender} ]]</code>. Die Verbindung ist aktuell
+    <strong th:if="${connectionAvailable}" style="color: green">verfügbar.</strong>
+    <strong th:if="${not(connectionAvailable)}" style="color: red">nicht verfügbar.</strong>
+</div>
+<div class="connection-display border">
+    <img th:src="@{/server.png}" alt="ETL-Processor" />
+    <span class="connection" th:classappend="${connectionAvailable ? 'available' : ''}"></span>
+    <img th:if="${mtbFileSender.startsWith('Rest')}" th:src="@{/server.png}" alt="bwHC-Backend" />
+    <img th:if="${mtbFileSender.startsWith('Kafka')}" th:src="@{/kafka.png}" alt="Kafka-Broker" />
+    <span>ETL-Processor</span>
+    <span></span>
+    <span th:if="${mtbFileSender.startsWith('Rest')}">bwHC-Backend</span>
+    <span th:if="${mtbFileSender.startsWith('Kafka')}">Kafka-Broker</span>
+</div>
\ No newline at end of file