added new booking Button + ui for abwesenheit

This commit is contained in:
2025-04-25 17:03:05 +02:00
parent 65ea9c63e9
commit 35ec575a05
6 changed files with 1328 additions and 143 deletions

View File

@@ -1,7 +1,6 @@
package templates
import (
"arbeitszeitmessung/helper"
"arbeitszeitmessung/models"
"fmt"
"net/url"
@@ -19,7 +18,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">4h 32min</p>
<p class="text-accent">0h 0min (statisch)</p>
</div>
</div>
<form id="timeRangeForm" method="GET" class="grid-cell flex flex-row md:col-span-3 gap-2 ">
@@ -61,19 +60,21 @@ templ dayComponent(workDay models.WorkDay) {
}
</div>
</div>
<div class="time-component flex flex-row md:col-span-3 gap-2 w-full grid-cell">
<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 && workDay.Bookings[len(workDay.Bookings)-1].CounterId == 0 && helper.GetEnv("GO_ENV", "production") == "debug" {
@noBookingComponent(workDay)
if len(workDay.Bookings) <= 1 && workDay.Bookings[len(workDay.Bookings)-1].CounterId == 0 {
<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 helper.GetEnv("GO_ENV", "production") == "debug" {
@newBookingComponent(workDay)
}
@newBookingComponent(workDay)
}
<input type="hidden" name="action" value="change"/> <!-- default action value for ändern button -->
</form>
</div>
<div class="grid-cell">
@@ -83,12 +84,12 @@ templ dayComponent(workDay models.WorkDay) {
}
templ changeButtonComponent(id string) {
<button type="button" class="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 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50 group" type="button" onclick={ templ.JSFuncCall("editDay", templ.JSExpression("this"), templ.JSExpression("event"), id) }>
<button class="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 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50 group" type="submit" onclick={ templ.JSFuncCall("editDay", 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>
<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 1.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="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>
</svg>
</button>
}
@@ -135,25 +136,29 @@ templ lineComponent() {
</div>
}
templ noBookingComponent(d models.WorkDay) {
<div class="flex flex-col gap-2 align-center">
// <p class="text-xs">Keine Buchung gefunden. Bitte Grund der Abwesenheit eingeben!</p>
<select class="grow cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm transition-colors border-neutral-900" disabled name="abwesenheit">
templ absenceComponent(d models.WorkDay) {
<div class="no-booking-component hidden group-[.edit]:flex flex-col gap-2 align-center">
<select name="abwesenheit" onchange={ templ.JSFuncCall("editAbwesenheit", templ.JSExpression("this"), templ.JSExpression("event")) } class="grow cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm transition-colors border-neutral-900" disabled>
<option value="0">Abwesenheit?</option>
<option value="1">Urlaub</option>
<option value="2">Kurzarbeit</option>
<option value="3">Krank</option>
<option value="4">Kindkrank</option>
</select>
@newBookingComponent(d)
</div>
}
templ newBookingComponent(d models.WorkDay) {
<div class="hidden group-[.edit]:block">
<input 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"/>
<button type="button">Neue Buchung</button>
<select>
<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>
<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">
<option value="0" disabled>Kommen/Gehen</option>
<option value="3" selected?={ d.Bookings[len(d.Bookings)-1].CheckInOut%2 == 0 }>Kommen</option>
<option value="4" selected?={ d.Bookings[len(d.Bookings)-1].CheckInOut%2 == 1 }>Gehen</option>