@lavalogic/scoria 0.40.16 → 0.40.18

package/dist/Components/AppointmentCalendar/AppointmentCalendar.svelte

@@ -6,7 +6,7 @@ import Button from "../Button.svelte";
 import Icon from "../Icon.svelte";
 import LoadingOverlay from "../LoadingOverlay.svelte";
 import { CalendarViewMode } from "./AppointmentCalendarProps.js";
-let { doors, appointments, selectedDate, viewMode, ondatechange, onviewmodechange, ondragcreate, onappointmentclick, onappointmentmove, startHour = 0, endHour = 24, slotIntervalMinutes = 15, isLoading = false, headerExtra } = $props();
+let { doors, appointments, selectedDate, viewMode, ondatechange, onviewmodechange, ondragcreate, onappointmentclick, onappointmentmove, startHour = 0, endHour = 24, slotIntervalMinutes = 15, availability, centreHour = 12, isLoading = false, headerExtra } = $props();
 /**
 * `selectedDate` is always read by the component, never written. The
 * runtime type may be either a plain `Date` or a `SvelteDate`; both
@@ -92,6 +92,83 @@ const timeSlots = $derived.by(() => {
 	}
 	return slots;
 });
+// ---- Availability shading ----
+/**
+* Whether the given slot is outside the door's available windows.
+*
+* A door absent from {@link availability} (or no `availability` map at
+* all) is treated as fully available, so nothing is shaded until the
+* caller supplies windows for that door.
+*/
+function slotUnavailableInWindows(windows, slot) {
+	const minutes = slot.hour * 60 + slot.minute;
+	for (const window of windows) {
+		if (minutes >= window.startMinutes && minutes < window.endMinutes) {
+			return false;
+		}
+	}
+	return true;
+}
+function isSlotUnavailable(doorId, slotIndex) {
+	if (!availability) {
+		return false;
+	}
+	const windows = availability.get(doorId);
+	if (!windows) {
+		return false;
+	}
+	const slot = timeSlots[slotIndex];
+	if (!slot) {
+		return false;
+	}
+	return slotUnavailableInWindows(windows, slot);
+}
+/**
+* Contiguous unavailable runs per door, expressed as top/height
+* percentages of the day column. Rendered as a single overlay block per
+* run so the shading pattern is continuous across the whole region
+* rather than restarting (and visibly seaming) at every slot cell.
+*/
+const unavailableRunsByDoor = $derived.by(() => {
+	// Local index built inside a $derived; outer reactivity covers reads.
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity
+	const byDoor = new Map();
+	const slotCount = timeSlots.length;
+	if (!availability || slotCount === 0) {
+		return byDoor;
+	}
+	for (const door of doors) {
+		const windows = availability.get(door.id);
+		if (!windows) {
+			continue;
+		}
+		const runs = [];
+		let runStart = null;
+		// One extra iteration (i === slotCount) flushes a run that reaches
+		// the end of the day.
+		for (let i = 0; i <= slotCount; i++) {
+			const unavailable = i < slotCount && slotUnavailableInWindows(windows, timeSlots[i]);
+			if (unavailable) {
+				if (runStart === null) {
+					runStart = i;
+				}
+			} else if (runStart !== null) {
+				runs.push({
+					topPercent: runStart / slotCount * 100,
+					heightPercent: (i - runStart) / slotCount * 100
+				});
+				runStart = null;
+			}
+		}
+		if (runs.length > 0) {
+			byDoor.set(door.id, runs);
+		}
+	}
+	return byDoor;
+});
+function unavailableRunsAt(doorId) {
+	return unavailableRunsByDoor.get(doorId) ?? [];
+}
 /**
 * Build a `YYYY-MM-DD` key for date bucketing. Avoids `toISOString`
 * timezone conversions that would smear appointments across days.
@@ -202,6 +279,10 @@ function onSlotMouseDown(doorId, slotIndex, e) {
 	if (!ondragcreate || appointmentDragStarted) {
 		return;
 	}
+	// Unavailable slots cannot seed a new appointment.
+	if (isSlotUnavailable(doorId, slotIndex)) {
+		return;
+	}
 	isDragging = true;
 	dragDoorId = doorId;
 	dragStartSlotIndex = slotIndex;
@@ -221,6 +302,10 @@ function onSlotMouseEnter(doorId, slotIndex, e) {
 	}
 	// Appointment move drag
 	if (appointmentDragStarted) {
+		// Freeze the drop target rather than land it on an unavailable slot.
+		if (isSlotUnavailable(doorId, slotIndex)) {
+			return;
+		}
 		isDraggingAppointment = true;
 		moveTargetDoorId = doorId;
 		moveTargetSlotIndex = slotIndex;
@@ -230,6 +315,10 @@ function onSlotMouseEnter(doorId, slotIndex, e) {
 	if (!isDragging || doorId !== dragDoorId) {
 		return;
 	}
+	// Keep the selection within the door's available windows.
+	if (isSlotUnavailable(doorId, slotIndex)) {
+		return;
+	}
 	dragEndSlotIndex = slotIndex;
 }
 function onSlotMouseUp() {
@@ -417,6 +506,38 @@ const viewModes = [
 		label: "Month"
 	}
 ];
+// ---- Centre-on-hour scrolling ----
+/** The whole hour whose row carries the `data-centre-row` marker. */
+const centreRowHour = $derived(centreHour == null ? null : Math.floor(centreHour));
+/** The scrollable calendar body; bound so we can centre it on the marker. */
+let calendarBody = $state();
+/**
+* Whether the grid has been centred for the current spell in a
+* day/week view. Plain (non-reactive) so re-centring only happens when
+* the grid (re)appears, never while the user scrolls or data loads.
+*/
+let hasCentred = false;
+$effect(() => {
+	// Re-arm whenever we leave the time-grid views so re-entry recentres.
+	if (viewMode !== CalendarViewMode.Day && viewMode !== CalendarViewMode.Week) {
+		hasCentred = false;
+		return;
+	}
+	if (hasCentred || centreRowHour == null || !calendarBody) {
+		return;
+	}
+	const marker = calendarBody.querySelector("[data-centre-row]");
+	if (!marker) {
+		return;
+	}
+	// Centre the marker row in the viewport via rect maths so nested
+	// sticky/relative offset parents don't skew the target.
+	const bodyRect = calendarBody.getBoundingClientRect();
+	const markerRect = marker.getBoundingClientRect();
+	const delta = markerRect.top + markerRect.height / 2 - (bodyRect.top + bodyRect.height / 2);
+	calendarBody.scrollTop += delta;
+	hasCentred = true;
+});
 </script>
 
 <!-- A drag can end anywhere on the page (the pointer is often released outside
@@ -511,7 +632,10 @@ const viewModes = [
 	{/if}
 
 	<!-- Calendar body -->
-	<div class="calendar-body">
+	<div
+		class="calendar-body"
+		bind:this={calendarBody}
+	>
 		{#if isLoading}
 			<LoadingOverlay />
 		{/if}
@@ -590,6 +714,9 @@ const viewModes = [
 					class="time-label"
 					class:hour-start={slot.minute === 0}
 					class:row-hover={hoveredSlotIndex === slotIdx}
+					data-centre-row={slot.hour === centreRowHour && slot.minute === 0
+						? ''
+						: undefined}
 				>
 					{#if slot.minute === 0}
 						<span>{slot.label}</span>
@@ -608,6 +735,7 @@ const viewModes = [
 						class:drag-selected={isSlotInDragRange(door.id, slotIdx)}
 						class:move-target={isSlotInMoveTarget(door.id, slotIdx)}
 						class:row-hover={hoveredSlotIndex === slotIdx}
+						class:unavailable={isSlotUnavailable(door.id, slotIdx)}
 						onmousedown={(e) => {
 							onSlotMouseDown(door.id, slotIdx, e);
 						}}
@@ -617,6 +745,13 @@ const viewModes = [
 						}}
 					></div>
 				{/each}
+				<!-- Unavailable shading: one continuous block per contiguous run -->
+				{#each unavailableRunsAt(door.id) as run (run.topPercent)}
+					<div
+						class="unavailable-overlay"
+						style="top: {run.topPercent}%; height: {run.heightPercent}%;"
+					></div>
+				{/each}
 				<!-- Appointment blocks positioned absolutely (rendered after, sit above slots) -->
 				{#each appointmentsAt(door.id, day) as apt (apt.id)}
 					<!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -858,6 +993,19 @@ const viewModes = [
   border-bottom-color: #b4e2f0;
   z-index: 2;
 }
+.slot-cell.unavailable {
+  cursor: not-allowed;
+}
+
+.unavailable-overlay {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 3;
+  pointer-events: none;
+  background-color: rgba(128, 150, 165, 0.06);
+  background-image: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(128, 150, 165, 0.14) 6px, rgba(128, 150, 165, 0.14) 12px);
+}
 
 .appointment-block {
   position: absolute;

package/dist/Components/AppointmentCalendar/AppointmentCalendarProps.d.ts

@@ -40,6 +40,16 @@ export interface DragSelection {
     readonly dateFrom: Date;
     readonly dateTo: Date;
 }
+/**
+ * A span of available time on the currently displayed day, expressed in
+ * minutes from midnight (`startMinutes` inclusive, `endMinutes`
+ * exclusive). Consumed by {@link AppointmentCalendarProps.availability}
+ * to shade out the times a door is not bookable.
+ */
+export interface DoorAvailabilityWindow {
+    readonly startMinutes: number;
+    readonly endMinutes: number;
+}
 /**
  * Arguments passed to {@link AppointmentCalendarProps.onappointmentmove}.
  *
@@ -85,6 +95,25 @@ export interface AppointmentCalendarProps {
     endHour?: number;
     /** The slot interval in minutes (default: 15). */
     slotIntervalMinutes?: number;
+    /**
+     * Per-door availability for the currently displayed day, keyed by
+     * door (segment) id.
+     *
+     * When a door id is present, any slot whose start falls outside all
+     * of its {@link DoorAvailabilityWindow}s is shaded as unavailable and
+     * cannot be used to create or receive an appointment. A door absent
+     * from the map is treated as fully available (no shading); map an id
+     * to an empty array to mark a door wholly unavailable for the day.
+     *
+     * Omit the prop entirely to disable availability shading.
+     */
+    availability?: ReadonlyMap<number, ReadonlyArray<DoorAvailabilityWindow>>;
+    /**
+     * Hour of the day (0–23) to vertically centre when the day/week grid
+     * first appears (default: 12, i.e. midday). Set to `null` to keep the
+     * grid scrolled to the top.
+     */
+    centreHour?: number | null;
     /** Whether the calendar is loading data. */
     isLoading?: boolean;
     /** Optional snippet for extra header content (e.g. buttons). */

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { default as AccordionGroup } from './Components/AccordionGroup.svelte';
 export { default as AppointmentCalendar } from './Components/AppointmentCalendar/AppointmentCalendar.svelte';
-export type { AppointmentCalendarProps, AppointmentMoveArgs, CalendarAppointment, CalendarDoor, CalendarViewMode, DragSelection, } from './Components/AppointmentCalendar/AppointmentCalendarProps.js';
+export type { AppointmentCalendarProps, AppointmentMoveArgs, CalendarAppointment, CalendarDoor, CalendarViewMode, DoorAvailabilityWindow, DragSelection, } from './Components/AppointmentCalendar/AppointmentCalendarProps.js';
 export type { AccordionGroupButtonProps, AccordionGroupOption, } from './Components/AccordionGroupButtonProps.js';
 export type { AccordionGroupProps } from './Components/AccordionGroupProps.js';
 export { default as Action } from './Components/Action.svelte';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.40.16",
+  "version": "0.40.18",
   "publishConfig": {
     "access": "restricted"
   },