summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/main/resources/static/style.css152
-rw-r--r--src/main/resources/templates/configs.html121
-rw-r--r--src/main/resources/templates/fragments.html4
-rw-r--r--src/main/resources/templates/report.html16
-rw-r--r--src/main/resources/templates/statistics.html40
5 files changed, 200 insertions, 133 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);
+table, .chart {
+ border: 1px solid var(--table-border);
+ padding: 1.5em;
+
border-spacing: 0;
- border-radius: 3px;
+ 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 {
- background: var(--bg-blue);
- color: white;
+tr:last-of-type > td {
+ border-bottom: none;
}
-tr:has(td.bg-blue) {
- background: var(--bg-blue-op);
+td > small {
+ display: block;
+ text-align: center;
}
-td.bg-green, th.bg-green {
- background: var(--bg-green);
- color: white;
+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;
}
-tr:has(td.bg-green) {
- background: var(--bg-green-op);
+td.bg-blue > small, th.bg-blue > small {
+ background: var(--bg-blue);
+ color: white;
+ border-radius: 0.4em;
}
-td.bg-yellow, th.bg-yellow {
- background: var(--bg-yellow);
+td.bg-green > small, th.bg-green > small {
+ background: var(--bg-green);
color: white;
+ border-radius: 0.4em;
}
-tr:has(td.bg-yellow) {
- background: var(--bg-yellow-op);
+td.bg-yellow > small, th.bg-yellow > small {
+ background: var(--bg-yellow);
+ color: white;
+ border-radius: 0.4em;
}
-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>
- <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>
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-01 08:37:54 +0000