feat: updated docs and added description to files

Backend/templates/baseComponents.templ

@@ -0,0 +1,97 @@
+// 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>
+}