chore: layout and style changes

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;
 

src/main/resources/templates/configs.html

@@ -10,7 +10,8 @@
     <main>
         <h1>Konfiguration</h1>
 
-        <h2>Allgemeine Konfiguration</h2>
+        <section>
+            <h2>🔧 Allgemeine Konfiguration</h2>
             <table>
                 <thead>
                 <tr>
@@ -29,15 +30,19 @@
                     </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>
 
-        <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
@@ -47,6 +52,12 @@
             </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>
@@ -71,6 +82,8 @@
                 </tr>
                 </tbody>
             </table>
+            </th:block>
+        </section>
     </main>
 </body>
 </html>

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>

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,7 +38,11 @@
 
         <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>

src/main/resources/templates/statistics.html

@@ -13,6 +13,7 @@
             Hier sehen Sie eine Übersicht über eingegangene Anfragen.
         </p>
 
+        <section>
             <h2>MTB-File-Anfragen</h2>
             <p>
                 Anfragen zur Aktualisierung von Patientendaten durch Übermittlung eines MTB-Files.
@@ -22,7 +23,9 @@
                 <div id="piechart2" class="chart chart-50pc"></div>
             </div>
             <div id="barchart" class="chart"></div>
+        </section>
 
+        <section>
             <h2>Löschanfragen</h2>
             <p>
                 Anfragen zur Löschung von Patientendaten, wenn kein Consent vorliegt.
@@ -32,6 +35,7 @@
                 <div id="piechartdel2" class="chart chart-50pc"></div>
             </div>
             <div id="barchartdel" class="chart"></div>
+        </section>
 
     </main>
     <script th:src="@{/echarts.min.js}"></script>