DMC/studentportalen
1
1
Fork 0
Code Issues 50 Pull Requests Actions Projects 1 Wiki Activity

Start time grid #62

Merged
stne3960 merged 30 commits from start_time_grid into main 2026-01-16 14:17:09 +01:00
Conversation 7 Commits 30 Files Changed 32 +130 -72
4 changed files with 130 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 89f3ba2dec - Show all commits

2
frontend/src/components/StartTimeGrid/BookingForm.tsx
View File

@ -101,7 +101,7 @@ export default function BookingForm<T>({
)}
<Dropdown
options={endTimeOptions}
getOptionValue={(o) => o.value}
getOptionValue={(o) => o.value.toString().slice(0, 5)}
getOptionLabel={(o) => o.label}
value={endTime}
onChange={(v) => {

42
frontend/src/components/StartTimeGrid/StartTimeGrid.tsx
View File

@ -1,17 +1,18 @@
import { ReactNode } from "react";
import { Temporal } from "temporal-polyfill";
import Choicebox from "../Choicebox/Choicebox";
import InlineModal from "../InlineModal/InlineModal";
export interface TimeSlot {
time: string;
time: Temporal.PlainTime;
label: string;
unavailable?: boolean;
}
export interface StartTimeGridProps {
timeSlots: TimeSlot[];
selectedTime: string | null;
onChange: (time: string) => void;
selectedTime: Temporal.PlainTime | null;
onChange: (time: Temporal.PlainTime) => void;
heading?: string;
status?: string;
children?: ReactNode;
@ -26,7 +27,9 @@ export default function StartTimeGrid({
children,
}: StartTimeGridProps) {
// Track which column was selected for arrow positioning
const selectedIndex = timeSlots.findIndex((s) => s.time === selectedTime);
const selectedIndex = timeSlots.findIndex(
(s) => selectedTime && s.time.equals(selectedTime),
);
const selectedColumn = selectedIndex >= 0 ? selectedIndex % 2 : 0;
// Split into rows of 2
@ -48,22 +51,27 @@ export default function StartTimeGrid({
{rows.map((row, rowIndex) => (
<div key={rowIndex}>
<div className="grid grid-cols-2 gap-(--spacing-md)">
{row.map((slot) => (
<Choicebox
key={slot.time}
primaryText={slot.time}
secondaryText={slot.label}
unavailable={slot.unavailable}
name="start-time"
value={slot.time}
checked={selectedTime === slot.time}
onChange={() => onChange(slot.time)}
/>
))}
{row.map((slot) => {
const timeString = slot.time.toString().slice(0, 5);
return (
<Choicebox
key={timeString}
primaryText={timeString}
secondaryText={slot.label}
unavailable={slot.unavailable}
name="start-time"
value={timeString}
checked={
selectedTime !== null && slot.time.equals(selectedTime)
}
onChange={() => onChange(slot.time)}
/>
);
})}
</div>
{selectedTime &&
row.some((slot) => slot.time === selectedTime) &&
row.some((slot) => slot.time.equals(selectedTime)) &&
children && (
<InlineModal
arrowPosition={selectedColumn === 0 ? "left" : "right"}

156
frontend/src/components/StartTimeGrid/useGroupRoomBooking.ts
View File

@ -30,31 +30,64 @@ export interface BookingContext {
maxDaysInFuture: number;
}
/** Internal booking with Temporal types */
interface ParsedBooking {
start: Temporal.PlainDateTime;
end: Temporal.PlainDateTime;
}
/** Internal room with Temporal types */
interface ParsedRoom {
id: string;
name: string;
capacity: number;
bookings: ParsedBooking[];
}
/** Internal context with Temporal types */
interface ParsedContext {
rooms: ParsedRoom[];
maxBookableHours: number;
earliestBookingTime: Temporal.PlainTime;
latestBookingTime: Temporal.PlainTime;
minimumParticipants: number;
maxDaysInFuture: number;
}
/** Parse API context to Temporal types */
function parseContext(context: BookingContext): ParsedContext {
return {
rooms: context.rooms.map((room) => ({
...room,
bookings: room.bookings.map((b) => ({
start: Temporal.PlainDateTime.from(b.start),
end: Temporal.PlainDateTime.from(b.end),
})),
})),
maxBookableHours:
Temporal.Duration.from(context.maxBookableLength).hours || 4,
earliestBookingTime: Temporal.PlainTime.from(context.earliestBookingTime),
latestBookingTime: Temporal.PlainTime.from(context.latestBookingTime),
minimumParticipants: context.minimumParticipants,
maxDaysInFuture: context.maxDaysInFuture,
};
}
/** A selectable time slot in the booking grid */
export interface TimeSlot {
/** Time of day, e.g. "10:00" */
time: string;
/** Time of day */
time: Temporal.PlainTime;
/** Display label, e.g. "Upp till 2 h" */
label: string;
/** True if no rooms are available at this time */
unavailable?: boolean;
}
/** Parse ISO 8601 duration (e.g. "PT4H") to hours */
function parseDurationToHours(duration: string): number {
return Temporal.Duration.from(duration).hours || 4;
}
function timeToMinutes(time: string): number {
const t = Temporal.PlainTime.from(time);
return t.hour * 60 + t.minute;
}
function minutesToTime(minutes: number): string {
function minutesToTime(minutes: number): Temporal.PlainTime {
return Temporal.PlainTime.from({
hour: Math.floor(minutes / 60),
minute: minutes % 60,
}).toString().slice(0, 5);
});
}
/** Check if a date string is today */
@ -74,13 +107,15 @@ function getCurrentTimeMinutes(): number {
* Past time slots are marked as unavailable.
*/
function calculateTimeSlots(
context: BookingContext,
context: ParsedContext,
date: string,
roomId?: string,
): TimeSlot[] {
const maxHours = parseDurationToHours(context.maxBookableLength);
const earliestMinutes = timeToMinutes(context.earliestBookingTime);
const latestMinutes = timeToMinutes(context.latestBookingTime);
const maxHours = context.maxBookableHours;
const earliestMinutes =
context.earliestBookingTime.hour * 60 + context.earliestBookingTime.minute;
const latestMinutes =
context.latestBookingTime.hour * 60 + context.latestBookingTime.minute;
const roomsToCheck = roomId
? context.rooms.filter((r) => r.id === roomId)
: context.rooms;
@ -105,10 +140,12 @@ function calculateTimeSlots(
let availableMinutes = Math.min(latestMinutes - mins, maxHours * 60);
for (const booking of room.bookings) {
const bookingDateTime = Temporal.PlainDateTime.from(booking.start);
if (bookingDateTime.toPlainDate().toString() !== date) continue;
const bookingStart = timeToMinutes(bookingDateTime.toPlainTime().toString());
const bookingEnd = timeToMinutes(Temporal.PlainDateTime.from(booking.end).toPlainTime().toString());
if (booking.start.toPlainDate().toString() !== date) continue;
const bookingStartTime = booking.start.toPlainTime();
const bookingEndTime = booking.end.toPlainTime();
const bookingStart =
bookingStartTime.hour * 60 + bookingStartTime.minute;
const bookingEnd = bookingEndTime.hour * 60 + bookingEndTime.minute;
if (mins >= bookingStart && mins < bookingEnd) {
availableMinutes = 0;
@ -139,15 +176,16 @@ function calculateTimeSlots(
* Used when no specific room is filtered.
*/
function findBestRoom(
context: BookingContext,
context: ParsedContext,
date: string,
startTime: string,
): Room | null {
const maxHours = parseDurationToHours(context.maxBookableLength);
const latestMinutes = timeToMinutes(context.latestBookingTime);
const startMinutes = timeToMinutes(startTime);
startTime: Temporal.PlainTime,
): ParsedRoom | null {
const maxHours = context.maxBookableHours;
const latestMinutes =
context.latestBookingTime.hour * 60 + context.latestBookingTime.minute;
const startMinutes = startTime.hour * 60 + startTime.minute;
let bestRoom: Room | null = null;
let bestRoom: ParsedRoom | null = null;
let bestDuration = 0;
for (const room of context.rooms) {
@ -158,10 +196,11 @@ function findBestRoom(
let roomAvailable = true;
for (const booking of room.bookings) {
const bookingDateTime = Temporal.PlainDateTime.from(booking.start);
if (bookingDateTime.toPlainDate().toString() !== date) continue;
const bookingStart = timeToMinutes(bookingDateTime.toPlainTime().toString());
const bookingEnd = timeToMinutes(Temporal.PlainDateTime.from(booking.end).toPlainTime().toString());
if (booking.start.toPlainDate().toString() !== date) continue;
const bookingStartTime = booking.start.toPlainTime();
const bookingEndTime = booking.end.toPlainTime();
const bookingStart = bookingStartTime.hour * 60 + bookingStartTime.minute;
const bookingEnd = bookingEndTime.hour * 60 + bookingEndTime.minute;
if (startMinutes >= bookingStart && startMinutes < bookingEnd) {
roomAvailable = false;
@ -186,8 +225,8 @@ function findBestRoom(
/** An end time option with value and display label */
export interface EndTimeOption {
/** Time value, e.g. "12:30" */
value: string;
/** Time value */
value: Temporal.PlainTime;
/** Display label, e.g. "12:30 · 1,5 h" */
label: string;
}
@ -210,24 +249,26 @@ function formatDuration(minutes: number): string {
* Returns 30-minute increments up to the next booking or max duration.
*/
function calculateEndTimeOptions(
context: BookingContext,
context: ParsedContext,
date: string,
startTime: string,
startTime: Temporal.PlainTime,
roomId: string,
): EndTimeOption[] {
const maxHours = parseDurationToHours(context.maxBookableLength);
const latestMinutes = timeToMinutes(context.latestBookingTime);
const startMinutes = timeToMinutes(startTime);
const maxHours = context.maxBookableHours;
const latestMinutes =
context.latestBookingTime.hour * 60 + context.latestBookingTime.minute;
const startMinutes = startTime.hour * 60 + startTime.minute;
const room = context.rooms.find((r) => r.id === roomId);
if (!room) return [];
let maxEndMinutes = Math.min(startMinutes + maxHours * 60, latestMinutes);
for (const booking of room.bookings) {
const bookingDateTime = Temporal.PlainDateTime.from(booking.start);
if (bookingDateTime.toPlainDate().toString() !== date) continue;
const bookingStart = timeToMinutes(bookingDateTime.toPlainTime().toString());
const bookingEnd = timeToMinutes(Temporal.PlainDateTime.from(booking.end).toPlainTime().toString());
if (booking.start.toPlainDate().toString() !== date) continue;
const bookingStartTime = booking.start.toPlainTime();
const bookingEndTime = booking.end.toPlainTime();
const bookingStart = bookingStartTime.hour * 60 + bookingStartTime.minute;
const bookingEnd = bookingEndTime.hour * 60 + bookingEndTime.minute;
// If start time is during a booking, no options available
if (startMinutes >= bookingStart && startMinutes < bookingEnd) {
@ -245,7 +286,7 @@ function calculateEndTimeOptions(
const duration = formatDuration(mins - startMinutes);
options.push({
value: time,
label: `${time} · ${duration}`,
label: `${time.toString().slice(0, 5)} · ${duration}`,
});
}
return options;
@ -274,7 +315,11 @@ function calculateEndTimeOptions(
*/
export function useGroupRoomBooking(context: BookingContext, date: string) {
const [roomFilter, setRoomFilter] = useState<string>("");
const [selectedTime, setSelectedTime] = useState<string | null>(null);
const [selectedTime, setSelectedTime] = useState<Temporal.PlainTime | null>(
null,
);
const parsedContext = useMemo(() => parseContext(context), [context]);
const roomOptions = useMemo(
() => [
@ -285,24 +330,29 @@ export function useGroupRoomBooking(context: BookingContext, date: string) {
);
const timeSlots = useMemo(
() => calculateTimeSlots(context, date, roomFilter || undefined),
[context, date, roomFilter],
() => calculateTimeSlots(parsedContext, date, roomFilter || undefined),
[parsedContext, date, roomFilter],
);
const bookedRoom = useMemo(() => {
if (roomFilter) {
return context.rooms.find((r) => r.id === roomFilter) || null;
return parsedContext.rooms.find((r) => r.id === roomFilter) || null;
}
if (selectedTime) {
return findBestRoom(context, date, selectedTime);
return findBestRoom(parsedContext, date, selectedTime);
}
return null;
}, [context, date, roomFilter, selectedTime]);
}, [parsedContext, date, roomFilter, selectedTime]);
const endTimeOptions = useMemo(() => {
if (!selectedTime || !bookedRoom) return [];
return calculateEndTimeOptions(context, date, selectedTime, bookedRoom.id);
}, [context, date, selectedTime, bookedRoom]);
return calculateEndTimeOptions(
parsedContext,
date,
selectedTime,
bookedRoom.id,
);
}, [parsedContext, date, selectedTime, bookedRoom]);
const clearSelection = () => setSelectedTime(null);

2
frontend/src/studentportalen/ComponentLibrary/StartTimeGridSection.tsx
View File

@ -68,7 +68,7 @@ export default function StartTimeGridSection() {
onChange={booking.setSelectedTime}
>
<BookingForm
key={booking.selectedTime}
key={booking.selectedTime?.toString()}
endTimeOptions={booking.endTimeOptions}
participantOptions={peopleOptions}
getOptionValue={getPersonValue}