98 lines
3.9 KiB
Plaintext
98 lines
3.9 KiB
Plaintext
// templates are used for the templ templates
|
|
// these will render the html page with data from the webserver
|
|
package templates
|
|
|
|
import (
|
|
"arbeitszeitmessung/models"
|
|
"fmt"
|
|
)
|
|
|
|
// this file includes the basic components, which are used in many other components and pages
|
|
templ headerComponent() {
|
|
// {{ user := ctx.Value("user").(models.User) }}
|
|
<div class="flex flex-row justify-between md:mx-[10%] py-2 items-center">
|
|
<a href="/time">Zeitverwaltung</a>
|
|
<a href="/team/report">Abrechnung</a>
|
|
if true {
|
|
<a href="/pdf">Monatsabrechnung</a>
|
|
<a href="/team/presence">Anwesenheit</a>
|
|
}
|
|
<a href="/user/settings">Einstellungen</a>
|
|
<button onclick="logoutUser()" type="button" class="cursor-pointer">Abmelden</button>
|
|
</div>
|
|
}
|
|
|
|
templ statusCheckMark(status models.WeekStatus, target models.WeekStatus) {
|
|
if status >= target {
|
|
<div class="icon-[material-symbols-light--check-circle-outline]"></div>
|
|
} else {
|
|
<div class="icon-[material-symbols-light--circle-outline]"></div>
|
|
}
|
|
}
|
|
|
|
templ lineComponent() {
|
|
<div class="flex flex-col w-2 py-2 items-center text-accent print:hidden">
|
|
<svg class="size-2" viewBox="0 0 24 24" fill="currentColor">
|
|
<polygon points="12,2 22,12 12,22 2,12"></polygon>
|
|
</svg>
|
|
<div class="w-[2px] bg-accent flex-grow -my-1"></div>
|
|
<svg class="size-2" viewBox="0 0 24 24" fill="currentColor">
|
|
<polygon points="12,2 22,12 12,22 2,12"></polygon>
|
|
</svg>
|
|
</div>
|
|
}
|
|
|
|
templ timeGaugeComponent(progress int8, today bool) {
|
|
{{
|
|
var bgColor string
|
|
switch {
|
|
case (0 > progress):
|
|
bgColor = "bg-red-600"
|
|
break
|
|
case (progress > 0 && progress < 95):
|
|
bgColor = "bg-orange-500"
|
|
break
|
|
case (95 <= progress && progress <= 105):
|
|
bgColor = "bg-accent"
|
|
break
|
|
case (progress > 105):
|
|
bgColor = "bg-purple-600"
|
|
break
|
|
default:
|
|
bgColor = "bg-neutral-400"
|
|
break
|
|
}
|
|
}}
|
|
if today {
|
|
<div class="flex-start flex w-2 h-full overflow-hidden rounded-full bg-neutral-300 print:hidden">
|
|
<div class={ "flex w-full items-center justify-center overflow-hidden rounded-full", bgColor } style={ fmt.Sprintf("height: %d%%", int(progress)) }></div>
|
|
</div>
|
|
} else {
|
|
<div class={ "w-2 h-full bg-accent rounded-md flex-shrink-0", bgColor }></div>
|
|
}
|
|
}
|
|
|
|
templ legendComponent() {
|
|
<div class="flex flex-row gap-4 md:mx-[10%] print:hidden">
|
|
<div class="flex flex-row items-center gap-2"><div class="rounded-full size-4 bg-red-600"></div><span>Fehler</span></div>
|
|
<div class="flex flex-row items-center gap-2"><div class="rounded-full size-4 bg-orange-500"></div><span>Arbeitszeit unter regulär</span></div>
|
|
<div class="flex flex-row items-center gap-2"><div class="rounded-full size-4 bg-accent"></div><span>Arbeitszeit vollständig</span></div>
|
|
<div class="flex flex-row items-center gap-2"><div class="rounded-full size-4 bg-purple-600"></div><span>Überstunden</span></div>
|
|
<div class="flex flex-row items-center gap-2"><div class="rounded-full size-4 bg-neutral-400"></div><span>Keine Buchungen</span></div>
|
|
</div>
|
|
}
|
|
|
|
templ CheckboxComponent(pNr int, label string) {
|
|
{{ id := fmt.Sprintf("pdf-%d", pNr) }}
|
|
<div class="inline-flex items-center">
|
|
<label class="flex items-center cursor-pointer relative" for={ id }>
|
|
<input type="checkbox" name="employe_list" value={ pNr } id={ id } class="peer h-5 w-5 cursor-pointer transition-all appearance-none rounded border border-slate-800 checked:bg-slate-800 checked:border-slate-800"/>
|
|
<span class="absolute text-white opacity-0 peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor" stroke="currentColor" stroke-width="1">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</span>
|
|
</label> <label class="cursor-pointer ml-2 text-slate-600 select-none" for={ id }>{ label }</label>
|
|
</div>
|
|
}
|