Enhances service details with employees and addon sections
Adds new components for service employees and addons Introduces detailed views with selectable employees and add-ons Updates localization translations for new sections Implements time range slider functionality for availability
This commit is contained in:
Janus C. H. Knudsen
parent
5e3811347c
commit
7643a6ab82
20 changed files with 830 additions and 336 deletions
|
|
@ -4,7 +4,11 @@
|
|||
* For logged-in users to manage their subscription plan,
|
||||
* payment method, and view invoice history.
|
||||
*
|
||||
* Reuses: swp-btn, swp-plan-card, swp-plan-badge, swp-plan-action (components.css)
|
||||
* Reuses:
|
||||
* - swp-card (components.css)
|
||||
* - swp-btn (components.css)
|
||||
* - swp-plan-card, swp-plan-badge, swp-plan-action (components.css)
|
||||
* - swp-data-table (components.css)
|
||||
*/
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -65,20 +69,12 @@ swp-billing-grid {
|
|||
}
|
||||
|
||||
/* ===========================================
|
||||
PAYMENT CARD
|
||||
PAYMENT CARD (extends swp-card)
|
||||
=========================================== */
|
||||
swp-payment-card {
|
||||
swp-card.payment {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--card-padding);
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
padding: var(--card-padding);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: var(--spacing-5);
|
||||
}
|
||||
}
|
||||
|
||||
swp-payment-method {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
/**
|
||||
* Cash Register - Page Styling
|
||||
*
|
||||
* Filter bar, stats, table, forms, and difference box
|
||||
* Reuses: swp-sticky-header, swp-header-content (page.css)
|
||||
* Reuses: swp-btn, swp-status-badge, swp-card-footer (components.css)
|
||||
* Filter bar, table, forms, and difference box
|
||||
* Reuses:
|
||||
* - swp-sticky-header, swp-header-content (page.css)
|
||||
* - swp-stats-row, swp-stat-card (stats.css)
|
||||
* - swp-btn, swp-status-badge, swp-card-footer (components.css)
|
||||
*/
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -17,6 +19,7 @@ swp-filter-bar {
|
|||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
margin-top: var(--spacing-10);
|
||||
margin-bottom: var(--spacing-10);
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
|
@ -51,58 +54,6 @@ swp-filter-spacer {
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
KASSE STATS BAR
|
||||
=========================================== */
|
||||
swp-cash-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--spacing-8);
|
||||
max-width: var(--page-max-width);
|
||||
margin: 0 auto;
|
||||
|
||||
&:not(.active) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
swp-cash-stat {
|
||||
background: var(--color-background-alt);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-6) var(--spacing-8);
|
||||
|
||||
swp-cash-stat-value {
|
||||
display: block;
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-family: var(--font-mono);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-cash-stat-label {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: var(--spacing-2);
|
||||
}
|
||||
|
||||
&.highlight swp-cash-stat-value {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
&.warning swp-cash-stat-value {
|
||||
color: var(--color-amber);
|
||||
}
|
||||
|
||||
&.negative swp-cash-stat-value {
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
&.user swp-cash-stat-value {
|
||||
color: var(--color-blue);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
ACTION BAR (Table Header)
|
||||
=========================================== */
|
||||
|
|
@ -340,7 +291,6 @@ swp-cash-grid {
|
|||
|
||||
swp-cash-column {
|
||||
display: grid;
|
||||
gap: var(--spacing-10);
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
|
|
@ -729,10 +679,6 @@ swp-system-note {
|
|||
RESPONSIVE
|
||||
=========================================== */
|
||||
@media (max-width: 1000px) {
|
||||
swp-cash-stats {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
swp-cash-table {
|
||||
grid-template-columns: 50px 80px 1fr 100px 110px 120px 40px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -544,6 +544,7 @@ swp-card {
|
|||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius-lg);
|
||||
padding: var(--card-padding);
|
||||
margin-top: var(--section-gap);
|
||||
}
|
||||
|
||||
/* Section label - simple card header */
|
||||
|
|
@ -1295,7 +1296,6 @@ swp-detail-grid {
|
|||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-8);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1304,3 +1304,142 @@ swp-detail-grid {
|
|||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
SELECTABLE LIST (Checkbox + Info pattern)
|
||||
Used for employee lists, addon lists, etc.
|
||||
=========================================== */
|
||||
swp-selectable-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
swp-selectable-item {
|
||||
display: grid;
|
||||
grid-template-columns: 24px auto 1fr auto;
|
||||
gap: var(--spacing-4);
|
||||
align-items: center;
|
||||
padding: var(--spacing-4);
|
||||
background: var(--color-background-alt);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
|
||||
&:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: var(--bg-teal-subtle);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Variant without avatar (for addons) */
|
||||
&.no-avatar {
|
||||
grid-template-columns: 24px 1fr auto;
|
||||
}
|
||||
}
|
||||
|
||||
swp-selectable-checkbox {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all var(--transition-fast);
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: white;
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-fast);
|
||||
}
|
||||
|
||||
.selected & {
|
||||
background: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
|
||||
svg {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swp-selectable-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-1);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
swp-selectable-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-selectable-warning {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-amber);
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
|
||||
swp-selectable-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
span {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
}
|
||||
|
||||
swp-selectable-type {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
|
||||
&.required {
|
||||
color: var(--color-amber);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
}
|
||||
|
||||
swp-selectable-override {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
swp-selectable-override-value {
|
||||
font-family: var(--font-mono);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* See all / Select all link */
|
||||
swp-see-all {
|
||||
display: block;
|
||||
margin-top: var(--spacing-4);
|
||||
padding-top: var(--spacing-4);
|
||||
border-top: 1px solid var(--color-border);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-teal);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -291,3 +291,105 @@ swp-color-dot {
|
|||
flex-shrink: 0;
|
||||
background: var(--b-primary);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
TIME RANGE SLIDER (Dual-handle range input)
|
||||
=========================================== */
|
||||
swp-time-range {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
swp-time-range-slider {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
swp-time-range-track {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: var(--color-border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
swp-time-range-fill {
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
background: var(--color-teal);
|
||||
border-radius: 2px;
|
||||
cursor: grab;
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
swp-time-range-slider input[type="range"] {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
margin: 0;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: var(--color-teal);
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: var(--color-teal);
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||
}
|
||||
}
|
||||
|
||||
swp-time-range-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
background: var(--color-background-alt);
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-time-range-times {
|
||||
font-size: 13px;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
swp-time-range-duration {
|
||||
font-size: 11px;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--color-text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -855,104 +855,6 @@ swp-status-option {
|
|||
}
|
||||
}
|
||||
|
||||
/* Time range slider */
|
||||
swp-time-range {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
swp-time-range-slider {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
swp-time-range-track {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: var(--color-border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
swp-time-range-fill {
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
background: var(--color-teal);
|
||||
border-radius: 2px;
|
||||
cursor: grab;
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
swp-time-range-slider input[type="range"] {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
margin: 0;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: var(--color-teal);
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: var(--color-teal);
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||
}
|
||||
}
|
||||
|
||||
swp-time-range-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
background: var(--color-background-alt);
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
swp-time-range-times {
|
||||
font-size: 13px;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
swp-time-range-duration {
|
||||
font-size: 11px;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--color-text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
/* Schedule drawer employee display */
|
||||
swp-employee-display {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@ swp-page-container {
|
|||
display: block;
|
||||
max-width: var(--page-max-width);
|
||||
margin: 0 auto;
|
||||
padding: var(--page-padding);
|
||||
padding-left: var(--page-padding);
|
||||
padding-right: var(--page-padding);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
|
|||
|
|
@ -426,3 +426,40 @@ swp-duration-delete {
|
|||
swp-duration-item:hover swp-duration-delete {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
AVAILABILITY LIST (Services - Tilgængelighed)
|
||||
=========================================== */
|
||||
swp-availability-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
swp-availability-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2) var(--spacing-4);
|
||||
padding: var(--spacing-3) 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&[data-enabled="false"] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
swp-availability-day {
|
||||
width: 100%;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-availability-time {
|
||||
flex: 1;
|
||||
transition: opacity var(--transition-fast);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ swp-stats-grid {
|
|||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--card-gap);
|
||||
margin-bottom: var(--section-gap);
|
||||
}
|
||||
|
||||
swp-stats-row {
|
||||
|
|
@ -20,6 +19,20 @@ swp-stats-row {
|
|||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--card-gap);
|
||||
margin-bottom: var(--section-gap);
|
||||
|
||||
&.cols-4 {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
/* Reset margin when stat-card is inside stats-row */
|
||||
& swp-stat-card {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Tab-based visibility for multi-stat rows */
|
||||
&[data-for-tab]:not(.active) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -31,6 +44,7 @@ swp-stat-card {
|
|||
background: var(--color-surface);
|
||||
border-radius: var(--border-radius-lg);
|
||||
padding: var(--card-padding);
|
||||
margin-top: var(--section-gap);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
|
|
@ -238,7 +252,8 @@ swp-quick-stat swp-stat-label {
|
|||
=========================================== */
|
||||
@media (max-width: 1200px) {
|
||||
swp-stats-bar,
|
||||
swp-stats-grid {
|
||||
swp-stats-grid,
|
||||
swp-stats-row.cols-4 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
* Handles generic UI controls functionality:
|
||||
* - Toggle sliders (Ja/Nej switches)
|
||||
* - Select dropdowns
|
||||
* - Time range sliders
|
||||
*/
|
||||
|
||||
/**
|
||||
|
|
@ -13,6 +14,7 @@ export class ControlsController {
|
|||
constructor() {
|
||||
this.initToggleSliders();
|
||||
this.initSelectDropdowns();
|
||||
this.initTimeRangeSliders();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -141,4 +143,197 @@ export class ControlsController {
|
|||
select.querySelector('button')?.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize all time range sliders on the page
|
||||
* Each slider gets fill bar positioning, input handling, and drag behavior
|
||||
* Dispatches 'timerange:change' event when values change
|
||||
*/
|
||||
private initTimeRangeSliders(): void {
|
||||
document.querySelectorAll('swp-time-range-slider').forEach(slider => {
|
||||
new TimeRangeSlider(slider as HTMLElement);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* TimeRangeSlider - Reusable dual-handle time range slider
|
||||
*
|
||||
* Features:
|
||||
* - Dual handle (start/end) range inputs
|
||||
* - Fill bar that shows selected range
|
||||
* - Drag fill bar to move entire range
|
||||
* - Label updates with times and duration
|
||||
*
|
||||
* Dispatches 'timerange:change' event with detail:
|
||||
* { start, end, startTime, endTime }
|
||||
*/
|
||||
class TimeRangeSlider {
|
||||
private static readonly TIME_RANGE_MAX = 60; // 15 hours (06:00-21:00) * 4 intervals
|
||||
|
||||
private slider: HTMLElement;
|
||||
private startInput: HTMLInputElement | null;
|
||||
private endInput: HTMLInputElement | null;
|
||||
private fill: HTMLElement | null;
|
||||
private track: HTMLElement | null;
|
||||
|
||||
constructor(slider: HTMLElement) {
|
||||
this.slider = slider;
|
||||
this.startInput = slider.querySelector('.range-start');
|
||||
this.endInput = slider.querySelector('.range-end');
|
||||
this.fill = slider.querySelector('swp-time-range-fill');
|
||||
this.track = slider.querySelector('swp-time-range-track');
|
||||
|
||||
this.updateDisplay();
|
||||
this.setupEventListeners();
|
||||
this.setupDragBehavior();
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the visual display (fill bar position, label text)
|
||||
*/
|
||||
private updateDisplay(): void {
|
||||
if (!this.startInput || !this.endInput || !this.fill) return;
|
||||
|
||||
let startVal = parseInt(this.startInput.value);
|
||||
let endVal = parseInt(this.endInput.value);
|
||||
|
||||
// Ensure start doesn't exceed end
|
||||
if (startVal > endVal) {
|
||||
if (this.startInput === document.activeElement) {
|
||||
this.startInput.value = String(endVal);
|
||||
startVal = endVal;
|
||||
} else {
|
||||
this.endInput.value = String(startVal);
|
||||
endVal = startVal;
|
||||
}
|
||||
}
|
||||
|
||||
// Update fill bar position
|
||||
const startPercent = (startVal / TimeRangeSlider.TIME_RANGE_MAX) * 100;
|
||||
const endPercent = (endVal / TimeRangeSlider.TIME_RANGE_MAX) * 100;
|
||||
this.fill.style.left = startPercent + '%';
|
||||
this.fill.style.width = (endPercent - startPercent) + '%';
|
||||
|
||||
// Update label if exists (inside parent swp-time-range)
|
||||
// Supports two patterns:
|
||||
// 1. Nested: swp-time-range-label > swp-time-range-times + swp-time-range-duration
|
||||
// 2. Simple: swp-time-range-label (direct text content)
|
||||
const parent = this.slider.closest('swp-time-range');
|
||||
const labelEl = parent?.querySelector('swp-time-range-label');
|
||||
const timesEl = parent?.querySelector('swp-time-range-times');
|
||||
const durationEl = parent?.querySelector('swp-time-range-duration');
|
||||
|
||||
const timeText = `${this.valueToTime(startVal)} – ${this.valueToTime(endVal)}`;
|
||||
|
||||
if (timesEl) {
|
||||
// Nested pattern (employee drawer)
|
||||
timesEl.textContent = timeText;
|
||||
} else if (labelEl) {
|
||||
// Simple pattern (services availability)
|
||||
labelEl.textContent = timeText;
|
||||
}
|
||||
|
||||
if (durationEl) {
|
||||
const durationMinutes = (endVal - startVal) * 15;
|
||||
const durationHours = durationMinutes / 60;
|
||||
durationEl.textContent = durationHours % 1 === 0
|
||||
? `${durationHours} timer`
|
||||
: `${durationHours.toFixed(1).replace('.', ',')} timer`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Dispatch change event for consumers
|
||||
*/
|
||||
private dispatchChange(): void {
|
||||
if (!this.startInput || !this.endInput) return;
|
||||
|
||||
const startVal = parseInt(this.startInput.value);
|
||||
const endVal = parseInt(this.endInput.value);
|
||||
|
||||
this.slider.dispatchEvent(new CustomEvent('timerange:change', {
|
||||
bubbles: true,
|
||||
detail: {
|
||||
start: startVal,
|
||||
end: endVal,
|
||||
startTime: this.valueToTime(startVal),
|
||||
endTime: this.valueToTime(endVal)
|
||||
}
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup input change listeners
|
||||
*/
|
||||
private setupEventListeners(): void {
|
||||
this.startInput?.addEventListener('input', () => {
|
||||
this.updateDisplay();
|
||||
this.dispatchChange();
|
||||
});
|
||||
|
||||
this.endInput?.addEventListener('input', () => {
|
||||
this.updateDisplay();
|
||||
this.dispatchChange();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup drag behavior on fill bar to move entire range
|
||||
*/
|
||||
private setupDragBehavior(): void {
|
||||
if (!this.fill || !this.track || !this.startInput || !this.endInput) return;
|
||||
|
||||
let isDragging = false;
|
||||
let dragStartX = 0;
|
||||
let dragStartValues = { start: 0, end: 0 };
|
||||
|
||||
this.fill.addEventListener('mousedown', (e: MouseEvent) => {
|
||||
isDragging = true;
|
||||
dragStartX = e.clientX;
|
||||
dragStartValues.start = parseInt(this.startInput!.value);
|
||||
dragStartValues.end = parseInt(this.endInput!.value);
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
document.addEventListener('mousemove', (e: MouseEvent) => {
|
||||
if (!isDragging) return;
|
||||
|
||||
const sliderWidth = this.track!.offsetWidth;
|
||||
const deltaX = e.clientX - dragStartX;
|
||||
const deltaValue = Math.round((deltaX / sliderWidth) * TimeRangeSlider.TIME_RANGE_MAX);
|
||||
|
||||
const duration = dragStartValues.end - dragStartValues.start;
|
||||
let newStart = dragStartValues.start + deltaValue;
|
||||
let newEnd = dragStartValues.end + deltaValue;
|
||||
|
||||
if (newStart < 0) {
|
||||
newStart = 0;
|
||||
newEnd = duration;
|
||||
}
|
||||
if (newEnd > TimeRangeSlider.TIME_RANGE_MAX) {
|
||||
newEnd = TimeRangeSlider.TIME_RANGE_MAX;
|
||||
newStart = TimeRangeSlider.TIME_RANGE_MAX - duration;
|
||||
}
|
||||
|
||||
this.startInput!.value = String(newStart);
|
||||
this.endInput!.value = String(newEnd);
|
||||
this.updateDisplay();
|
||||
this.dispatchChange();
|
||||
});
|
||||
|
||||
document.addEventListener('mouseup', () => {
|
||||
isDragging = false;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert slider value to time string (e.g., 12 → "09:00")
|
||||
*/
|
||||
private valueToTime(value: number): string {
|
||||
const totalMinutes = value * 15 + 6 * 60; // Start at 06:00
|
||||
const hours = Math.floor(totalMinutes / 60);
|
||||
const minutes = totalMinutes % 60;
|
||||
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -418,9 +418,6 @@ class ScheduleController {
|
|||
private editBtn: HTMLElement | null = null;
|
||||
private scheduleTable: HTMLElement | null = null;
|
||||
|
||||
// Time range constants
|
||||
private readonly TIME_RANGE_MAX = 60; // 15 hours (06:00-21:00) * 4 intervals
|
||||
|
||||
constructor() {
|
||||
this.drawer = document.getElementById('schedule-drawer');
|
||||
this.editBtn = document.getElementById('scheduleEditBtn');
|
||||
|
|
@ -435,7 +432,7 @@ class ScheduleController {
|
|||
this.setupCellSelection();
|
||||
this.setupStatusOptions();
|
||||
this.setupTypeToggle();
|
||||
this.setupTimeRangeSlider();
|
||||
this.setupTimeRangeEvents();
|
||||
this.setupDrawerSave();
|
||||
}
|
||||
|
||||
|
|
@ -882,6 +879,7 @@ class ScheduleController {
|
|||
|
||||
/**
|
||||
* Set time range slider values
|
||||
* Triggers 'input' event to let ControlsController update the display
|
||||
*/
|
||||
private setTimeRange(startTime: string, endTime: string): void {
|
||||
const timeRange = document.getElementById('scheduleTimeRange');
|
||||
|
|
@ -890,125 +888,25 @@ class ScheduleController {
|
|||
const startInput = timeRange.querySelector<HTMLInputElement>('.range-start');
|
||||
const endInput = timeRange.querySelector<HTMLInputElement>('.range-end');
|
||||
|
||||
if (startInput) startInput.value = String(this.timeToValue(startTime));
|
||||
if (endInput) endInput.value = String(this.timeToValue(endTime));
|
||||
|
||||
this.updateTimeRangeDisplay(timeRange);
|
||||
if (startInput) {
|
||||
startInput.value = String(this.timeToValue(startTime));
|
||||
startInput.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
}
|
||||
if (endInput) {
|
||||
endInput.value = String(this.timeToValue(endTime));
|
||||
endInput.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update time range display
|
||||
* Setup time range event listener
|
||||
* ControlsController handles the slider UI; we just listen for changes
|
||||
*/
|
||||
private updateTimeRangeDisplay(container: HTMLElement): void {
|
||||
const startInput = container.querySelector<HTMLInputElement>('.range-start');
|
||||
const endInput = container.querySelector<HTMLInputElement>('.range-end');
|
||||
const fill = container.querySelector<HTMLElement>('swp-time-range-fill');
|
||||
const timesEl = container.querySelector('swp-time-range-times');
|
||||
const durationEl = container.querySelector('swp-time-range-duration');
|
||||
|
||||
if (!startInput || !endInput) return;
|
||||
|
||||
let startVal = parseInt(startInput.value);
|
||||
let endVal = parseInt(endInput.value);
|
||||
|
||||
// Ensure start doesn't exceed end
|
||||
if (startVal > endVal) {
|
||||
if (startInput === document.activeElement) {
|
||||
startInput.value = String(endVal);
|
||||
startVal = endVal;
|
||||
} else {
|
||||
endInput.value = String(startVal);
|
||||
endVal = startVal;
|
||||
}
|
||||
}
|
||||
|
||||
// Update fill bar
|
||||
if (fill) {
|
||||
const startPercent = (startVal / this.TIME_RANGE_MAX) * 100;
|
||||
const endPercent = (endVal / this.TIME_RANGE_MAX) * 100;
|
||||
fill.style.left = startPercent + '%';
|
||||
fill.style.width = (endPercent - startPercent) + '%';
|
||||
}
|
||||
|
||||
// Calculate duration
|
||||
const durationMinutes = (endVal - startVal) * 15;
|
||||
const durationHours = durationMinutes / 60;
|
||||
const durationText = durationHours % 1 === 0
|
||||
? `${durationHours} timer`
|
||||
: `${durationHours.toFixed(1).replace('.', ',')} timer`;
|
||||
|
||||
if (timesEl) timesEl.textContent = `${this.valueToTime(startVal)} – ${this.valueToTime(endVal)}`;
|
||||
if (durationEl) durationEl.textContent = durationText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup time range slider
|
||||
*/
|
||||
private setupTimeRangeSlider(): void {
|
||||
private setupTimeRangeEvents(): void {
|
||||
const timeRange = document.getElementById('scheduleTimeRange');
|
||||
if (!timeRange) return;
|
||||
|
||||
const startInput = timeRange.querySelector<HTMLInputElement>('.range-start');
|
||||
const endInput = timeRange.querySelector<HTMLInputElement>('.range-end');
|
||||
const fill = timeRange.querySelector<HTMLElement>('swp-time-range-fill');
|
||||
const track = timeRange.querySelector<HTMLElement>('swp-time-range-track');
|
||||
|
||||
this.updateTimeRangeDisplay(timeRange);
|
||||
|
||||
startInput?.addEventListener('input', () => {
|
||||
this.updateTimeRangeDisplay(timeRange);
|
||||
timeRange?.addEventListener('timerange:change', () => {
|
||||
this.updateSelectedCellsTime();
|
||||
});
|
||||
|
||||
endInput?.addEventListener('input', () => {
|
||||
this.updateTimeRangeDisplay(timeRange);
|
||||
this.updateSelectedCellsTime();
|
||||
});
|
||||
|
||||
// Drag fill bar to move entire range
|
||||
if (fill && track && startInput && endInput) {
|
||||
let isDragging = false;
|
||||
let dragStartX = 0;
|
||||
let dragStartValues = { start: 0, end: 0 };
|
||||
|
||||
fill.addEventListener('mousedown', (e: MouseEvent) => {
|
||||
isDragging = true;
|
||||
dragStartX = e.clientX;
|
||||
dragStartValues.start = parseInt(startInput.value);
|
||||
dragStartValues.end = parseInt(endInput.value);
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
document.addEventListener('mousemove', (e: MouseEvent) => {
|
||||
if (!isDragging) return;
|
||||
|
||||
const sliderWidth = track.offsetWidth;
|
||||
const deltaX = e.clientX - dragStartX;
|
||||
const deltaValue = Math.round((deltaX / sliderWidth) * this.TIME_RANGE_MAX);
|
||||
|
||||
const duration = dragStartValues.end - dragStartValues.start;
|
||||
let newStart = dragStartValues.start + deltaValue;
|
||||
let newEnd = dragStartValues.end + deltaValue;
|
||||
|
||||
if (newStart < 0) {
|
||||
newStart = 0;
|
||||
newEnd = duration;
|
||||
}
|
||||
if (newEnd > this.TIME_RANGE_MAX) {
|
||||
newEnd = this.TIME_RANGE_MAX;
|
||||
newStart = this.TIME_RANGE_MAX - duration;
|
||||
}
|
||||
|
||||
startInput.value = String(newStart);
|
||||
endInput.value = String(newEnd);
|
||||
this.updateTimeRangeDisplay(timeRange);
|
||||
this.updateSelectedCellsTime();
|
||||
});
|
||||
|
||||
document.addEventListener('mouseup', () => {
|
||||
isDragging = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue