diff options
Diffstat (limited to 'src/main/resources')
| -rw-r--r-- | src/main/resources/static/kafka.png | bin | 0 -> 1669 bytes | |||
| -rw-r--r-- | src/main/resources/static/server.png | bin | 0 -> 1454 bytes | |||
| -rw-r--r-- | src/main/resources/static/style.css | 24 | ||||
| -rw-r--r-- | src/main/resources/templates/configs.html | 20 |
4 files changed, 41 insertions, 3 deletions
diff --git a/src/main/resources/static/kafka.png b/src/main/resources/static/kafka.png Binary files differnew file mode 100644 index 0000000..2ba95c7 --- /dev/null +++ b/src/main/resources/static/kafka.png diff --git a/src/main/resources/static/server.png b/src/main/resources/static/server.png Binary files differnew file mode 100644 index 0000000..213e696 --- /dev/null +++ b/src/main/resources/static/server.png diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css index e215eb0..c438c28 100644 --- a/src/main/resources/static/style.css +++ b/src/main/resources/static/style.css @@ -434,4 +434,28 @@ input.inline:focus-visible { .chart-50pc { width: calc(50% - 2.4rem - 4px); +} + +.connection-display { + display: grid; + grid-template-columns: 10em 16em 10em; + place-items: center; + width: fit-content; + margin: 1em 0; +} + +.connection-display > * { + text-align: center; + margin: auto 0; +} + +.connection-display .connection { + display: block; + width: 100%; + height: 4px; + background: repeating-linear-gradient(to left, white, white 2px, transparent 2px, transparent 8px, white 8px) var(--bg-red); +} + +.connection-display .connection.available { + background: var(--bg-green); }
\ No newline at end of file diff --git a/src/main/resources/templates/configs.html b/src/main/resources/templates/configs.html index 5de2a79..a5b56d7 100644 --- a/src/main/resources/templates/configs.html +++ b/src/main/resources/templates/configs.html @@ -28,17 +28,31 @@ <td>MTBFile-Sender</td> <td>[[ ${mtbFileSender} ]]</td> </tr> + <tr> + <td>Endpunkt</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> + <div> 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> + <strong th:if="${not(connectionAvailable)}" style="color: red">nicht verfügbar.</strong> + </div> + <div class="connection-display"> + <img th:src="@{/server.png}" alt="ETL-Processor" /> + <span class="connection" th:styleappend="${connectionAvailable ? 'available' : ''}"></span> + <img th:if="${mtbFileSender.startsWith('Rest')}" th:src="@{/server.png}" alt="bwHC-Backend" /> + <img th:if="${mtbFileSender.startsWith('Kafka')}" th:src="@{/kafka.png}" alt="Kafka-Broker" /> + <span>ETL-Processor</span> + <span></span> + <span th:if="${mtbFileSender.startsWith('Rest')}">bwHC-Backend</span> + <span th:if="${mtbFileSender.startsWith('Kafka')}">Kafka-Broker</span> + </div> </section> <section> |
