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

CHANGE: sorted .templ files + added css classes + added nav header

Browse Source
This commit is contained in:
Tom Tröger
2025-02-24 10:42:09 +01:00
parent fdd6416ad9
commit a4e0bf82c9
18 changed files with 384 additions and 477 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
Backend/templates/pages.templ Normal file
View File

@@ -0,0 +1,67 @@
package templates
import "arbeitszeitmessung/models"
templ Base() {
<!DOCTYPE html>
<head>
<title>Arbeitszeit</title>
<link rel="stylesheet" href="/static/css/styles.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="/static/script.js" defer></script>
</head>
}
templ TimePage(workDays []models.WorkDay) {
@Base()
@headerComponent()
<div class="grid-main divide-y-1">
@inputForm()
for _, bookingGroup := range workDays {
@dayComponent(bookingGroup)
}
</div>
@LegendComponent()
}
templ LoginPage(failed bool) {
@Base()
<div class="w-full h-[100vh] flex flex-col justify-center items-center">
<form method="POST" class="w-9/10 md:w-1/2 flex flex-col gap-4 p-2 mb-2">
<h1 class="font-bold uppercase text-xl text-center mb-2">Benutzer Anmelden</h1>
<input name="personal_nummer" placeholder="Personalnummer" type="text" 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"/>
<input name="password" placeholder="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"/>
if failed {
<p class="text-red-600 text-sm">Login fehlgeschlagen, bitte erneut versuchen!</p>
}
<button type="submit" 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">Login</button>
</form>
</div>
}
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">
<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"/>
<input name="new_password" placeholder="Neues 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"/>
<input name="new_password_repeat" placeholder="Neues Passwort wiederholen" 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"/>
switch {
case status == 401:
<p class="text-red-600 text-sm">Aktuelles Passwort nicht korrekt!</p>
case status >= 400:
<p class="text-red-600 text-sm">Passwortwechsel fehlgeschlagen, bitte erneut versuchen!</p>
case status == 200:
<p class="text-accent text-sm">Passwortänderung erfolgreich</p>
}
</div>
<div class="grid-cell">
<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-300 focus:bg-neutral-700 active:bg-neutral-700 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50">Ändern</button>
</div>
</form>
</div>
}