From 83723c170f8d6e0fe7b9029f705ef0648b5536b5 Mon Sep 17 00:00:00 2001 From: "Janus C. H. Knudsen" Date: Thu, 25 Dec 2025 12:25:47 +0100 Subject: [PATCH] Enhances service detail and employee selection UI Improves employee selection with checkbox interaction Adds visual refinements to employee and availability sections Updates styling for employee levels and selection states Removes unnecessary consent form toggle --- package-lock.json | 6 +- wwwroot/icons/note-sticky.svg | 2 + wwwroot/poc-arbejdstidsplan.html | 1684 ++++++++++++++++++++++++++++++ wwwroot/poc-service-detail.html | 511 +++++---- 4 files changed, 1969 insertions(+), 234 deletions(-) create mode 100644 wwwroot/icons/note-sticky.svg create mode 100644 wwwroot/poc-arbejdstidsplan.html diff --git a/package-lock.json b/package-lock.json index 2cda11a..7e1d524 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1175,9 +1175,9 @@ ] }, "node_modules/@sevenweirdpeople/swp-charting": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/@sevenweirdpeople/swp-charting/-/swp-charting-0.1.0.tgz", - "integrity": "sha512-XWu1bTK91b9jHbueUPyrNgs0vTHSP3BAWAzrJwB09SoZWECjE3bCck0+SkMLs3qM4Q+0weCDZck090N8NboLyQ==", + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@sevenweirdpeople/swp-charting/-/swp-charting-0.1.1.tgz", + "integrity": "sha512-3kH7bHL8YzXC86g7N2qZfvFlNsl7SU5p8tZWSbdtNQmSCGax9MA3HV0U+M1WcYOTnfoFPg1KJbSGpiuupAw73A==", "license": "MIT" }, "node_modules/@types/chai": { diff --git a/wwwroot/icons/note-sticky.svg b/wwwroot/icons/note-sticky.svg new file mode 100644 index 0000000..fc6bf16 --- /dev/null +++ b/wwwroot/icons/note-sticky.svg @@ -0,0 +1,2 @@ + + diff --git a/wwwroot/poc-arbejdstidsplan.html b/wwwroot/poc-arbejdstidsplan.html new file mode 100644 index 0000000..b2fc5b5 --- /dev/null +++ b/wwwroot/poc-arbejdstidsplan.html @@ -0,0 +1,1684 @@ + + + + + + Arbejdstidsplan + + + + + + + Arbejdstidsplan + + + + + + + Rediger + + + + + + + + 23. - 29. december 2025 + + + + + + + Uge 52 + + Man + 23/12 + + + Tir + 24/12 + + + Ons + 25/12 + + + Tor + 26/12 + + + Fre + 27/12 + + + Lør + 28/12 + + + Søn + 29/12 + + + + + Anna Sørensen + 32 timer + + 09:00 - 17:00 + 09:00 - 13:00 + — + — + 09:00 - 17:00 + 10:00 - 14:00 + — + + + + Mette Jensen + 40 timer + + 10:00 - 18:00 + 10:00 - 18:00 + Ferie + Ferie + Ferie + — + — + + + + Louise Nielsen + 37 timer + + 09:00 - 17:00 + 09:00 - 17:00 + — + — + 09:00 - 17:00 + 09:00 - 14:00 + — + + + + Katrine Pedersen + 24 timer + + 12:00 - 20:00 + — + — + — + 12:00 - 20:00 + 10:00 - 18:00 + — + + + + Sofie Andersen + 20 timer + + Syg + 09:00 - 15:00 + — + — + 09:00 - 15:00 + — + — + + + + + + + Redigér vagt + × + + + + + Medarbejder + + + Vælg celle... + + + + + Dato + — + + + + + + Status + + Arbejde + Fri + Ferie + Syg + + + + + Tidsrum + + + + + + + + + 09:00 – 17:00 + 8 timer + + + + + + Note (valgfrit) + + + + + + + Type + + Enkelt + Gentagelse + + + + + + Gentag + + + + + + + Gentagelser bruger valgt dato som startuge. + + + + Slutdato (valgfrit) + + + + + Ugedag (auto) + — + + + + + + Annuller + Gem + + + + + + + diff --git a/wwwroot/poc-service-detail.html b/wwwroot/poc-service-detail.html index 65b627a..dc29b01 100644 --- a/wwwroot/poc-service-detail.html +++ b/wwwroot/poc-service-detail.html @@ -789,13 +789,53 @@ background: var(--color-background-alt); border-radius: 6px; border: 1px solid var(--color-border); + cursor: pointer; + transition: border-color 0.15s ease; } - swp-employee-item.disabled swp-toggle-slider { - opacity: 0.4; + swp-employee-item:hover { + border-color: var(--color-teal); + } + + swp-employee-item.selected { + border-color: var(--color-teal); + background: color-mix(in srgb, var(--color-teal) 5%, var(--color-background-alt)); + } + + swp-employee-item.disabled { + opacity: 0.5; pointer-events: none; } + swp-employee-checkbox { + width: 20px; + height: 20px; + border: 2px solid var(--color-border); + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + transition: all 0.15s ease; + } + + swp-employee-item.selected swp-employee-checkbox { + background: var(--color-teal); + border-color: var(--color-teal); + color: white; + } + + swp-employee-checkbox svg { + width: 14px; + height: 14px; + fill: currentColor; + opacity: 0; + } + + swp-employee-item.selected swp-employee-checkbox svg { + opacity: 1; + } + swp-employee-avatar { width: 44px; height: 44px; @@ -820,9 +860,21 @@ color: var(--color-text); } + swp-employee-info { + display: flex; + flex-direction: column; + align-items: flex-start; + } + swp-employee-level { - font-size: 13px; + display: inline-flex; + font-size: 11px; + font-weight: 500; + padding: 3px 8px; + border-radius: 4px; + background: var(--color-background); color: var(--color-text-secondary); + margin-top: 4px; } swp-employee-overrides { @@ -958,9 +1010,10 @@ swp-availability-row { display: flex; + flex-wrap: wrap; align-items: center; - gap: 16px; - padding: 10px 0; + gap: 8px 16px; + padding: 12px 0; border-bottom: 1px solid var(--color-border); } @@ -973,7 +1026,7 @@ } swp-availability-day { - width: 80px; + width: 100%; font-size: 14px; font-weight: 500; color: var(--color-text); @@ -1406,8 +1459,8 @@ Farve i kalenderen
@@ -1721,93 +1774,221 @@ MEDARBEJDERE TAB ========================================== --> - - Medarbejdere der udfører denne service +
+
+ + Medarbejdere der udfører denne service - - - AS - - Anna Sørensen - Master Stylist - - - Pris: Standard - Varighed: Standard - - - Ja - Nej - - + + + + + + AS + + Anna Sørensen + Master Stylist + + + Varighed: Standard + + - - MJ - - Mette Jensen - Senior Stylist - - - Pris: Standard - Varighed: +15 min - - - Ja - Nej - - + + + + + MJ + + Mette Jensen + Senior Stylist + + + Varighed: +15 min + + - - LN - - Louise Nielsen - Senior Stylist - - - Pris: Standard - Varighed: Standard - - - Ja - Nej - - + + + + + LN + + Louise Nielsen + Senior Stylist + + + Varighed: Standard + + - - KP - - Katrine Pedersen - Stylist - - - Pris: Standard - Varighed: +15 min - - - Ja - Nej - - + + + + + KP + + Katrine Pedersen + Stylist + + + Varighed: +15 min + + - - SA - - Sofie Andersen⚠ Ikke certificeret - Junior Stylist - - - Pris: — - Varighed: — - - - Ja - Nej - - - + + + + + SA + + Sofie Andersen⚠ Ikke certificeret + Junior Stylist + + + Varighed: — + + + - Vælg alle / Fravælg alle - + Vælg alle / Fravælg alle + +
+ +
+ + Tilgængelighed + + + Mandag + + Ja + Nej + + + + + + + + + + 08:00 – 18:00 + + + + + Tirsdag + + Ja + Nej + + + + + + + + + + 08:00 – 18:00 + + + + + Onsdag + + Ja + Nej + + + + + + + + + + 08:00 – 18:00 + + + + + Torsdag + + Ja + Nej + + + + + + + + + + 08:00 – 12:00 + + + + + Fredag + + Ja + Nej + + + + + + + + + + 08:00 – 18:00 + + + + + Lørdag + + Ja + Nej + + + + + + + + + + 08:00 – 18:00 + + + + + Søndag + + Ja + Nej + + + + + + + + + + 08:00 – 18:00 + + + + + +
+