added overtime to time and team page + ui improvements + mobile support for team page closed #12

This commit is contained in:
2025-09-04 00:11:33 +02:00
parent 45440b6457
commit 1ae30c11cb
19 changed files with 2138 additions and 387 deletions

View File

@@ -1,8 +1,10 @@
package templates
import (
"arbeitszeitmessung/helper"
"arbeitszeitmessung/models"
"fmt"
"log"
"strconv"
"time"
)
@@ -62,14 +64,21 @@ templ weekDayComponent(user models.User, day models.WorkDay) {
templ employeComponent(week models.WorkWeek) {
{{
year, kw := week.WeekStart.ISOWeek()
progress := (float32(week.Worktime.Hours()) / week.User.ArbeitszeitPerWoche) * 100
log.Println(progress)
}}
<div class="employeComponent grid-sub divide-x-1">
<div class="grid-cell">
<div class="employeComponent grid-sub responsive lg:divide-x-1 max-md:divide-y-1 @container">
<div class="grid-cell flex flex-col max-md:bg-neutral-300 gap-2">
<p class="font-bold uppercase">{ week.User.Vorname } { week.User.Name }</p>
<p class="text-sm">Arbeitszeit</p>
<p class="text-accent">{ week.GetWorkHourString() }</p>
<div class="flex flex-row gap-2 col-span-3">
@timeGaugeComponent(uint8(progress), false, false)
<div>
<p>Arbeitszeit: { fmt.Sprintf("%s", helper.FormatDuration(week.Worktime)) }</p>
<p>Überstunden: { fmt.Sprintf("%s", helper.FormatDuration(week.Overtime)) }</p>
</div>
</div>
</div>
<div class="grid-cell col-span-3 flex flex-col gap-2">
<div class="grid-cell col-span-3 flex flex-col @7xl:grid @7xl:grid-cols-5 gap-2 content-baseline">
for _, day := range week.WorkDays {
@weekDayComponent(week.User, day)
}
@@ -79,9 +88,14 @@ templ employeComponent(week models.WorkWeek) {
<input type="hidden" name="method" value="accept"/>
<input type="hidden" name="user" value={ strconv.Itoa(week.User.PersonalNummer) }/>
<input type="hidden" name="week" value={ week.WeekStart.Format(time.DateOnly) }/>
<button type="submit" class="w-full bg-neutral-100 cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm hover:text-white transition-colors border-neutral-900 focus:bg-neutral-700 active:bg-neutral-700 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50">
<p class="">Bestätigen</p>
</button>
<div class="flex flex-col gap-2">
if week.Status == models.WeekStatusDifferences {
<p class="text-red-600 text-sm">Unterschiedliche Arbeitszeit zwischen Abrechnung und individuellen Buchungen</p>
}
<button type="submit" disabled?={ week.Status == models.WeekStatusDifferences } class="btn">Bestätigen</button>
// TODO maybe delete function
// <button type="button" disabled?={ week.Status < models.WeekStatusDifferences } class="hover:bg-red-600 btn">Antrag löschen</button>
</div>
</form>
</div>
}