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

Enhances service details with employees and addon sections

Browse source 
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 2026-01-17 15:36:15 +01:00
parent 5e3811347c
commit 7643a6ab82
20 changed files with 830 additions and 336 deletions
Download patch file Download diff file Expand all files Collapse all files

130
PlanTempus.Application/wwwroot/ts/modules/employees.ts
View file

@ -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;
});
}
}
/**