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
6
package-lock.json
generated
6
package-lock.json
generated
|
|
@ -1175,9 +1175,9 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"node_modules/@sevenweirdpeople/swp-charting": {
|
"node_modules/@sevenweirdpeople/swp-charting": {
|
||||||
"version": "0.1.0",
|
"version": "0.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/@sevenweirdpeople/swp-charting/-/swp-charting-0.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/@sevenweirdpeople/swp-charting/-/swp-charting-0.1.1.tgz",
|
||||||
"integrity": "sha512-XWu1bTK91b9jHbueUPyrNgs0vTHSP3BAWAzrJwB09SoZWECjE3bCck0+SkMLs3qM4Q+0weCDZck090N8NboLyQ==",
|
"integrity": "sha512-3kH7bHL8YzXC86g7N2qZfvFlNsl7SU5p8tZWSbdtNQmSCGax9MA3HV0U+M1WcYOTnfoFPg1KJbSGpiuupAw73A==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/@types/chai": {
|
"node_modules/@types/chai": {
|
||||||
|
|
|
||||||
2
wwwroot/icons/note-sticky.svg
Normal file
2
wwwroot/icons/note-sticky.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 504 B |
1684
wwwroot/poc-arbejdstidsplan.html
Normal file
1684
wwwroot/poc-arbejdstidsplan.html
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -789,13 +789,53 @@
|
||||||
background: var(--color-background-alt);
|
background: var(--color-background-alt);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 1px solid var(--color-border);
|
border: 1px solid var(--color-border);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.15s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
swp-employee-item.disabled swp-toggle-slider {
|
swp-employee-item:hover {
|
||||||
opacity: 0.4;
|
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;
|
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 {
|
swp-employee-avatar {
|
||||||
width: 44px;
|
width: 44px;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
|
|
@ -820,9 +860,21 @@
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
swp-employee-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
swp-employee-level {
|
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);
|
color: var(--color-text-secondary);
|
||||||
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
swp-employee-overrides {
|
swp-employee-overrides {
|
||||||
|
|
@ -958,9 +1010,10 @@
|
||||||
|
|
||||||
swp-availability-row {
|
swp-availability-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 16px;
|
gap: 8px 16px;
|
||||||
padding: 10px 0;
|
padding: 12px 0;
|
||||||
border-bottom: 1px solid var(--color-border);
|
border-bottom: 1px solid var(--color-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -973,7 +1026,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
swp-availability-day {
|
swp-availability-day {
|
||||||
width: 80px;
|
width: 100%;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
|
|
@ -1406,8 +1459,8 @@
|
||||||
<swp-edit-label>Farve i kalenderen</swp-edit-label>
|
<swp-edit-label>Farve i kalenderen</swp-edit-label>
|
||||||
<swp-color-dropdown>
|
<swp-color-dropdown>
|
||||||
<button type="button" popovertarget="colorPopover" id="colorTrigger">
|
<button type="button" popovertarget="colorPopover" id="colorTrigger">
|
||||||
<swp-color-dot class="is-teal"></swp-color-dot>
|
<swp-color-dot class="is-deep-orange"></swp-color-dot>
|
||||||
<span class="color-name">Teal</span>
|
<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>
|
<svg class="chevron" viewBox="0 0 24 24" width="16" height="16"><path d="M7 10l5 5 5-5z" fill="currentColor"/></svg>
|
||||||
</button>
|
</button>
|
||||||
<div popover id="colorPopover">
|
<div popover id="colorPopover">
|
||||||
|
|
@ -1721,93 +1774,221 @@
|
||||||
MEDARBEJDERE TAB
|
MEDARBEJDERE TAB
|
||||||
========================================== -->
|
========================================== -->
|
||||||
<swp-tab-content data-tab="employees">
|
<swp-tab-content data-tab="employees">
|
||||||
<swp-card>
|
<div class="grid-2">
|
||||||
<swp-section-label>Medarbejdere der udfører denne service</swp-section-label>
|
<div>
|
||||||
|
<swp-card>
|
||||||
|
<swp-section-label>Medarbejdere der udfører denne service</swp-section-label>
|
||||||
|
|
||||||
<swp-employee-list>
|
<swp-employee-list>
|
||||||
<swp-employee-item>
|
<swp-employee-item class="selected">
|
||||||
<swp-employee-avatar>AS</swp-employee-avatar>
|
<swp-employee-checkbox>
|
||||||
<swp-employee-info>
|
<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-name>Anna Sørensen</swp-employee-name>
|
</swp-employee-checkbox>
|
||||||
<swp-employee-level>Master Stylist</swp-employee-level>
|
<swp-employee-avatar>AS</swp-employee-avatar>
|
||||||
</swp-employee-info>
|
<swp-employee-info>
|
||||||
<swp-employee-overrides>
|
<swp-employee-name>Anna Sørensen</swp-employee-name>
|
||||||
<span>Pris: <swp-employee-override-value>Standard</swp-employee-override-value></span>
|
<swp-employee-level data-level="master">Master Stylist</swp-employee-level>
|
||||||
<span>Varighed: <swp-employee-override-value>Standard</swp-employee-override-value></span>
|
</swp-employee-info>
|
||||||
</swp-employee-overrides>
|
<swp-employee-overrides>
|
||||||
<swp-toggle-slider data-value="yes">
|
<span>Varighed: <swp-employee-override-value>Standard</swp-employee-override-value></span>
|
||||||
<swp-toggle-option>Ja</swp-toggle-option>
|
</swp-employee-overrides>
|
||||||
<swp-toggle-option>Nej</swp-toggle-option>
|
</swp-employee-item>
|
||||||
</swp-toggle-slider>
|
|
||||||
</swp-employee-item>
|
|
||||||
|
|
||||||
<swp-employee-item>
|
<swp-employee-item class="selected">
|
||||||
<swp-employee-avatar>MJ</swp-employee-avatar>
|
<swp-employee-checkbox>
|
||||||
<swp-employee-info>
|
<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-name>Mette Jensen</swp-employee-name>
|
</swp-employee-checkbox>
|
||||||
<swp-employee-level>Senior Stylist</swp-employee-level>
|
<swp-employee-avatar>MJ</swp-employee-avatar>
|
||||||
</swp-employee-info>
|
<swp-employee-info>
|
||||||
<swp-employee-overrides>
|
<swp-employee-name>Mette Jensen</swp-employee-name>
|
||||||
<span>Pris: <swp-employee-override-value>Standard</swp-employee-override-value></span>
|
<swp-employee-level data-level="senior">Senior Stylist</swp-employee-level>
|
||||||
<span>Varighed: <swp-employee-override-value>+15 min</swp-employee-override-value></span>
|
</swp-employee-info>
|
||||||
</swp-employee-overrides>
|
<swp-employee-overrides>
|
||||||
<swp-toggle-slider data-value="yes">
|
<span>Varighed: <swp-employee-override-value>+15 min</swp-employee-override-value></span>
|
||||||
<swp-toggle-option>Ja</swp-toggle-option>
|
</swp-employee-overrides>
|
||||||
<swp-toggle-option>Nej</swp-toggle-option>
|
</swp-employee-item>
|
||||||
</swp-toggle-slider>
|
|
||||||
</swp-employee-item>
|
|
||||||
|
|
||||||
<swp-employee-item>
|
<swp-employee-item class="selected">
|
||||||
<swp-employee-avatar>LN</swp-employee-avatar>
|
<swp-employee-checkbox>
|
||||||
<swp-employee-info>
|
<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-name>Louise Nielsen</swp-employee-name>
|
</swp-employee-checkbox>
|
||||||
<swp-employee-level>Senior Stylist</swp-employee-level>
|
<swp-employee-avatar>LN</swp-employee-avatar>
|
||||||
</swp-employee-info>
|
<swp-employee-info>
|
||||||
<swp-employee-overrides>
|
<swp-employee-name>Louise Nielsen</swp-employee-name>
|
||||||
<span>Pris: <swp-employee-override-value>Standard</swp-employee-override-value></span>
|
<swp-employee-level data-level="senior">Senior Stylist</swp-employee-level>
|
||||||
<span>Varighed: <swp-employee-override-value>Standard</swp-employee-override-value></span>
|
</swp-employee-info>
|
||||||
</swp-employee-overrides>
|
<swp-employee-overrides>
|
||||||
<swp-toggle-slider data-value="yes">
|
<span>Varighed: <swp-employee-override-value>Standard</swp-employee-override-value></span>
|
||||||
<swp-toggle-option>Ja</swp-toggle-option>
|
</swp-employee-overrides>
|
||||||
<swp-toggle-option>Nej</swp-toggle-option>
|
</swp-employee-item>
|
||||||
</swp-toggle-slider>
|
|
||||||
</swp-employee-item>
|
|
||||||
|
|
||||||
<swp-employee-item>
|
<swp-employee-item class="selected">
|
||||||
<swp-employee-avatar>KP</swp-employee-avatar>
|
<swp-employee-checkbox>
|
||||||
<swp-employee-info>
|
<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-name>Katrine Pedersen</swp-employee-name>
|
</swp-employee-checkbox>
|
||||||
<swp-employee-level>Stylist</swp-employee-level>
|
<swp-employee-avatar>KP</swp-employee-avatar>
|
||||||
</swp-employee-info>
|
<swp-employee-info>
|
||||||
<swp-employee-overrides>
|
<swp-employee-name>Katrine Pedersen</swp-employee-name>
|
||||||
<span>Pris: <swp-employee-override-value>Standard</swp-employee-override-value></span>
|
<swp-employee-level data-level="stylist">Stylist</swp-employee-level>
|
||||||
<span>Varighed: <swp-employee-override-value>+15 min</swp-employee-override-value></span>
|
</swp-employee-info>
|
||||||
</swp-employee-overrides>
|
<swp-employee-overrides>
|
||||||
<swp-toggle-slider data-value="yes">
|
<span>Varighed: <swp-employee-override-value>+15 min</swp-employee-override-value></span>
|
||||||
<swp-toggle-option>Ja</swp-toggle-option>
|
</swp-employee-overrides>
|
||||||
<swp-toggle-option>Nej</swp-toggle-option>
|
</swp-employee-item>
|
||||||
</swp-toggle-slider>
|
|
||||||
</swp-employee-item>
|
|
||||||
|
|
||||||
<swp-employee-item class="disabled">
|
<swp-employee-item class="disabled">
|
||||||
<swp-employee-avatar>SA</swp-employee-avatar>
|
<swp-employee-checkbox>
|
||||||
<swp-employee-info>
|
<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-name>Sofie Andersen<swp-employee-warning>⚠ Ikke certificeret</swp-employee-warning></swp-employee-name>
|
</swp-employee-checkbox>
|
||||||
<swp-employee-level>Junior Stylist</swp-employee-level>
|
<swp-employee-avatar>SA</swp-employee-avatar>
|
||||||
</swp-employee-info>
|
<swp-employee-info>
|
||||||
<swp-employee-overrides>
|
<swp-employee-name>Sofie Andersen<swp-employee-warning>⚠ Ikke certificeret</swp-employee-warning></swp-employee-name>
|
||||||
<span>Pris: <swp-employee-override-value>—</swp-employee-override-value></span>
|
<swp-employee-level data-level="junior">Junior Stylist</swp-employee-level>
|
||||||
<span>Varighed: <swp-employee-override-value>—</swp-employee-override-value></span>
|
</swp-employee-info>
|
||||||
</swp-employee-overrides>
|
<swp-employee-overrides>
|
||||||
<swp-toggle-slider data-value="no">
|
<span>Varighed: <swp-employee-override-value>—</swp-employee-override-value></span>
|
||||||
<swp-toggle-option>Ja</swp-toggle-option>
|
</swp-employee-overrides>
|
||||||
<swp-toggle-option>Nej</swp-toggle-option>
|
</swp-employee-item>
|
||||||
</swp-toggle-slider>
|
</swp-employee-list>
|
||||||
</swp-employee-item>
|
|
||||||
</swp-employee-list>
|
|
||||||
|
|
||||||
<swp-see-all>Vælg alle / Fravælg alle</swp-see-all>
|
<swp-see-all>Vælg alle / Fravælg alle</swp-see-all>
|
||||||
</swp-card>
|
</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>
|
</swp-tab-content>
|
||||||
|
|
||||||
<!-- ==========================================
|
<!-- ==========================================
|
||||||
|
|
@ -1953,138 +2134,6 @@
|
||||||
</swp-edit-section>
|
</swp-edit-section>
|
||||||
</swp-card>
|
</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-card>
|
||||||
<swp-section-label>Krav & Forberedelse</swp-section-label>
|
<swp-section-label>Krav & Forberedelse</swp-section-label>
|
||||||
<swp-toggle-row>
|
<swp-toggle-row>
|
||||||
|
|
@ -2117,16 +2166,7 @@
|
||||||
<swp-toggle-option>Nej</swp-toggle-option>
|
<swp-toggle-option>Nej</swp-toggle-option>
|
||||||
</swp-toggle-slider>
|
</swp-toggle-slider>
|
||||||
</swp-toggle-row>
|
</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>
|
</swp-card>
|
||||||
</div>
|
</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
|
// COLOR DROPDOWN
|
||||||
// ==========================================
|
// ==========================================
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue