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
This commit is contained in:
Janus C. H. Knudsen
parent
35c30c058d
commit
83723c170f
4 changed files with 1969 additions and 234 deletions
|
|
@ -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
|
||||
// ==========================================
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue