arbeitszeitmessung/Backend/templates/teamComponents.templ

package templates

import (
	"arbeitszeitmessung/helper"
	"arbeitszeitmessung/models"
	"fmt"
	"strconv"
	"time"
)

templ weekPicker(weekStart time.Time) {
	{{
		year, kw := weekStart.ISOWeek()
	}}
	<form method="get" class="flex flex-row gap-4 items-center justify-around">
		<input type="date" class="hidden" name="submission_date" value={ weekStart.Format(time.DateOnly) }/>
		<button onclick={ templ.JSFuncCall("navigateWeek", templ.JSExpression("this"), templ.JSExpression("event"), "-1") } class="btn">
			<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="chevron-left size-4 mx-auto" viewBox="0 0 16 16">
				<path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"></path>
			</svg>
		</button>
		<p class="whitespace-nowrap">KW { fmt.Sprintf("%02d, %d", kw, year) }</p>
		<button disabled?={ time.Since(weekStart) < 24*7*time.Hour } onclick={ templ.JSFuncCall("navigateWeek", templ.JSExpression("this"), templ.JSExpression("event"), "1") } class="btn disabled:pointer-events-none disabled:opacity-50">
			<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="chevron-right size-4 mx-auto" viewBox="0 0 16 16">
				<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"></path>
			</svg>
		</button>
	</form>
	if time.Since(weekStart) < 24*7*time.Hour {
		<p class="text-sm text-red-500">Die Woche kann erst am nächsten Montag gesendet werden!</p>
	}
}

templ weekDayComponent(user models.User, day models.WorkDay) {
	{{ work, pause := day.GetWorkTimeString() }}
	<div class="flex flex-row gap-2">
		@timeGaugeComponent(day.GetWorkDayProgress(user), false, false)
		<div class="flex flex-col">
			<p class=""><span class="font-bold uppercase hidden md:inline">{ day.Day.Format("Mon") }:</span> { day.Day.Format("02.01.2006") }</p>
			<div class="flex flex-row gap-2">
				<span class="text-accent">{ work }</span>
				<span class="text-neutral-500">{ pause }</span>
			</div>
			<div class="flex flex-row gap-2 items-center">
				<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="size-4" viewBox="0 0 16 16">
					<path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z"></path>
					<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0"></path>
				</svg>
				if day.Absence.Datum.Equal(day.Day) {
					<p>{ day.Absence.AbwesenheitTyp.Name }</p>
				} else if !day.TimeFrom.Equal(day.TimeTo) {
					<span>{ day.TimeFrom.Format("15:04") }</span>
					<span>-</span>
					<span>{ day.TimeTo.Format("15:04") }</span>
				} else {
					<p>Keine Anwesenheit</p>
				}
			</div>
		</div>
	</div>
}

templ employeComponent(week models.WorkWeek) {
	{{
		year, kw := week.WeekStart.ISOWeek()
		progress := (float32(week.Worktime.Hours()) / week.User.ArbeitszeitPerWoche) * 100
	}}
	<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>
			<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 @7xl:grid @7xl:grid-cols-5 gap-2 content-baseline">
			for _, day := range week.WorkDays {
				@weekDayComponent(week.User, day)
			}
		</div>
		<form class="grid-cell flex flex-col justify-between gap-2" method="post">
			<p class="text-sm"><span class="">Woche:</span> { fmt.Sprintf("%02d-%d", kw, year) }</p>
			<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) }/>
			<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>
}

templ userPresenceComponent(user models.User, present bool) {
	<div class="grid-cell group flex flex-row gap-2">
		if present {
			<div class="h-8 bg-accent rounded-md group-hover:text-black md:text-transparent text-center p-1">Anwesend</div>
		} else {
			<div class="h-8 bg-red-600 rounded-md group-hover:text-white md:text-transparent text-center p-1">Abwesend</div>
		}
		<p>{ user.Vorname } { user.Name }</p>
	</div>
}