tom/arbeitszeitmessung
3
0
Fork 0
Code Issues 17 Pull Requests Actions Packages Releases 9 Wiki Activity

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

Browse Source
This commit is contained in:
Tom Tröger
2025-09-04 00:11:33 +02:00
parent 45440b6457
commit 1ae30c11cb
19 changed files with 2138 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
Backend/templates/timeComponents.templ
View File

@@ -19,7 +19,7 @@ templ inputForm() {
<p class="font-bold uppercase">{ user.Vorname + " " + user.Name }</p>
<div class="justify-self-end">
<p class="text-sm">Überstunden</p>
<p class="text-accent">0h 0min (statisch)</p>
<p class="text-accent">{ user.Overtime }</p>
</div>
</div>
<form id="timeRangeForm" method="GET" class="grid-cell flex flex-row md:col-span-3 gap-2 ">
@@ -30,14 +30,14 @@ templ inputForm() {
</div>
</form>
<div class="grid-cell content-end">
<button type="submit" form="timeRangeForm" class="btn bg-neutral-100 color-neutral-700">
<button type="submit" form="timeRangeForm" class="btn bg-neutral-100 hover:bg-neutral-700 color-neutral-700">
<p class="">Anzeigen</p>
</button>
</div>
</div>
}
templ dayComponent(workDay models.WorkDay) {
templ dayComponent(workDay models.WorkDay, submitted bool) {
{{
work, pause := workDay.GetWorkTimeString()
user := ctx.Value("user").(models.User)
@@ -47,7 +47,7 @@ templ dayComponent(workDay models.WorkDay) {
justify = "justify-content: center"
}
}}
<div class="grid-sub divide-x-1 hover:bg-neutral-200 transition-colors">
<div class={ "grid-sub divide-x-1 hover:bg-neutral-200 transition-colors", templ.KV("bg-neutral-100", submitted) }>
<div class="grid-cell md:col-span-1 flex flex-row gap-2">
@timeGaugeComponent(workDay.GetWorkDayProgress(ctx.Value("user").(models.User)), workDay.Day.Equal(time.Now().Truncate(24*time.Hour)), workDay.RequiresAction())
<div>
@@ -59,8 +59,10 @@ templ dayComponent(workDay models.WorkDay) {
} else {
<p class=" text-accent">{ work }</p>
}
<p class="text-neutral-500">{ pause }</p>
<p class="text-neutral-500">{ overtime }</p>
<p class="text-neutral-500 flex flex-row items-center"><span class="icon-[material-symbols-light--motion-photos-paused-outline]"></span>{ pause }</p>
if overtime != "" {
<p class="text-neutral-500 flex flex-row items-center"><span class="icon-[material-symbols-light--more-time]"></span>{ overtime }</p>
}
}
</div>
</div>
@@ -127,7 +129,7 @@ templ timeGaugeComponent(progress uint8, today bool, warning bool) {
<div class={ "flex w-full items-center justify-center overflow-hidden rounded-full", bgColor } style={ fmt.Sprintf("height: %d%%", int(progress)) }></div>
</div>
} else {
<div class={ "w-2 h-full bg-accent rounded-md", bgColor }></div>
<div class={ "w-2 h-full bg-accent rounded-md flex-shrink-0", bgColor }></div>
}
}
@@ -156,12 +158,7 @@ templ absenceComponent(d models.WorkDay) {
templ newBookingComponent(d models.WorkDay) {
<div class="new-booking-component hidden group-[.edit]:flex flex-row gap-2 items-center">
<button name="action" value="add" type="submit" class="hover:text-accent cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="size-4 transition-colors" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"></path>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"></path>
</svg>
</button>
<button name="action" value="add" type="submit" class="hover:text-accent cursor-pointer icon-[material-symbols-light--add-circle-outline]"></button>
<input name="timestamp" type="time" value={ time.Now().Format("15:04") } class="text-neutral-700 group-[.edit]:inline hidden bg-neutral-100 text-sm border border-neutral-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-neutral-400 hover:border-neutral-300"/>
<input name="date" type="hidden" value={ d.Day.Format("2006-01-02") }/>
<select name="check_in_out">