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,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