Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhances service detail and employee selection UI

Browse source 
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
This commit is contained in:
Janus C. H. Knudsen 2025-12-25 12:25:47 +01:00
parent 35c30c058d
commit 83723c170f
4 changed files with 1969 additions and 234 deletions
Download patch file Download diff file Expand all files Collapse all files

2
wwwroot/icons/note-sticky.svg Normal file
View file

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path d="M19,0H5C2.24,0,0,2.24,0,5v14c0,2.76,2.24,5,5,5h11.34c1.34,0,2.59-.52,3.54-1.46l2.66-2.66c.94-.94,1.46-2.2,1.46-3.54V5c0-2.76-2.24-5-5-5ZM5,22c-1.65,0-3-1.35-3-3V5c0-1.65,1.35-3,3-3h14c1.65,0,3,1.35,3,3V15h-4c-1.65,0-3,1.35-3,3v4H5Zm13.46-.88c-.4,.4-.91,.68-1.46,.8v-3.93c0-.55,.45-1,1-1h3.93c-.12,.55-.4,1.06-.8,1.46l-2.66,2.66Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 504 B

1684
wwwroot/poc-arbejdstidsplan.html Normal file
View file

File diff suppressed because it is too large Load diff

511
wwwroot/poc-service-detail.html
View file

@ -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 @@
<swp-edit-label>Farve i kalenderen</swp-edit-label>
<swp-color-dropdown>
<button type="button" popovertarget="colorPopover" id="colorTrigger">
<swp-color-dot class="is-teal"></swp-color-dot>
<span class="color-name">Teal</span>
<swp-color-dot class="is-deep-orange"></swp-color-dot>
<span class="color-name">Orange</span>
<svg class="chevron" viewBox="0 0 24 24" width="16" height="16"><path d="M7 10l5 5 5-5z" fill="currentColor"/></svg>
</button>
<div popover id="colorPopover">
@ -1721,93 +1774,221 @@
MEDARBEJDERE TAB
========================================== -->
<swp-tab-content data-tab="employees">
<swp-card>
<swp-section-label>Medarbejdere der udfører denne service</swp-section-label>
<div class="grid-2">
<div>
<swp-card>
<swp-section-label>Medarbejdere der udfører denne service</swp-section-label>
<swp-employee-list>
<swp-employee-item>
<swp-employee-avatar>AS</swp-employee-avatar>
<swp-employee-info>
<swp-employee-name>Anna Sørensen</swp-employee-name>
<swp-employee-level>Master Stylist</swp-employee-level>
</swp-employee-info>
<swp-employee-overrides>
<span>Pris: <swp-employee-override-value>Standard</swp-employee-override-value></span>
<span>Varighed: <swp-employee-override-value>Standard</swp-employee-override-value></span>
</swp-employee-overrides>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-employee-item>
<swp-employee-list>
<swp-employee-item class="selected">
<swp-employee-checkbox>
<svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
</swp-employee-checkbox>
<swp-employee-avatar>AS</swp-employee-avatar>
<swp-employee-info>
<swp-employee-name>Anna Sørensen</swp-employee-name>
<swp-employee-level data-level="master">Master Stylist</swp-employee-level>
</swp-employee-info>
<swp-employee-overrides>
<span>Varighed: <swp-employee-override-value>Standard</swp-employee-override-value></span>
</swp-employee-overrides>
</swp-employee-item>
<swp-employee-item>
<swp-employee-avatar>MJ</swp-employee-avatar>
<swp-employee-info>
<swp-employee-name>Mette Jensen</swp-employee-name>
<swp-employee-level>Senior Stylist</swp-employee-level>
</swp-employee-info>
<swp-employee-overrides>
<span>Pris: <swp-employee-override-value>Standard</swp-employee-override-value></span>
<span>Varighed: <swp-employee-override-value>+15 min</swp-employee-override-value></span>
</swp-employee-overrides>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-employee-item>
<swp-employee-item class="selected">
<swp-employee-checkbox>
<svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
</swp-employee-checkbox>
<swp-employee-avatar>MJ</swp-employee-avatar>
<swp-employee-info>
<swp-employee-name>Mette Jensen</swp-employee-name>
<swp-employee-level data-level="senior">Senior Stylist</swp-employee-level>
</swp-employee-info>
<swp-employee-overrides>
<span>Varighed: <swp-employee-override-value>+15 min</swp-employee-override-value></span>
</swp-employee-overrides>
</swp-employee-item>
<swp-employee-item>
<swp-employee-avatar>LN</swp-employee-avatar>
<swp-employee-info>
<swp-employee-name>Louise Nielsen</swp-employee-name>
<swp-employee-level>Senior Stylist</swp-employee-level>
</swp-employee-info>
<swp-employee-overrides>
<span>Pris: <swp-employee-override-value>Standard</swp-employee-override-value></span>
<span>Varighed: <swp-employee-override-value>Standard</swp-employee-override-value></span>
</swp-employee-overrides>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-employee-item>
<swp-employee-item class="selected">
<swp-employee-checkbox>
<svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
</swp-employee-checkbox>
<swp-employee-avatar>LN</swp-employee-avatar>
<swp-employee-info>
<swp-employee-name>Louise Nielsen</swp-employee-name>
<swp-employee-level data-level="senior">Senior Stylist</swp-employee-level>
</swp-employee-info>
<swp-employee-overrides>
<span>Varighed: <swp-employee-override-value>Standard</swp-employee-override-value></span>
</swp-employee-overrides>
</swp-employee-item>
<swp-employee-item>
<swp-employee-avatar>KP</swp-employee-avatar>
<swp-employee-info>
<swp-employee-name>Katrine Pedersen</swp-employee-name>
<swp-employee-level>Stylist</swp-employee-level>
</swp-employee-info>
<swp-employee-overrides>
<span>Pris: <swp-employee-override-value>Standard</swp-employee-override-value></span>
<span>Varighed: <swp-employee-override-value>+15 min</swp-employee-override-value></span>
</swp-employee-overrides>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-employee-item>
<swp-employee-item class="selected">
<swp-employee-checkbox>
<svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
</swp-employee-checkbox>
<swp-employee-avatar>KP</swp-employee-avatar>
<swp-employee-info>
<swp-employee-name>Katrine Pedersen</swp-employee-name>
<swp-employee-level data-level="stylist">Stylist</swp-employee-level>
</swp-employee-info>
<swp-employee-overrides>
<span>Varighed: <swp-employee-override-value>+15 min</swp-employee-override-value></span>
</swp-employee-overrides>
</swp-employee-item>
<swp-employee-item class="disabled">
<swp-employee-avatar>SA</swp-employee-avatar>
<swp-employee-info>
<swp-employee-name>Sofie Andersen<swp-employee-warning>⚠ Ikke certificeret</swp-employee-warning></swp-employee-name>
<swp-employee-level>Junior Stylist</swp-employee-level>
</swp-employee-info>
<swp-employee-overrides>
<span>Pris: <swp-employee-override-value>—</swp-employee-override-value></span>
<span>Varighed: <swp-employee-override-value>—</swp-employee-override-value></span>
</swp-employee-overrides>
<swp-toggle-slider data-value="no">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-employee-item>
</swp-employee-list>
<swp-employee-item class="disabled">
<swp-employee-checkbox>
<svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
</swp-employee-checkbox>
<swp-employee-avatar>SA</swp-employee-avatar>
<swp-employee-info>
<swp-employee-name>Sofie Andersen<swp-employee-warning>⚠ Ikke certificeret</swp-employee-warning></swp-employee-name>
<swp-employee-level data-level="junior">Junior Stylist</swp-employee-level>
</swp-employee-info>
<swp-employee-overrides>
<span>Varighed: <swp-employee-override-value>—</swp-employee-override-value></span>
</swp-employee-overrides>
</swp-employee-item>
</swp-employee-list>
<swp-see-all>Vælg alle / Fravælg alle</swp-see-all>
</swp-card>
<swp-see-all>Vælg alle / Fravælg alle</swp-see-all>
</swp-card>
</div>
<div>
<swp-card>
<swp-section-label>Tilgængelighed</swp-section-label>
<swp-availability-list>
<swp-availability-row data-enabled="true">
<swp-availability-day>Mandag</swp-availability-day>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-availability-time>
<swp-time-range>
<swp-time-range-slider>
<swp-time-range-track></swp-time-range-track>
<swp-time-range-fill></swp-time-range-fill>
<input type="range" class="range-start" min="0" max="60" value="8" step="1">
<input type="range" class="range-end" min="0" max="60" value="48" step="1">
</swp-time-range-slider>
<swp-time-range-label>08:00 – 18:00</swp-time-range-label>
</swp-time-range>
</swp-availability-time>
</swp-availability-row>
<swp-availability-row data-enabled="true">
<swp-availability-day>Tirsdag</swp-availability-day>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-availability-time>
<swp-time-range>
<swp-time-range-slider>
<swp-time-range-track></swp-time-range-track>
<swp-time-range-fill></swp-time-range-fill>
<input type="range" class="range-start" min="0" max="60" value="8" step="1">
<input type="range" class="range-end" min="0" max="60" value="48" step="1">
</swp-time-range-slider>
<swp-time-range-label>08:00 – 18:00</swp-time-range-label>
</swp-time-range>
</swp-availability-time>
</swp-availability-row>
<swp-availability-row data-enabled="true">
<swp-availability-day>Onsdag</swp-availability-day>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-availability-time>
<swp-time-range>
<swp-time-range-slider>
<swp-time-range-track></swp-time-range-track>
<swp-time-range-fill></swp-time-range-fill>
<input type="range" class="range-start" min="0" max="60" value="8" step="1">
<input type="range" class="range-end" min="0" max="60" value="48" step="1">
</swp-time-range-slider>
<swp-time-range-label>08:00 – 18:00</swp-time-range-label>
</swp-time-range>
</swp-availability-time>
</swp-availability-row>
<swp-availability-row data-enabled="true">
<swp-availability-day>Torsdag</swp-availability-day>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-availability-time>
<swp-time-range>
<swp-time-range-slider>
<swp-time-range-track></swp-time-range-track>
<swp-time-range-fill></swp-time-range-fill>
<input type="range" class="range-start" min="0" max="60" value="8" step="1">
<input type="range" class="range-end" min="0" max="60" value="24" step="1">
</swp-time-range-slider>
<swp-time-range-label>08:00 – 12:00</swp-time-range-label>
</swp-time-range>
</swp-availability-time>
</swp-availability-row>
<swp-availability-row data-enabled="true">
<swp-availability-day>Fredag</swp-availability-day>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-availability-time>
<swp-time-range>
<swp-time-range-slider>
<swp-time-range-track></swp-time-range-track>
<swp-time-range-fill></swp-time-range-fill>
<input type="range" class="range-start" min="0" max="60" value="8" step="1">
<input type="range" class="range-end" min="0" max="60" value="48" step="1">
</swp-time-range-slider>
<swp-time-range-label>08:00 – 18:00</swp-time-range-label>
</swp-time-range>
</swp-availability-time>
</swp-availability-row>
<swp-availability-row data-enabled="false">
<swp-availability-day>Lørdag</swp-availability-day>
<swp-toggle-slider data-value="no">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-availability-time>
<swp-time-range>
<swp-time-range-slider>
<swp-time-range-track></swp-time-range-track>
<swp-time-range-fill></swp-time-range-fill>
<input type="range" class="range-start" min="0" max="60" value="8" step="1" disabled>
<input type="range" class="range-end" min="0" max="60" value="48" step="1" disabled>
</swp-time-range-slider>
<swp-time-range-label>08:00 – 18:00</swp-time-range-label>
</swp-time-range>
</swp-availability-time>
</swp-availability-row>
<swp-availability-row data-enabled="false">
<swp-availability-day>Søndag</swp-availability-day>
<swp-toggle-slider data-value="no">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-availability-time>
<swp-time-range>
<swp-time-range-slider>
<swp-time-range-track></swp-time-range-track>
<swp-time-range-fill></swp-time-range-fill>
<input type="range" class="range-start" min="0" max="60" value="8" step="1" disabled>
<input type="range" class="range-end" min="0" max="60" value="48" step="1" disabled>
</swp-time-range-slider>
<swp-time-range-label>08:00 – 18:00</swp-time-range-label>
</swp-time-range>
</swp-availability-time>
</swp-availability-row>
</swp-availability-list>
</swp-card>
</div>
</div>
</swp-tab-content>
<!-- ==========================================
@ -1953,138 +2134,6 @@
</swp-edit-section>
</swp-card>
<swp-card>
<swp-section-label>Tilgængelighed</swp-section-label>
<swp-availability-list>
<swp-availability-row data-enabled="true">
<swp-availability-day>Mandag</swp-availability-day>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-availability-time>
<swp-time-range>
<swp-time-range-slider>
<swp-time-range-track></swp-time-range-track>
<swp-time-range-fill></swp-time-range-fill>
<input type="range" class="range-start" min="0" max="60" value="8" step="1">
<input type="range" class="range-end" min="0" max="60" value="48" step="1">
</swp-time-range-slider>
<swp-time-range-label>08:00 – 18:00</swp-time-range-label>
</swp-time-range>
</swp-availability-time>
</swp-availability-row>
<swp-availability-row data-enabled="true">
<swp-availability-day>Tirsdag</swp-availability-day>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-availability-time>
<swp-time-range>
<swp-time-range-slider>
<swp-time-range-track></swp-time-range-track>
<swp-time-range-fill></swp-time-range-fill>
<input type="range" class="range-start" min="0" max="60" value="8" step="1">
<input type="range" class="range-end" min="0" max="60" value="48" step="1">
</swp-time-range-slider>
<swp-time-range-label>08:00 – 18:00</swp-time-range-label>
</swp-time-range>
</swp-availability-time>
</swp-availability-row>
<swp-availability-row data-enabled="true">
<swp-availability-day>Onsdag</swp-availability-day>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-availability-time>
<swp-time-range>
<swp-time-range-slider>
<swp-time-range-track></swp-time-range-track>
<swp-time-range-fill></swp-time-range-fill>
<input type="range" class="range-start" min="0" max="60" value="8" step="1">
<input type="range" class="range-end" min="0" max="60" value="48" step="1">
</swp-time-range-slider>
<swp-time-range-label>08:00 – 18:00</swp-time-range-label>
</swp-time-range>
</swp-availability-time>
</swp-availability-row>
<swp-availability-row data-enabled="true">
<swp-availability-day>Torsdag</swp-availability-day>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-availability-time>
<swp-time-range>
<swp-time-range-slider>
<swp-time-range-track></swp-time-range-track>
<swp-time-range-fill></swp-time-range-fill>
<input type="range" class="range-start" min="0" max="60" value="8" step="1">
<input type="range" class="range-end" min="0" max="60" value="24" step="1">
</swp-time-range-slider>
<swp-time-range-label>08:00 – 12:00</swp-time-range-label>
</swp-time-range>
</swp-availability-time>
</swp-availability-row>
<swp-availability-row data-enabled="true">
<swp-availability-day>Fredag</swp-availability-day>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-availability-time>
<swp-time-range>
<swp-time-range-slider>
<swp-time-range-track></swp-time-range-track>
<swp-time-range-fill></swp-time-range-fill>
<input type="range" class="range-start" min="0" max="60" value="8" step="1">
<input type="range" class="range-end" min="0" max="60" value="48" step="1">
</swp-time-range-slider>
<swp-time-range-label>08:00 – 18:00</swp-time-range-label>
</swp-time-range>
</swp-availability-time>
</swp-availability-row>
<swp-availability-row data-enabled="false">
<swp-availability-day>Lørdag</swp-availability-day>
<swp-toggle-slider data-value="no">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-availability-time>
<swp-time-range>
<swp-time-range-slider>
<swp-time-range-track></swp-time-range-track>
<swp-time-range-fill></swp-time-range-fill>
<input type="range" class="range-start" min="0" max="60" value="8" step="1" disabled>
<input type="range" class="range-end" min="0" max="60" value="48" step="1" disabled>
</swp-time-range-slider>
<swp-time-range-label>08:00 – 18:00</swp-time-range-label>
</swp-time-range>
</swp-availability-time>
</swp-availability-row>
<swp-availability-row data-enabled="false">
<swp-availability-day>Søndag</swp-availability-day>
<swp-toggle-slider data-value="no">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-availability-time>
<swp-time-range>
<swp-time-range-slider>
<swp-time-range-track></swp-time-range-track>
<swp-time-range-fill></swp-time-range-fill>
<input type="range" class="range-start" min="0" max="60" value="8" step="1" disabled>
<input type="range" class="range-end" min="0" max="60" value="48" step="1" disabled>
</swp-time-range-slider>
<swp-time-range-label>08:00 – 18:00</swp-time-range-label>
</swp-time-range>
</swp-availability-time>
</swp-availability-row>
</swp-availability-list>
</swp-card>
<swp-card>
<swp-section-label>Krav & Forberedelse</swp-section-label>
<swp-toggle-row>
@ -2117,16 +2166,7 @@
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<div>
<swp-toggle-label>Samtykke-formular</swp-toggle-label>
<swp-toggle-description>Kunde skal underskrive samtykke før behandling</swp-toggle-description>
</div>
<swp-toggle-slider data-value="no">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
</swp-card>
</div>
@ -2323,6 +2363,15 @@
});
});
// ==========================================
// EMPLOYEE ITEMS
// ==========================================
document.querySelectorAll('swp-employee-item:not(.disabled)').forEach(item => {
item.addEventListener('click', () => {
item.classList.toggle('selected');
});
});
// ==========================================
// COLOR DROPDOWN
// ==========================================