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

CHANGE: added pause time in frontend

Browse Source
This commit is contained in:
Tom Tröger
2025-02-23 10:08:41 +01:00
parent f73cf0884c
commit 64468271d1
5 changed files with 178 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
Backend/templates/timeComponents.templ
View File

@@ -13,11 +13,13 @@ templ inputForm(){
urlParams := ctx.Value("urlParams").(url.Values)
user := ctx.Value("user").(models.User)
}}
<div class="col-span-full grid grid-cols-subgrid divide-x-1 divide-neutral-400">
<div class="bg-neutral-300 p-2 col-span-2 md:col-span-1">
<div class="col-span-full flex flex-col md:grid grid-cols-subgrid divide-x-1 divide-neutral-400">
<div class="bg-neutral-300 p-2 col-span-2 md:col-span-1 max-md:grid grid-cols-2">
<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>
</div>
</div>
<form id="timeRangeForm" method="GET" class="bg-neutral-300 flex flex-row col-span-3 md:col-span-3 p-2 gap-2 ">
// <input type="hidden" value={urlParams.Get("card_uid")} name="card_uid" class="">
@@ -27,29 +29,30 @@ templ inputForm(){
<input type="date" value={urlParams.Get("time_to")} name="time_to" class="w-full bg-neutral-100 placeholder:text-neutral-400 text-neutral-700 text-sm border border-neutral-0 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-neutral-400 hover:border-neutral-300" placeholder="Zeitraum bis...">
</div>
</form>
<div class="bg-neutral-300 border-r-0 p-2">
<button type="submit" form="timeRangeForm" class="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="hidden md:block" >Senden</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 md:hidden">
<path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" />
</svg>
<div class="bg-neutral-300 border-r-0 p-2 content-end">
<button type="submit" form="timeRangeForm" 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="" >Senden</p>
</button>
</div>
</div>
}
templ dayComponent(workDay models.WorkDay){
{{
work, pause := workDay.GetWorkTimeString()
}}
<div class="col-span-full grid grid-cols-subgrid divide-x-1 divide-neutral-400 hover:bg-neutral-200 transition-colors">
<div class="p-2 col-span-2 md:col-span-1 flex flex-row gap-2">
@timeGaugeComponent(workDay.GetWorkDayProgress(), workDay.Day.Equal(time.Now().Truncate(24 * time.Hour)), workDay.RequiresAction())
@timeGaugeComponent(workDay.GetWorkDayProgress(ctx.Value("user").(models.User)), workDay.Day.Equal(time.Now().Truncate(24 * time.Hour)), workDay.RequiresAction())
<div>
<p class="" ><span class="font-bold uppercase" >{workDay.Day.Format("Mon")}:</span> {workDay.Day.Format("02.01.2006")}</p>
<p class=" text-sm mt-1">Arbeitszeit</p>
<p class="" ><span class="font-bold uppercase hidden md:inline" >{workDay.Day.Format("Mon")}:</span> {workDay.Day.Format("02.01.2006")}</p>
<p class=" text-sm mt-1">Arbeitszeit:</p>
if (workDay.RequiresAction()) {
<p class="text-red-600">Bitte anpassen</p>
}else {
<p class=" text-accent">{workDay.GetWorkTimeString()}</p>
<p class=" text-accent">{work}</p>
}
<p class="text-neutral-500" >{pause}</p>
</div>
</div>
<div class="time-component flex flex-row col-span-3 md:col-span-3 gap-2 w-full p-2">
@@ -83,10 +86,10 @@ templ timeGaugeComponent(progress uint8, today bool, warning bool){
case (warning):
bgColor = "bg-red-600"
break
case (progress > 0 && progress < 80):
case (progress > 0 && progress < 90):
bgColor = "bg-orange-500"
break
case (80 < progress && progress <=110):
case (90 <= progress && progress <=110):
bgColor = "bg-accent"
break
case(progress > 110):