diff options
Diffstat (limited to 'src/main/resources')
| -rw-r--r-- | src/main/resources/static/style.css | 39 | ||||
| -rw-r--r-- | src/main/resources/templates/index.html | 81 |
2 files changed, 93 insertions, 27 deletions
diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css index f3266e2..e215eb0 100644 --- a/src/main/resources/static/style.css +++ b/src/main/resources/static/style.css @@ -92,6 +92,10 @@ nav li a:hover { text-decoration: underline; } +a { + color: var(--bg-blue); +} + .breadcrumps { margin: 0 auto; max-width: 1140px; @@ -188,6 +192,41 @@ table { font-family: sans-serif; } +.paged-table { + border: 1px solid var(--table-border); + border-radius: .5em; + background: white; +} + +.paged-table > table { + border: none; + background: transparent; +} + +.page-control { + border-radius: .5em; + padding: 1em 2em; + text-align: center; + + line-height: 1.75em; +} + +.page-control a { + padding: 0 .25em; + font-size: 1.75em; + color: var(--bg-gray); + text-decoration: none; +} + +.page-control a[href] { + color: var(--bg-blue); +} + +.page-control span { + padding: 0 .5em; + vertical-align: text-bottom; +} + #samples-table.max { width: 100vw; position: fixed; diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index 96f1cfe..ec8b3c7 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -11,35 +11,62 @@ <h1>Letzte Anfragen</h1> - <table> - <thead> - <tr> - <th>Status</th> - <th>Typ</th> - <th>ID</th> - <th>Datum</th> - <th>Patienten-ID</th> - </tr> - </thead> - <tbody> - <tr th:each="request : ${requests}"> - <td th:if="${request.status.value.contains('success')}" class="bg-green"><small>[[ ${request.status} ]]</small></td> - <td th:if="${request.status.value.contains('warning')}" class="bg-yellow"><small>[[ ${request.status} ]]</small></td> - <td th:if="${request.status.value.contains('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 th:if="not ${request.report}">[[ ${request.uuid} ]]</td> - <td th:if="${request.report}"> - <a th:href="@{/report/{id}(id=${request.uuid})}">[[ ${request.uuid} ]]</a> - </td> - <td><time th:datetime="${request.processedAt}">[[ ${request.processedAt} ]]</time></td> - <td>[[ ${request.patientId} ]]</td> - </tr> - </tbody> - </table> + <div class="paged-table"> + <div class="page-control"> + <a id="first-page-link" th:href="@{/(page=${0})}" title="Zum Anfang: Taste W" th:if="${not requests.isFirst()}">⇤</a><a th:if="${requests.isFirst()}">⇤</a> + <a id="prev-page-link" th:href="@{/(page=${requests.getNumber() - 1})}" title="Seite zurück: Taste A" th:if="${not requests.isFirst()}">←</a><a th:if="${requests.isFirst()}">←</a> + <span>Seite [[ ${requests.getNumber() + 1} ]] von [[ ${requests.getTotalPages()} ]]</span> + <a id="next-page-link" th:href="@{/(page=${requests.getNumber() + 1})}" title="Seite vor: Taste D" th:if="${not requests.isLast()}">→</a><a th:if="${requests.isLast()}">→</a> + <a id="last-page-link" th:href="@{/(page=${requests.getTotalPages() - 1})}" title="Zum Ende: Taste S" th:if="${not requests.isLast()}">⇥</a><a th:if="${requests.isLast()}">⇥</a> + </div> + <table class="paged"> + <thead> + <tr> + <th>Status</th> + <th>Typ</th> + <th>ID</th> + <th>Datum</th> + <th>Patienten-ID</th> + </tr> + </thead> + <tbody> + <tr th:each="request : ${requests}"> + <td th:if="${request.status.value.contains('success')}" class="bg-green"><small>[[ ${request.status} ]]</small></td> + <td th:if="${request.status.value.contains('warning')}" class="bg-yellow"><small>[[ ${request.status} ]]</small></td> + <td th:if="${request.status.value.contains('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 th:if="not ${request.report}">[[ ${request.uuid} ]]</td> + <td th:if="${request.report}"> + <a th:href="@{/report/{id}(id=${request.uuid})}">[[ ${request.uuid} ]]</a> + </td> + <td><time th:datetime="${request.processedAt}">[[ ${request.processedAt} ]]</time></td> + <td>[[ ${request.patientId} ]]</td> + </tr> + </tbody> + </table> + </div> </main> <script th:src="@{/scripts.js}"></script> + <script> + window.onload = () => { + let keyBindings = { + 'w': 'first-page-link', + 'a': 'prev-page-link', + 'd': 'next-page-link', + 's': 'last-page-link' + }; + window.onkeydown = (event) => { + for (const [key, elemId] of Object.entries(keyBindings)) { + if (event.key === key && document.getElementById(elemId)) { + document.getElementById(elemId).style.background = 'yellow'; + document.getElementById(elemId).click(); + } + } + }; + }; + </script> </body> </html>
\ No newline at end of file |