From 566776910ac9642d108d36e27d1a77c8ece0947a Mon Sep 17 00:00:00 2001 From: tom Date: Sat, 4 Oct 2025 19:16:21 +0200 Subject: [PATCH] ui/ux improvements on time page --- Backend/src/main.css | 273 ++++++------- Backend/static/css/styles.css | 78 +++- Backend/static/script.js | 96 +++-- Backend/templates/headerComponent_templ.go | 2 +- Backend/templates/pages_templ.go | 2 +- Backend/templates/pdf_templ.go | 2 +- Backend/templates/teamComponents_templ.go | 2 +- Backend/templates/timeComponents.templ | 84 +--- Backend/templates/timeComponents_templ.go | 422 ++++++++++----------- Backend/templates/timePage.templ | 10 +- Backend/templates/timePage_templ.go | 40 +- 11 files changed, 526 insertions(+), 485 deletions(-) diff --git a/Backend/src/main.css b/Backend/src/main.css index c54539c..2e260d6 100644 --- a/Backend/src/main.css +++ b/Backend/src/main.css @@ -1,152 +1,163 @@ @import "tailwindcss"; @source "../templates/*.templ"; @plugin "@iconify/tailwind4" { - scale: 1.25; + scale: 1.25; } @theme { - --color-accent-50: #e7fdea; - --color-accent-100: #cbfbd1; - --color-accent-200: #9cf7a8; - --color-accent-300: #68f37a; - --color-accent-400: #33ef4d; - --color-accent-500: #11db2d; - --color-accent-600: #0eaf23; - --color-accent-700: #0a851b; - --color-accent-800: #075a12; - --color-accent-900: #032b09; - --color-accent-950: #021805; - --color-accent: #0eaf23; - --color-text-50: #f7f8f7; - --color-text-100: #f2f3f2; - --color-text-200: #e2e4e2; - --color-text-300: #d2d6d2; - --color-text-400: #c2c7c2; - --color-text-500: #afb6af; - --color-text-600: #97a097; - --color-text-700: #7d877d; - --color-text-800: #5a625a; - --color-text-900: #161816; - --color-text-950: #000000; + --color-accent-50: #e7fdea; + --color-accent-100: #cbfbd1; + --color-accent-200: #9cf7a8; + --color-accent-300: #68f37a; + --color-accent-400: #33ef4d; + --color-accent-500: #11db2d; + --color-accent-600: #0eaf23; + --color-accent-700: #0a851b; + --color-accent-800: #075a12; + --color-accent-900: #032b09; + --color-accent-950: #021805; + --color-accent: #0eaf23; + --color-text-50: #f7f8f7; + --color-text-100: #f2f3f2; + --color-text-200: #e2e4e2; + --color-text-300: #d2d6d2; + --color-text-400: #c2c7c2; + --color-text-500: #afb6af; + --color-text-600: #97a097; + --color-text-700: #7d877d; + --color-text-800: #5a625a; + --color-text-900: #161816; + --color-text-950: #000000; } @layer base { - body { - -webkit-print-color-adjust: exact !important; - print-color-adjust: exact !important; - background-color: white; - } + body { + -webkit-print-color-adjust: exact !important; + print-color-adjust: exact !important; + background-color: white; + } } @layer components { - .grid-main { - display: grid; - grid-template-columns: 4fr 3fr 3fr 1fr; - align-items: stretch; - } + .grid-main { + display: grid; + grid-template-columns: 4fr 3fr 3fr 1fr; + align-items: stretch; + } - .grid-sub { - display: grid; - grid-template-columns: subgrid; - grid-column: 1 / -1; - border-color: var(--color-neutral-400); - transition: background-color 0.2s ease-in-out; + .grid-sub { + display: grid; + grid-template-columns: subgrid; + grid-column: 1 / -1; + border-color: var(--color-neutral-400); + transition: background-color 0.2s ease-in-out; + } + + .grid-sub.responsive { + display: flex; + flex-direction: column; + } + + .grid-sub:hover { + background-color: var(--color-neutral-200); + } + + .grid-cell { + padding: calc(var(--spacing) * 2); + border-color: var(--color-neutral-400); + } + + .btn { + width: 100%; + cursor: pointer; + border-radius: var(--radius-md); + color: var(--color-neutral-800); + font-size: var(--text-sm); + text-align: center; + padding: calc(var(--spacing) * 2); + border-style: var(--tw-border-style); + border-width: 1px; + border-color: var(--color-neutral-800); + transition-property: + color, background-color, border-color, outline-color, + text-decoration-color, fill, stroke, --tw-gradient-from, + --tw-gradient-via, --tw-gradient-to; + transition-timing-function: var( + --tw-ease, + var(--default-transition-timing-function) + ); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + + input.btn, + select.btn { + transition-duration: 300ms; + } + + .btn:hover { + color: var(--color-white); + background-color: var(--color-neutral-700); + } + + .btn:disabled { + opacity: 50%; + pointer-events: none; + } + + input.btn, + select.btn { + text-align: left; + } + + input.btn:hover, + select.btn:hover { + border-color: var(--color-neutral-300); + background-color: var(--color-neutral-100); + color: var(--color-neutral-800); + } + + .edit-box { + border-radius: var(--radius-md); + overflow: hidden; + border-color: var(--color-neutral-500); + transition-property: background-color, border-color; + transition-timing-function: var(--default-transition-timing-function) * 2; + transition-duration: var(--default-transition-duration); + outline: none; + + &:is(:where(.group):is(.edit) *) { + border-width: 1px; + } + } + + .edit-box:hover { + &:is(:where(.group):is(.edit) *) { + background-color: var(--color-white); + border-color: var(--color-neutral-300); + } + } + + .edit-box input:focus { + outline: none; + } + + div.edit { + border-width: 1px; + background-color: var(--color-neutral-300); + } + + @media (width >=48rem) { + .grid-main { + grid-template-columns: repeat(5, 1fr); + margin: 0 10%; } .grid-sub.responsive { - display: flex; - flex-direction: column; - } - - .grid-sub:hover { - background-color: var(--color-neutral-200); - } - - .grid-cell { - padding: calc(var(--spacing) * 2); - border-color: var(--color-neutral-400); + display: grid; } .btn { - width: 100%; - cursor: pointer; - border-radius: var(--radius-md); - color: var(--color-neutral-800); - font-size: var(--text-sm); - text-align: center; - padding: calc(var(--spacing) * 2); - border-style: var(--tw-border-style); - border-width: 1px; - border-color: var(--color-neutral-800); - transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - } - - input.btn, - select.btn { - transition-duration: 300ms; - } - - .btn:hover { - color: var(--color-white); - background-color: var(--color-neutral-700); - } - - .btn:disabled { - opacity: 50%; - pointer-events: none; - } - - input.btn, - select.btn { - text-align: left; - } - - input.btn:hover, - select.btn:hover { - border-color: var(--color-neutral-300); - background-color: var(--color-neutral-100); - color: var(--color-neutral-800); - } - - .edit-box { - border-radius: var(--radius-md); - overflow: hidden; - border-color: var(--color-neutral-500); - transition-property: background-color, border-color; - transition-timing-function: var(--default-transition-timing-function) * 2; - transition-duration: var(--default-transition-duration); - outline: none; - - &:is(:where(.group):is(.edit) *) { - border-width: 1px; - } - } - - .edit-box:hover { - &:is(:where(.group):is(.edit) *) { - background-color: var(--color-white); - border-color: var(--color-neutral-300); - } - } - - .edit-box input:focus { - outline: none; - } - - @media (width >=48rem) { - .grid-main { - grid-template-columns: repeat(5, 1fr); - margin: 0 10%; - } - - .grid-sub.responsive { - display: grid; - } - - .btn { - padding-inline: calc(var(--spacing) * 4); - } + padding-inline: calc(var(--spacing) * 4); } + } } diff --git a/Backend/static/css/styles.css b/Backend/static/css/styles.css index 9f5c58c..e65589d 100644 --- a/Backend/static/css/styles.css +++ b/Backend/static/css/styles.css @@ -197,6 +197,9 @@ .relative { position: relative; } + .top-2 { + top: calc(var(--spacing) * 2); + } .top-2\.5 { top: calc(var(--spacing) * 2.5); } @@ -206,6 +209,9 @@ .right-1 { right: calc(var(--spacing) * 1); } + .right-2 { + right: calc(var(--spacing) * 2); + } .right-2\.5 { right: calc(var(--spacing) * 2.5); } @@ -236,6 +242,19 @@ .ml-1 { margin-left: calc(var(--spacing) * 1); } + .icon-\[material-symbols-light--cancel-outline\] { + display: inline-block; + width: 1.25em; + height: 1.25em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m8.4 16.308l3.6-3.6l3.6 3.6l.708-.708l-3.6-3.6l3.6-3.6l-.708-.708l-3.6 3.6l-3.6-3.6l-.708.708l3.6 3.6l-3.6 3.6zM12.003 21q-1.866 0-3.51-.708q-1.643-.709-2.859-1.924t-1.925-2.856T3 12.003t.709-3.51Q4.417 6.85 5.63 5.634t2.857-1.925T11.997 3t3.51.709q1.643.708 2.859 1.922t1.925 2.857t.709 3.509t-.708 3.51t-1.924 2.859t-2.856 1.925t-3.509.709M12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8'/%3E%3C/svg%3E"); + } .icon-\[material-symbols-light--check-circle-outline\] { display: inline-block; width: 1.25em; @@ -353,6 +372,14 @@ width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } + .size-5 { + width: calc(var(--spacing) * 5); + height: calc(var(--spacing) * 5); + } + .size-6 { + width: calc(var(--spacing) * 6); + height: calc(var(--spacing) * 6); + } .h-2 { height: calc(var(--spacing) * 2); } @@ -380,6 +407,9 @@ .w-5 { width: calc(var(--spacing) * 5); } + .w-9 { + width: calc(var(--spacing) * 9); + } .w-9\/10 { width: calc(9/10 * 100%); } @@ -392,6 +422,9 @@ .w-full { width: 100%; } + .flex-shrink { + flex-shrink: 1; + } .flex-shrink-0 { flex-shrink: 0; } @@ -407,9 +440,15 @@ .basis-\[content\] { flex-basis: content; } + .border-collapse { + border-collapse: collapse; + } .cursor-pointer { cursor: pointer; } + .resize { + resize: both; + } .scroll-m-2 { scroll-margin: calc(var(--spacing) * 2); } @@ -564,6 +603,9 @@ .bg-red-600 { background-color: var(--color-red-600); } + .mask-repeat { + mask-repeat: repeat; + } .p-1 { padding: calc(var(--spacing) * 1); } @@ -634,6 +676,13 @@ .uppercase { text-transform: uppercase; } + .underline { + text-decoration-line: underline; + } + .outline { + outline-style: var(--tw-outline-style); + outline-width: 1px; + } .filter { filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } @@ -702,6 +751,16 @@ display: inline; } } + .group-\[\.edit\]\/button\:block { + &:is(:where(.group\/button):is(.edit) *) { + display: block; + } + } + .group-\[\.edit\]\/button\:hidden { + &:is(:where(.group\/button):is(.edit) *) { + display: none; + } + } .placeholder\:text-neutral-400 { &::placeholder { color: var(--color-neutral-400); @@ -857,6 +916,13 @@ } } } + .group-\[\.edit\]\/button\:md\:block { + &:is(:where(.group\/button):is(.edit) *) { + @media (width >= 48rem) { + display: block; + } + } + } .lg\:hidden { @media (width >= 64rem) { display: none; @@ -942,7 +1008,7 @@ border-width: 1px; border-color: var(--color-neutral-800); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-timing-function: var( --tw-ease, var(--default-transition-timing-function) ); transition-duration: var(--tw-duration, var(--default-transition-duration)); } input.btn, select.btn { @@ -985,6 +1051,10 @@ .edit-box input:focus { outline: none; } + div.edit { + border-width: 1px; + background-color: var(--color-neutral-300); + } @media (width >=48rem) { .grid-main { grid-template-columns: repeat(5, 1fr); @@ -1017,6 +1087,11 @@ syntax: "*"; inherits: false; } +@property --tw-outline-style { + syntax: "*"; + inherits: false; + initial-value: solid; +} @property --tw-blur { syntax: "*"; inherits: false; @@ -1081,6 +1156,7 @@ --tw-border-style: solid; --tw-divide-y-reverse: 0; --tw-font-weight: initial; + --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; diff --git a/Backend/static/script.js b/Backend/static/script.js index 04bae89..176e4f8 100644 --- a/Backend/static/script.js +++ b/Backend/static/script.js @@ -1,14 +1,67 @@ -function editDay(element, event, formId) { - var form = element.closest(".grid-sub").querySelector(".all-booking-component > form"); - form.classList.toggle("edit"); - element.classList.toggle("edit"); - if (element.classList.contains("edit")) { - event.preventDefault(); - form.querySelectorAll("input, select").forEach((input) => { - input.disabled = false; +function clearEditState() { + for (e of document.querySelectorAll(".edit")) { + e.classList.remove("edit"); + } + toggleAbsenceEdit(false); +} + +function editWorkday(element, event, id, isWorkDay) { + console.log("editWorkday called", isWorkDay); + event.preventDefault(); + var form = document.getElementById(id); + if (form == null) { + form = element + .closest(".grid-sub") + .querySelector(".all-booking-component > form"); + } + + clearEditState(); + element.closest(".grid-sub").classList.add("edit"); + toggleAbsenceEdit(!isWorkDay); + + if (isWorkDay) { + element.classList.add("edit"); + if (element.classList.contains("edit")) { + form.querySelectorAll("input, select").forEach((input) => { + input.disabled = false; + }); + } else { + form.submit(); + } + } else { + var absenceForm = document.getElementById("absence_form"); + + if (id != 0) { + syncFields(form, absenceForm, [ + "date_from", + "date_to", + "aw_type", + "aw_id", + ]); + } else { + absenceForm.querySelector("[name=date_from]").value = form.id.replace( + "time-", + "", + ); + absenceForm.querySelector("[name=date_to]").value = form.id.replace( + "time-", + "", + ); + } + } +} + +function toggleAbsenceEdit(state) { + var form = document.getElementById("absence_form"); + if (state) { + form.classList.remove("hidden"); + form.scrollIntoView({ + behavior: "smooth", + block: "start", + inline: "nearest", }); } else { - form.submit(); + form.classList.add("hidden"); } } @@ -21,31 +74,6 @@ function syncFields(from, to, fieldsToSync) { }); } -function editAbsence(element, event, absenceId) { - event.preventDefault(); - var form = document.getElementById("absence_form"); - - if (absenceId != 0) { - var dataForm = document.getElementById(absenceId); - syncFields(dataForm, form, ["date_from", "date_to", "aw_type", "aw_id"]); - } else { - var dataForm = element.closest(".grid-sub").querySelector(".all-booking-component > form"); - form.querySelector("[name=date_from]").value = dataForm.id.replace("time-", ""); - form.querySelector("[name=date_to]").value = dataForm.id.replace("time-", ""); - } - form.classList.remove("hidden"); - form.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" }); -} - -function editAbwesenheit(element, event) { - var newBookingComponent = element.closest(".grid-sub").querySelector(".new-booking-component"); - if (element.value == 0) { - newBookingComponent.style.display = ""; - } else { - newBookingComponent.style.display = "none"; - } -} - function navigateWeek(element, event, direction) { var dateInput = element.closest("form").querySelector("input[type=date]"); var date = dateInput.valueAsDate; diff --git a/Backend/templates/headerComponent_templ.go b/Backend/templates/headerComponent_templ.go index aeef6ec..8e59160 100644 --- a/Backend/templates/headerComponent_templ.go +++ b/Backend/templates/headerComponent_templ.go @@ -1,6 +1,6 @@ // Code generated by templ - DO NOT EDIT. -// templ: version: v0.3.924 +// templ: version: v0.3.943 package templates //lint:file-ignore SA4006 This context is only used if a nested component is present. diff --git a/Backend/templates/pages_templ.go b/Backend/templates/pages_templ.go index 04f8e10..79a983d 100644 --- a/Backend/templates/pages_templ.go +++ b/Backend/templates/pages_templ.go @@ -1,6 +1,6 @@ // Code generated by templ - DO NOT EDIT. -// templ: version: v0.3.924 +// templ: version: v0.3.943 package templates //lint:file-ignore SA4006 This context is only used if a nested component is present. diff --git a/Backend/templates/pdf_templ.go b/Backend/templates/pdf_templ.go index 3c73ded..321301b 100644 --- a/Backend/templates/pdf_templ.go +++ b/Backend/templates/pdf_templ.go @@ -1,6 +1,6 @@ // Code generated by templ - DO NOT EDIT. -// templ: version: v0.3.924 +// templ: version: v0.3.943 package templates //lint:file-ignore SA4006 This context is only used if a nested component is present. diff --git a/Backend/templates/teamComponents_templ.go b/Backend/templates/teamComponents_templ.go index ec539f2..c1d475e 100644 --- a/Backend/templates/teamComponents_templ.go +++ b/Backend/templates/teamComponents_templ.go @@ -1,6 +1,6 @@ // Code generated by templ - DO NOT EDIT. -// templ: version: v0.3.924 +// templ: version: v0.3.943 package templates //lint:file-ignore SA4006 This context is only used if a nested component is present. diff --git a/Backend/templates/timeComponents.templ b/Backend/templates/timeComponents.templ index 413c16b..c2b5fab 100644 --- a/Backend/templates/timeComponents.templ +++ b/Backend/templates/timeComponents.templ @@ -19,78 +19,16 @@ templ lineComponent() { } -// templ workDayComponent(workDay models.WorkDay, submitted bool) { -// {{ -// // work, pause := workDay.GetWorkTimeString() -// user := ctx.Value("user").(models.User) -// work, pause, overtime := workDay.GetAllWorkTimesReal(user) -// // overtime := helper.FormatDuration(workDay.CalcOvertime(user)) -// justify := "" -// if len(workDay.Bookings) <= 1 { -// justify = "justify-content: center" -// } -// }} -//
-//
-// @timeGaugeComponent(workDay.GetDayProgress(user), workDay.Day.Equal(time.Now().Truncate(24*time.Hour))) -//
-//

{ workDay.Day.Format("02.01.2006") }

-// if (workDay.RequiresAction()) { -//

Bitte anpassen

-// } else { -// if work > 0 { -//

Arbeitszeit:

-//

{ helper.FormatDuration(work) }

-// } -// if pause > 0 { -// } -//

{ helper.FormatDuration(pause) }

-// if overtime > 0 { -//

{ helper.FormatDuration(overtime) }

-// } -// } -//
-//
-//
-// @lineComponent() -//
-// if len(workDay.Bookings) < 1 { -//

Keine Buchung gefunden. Bitte Arbeitsstunden oder Grund der Abwesenheit eingeben!

-// @absenceComponent(workDay) -// @newBookingComponent(workDay) -// } else { -// @absenceComponent(workDay) -// for _, booking := range workDay.Bookings { -// @bookingComponent(booking) -// } -// if workDay.IsKurzArbeit() { -//

Kurzarbeit

-// } -// @newBookingComponent(workDay) -// } -// -//
-//
-//
-// @changeButtonComponent("time-" + workDay.Day.Format("2006-01-02")) -//
-//
-// } templ changeButtonComponent(id string, workDay bool) { - {{ - functionName := "editDay" - if !workDay { - functionName = "editAbsence" - } - }} - + } templ timeGaugeComponent(progress int8, today bool) { @@ -125,14 +63,20 @@ templ timeGaugeComponent(progress int8, today bool) { templ newAbsenceComponent() { } templ absenceComponent(a *models.Absence, isKurzarbeit bool) { -
+ {{ + editBox := "" + if isKurzarbeit { + editBox = "edit-box" + } + }} +
diff --git a/Backend/templates/timeComponents_templ.go b/Backend/templates/timeComponents_templ.go index a98d37d..565d2bc 100644 --- a/Backend/templates/timeComponents_templ.go +++ b/Backend/templates/timeComponents_templ.go @@ -1,6 +1,6 @@ // Code generated by templ - DO NOT EDIT. -// templ: version: v0.3.924 +// templ: version: v0.3.943 package templates //lint:file-ignore SA4006 This context is only used if a nested component is present. @@ -44,63 +44,6 @@ func lineComponent() templ.Component { }) } -// templ workDayComponent(workDay models.WorkDay, submitted bool) { -// {{ -// // work, pause := workDay.GetWorkTimeString() -// user := ctx.Value("user").(models.User) -// work, pause, overtime := workDay.GetAllWorkTimesReal(user) -// // overtime := helper.FormatDuration(workDay.CalcOvertime(user)) -// justify := "" -// if len(workDay.Bookings) <= 1 { -// justify = "justify-content: center" -// } -// }} -//
-//
-// @timeGaugeComponent(workDay.GetDayProgress(user), workDay.Day.Equal(time.Now().Truncate(24*time.Hour))) -//
-//

{ workDay.Day.Format("02.01.2006") }

-// if (workDay.RequiresAction()) { -//

Bitte anpassen

-// } else { -// if work > 0 { -//

Arbeitszeit:

-//

{ helper.FormatDuration(work) }

-// } -// if pause > 0 { -// } -//

{ helper.FormatDuration(pause) }

-// if overtime > 0 { -//

{ helper.FormatDuration(overtime) }

-// } -// } -//
-//
-//
-// @lineComponent() -//
-// if len(workDay.Bookings) < 1 { -//

Keine Buchung gefunden. Bitte Arbeitsstunden oder Grund der Abwesenheit eingeben!

-// @absenceComponent(workDay) -// @newBookingComponent(workDay) -// } else { -// @absenceComponent(workDay) -// for _, booking := range workDay.Bookings { -// @bookingComponent(booking) -// } -// if workDay.IsKurzArbeit() { -//

Kurzarbeit

-// } -// @newBookingComponent(workDay) -// } -// -//
-//
-//
-// @changeButtonComponent("time-" + workDay.Day.Format("2006-01-02")) -//
-//
-// } func changeButtonComponent(id string, workDay bool) templ.Component { return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context @@ -122,25 +65,37 @@ func changeButtonComponent(id string, workDay bool) templ.Component { templ_7745c5c3_Var2 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - - functionName := "editDay" - if !workDay { - functionName = "editAbsence" - } - templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, templ.JSFuncCall(functionName, templ.JSExpression("this"), templ.JSExpression("event"), id)) + templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, templ.JSFuncCall("editWorkday", templ.JSExpression("this"), templ.JSExpression("event"), id, workDay)) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\">

Ändern

Absenden

") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, templ.JSFuncCall("clearEditState")) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -164,9 +119,9 @@ func timeGaugeComponent(progress int8, today bool) templ.Component { }() } ctx = templ.InitializeContext(ctx) - templ_7745c5c3_Var4 := templ.GetChildren(ctx) - if templ_7745c5c3_Var4 == nil { - templ_7745c5c3_Var4 = templ.NopComponent + templ_7745c5c3_Var5 := templ.GetChildren(ctx) + if templ_7745c5c3_Var5 == nil { + templ_7745c5c3_Var5 = templ.NopComponent } ctx = templ.ClearChildren(ctx) @@ -189,65 +144,65 @@ func timeGaugeComponent(progress int8, today bool) templ.Component { break } if today { - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - var templ_7745c5c3_Var5 = []any{"flex w-full items-center justify-center overflow-hidden rounded-full", bgColor} - templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var5...) + var templ_7745c5c3_Var6 = []any{"flex w-full items-center justify-center overflow-hidden rounded-full", bgColor} + templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var6...) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "\" style=\"") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + var templ_7745c5c3_Var8 string + templ_7745c5c3_Var8, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues(fmt.Sprintf("height: %d%%", int(progress))) + if templ_7745c5c3_Err != nil { + return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 57, Col: 149} + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8)) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "\">
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } } else { - var templ_7745c5c3_Var8 = []any{"w-2 h-full bg-accent rounded-md flex-shrink-0", bgColor} - templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var8...) + var templ_7745c5c3_Var9 = []any{"w-2 h-full bg-accent rounded-md flex-shrink-0", bgColor} + templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var9...) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "\">
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -272,29 +227,29 @@ func newAbsenceComponent() templ.Component { }() } ctx = templ.InitializeContext(ctx) - templ_7745c5c3_Var10 := templ.GetChildren(ctx) - if templ_7745c5c3_Var10 == nil { - templ_7745c5c3_Var10 = templ.NopComponent + templ_7745c5c3_Var11 := templ.GetChildren(ctx) + if templ_7745c5c3_Var11 == nil { + templ_7745c5c3_Var11 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -318,100 +273,123 @@ func absenceComponent(a *models.Absence, isKurzarbeit bool) templ.Component { }() } ctx = templ.InitializeContext(ctx) - templ_7745c5c3_Var12 := templ.GetChildren(ctx) - if templ_7745c5c3_Var12 == nil { - templ_7745c5c3_Var12 = templ.NopComponent + templ_7745c5c3_Var13 := templ.GetChildren(ctx) + if templ_7745c5c3_Var13 == nil { + templ_7745c5c3_Var13 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "

") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "\">

") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + var templ_7745c5c3_Var20 string + templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(a.AbwesenheitTyp.Name) + if templ_7745c5c3_Err != nil { + return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 85, Col: 26} + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20)) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, " ") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } if a.IsMultiDay() { - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "bis ") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "bis ") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - var templ_7745c5c3_Var18 string - templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(a.DateTo.Format("02.01.2006")) + var templ_7745c5c3_Var21 string + templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(a.DateTo.Format("02.01.2006")) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 143, Col: 70} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 87, Col: 70} } - _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18)) + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21)) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "

") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -420,21 +398,21 @@ func absenceComponent(a *models.Absence, isKurzarbeit bool) templ.Component { if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "\" class=\"hidden btn border-0 rounded-none grow-0 w-auto group-[.edit]:inline\">Bearbeiten") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -458,58 +436,58 @@ func newBookingComponent(d *models.WorkDay) templ.Component { }() } ctx = templ.InitializeContext(ctx) - templ_7745c5c3_Var20 := templ.GetChildren(ctx) - if templ_7745c5c3_Var20 == nil { - templ_7745c5c3_Var20 = templ.NopComponent + templ_7745c5c3_Var23 := templ.GetChildren(ctx) + if templ_7745c5c3_Var23 == nil { + templ_7745c5c3_Var23 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, ">Gehen
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -533,64 +511,64 @@ func bookingComponent(booking models.Booking) templ.Component { }() } ctx = templ.InitializeContext(ctx) - templ_7745c5c3_Var23 := templ.GetChildren(ctx) - if templ_7745c5c3_Var23 == nil { - templ_7745c5c3_Var23 = templ.NopComponent + templ_7745c5c3_Var26 := templ.GetChildren(ctx) + if templ_7745c5c3_Var26 == nil { + templ_7745c5c3_Var26 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "

") - if templ_7745c5c3_Err != nil { - return templ_7745c5c3_Err - } - var templ_7745c5c3_Var24 string - templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs(booking.Timestamp.Format("15:04")) - if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 175, Col: 91} - } - _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var24)) - if templ_7745c5c3_Err != nil { - return templ_7745c5c3_Err - } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, " ") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } var templ_7745c5c3_Var27 string - templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(booking.GetBookingType()) + templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(booking.Timestamp.Format("15:04")) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 177, Col: 29} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 119, Col: 91} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27)) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "

") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, " ") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + var templ_7745c5c3_Var30 string + templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.JoinStringErrs(booking.GetBookingType()) + if templ_7745c5c3_Err != nil { + return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 121, Col: 29} + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var30)) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -614,12 +592,12 @@ func LegendComponent() templ.Component { }() } ctx = templ.InitializeContext(ctx) - templ_7745c5c3_Var28 := templ.GetChildren(ctx) - if templ_7745c5c3_Var28 == nil { - templ_7745c5c3_Var28 = templ.NopComponent + templ_7745c5c3_Var31 := templ.GetChildren(ctx) + if templ_7745c5c3_Var31 == nil { + templ_7745c5c3_Var31 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "
Fehler
Arbeitszeit unter regulär
Arbeitszeit vollständig
Überstunden
Keine Buchungen
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "
Fehler
Arbeitszeit unter regulär
Arbeitszeit vollständig
Überstunden
Keine Buchungen
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } diff --git a/Backend/templates/timePage.templ b/Backend/templates/timePage.templ index eb297d6..b831ff1 100644 --- a/Backend/templates/timePage.templ +++ b/Backend/templates/timePage.templ @@ -79,7 +79,7 @@ templ inputForm() {
- +
@@ -93,7 +93,7 @@ templ defaultDayComponent(day models.IWorkDay) { justify = "justify-between" } }} -
+
@timeGaugeComponent(day.GetDayProgress(user), day.Date().Equal(time.Now().Truncate(24*time.Hour)))
@@ -127,12 +127,12 @@ templ defaultDayComponent(day models.IWorkDay) {
@lineComponent() -
- @newAbsenceComponent() + if day.IsWorkDay() { {{ workDay, _ := day.(*models.WorkDay) }} + @newAbsenceComponent() if len(workDay.Bookings) < 1 {

Keine Buchung gefunden. Bitte Arbeitsstunden oder Grund der Abwesenheit eingeben!

} @@ -151,7 +151,7 @@ templ defaultDayComponent(day models.IWorkDay) { }
-
+
@changeButtonComponent("time-"+day.Date().Format("2006-01-02"), day.IsWorkDay())
diff --git a/Backend/templates/timePage_templ.go b/Backend/templates/timePage_templ.go index 55a713c..ce7b4ea 100644 --- a/Backend/templates/timePage_templ.go +++ b/Backend/templates/timePage_templ.go @@ -1,6 +1,6 @@ // Code generated by templ - DO NOT EDIT. -// templ: version: v0.3.924 +// templ: version: v0.3.943 package templates //lint:file-ignore SA4006 This context is only used if a nested component is present. @@ -203,7 +203,7 @@ func inputForm() templ.Component { return templ_7745c5c3_Err } } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -238,7 +238,7 @@ func defaultDayComponent(day models.IWorkDay) templ.Component { if day.IsWorkDay() && len(day.(*models.WorkDay).Bookings) > 1 { justify = "justify-between" } - var templ_7745c5c3_Var10 = []any{"grid-sub divide-x-1 hover:bg-neutral-200 transition-colors"} + var templ_7745c5c3_Var10 = []any{"grid-sub divide-x-1 hover:bg-neutral-200 transition-colors group"} templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var10...) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err @@ -379,7 +379,7 @@ func defaultDayComponent(day models.IWorkDay) templ.Component { if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - var templ_7745c5c3_Var17 = []any{"flex flex-col gap-2 group w-full", justify} + var templ_7745c5c3_Var17 = []any{"flex flex-col gap-2 w-full", justify} templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var17...) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err @@ -414,20 +414,24 @@ func defaultDayComponent(day models.IWorkDay) templ.Component { if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = newAbsenceComponent().Render(ctx, templ_7745c5c3_Buffer) - if templ_7745c5c3_Err != nil { - return templ_7745c5c3_Err - } if day.IsWorkDay() { workDay, _ := day.(*models.WorkDay) + templ_7745c5c3_Err = newAbsenceComponent().Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, " ") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } if len(workDay.Bookings) < 1 { - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "

Keine Buchung gefunden. Bitte Arbeitsstunden oder Grund der Abwesenheit eingeben!

") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "

Keine Buchung gefunden. Bitte Arbeitsstunden oder Grund der Abwesenheit eingeben!

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, " ") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, " ") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -443,7 +447,7 @@ func defaultDayComponent(day models.IWorkDay) templ.Component { return templ_7745c5c3_Err } } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, " ") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, " ") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -459,7 +463,7 @@ func defaultDayComponent(day models.IWorkDay) templ.Component { return templ_7745c5c3_Err } } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -467,7 +471,7 @@ func defaultDayComponent(day models.IWorkDay) templ.Component { if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -496,7 +500,7 @@ func absentInput(a models.Absence) templ.Component { templ_7745c5c3_Var20 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, " ") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, "\">") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err }