From 45ad5e88279d09360ce5f001986ee03a7b95a62e Mon Sep 17 00:00:00 2001
From: Paul-Christian Volkmer
Date: Wed, 17 Jan 2024 12:26:46 +0100
Subject: feat #24: use htmx to refresh connection status every 20s

---
 src/main/resources/templates/configs.html            | 20 ++------------------
 .../templates/configs/connectionAvailable.html       | 16 ++++++++++++++++
 2 files changed, 18 insertions(+), 18 deletions(-)
 create mode 100644 src/main/resources/templates/configs/connectionAvailable.html

(limited to 'src/main/resources')

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
-- 
cgit v1.2.3