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

ui update /team + overtime updates

Browse Source
This commit is contained in:
Tom Tröger
2025-09-03 14:31:05 +02:00
parent 492216b160
commit 483c1e29ba
8 changed files with 621 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
Backend/templates/pages.templ
View File

@@ -1,8 +1,10 @@
package templates
import (
"arbeitszeitmessung/helper"
"arbeitszeitmessung/models"
"fmt"
"log"
"strconv"
"time"
)
@@ -48,8 +50,7 @@ templ UserPage(status int) {
@Base()
@headerComponent()
<div class="grid-main divide-y-1">
<div class="grid-sub"></div>
<form method="POST" class="grid-sub divide-x-1">
<form method="POST" class="grid-sub responsive lg:divide-x-1">
<h1 class="grid-cell font-bold uppercase text-xl text-center">Passwort ändern</h1>
<div class="grid-cell col-span-3 flex flex-col gap-2">
<input name="password" placeholder="Aktuelles Passwort" type="password" class="w-full placeholder:text-neutral-400 text-neutral-700 text-sm border border-neutral-300 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none hover:border-neutral-500"/>
@@ -65,83 +66,91 @@ templ UserPage(status int) {
}
</div>
<div class="grid-cell">
<button name="action" value="change-pass" type="submit" class="w-full cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm hover:text-white transition-colors border-neutral-300 focus:bg-neutral-700 active:bg-neutral-700 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50">Ändern</button>
<button name="action" value="change-pass" type="submit" class="btn">Ändern</button>
</div>
</form>
<div class="grid-sub divide-x-1">
<div class="grid-sub responsive lg:divide-x-1">
<h1 class="grid-cell font-bold uppercase text-xl text-center">Nutzer abmelden</h1>
<div class="grid-cell col-span-3">
<p>Nutzer von Weboberfläche abmelden.</p>
</div>
<div class="grid-cell">
<button onclick="logoutUser" type="button" class="w-full cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm hover:text-white transition-colors border-neutral-300 focus:bg-neutral-700 active:bg-neutral-700 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50">Abmelden</button>
<button onclick="logoutUser" type="button" class="btn">Abmelden</button>
</div>
</div>
</div>
}
templ statusCheckMark(status models.WeekStatus, target models.WeekStatus) {
if status >= target {
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle" 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="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05"></path>
</svg>
} else {
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle" 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>
</svg>
}
}
templ TeamPage(weeks []models.WorkWeek, userWeek models.WorkWeek) {
{{
year, kw := userWeek.WeekStart.ISOWeek()
}}
@Base()
@headerComponent()
{{
progress := (float32(userWeek.WorkHours.Hours()) / userWeek.User.ArbeitszeitPerWoche) * 100
log.Println(userWeek.CheckStatus())
}}
<div class="grid-main divide-y-1">
<div class="grid-sub divide-x-1 bg-neutral-300">
<div class="grid-cell font-bold uppercase">
{ fmt.Sprintf("%s %s", userWeek.User.Vorname, userWeek.User.Name) }
<div class="grid-sub lg:divide-x-1 responsive">
<div class="grid-cell flex flex-col max-md:border-b-1 bg-neutral-300 gap-2">
<div class="lg:hidden">
@weekPicker(userWeek.WeekStart)
</div>
<h2 class="uppercase font-bold">{ fmt.Sprintf("%s %s", userWeek.User.Vorname, userWeek.User.Name) }</h2>
<div class="grid grid-cols-5 gap-2 lg:grid-cols-1">
<div class="col-span-2">
<span class="flex flex-row gap-2 items-center">
@statusCheckMark(userWeek.CheckStatus(), models.WeekStatusSent)
Gesendet
</span>
<span class="flex flex-row gap-2 items-center">
@statusCheckMark(userWeek.CheckStatus(), models.WeekStatusAccepted)
Akzeptiert
</span>
</div>
<div class="flex flex-row gap-2 col-span-3">
@timeGaugeComponent(uint8(progress), false, false)
<div>
<p>Arbeitszeit: { fmt.Sprintf("%s", helper.FormatDuration(userWeek.WorkHours)) }</p>
<p>Überstunden: { fmt.Sprintf("%s", helper.FormatDuration(userWeek.GetOvertime())) }</p>
</div>
</div>
</div>
</div>
<div class="grid-cell col-span-3 flex flex-col gap-2">
<div class="grid-cell col-span-3 flex flex-col gap-2 max-md:border-b-1 py-4">
for _, day := range userWeek.WorkDays {
@weekDayComponent(userWeek.User, day)
}
</div>
<div class="grid-cell flex flex-col gap-2">
<form method="get" class="flex flex-row gap-4 items-center justify-around">
<input type="date" class="hidden" name="submission_date" value={ userWeek.WeekStart.Format(time.DateOnly) }/>
<button onclick={ templ.JSFuncCall("navigateWeek", templ.JSExpression("this"), templ.JSExpression("event"), "-1") } class="p-2 w-1/3 cursor-pointer rounded-md text-neutral-800 border text-center text-sm hover:text-white transition-colors border-neutral-800 focus:bg-neutral-700 active:bg-neutral-700 hover:bg-neutral-700">
<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(userWeek.WeekStart) < 24*7*time.Hour } onclick={ templ.JSFuncCall("navigateWeek", templ.JSExpression("this"), templ.JSExpression("event"), "1") } class="p-2 w-1/3 cursor-pointer rounded-md text-neutral-800 border text-center text-sm hover:text-white transition-colors border-neutral-800 focus:bg-neutral-700 active:bg-neutral-700 hover:bg-neutral-700 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>
<form method="post">
<div class="grid-cell flex flex-col gap-2 justify-between">
<div class="max-md:hidden">
@weekPicker(userWeek.WeekStart)
</div>
<form method="post" class="flex flex-col gap-2">
<input type="hidden" name="method" value="send"/>
<input type="hidden" name="user" value={ strconv.Itoa(userWeek.User.PersonalNummer) }/>
<input type="hidden" name="week" value={ userWeek.WeekStart.Format(time.DateOnly) }/>
switch userWeek.CheckStatus() {
case models.WeekStatusNone:
<p class="text-sm">an Vorgesetzten senden</p>
<button disabled?={ time.Since(userWeek.WeekStart) < 24*7*time.Hour } type="submit" class="w-full cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm hover:text-white transition-colors border-neutral-800 focus:bg-neutral-700 active:bg-neutral-700 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50">Senden</button>
if time.Since(userWeek.WeekStart) < 24*7*time.Hour {
<p class="text-sm text-red-500">Die Woche kann erst am nächsten Montag abgesendet werden!</p>
}
case models.WeekStatusSent:
<p class="text-sm">an Vorgesetzten gesendet</p>
<button type="submit" class="w-full cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm hover:text-white transition-colors border-neutral-800 focus:bg-neutral-700 active:bg-neutral-700 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50">Korrigieren</button>
<p class="flex flex-row gap-2 items-center">
akzeptiert:
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle" 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>
</svg>
</p>
case models.WeekStatusAccepted:
<p class="text-sm">vom Vorgesetzten bestätigt</p>
<button type="submit" class="w-full cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm hover:text-white transition-colors border-neutral-800 focus:bg-neutral-700 active:bg-neutral-700 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50">Korrigieren</button>
<p class="flex flex-row gap-2 text-accent items-center">
akzeptiert:
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle" 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="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05"></path>
</svg>
</p>
}
<button disabled?={ userWeek.Status < models.WeekStatusSent } type="submit" class="btn">Korrigieren</button>
<button disabled?={ time.Since(userWeek.WeekStart) < 24*7*time.Hour || userWeek.Status >= models.WeekStatusSent } type="submit" class="btn">Senden</button>
</form>
</div>
</div>
@@ -151,17 +160,6 @@ templ TeamPage(weeks []models.WorkWeek, userWeek models.WorkWeek) {
</div>
}
templ NavPage() {
@Base()
<div class="w-full h-[100vh] flex flex-col justify-center items-center">
<div class="flex flex-col justify-between w-full md:w-1/2 py-2">
<a class="text-xl hover:text-accent transition-colors1" href="/time">Zeitverwaltung</a>
<a class="text-xl hover:text-accent transition-colors1" href="/team">Mitarbeiter</a>
<a class="text-xl hover:text-accent transition-colors1" href="/user">Nutzer</a>
</div>
</div>
}
templ TeamPresencePage(teamPresence map[bool][]models.User) {
@Base()
@headerComponent()
@@ -186,5 +184,5 @@ templ TeamPresencePage(teamPresence map[bool][]models.User) {
}
templ LogoutButton() {
<button onclick="logoutUser()" 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-300 focus:bg-neutral-700 active:bg-neutral-700 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50">Abmelden</button>
<button onclick="logoutUser()" type="button" class="">Abmelden</button>
}