work/timetrack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

calendar like slot overview

Browse Source
This commit is contained in:
Jörg Henke
2024-01-05 10:42:05 +01:00
parent 568dfc8a64
commit 7fc30ffe48
6 changed files with 98 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/main/resources/static/css/style.css
View File

@@ -406,7 +406,7 @@ body {
.slot_badge {
white-space: nowrap;
margin-bottom: 2px;
margin-bottom: 4px;
}
.slot_badge_left {
@@ -415,6 +415,8 @@ body {
background-color: #ccc;
color: black;
padding-left: 2px;
padding-top: 2px;
padding-bottom: 2px;
}
[data-bs-theme=dark] .slot_badge_left {
@@ -424,8 +426,8 @@ body {
.slot_badge_middle {
border-top: 1px solid silver;
border-bottom: 1px solid silver;
padding-left: 2px;
padding-right: 2px;
padding: 2px;
text-decoration: none;
}
.slot_badge_middle:hover {
@@ -439,8 +441,24 @@ body {
background-color: transparent;
color: black;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
}
[data-bs-theme=dark] .slot_badge_right {
color: white;
}
.flex-row-weekday {
display: flex;
flex-flow: row wrap;
}
.row-weekday > .col {
flex: 0 1 calc(100%/7);
max-width: calc(100%/7);
}
.boldy {
font-weight: bolder;
}

26
src/main/resources/templates/done/list.html
View File

@@ -243,17 +243,33 @@
<div id="div_slot" class="tab-pane fade tab-pane-table">
<div class="alert alert-info">
Zur Berechnung der täglichen Überstunden müssen Slots angelegt werden, die definieren, an welchen Tagen wieviele Stunden zu arbeiten ist.
Urlaub und Arbeitsbefreiung können durch das Entfernen des jeweiligen Slots ermöglicht werden.
Die Überstundenberechnung hängt von der Vollständigkeit der vorhandenen Slots ab; fehlen Slots, wird die Arbeitszeit jener Tage nicht eingerechnet.
Die Überstundenberechnung hängt von der Vollständigkeit der vorhandenen Slots ab; fehlen Slots, wird die Arbeitszeit jener Tage nicht eingerechnet.<br />
Hier werden nur die Slots für diesen Monat angezeigt.
</div>
<div class="container">
<div class="row">
<div class="row row-weekday">
<div class="col">Sonntag</div>
<div class="col">Montag</div>
<div class="col">Dienstag</div>
<div class="col">Mittwoch</div>
<div class="col">Donnerstag</div>
<div class="col">Freitag</div>
<div class="col">Samstag</div>
</div>
<div class="row row-weekday">
<div class="col slot_badge" th:each="o : ${slotOffset}"></div>
<div class="col slot_badge" th:each="s : ${slots}">
<span class="slot_badge_left" th:text="${#temporals.format(s.day, 'EEE, dd.MM.yyyy')}"></span><a th:href="@{/done/slot/{id}(id=${s.id})}" class="slot_badge_middle"><i class="fas fa-pencil"></i></a><span class="slot_badge_right" th:text="${s.printTime()}"></span>
<span class="slot_badge_left" th:text="${#temporals.format(s.day, 'dd.MM.')}">
</span><a th:href="@{/done/slot/{id}(id=${s.id})}" class="slot_badge_middle" th:if="${s.id}">
<i class="fas fa-pencil"></i>
</a><a th:href="@{/done/slot/add?day=${d}(d=${s.day})}" class="slot_badge_middle" th:unless="${s.id}">
<i class="fas fa-plus"></i>
</a>
<span class="slot_badge_right boldy" th:text="${s.printTime()}" th:if="${s.id}"></span>
<span class="slot_badge_right" th:unless="${s.id}">&nbsp;--:--&nbsp;</span>
</div>
</div>
</div>
TODO: nur die Slots dieses Monats anzeigen, damit die Ladezeit nicht unnötig belastet wird
</div>
</div>
<script type="text/javascript">