chore: layout and style changes

src/main/resources/templates/configs.html

@@ -10,67 +10,80 @@
     <main>
         <h1>Konfiguration</h1>
 
-        <h2>Allgemeine Konfiguration</h2>
-        <table>
-            <thead>
-            <tr>
-                <th>Name</th>
-                <th>Wert</th>
-            </tr>
-            </thead>
-            <tbody>
+        <section>
+            <h2>🔧 Allgemeine Konfiguration</h2>
+            <table>
+                <thead>
                 <tr>
-                    <td>Pseudonym erzeugt über</td>
-                    <td>[[ ${pseudonymGenerator} ]]</td>
+                    <th>Name</th>
+                    <th>Wert</th>
                 </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>Pseudonym erzeugt über</td>
+                        <td>[[ ${pseudonymGenerator} ]]</td>
+                    </tr>
+                    <tr>
+                        <td>MTBFile-Sender</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>
+                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>
+        </section>
+
+        <section>
+            <h2><span th:if="${not transformations.isEmpty()}">✅</span><span th:if="${transformations.isEmpty()}">⛔</span> Transformationen</h2>
+
+            <h3>Syntax</h3>
+            Hier einige Beispiele zum Syntax des JSON-Path
+            <ul>
+                <li style="padding: 0.6rem 0;"><span class="bg-path">diagnoses[*].icdO3T.version</span>: Ersetze die ICD-O3T-Version in allen Diagnosen, z.B. zur Version der deutschen Übersetzung</li>
+                <li style="padding: 0.6rem 0;"><span class="bg-path">patient.gender</span>: Ersetze das Geschlecht des Patienten, z.B. in das von bwHC verlangte Format</li>
+            </ul>
+
+            <h3>Konfigurierte Transformationen</h3>
+            <th:block th:if="${transformations.isEmpty()}">
+            <p>
+                Keine konfigurierten Transformationen.
+            </p>
+            </th:block>
+            <th:block th:if="${not transformations.isEmpty()}">
+            <p>
+                Hier sehen Sie eine Übersicht der konfigurierten Transformationen.
+            </p>
+
+            <table>
+                <thead>
                 <tr>
-                    <td>MTBFile-Sender</td>
-                    <td>[[ ${mtbFileSender} ]]</td>
+                    <th>JSON-Path</th>
+                    <th>Transformation von &rArr; nach</th>
                 </tr>
-            </tbody>
-        </table>
-
-        <h2><span th:if="${connectionAvailable}">✅</span><span th:if="${not(connectionAvailable)}">⚡</span> Verbindung zum bwHC-Backend</h2>
-        <p>
-            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>
-
-        <h2>Transformationen</h2>
-
-        <h3>Syntax</h3>
-        Hier einige Beispiele zum Syntax des JSON-Path
-        <ul>
-            <li style="padding: 0.6rem 0;"><span class="bg-path">diagnoses[*].icdO3T.version</span>: Ersetze die ICD-O3T-Version in allen Diagnosen, z.B. zur Version der deutschen Übersetzung</li>
-            <li style="padding: 0.6rem 0;"><span class="bg-path">patient.gender</span>: Ersetze das Geschlecht des Patienten, z.B. in das von bwHC verlangte Format</li>
-        </ul>
-
-        <h3>Konfigurierte Transformationen</h3>
-        <p>
-            Hier sehen Sie eine Übersicht der konfigurierten Transformationen.
-        </p>
-
-        <table>
-            <thead>
-            <tr>
-                <th>JSON-Path</th>
-                <th>Transformation von &rArr; nach</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr th:each="transformation : ${transformations}">
-                <td>
-                    <span class="bg-path" title="Ersetze Wert(e) an dieser Stelle im MTB-File">[[ ${transformation.path} ]]</span>
-                </td>
-                <td>
-                    <span class="bg-from" title="Ersetze immer dann, wenn dieser Wert enthalten ist">[[ ${transformation.existingValue} ]]</span>
-                    <strong>&rArr;</strong>
-                    <span class="bg-to" title="Ersetze durch diesen Wert">[[ ${transformation.newValue} ]]</span>
-                </td>
-            </tr>
-            </tbody>
-        </table>
+                </thead>
+                <tbody>
+                <tr th:each="transformation : ${transformations}">
+                    <td>
+                        <span class="bg-path" title="Ersetze Wert(e) an dieser Stelle im MTB-File">[[ ${transformation.path} ]]</span>
+                    </td>
+                    <td>
+                        <span class="bg-from" title="Ersetze immer dann, wenn dieser Wert enthalten ist">[[ ${transformation.existingValue} ]]</span>
+                        <strong>&rArr;</strong>
+                        <span class="bg-to" title="Ersetze durch diesen Wert">[[ ${transformation.newValue} ]]</span>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+            </th:block>
+        </section>
     </main>
 </body>
 </html>