From 3be8bc53ff325ac1841b86122dc069d68954cb7b Mon Sep 17 00:00:00 2001
From: Paul-Christian Volkmer
Date: Wed, 10 Jan 2024 11:16:34 +0100
Subject: feat: add graphic to show connection state

---
 src/main/resources/templates/configs.html | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

(limited to 'src/main/resources/templates')

diff --git a/src/main/resources/templates/configs.html b/src/main/resources/templates/configs.html
index 5de2a79..a5b56d7 100644
--- a/src/main/resources/templates/configs.html
+++ b/src/main/resources/templates/configs.html
@@ -28,17 +28,31 @@
                         <td>MTBFile-Sender</td>
                         <td>[[ ${mtbFileSender} ]]</td>
                     </tr>
+                    <tr>
+                        <td>Endpunkt</td>
+                        <td>[[ ${mtbFileSender} ]]</td>
+                    </tr>
                 </tbody>
             </table>
         </section>
 
         <section>
             <h2><span th:if="${connectionAvailable}">✅</span><span th:if="${not(connectionAvailable)}">⚡</span> Verbindung zum bwHC-Backend</h2>
-            <p>
+            <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>
-            </p>
+                <strong th:if="${not(connectionAvailable)}" style="color: red">nicht verfügbar.</strong>
+            </div>
+            <div class="connection-display">
+                <img th:src="@{/server.png}" alt="ETL-Processor" />
+                <span class="connection" th:styleappend="${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>
-- 
cgit v1.2.3