From f98c9703488f04667fa30fc3172ca28b686f8bf3 Mon Sep 17 00:00:00 2001
From: Paul-Christian Volkmer <volkmer_p@ukw.de>
Date: Tue, 9 Jan 2024 18:09:44 +0100
Subject: [PATCH] chore: layout and style changes

---
 src/main/resources/static/style.css          | 156 ++++++++++++-------
 src/main/resources/templates/configs.html    | 127 ++++++++-------
 src/main/resources/templates/fragments.html  |   4 +
 src/main/resources/templates/report.html     |  16 +-
 src/main/resources/templates/statistics.html |  40 ++---
 5 files changed, 205 insertions(+), 138 deletions(-)

diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css
index 73fa08a..f3266e2 100644
--- a/src/main/resources/static/style.css
+++ b/src/main/resources/static/style.css
@@ -1,5 +1,6 @@
 :root {
-    --table-border: rgba(96, 96, 96, 1);
+    --text: #333;
+    --table-border: rgba(16, 24, 40, .1);
 
     --bg-blue: rgb(0, 74, 157);
     --bg-blue-op: rgba(0, 74, 157, .35);
@@ -19,49 +20,78 @@
     --bg-gray-op: rgba(112, 128, 144, .35);
 }
 
+html {
+    background: linear-gradient(-5deg, var(--bg-blue-op), transparent 10em);
+    min-height: 100vh;
+    overflow-y: scroll;
+}
+
 body {
-    margin: 0;
+    margin: 0 0 5em 0;
     font-family: sans-serif;
     font-size: .8rem;
-    color: #333;
+    color: var(--text);
+
+    min-height: 100vh;
+
+    background: url(bg.jpeg) no-repeat;
+    background-size: contain;
 }
 
 nav {
     margin: 0 auto;
-    background: #d5dad5;
-    height: 3rem;
+    padding: 2em 0;
+
+    line-height: 1.5rem;
     max-width: 1140px;
+
+    border-bottom: 1px solid var(--table-border);
 }
 
-nav a {
-    color: #004a8f;
-    text-transform: uppercase;
+nav > a.nav-home {
+    float: left;
+
+    color: var(--text);
+    line-height: 1.5em;
     text-decoration: none;
-    line-height: 2rem;
-    font-weight: 700;
+
+    font-size: 1.5em;
+    font-weight: bold;
 }
 
-nav a:hover {
-    text-decoration: underline;
+nav > a.nav-home > img {
+    width: 1.5em;
+    vertical-align: middle;
 }
 
 nav > ul {
-    margin: 0 3rem;
+    margin: 0 0 0 auto;
     padding: 0;
+
+    width: max-content;
 }
 
 nav > ul > li {
-    background: #fbfbfb;
-    display: block;
-    float: left;
-    padding: 2px 1rem;
-    border-left: 1px solid #d5dad5;
+    display: inline-block;
+    padding: 0 1rem;
+    border-left: 1px solid var(--table-border);
 }
 
 nav > ul > li:first-of-type {
     border-left: none;
 }
 
+nav li a {
+    color: #004a8f;
+    text-transform: uppercase;
+    text-decoration: none;
+    font-weight: 700;
+}
+
+nav li a:hover {
+    text-decoration: underline;
+}
+
 .breadcrumps {
     margin: 0 auto;
     max-width: 1140px;
@@ -85,7 +115,7 @@ nav > ul > li:first-of-type {
 }
 
 .breadcrumps ul li a {
-    color: #333333;
+    color: var(--text);
     text-decoration: none;
 }
 
@@ -98,6 +128,10 @@ main {
     max-width: 1140px;
 }
 
+section {
+    margin: 3em 0;
+}
+
 form {
     margin: 1rem 0;
     padding: 1rem;
@@ -139,12 +173,17 @@ form.samplecode-input input:focus-visible {
     background: lightgreen;
 }
 
-table {
-    border-top: 1px solid var(--table-border);
-    border-left: 1px solid var(--table-border);
-    border-spacing: 0;
-    border-radius: 3px;
+table, .chart {
+    border: 1px solid var(--table-border);
+    padding: 1.5em;
 
+    border-spacing: 0;
+    border-radius: .5em;
+
+    background: white;
+}
+
+table {
     min-width: 100%;
     font-family: sans-serif;
 }
@@ -165,64 +204,71 @@ table.samples {
     display: block;
 }
 
-th {
-    background: #eee;
-}
-
-td, th {
+th, td {
     padding: 0.4rem .2rem;
 
-    border-right: 1px solid var(--table-border);
-    border-bottom: 1px solid var(--table-border);
+    line-height: 2em;
 
     text-align: left;
     white-space: nowrap;
     vertical-align: top;
 }
 
+th {
+    border-bottom: 1px solid var(--bg-gray);
+}
+
 td {
     font-family: monospace;
+    border-bottom: 1px solid var(--bg-gray-op);
 }
 
-td.bg-blue, th.bg-blue {
+tr:last-of-type > td {
+    border-bottom: none;
+}
+
+td > small {
+    display: block;
+    text-align: center;
+}
+
+td.bg-blue, th.bg-blue,
+td.bg-green, th.bg-green,
+td.bg-yellow, th.bg-yellow,
+td.bg-red, th.bg-red,
+td.bg-gray, th.bg-gray
+{
+    width: 8em;
+}
+
+td.bg-blue > small, th.bg-blue > small {
     background: var(--bg-blue);
     color: white;
+    border-radius: 0.4em;
 }
 
-tr:has(td.bg-blue) {
-    background: var(--bg-blue-op);
-}
-
-td.bg-green, th.bg-green {
+td.bg-green > small, th.bg-green > small {
     background: var(--bg-green);
     color: white;
+    border-radius: 0.4em;
 }
 
-tr:has(td.bg-green) {
-    background: var(--bg-green-op);
-}
-
-td.bg-yellow, th.bg-yellow {
+td.bg-yellow > small, th.bg-yellow > small {
     background: var(--bg-yellow);
     color: white;
+    border-radius: 0.4em;
 }
 
-tr:has(td.bg-yellow) {
-    background: var(--bg-yellow-op);
-}
-
-td.bg-red, th.bg-red {
+td.bg-red > small, th.bg-red > small {
     background: var(--bg-red);
     color: white;
+    border-radius: 0.4em;
 }
 
-tr:has(td.bg-red) {
-    background: var(--bg-red-op);
-}
-
-td.bg-gray, th.bg-gray {
+td.bg-gray > small, th.bg-gray > small {
     background: var(--bg-gray);
     color: white;
+    border-radius: 0.4em;
 }
 
 .bg-path {
@@ -341,12 +387,6 @@ input.inline:focus-visible {
 }
 
 .chart {
-    padding: 1rem;
-    margin: .2rem;
-
-    border: 1px solid var(--table-border);
-    border-radius: 3px;
-
     width: calc(100% - 2.4rem - 4px);
     height: 320px;
 
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>
+                </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>
\ 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>