From f98c9703488f04667fa30fc3172ca28b686f8bf3 Mon Sep 17 00:00:00 2001
From: Paul-Christian Volkmer
Date: Tue, 9 Jan 2024 18:09:44 +0100
Subject: chore: layout and style changes

---
 src/main/resources/templates/configs.html    | 121 +++++++++++++++------------
 src/main/resources/templates/fragments.html  |   4 +
 src/main/resources/templates/report.html     |  16 ++--
 src/main/resources/templates/statistics.html |  40 +++++----
 4 files changed, 104 insertions(+), 77 deletions(-)

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

diff --git a/src/main/resources/templates/configs.html b/src/main/resources/templates/configs.html
index 1d76063..5de2a79 100644
--- a/src/main/resources/templates/configs.html
+++ b/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>
-                <tr>
-                    <td>MTBFile-Sender</td>
-                    <td>[[ ${mtbFileSender} ]]</td>
-                </tr>
-            </tbody>
-        </table>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>Pseudonym erzeugt über</td>
+                        <td>[[ ${pseudonymGenerator} ]]</td>
+                    </tr>
+                    <tr>
+                        <td>MTBFile-Sender</td>
+                        <td>[[ ${mtbFileSender} ]]</td>
+                    </tr>
+                </tbody>
+            </table>
+        </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>
+            <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>
 
-        <h2>Transformationen</h2>
+        <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>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>
+            <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>
-                <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>
+            <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>
+            </th:block>
+        </section>
     </main>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments.html b/src/main/resources/templates/fragments.html
index fbbe47d..677e841 100644
--- a/src/main/resources/templates/fragments.html
+++ b/src/main/resources/templates/fragments.html
@@ -7,6 +7,10 @@
 <body>
     <div th:fragment="nav">
         <nav>
+            <a class="nav-home" th:href="@{/}">
+                <img th:src="@{/icon.svg}" alt="Icon" />
+                <span>ETL-Processor</span>
+            </a>
             <ul>
                 <li><a th:href="@{/}">Übersicht</a></li>
                 <li><a th:href="@{/statistics}">Statistiken</a></li>
diff --git a/src/main/resources/templates/report.html b/src/main/resources/templates/report.html
index 4aaad68..01accc4 100644
--- a/src/main/resources/templates/report.html
+++ b/src/main/resources/templates/report.html
@@ -15,6 +15,7 @@
             <thead>
                 <tr>
                     <th>Status</th>
+                    <th>Typ</th>
                     <th>ID</th>
                     <th>Datum</th>
                     <th>Patienten-ID</th>
@@ -27,6 +28,7 @@
                     <td th:if="${request.status.value == 'error'}" class="bg-red"><small>[[ ${request.status} ]]</small></td>
                     <td th:if="${request.status.value == 'unknown'}" class="bg-gray"><small>[[ ${request.status} ]]</small></td>
                     <td th:if="${request.status.value == 'duplication'}" class="bg-gray"><small>[[ ${request.status} ]]</small></td>
+                    <td th:style="${request.type.value == 'delete'} ? 'color: red;'"><small>[[ ${request.type} ]]</small></td>
                     <td>[[ ${request.uuid} ]]</td>
                     <td><time th:datetime="${request.processedAt}">[[ ${request.processedAt} ]]</time></td>
                     <td>[[ ${request.patientId} ]]</td>
@@ -36,12 +38,16 @@
 
         <h2 th:text="${request.report.description}"></h2>
 
-        <table th:if="not ${issues.isEmpty()}">
+        <p th:if="${issues.isEmpty()}">
+            Keine weiteren Angaben.
+        </p>
+
+        <table th:if="${not issues.isEmpty()}">
             <thead>
-            <tr>
-                <th>Schweregrad</th>
-                <th>Beschreibung</th>
-            </tr>
+                <tr>
+                    <th>Schweregrad</th>
+                    <th>Beschreibung</th>
+                </tr>
             </thead>
             <tbody>
             <tr th:each="issue : ${issues}">
diff --git a/src/main/resources/templates/statistics.html b/src/main/resources/templates/statistics.html
index c98a973..d06e40b 100644
--- a/src/main/resources/templates/statistics.html
+++ b/src/main/resources/templates/statistics.html
@@ -13,25 +13,29 @@
             Hier sehen Sie eine Übersicht über eingegangene Anfragen.
         </p>
 
-        <h2>MTB-File-Anfragen</h2>
-        <p>
-            Anfragen zur Aktualisierung von Patientendaten durch Übermittlung eines MTB-Files.
-        </p>
-        <div>
-            <div id="piechart1" class="chart chart-50pc"></div>
-            <div id="piechart2" class="chart chart-50pc"></div>
-        </div>
-        <div id="barchart" class="chart"></div>
+        <section>
+            <h2>MTB-File-Anfragen</h2>
+            <p>
+                Anfragen zur Aktualisierung von Patientendaten durch Übermittlung eines MTB-Files.
+            </p>
+            <div>
+                <div id="piechart1" class="chart chart-50pc"></div>
+                <div id="piechart2" class="chart chart-50pc"></div>
+            </div>
+            <div id="barchart" class="chart"></div>
+        </section>
 
-        <h2>Löschanfragen</h2>
-        <p>
-            Anfragen zur Löschung von Patientendaten, wenn kein Consent vorliegt.
-        </p>
-        <div>
-            <div id="piechartdel1" class="chart chart-50pc"></div>
-            <div id="piechartdel2" class="chart chart-50pc"></div>
-        </div>
-        <div id="barchartdel" class="chart"></div>
+        <section>
+            <h2>Löschanfragen</h2>
+            <p>
+                Anfragen zur Löschung von Patientendaten, wenn kein Consent vorliegt.
+            </p>
+            <div>
+                <div id="piechartdel1" class="chart chart-50pc"></div>
+                <div id="piechartdel2" class="chart chart-50pc"></div>
+            </div>
+            <div id="barchartdel" class="chart"></div>
+        </section>
 
     </main>
     <script th:src="@{/echarts.min.js}"></script>
-- 
cgit v1.2.3