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

ui/ux improvements on time page
All checks were successful
Tests / Run Go Tests (push) Successful in 15s
Details

Browse Source
This commit is contained in:
Tom Tröger
2025-10-04 19:16:21 +02:00
parent c093127a8c
commit 566776910a
11 changed files with 526 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
Backend/templates/timeComponents.templ
View File

@@ -19,78 +19,16 @@ templ lineComponent() {
</div>
}
// templ workDayComponent(workDay models.WorkDay, submitted bool) {
// {{
// // work, pause := workDay.GetWorkTimeString()
// user := ctx.Value("user").(models.User)
// work, pause, overtime := workDay.GetAllWorkTimesReal(user)
// // overtime := helper.FormatDuration(workDay.CalcOvertime(user))
// justify := ""
// if len(workDay.Bookings) <= 1 {
// justify = "justify-content: center"
// }
// }}
// <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.GetDayProgress(user), workDay.Day.Equal(time.Now().Truncate(24*time.Hour)))
// <div>
// <p class=""><span class="font-bold uppercase hidden md:inline">{ workDay.Day.Format("Mon") }:</span> { workDay.Day.Format("02.01.2006") }</p>
// if (workDay.RequiresAction()) {
// <p class="text-red-600">Bitte anpassen</p>
// } else {
// if work > 0 {
// <p class=" text-sm mt-1">Arbeitszeit:</p>
// <p class="text-accent flex flex-row items-center"><span class="icon-[material-symbols-light--nest-clock-farsight-analog-outline]"></span>{ helper.FormatDuration(work) }</p>
// }
// if pause > 0 {
// }
// <p class="text-neutral-500 flex flex-row items-center"><span class="icon-[material-symbols-light--motion-photos-paused-outline]"></span>{ helper.FormatDuration(pause) }</p>
// if overtime > 0 {
// <p class="text-neutral-500 flex flex-row items-center"><span class="icon-[material-symbols-light--more-time]"></span>{ helper.FormatDuration(overtime) }</p>
// }
// }
// </div>
// </div>
// <div class="all-booking-component flex flex-row md:col-span-3 gap-2 w-full grid-cell">
// @lineComponent()
// <form id={ "time-" + workDay.Day.Format("2006-01-02") } class="flex flex-col gap-2 group w-full justify-between" style={ justify } method="post">
// if len(workDay.Bookings) < 1 {
// <p class="text group-[.edit]:hidden">Keine Buchung gefunden. Bitte Arbeitsstunden oder Grund der Abwesenheit eingeben!</p>
// @absenceComponent(workDay)
// @newBookingComponent(workDay)
// } else {
// @absenceComponent(workDay)
// for _, booking := range workDay.Bookings {
// @bookingComponent(booking)
// }
// if workDay.IsKurzArbeit() {
// <p>Kurzarbeit</p>
// }
// @newBookingComponent(workDay)
// }
// <input type="hidden" name="action" value="change"/> <!-- default action value for ändern button -->
// </form>
// </div>
// <div class="grid-cell">
// @changeButtonComponent("time-" + workDay.Day.Format("2006-01-02"))
// </div>
// </div>
// }
templ changeButtonComponent(id string, workDay bool) {
{{
functionName := "editDay"
if !workDay {
functionName = "editAbsence"
}
}}
<button class="btn w-auto group" type="submit" onclick={ templ.JSFuncCall(functionName, templ.JSExpression("this"), templ.JSExpression("event"), id) }>
<p class="hidden md:block group-[.edit]:hidden">Ändern</p>
<p class="hidden group-[.edit]:md:block">Absenden</p>
<button class="btn w-auto group/button" type="submit" onclick={ templ.JSFuncCall("editWorkday", templ.JSExpression("this"), templ.JSExpression("event"), id, workDay) }>
<p class="hidden md:block group-[.edit]/button:hidden">Ändern</p>
<p class="hidden group-[.edit]/button:md:block">Absenden</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4 md:hidden">
<path class="group-[.edit]:hidden md:hidden" d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325"></path>
<path class="hidden group-[.edit]:block md:hidden" d="M12.736 3.97a.733.733 0 0 1 j1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"></path>
<path class="group-[.edit]/button:hidden md:hidden" d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325"></path>
<path class="hidden group-[.edit]/button:block md:hidden" d="M12.736 3.97a.733.733 0 0 1 j1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"></path>
</svg>
</button>
<button class="hidden group-[.edit]:flex btn basis-[content] items-center" onclick={ templ.JSFuncCall("clearEditState") }><span class="size-5 icon-[material-symbols-light--cancel-outline]"></span></button>
}
templ timeGaugeComponent(progress int8, today bool) {
@@ -125,14 +63,20 @@ templ timeGaugeComponent(progress int8, today bool) {
templ newAbsenceComponent() {
<div class="no-booking-component hidden group-[.edit]:flex flex-col gap-2 align-center ">
<button type="button" name="absence" onclick={ templ.JSFuncCall("editAbsence", templ.JSExpression("this"), templ.JSExpression("event"), 0) } class="btn border-neutral-500">
<button type="button" name="absence" onclick={ templ.JSFuncCall("editWorkday", templ.JSExpression("this"), templ.JSExpression("event"), 0, false) } class="btn border-neutral-500">
Neue Abwesenheit
</button>
</div>
}
templ absenceComponent(a *models.Absence, isKurzarbeit bool) {
<div class="flex flex-row items-center gap-2 edit-box">
{{
editBox := ""
if isKurzarbeit {
editBox = "edit-box"
}
}}
<div class={ "flex flex-row items-center gap-2", editBox }>
<input type="hidden" name="date_from" value={ a.DateFrom.Format("2006-01-02") }/>
<input type="hidden" name="date_to" value={ a.DateTo.Format("2006-01-02") }/>
<input type="hidden" name="aw_type" value={ a.AbwesenheitTyp.Id }/>