Skip to content

Commit

Permalink
custom starting time & duration buttons, 1st draft for presentation
Browse files Browse the repository at this point in the history
  • Loading branch information
Ilkka Korhonen authored and Ilkka Korhonen committed Jul 2, 2024
1 parent a49cb74 commit 63dafe0
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 26 deletions.
9 changes: 6 additions & 3 deletions frontend/src/components/AvailableRoomList/AvailableRoomList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,8 @@ type BookingListProps = {
setStartingTime: (newStartingTime: string) => void;
setBookingDuration: (minutes: number) => void;
setDuration: React.Dispatch<React.SetStateAction<number>>;
setExpandTimePickerDrawer: (show: boolean) => void;
expandTimePickerDrawer: boolean;
};

const AvailableRoomList = (props: BookingListProps) => {
Expand All @@ -103,7 +105,9 @@ const AvailableRoomList = (props: BookingListProps) => {
startingTime,
setStartingTime,
setBookingDuration,
setDuration
setDuration,
setExpandTimePickerDrawer,
expandTimePickerDrawer
} = props;
const { createSuccessNotification, createErrorNotification } =
useCreateNotification();
Expand All @@ -117,7 +121,6 @@ const AvailableRoomList = (props: BookingListProps) => {
undefined
);

const [expandTimePickerDrawer, setExpandTimePickerDrawer] = useState(false);
const [expandDurationTimePickerDrawer, setExpandDurationTimePickerDrawer] = useState(false);

const handleAdditionalDurationChange = (additionalMinutes: number) => {
Expand Down Expand Up @@ -289,8 +292,8 @@ const AvailableRoomList = (props: BookingListProps) => {
onAddTimeUntilFull={handleUntilFull}
onAddTimeUntilNext={handleUntilNextDurationChange}
startingTime={startingTime}
bookingDuration={bookingDuration}
setBookingDuration={setBookingDuration}
setAdditionalDuration={setAdditionalDuration}
setDuration={setDuration}
setExpandDurationTimePickerDrawer={setExpandDurationTimePickerDrawer}
/>
Expand Down
12 changes: 8 additions & 4 deletions frontend/src/components/BookingDrawer/BookingDrawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,8 +175,8 @@ interface Props {
availableMinutes: number;
room?: Room;
startingTime: string;
bookingDuration: number;
setBookingDuration: (minutes: number) => void;
setAdditionalDuration: (minutes: number) => void;
setDuration: React.Dispatch<React.SetStateAction<number>>;
setExpandDurationTimePickerDrawer: (show: boolean) => void;
}
Expand All @@ -195,8 +195,8 @@ const BookingDrawer = (props: Props) => {
onAddTimeUntilNext,
availableMinutes,
startingTime,
bookingDuration,
setBookingDuration,
setAdditionalDuration,
setDuration,
setExpandDurationTimePickerDrawer
} = props;
Expand All @@ -207,7 +207,10 @@ const BookingDrawer = (props: Props) => {
});

const handleDurationChange = (newDuration: number) => {
setBookingDuration(newDuration);
if (newDuration !== -1) {
setBookingDuration(newDuration);
}
setAdditionalDuration(0);
};

// Placeholder values
Expand Down Expand Up @@ -341,11 +344,12 @@ const BookingDrawer = (props: Props) => {
</Row>

<DurationPicker
bookingDuration={bookingDuration}
bookingDuration={duration}
setBookingDuration={setBookingDuration}
onChange={handleDurationChange}
title="quick duration selection"
setExpandDurationTimePickerDrawer={setExpandDurationTimePickerDrawer}
additionalDuration={additionalDuration}
/>
<Row>
<SmallText>booking (rounded to next 5 min)</SmallText>
Expand Down
56 changes: 39 additions & 17 deletions frontend/src/components/BookingDrawer/DurationPicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,35 +19,57 @@ type DurationPickerProps = {
bookingDuration: number;
setBookingDuration: (dur: number) => void;
setExpandDurationTimePickerDrawer: (show: boolean) => void;
additionalDuration: number;
};

const DurationPicker = (props: DurationPickerProps) => {
const { onChange, title, bookingDuration, setBookingDuration, setExpandDurationTimePickerDrawer } = props;
const { onChange, title, bookingDuration, setBookingDuration, setExpandDurationTimePickerDrawer, additionalDuration } = props;

const getQuickDuration = (bookingDuration: number): string => {
if(bookingDuration === 15 ||
bookingDuration === 30 ||
bookingDuration === 60 ||
bookingDuration === 120) {
return bookingDuration.toString();
}
return 'Custom';
}

//const [quickDuration, setQuickDuration] = React.useState(getQuickDuration(bookingDuration + additionalDuration))
let quickDuration = getQuickDuration(bookingDuration + additionalDuration);
const setQuickDuration = (dur:string) => {
quickDuration = dur;
}

const handleBookingDurationChange = (newDuration: string) => {
if (newDuration !== null) {
if (newDuration !== 'Custom') {
setQuickDuration(newDuration);
}
}
}

const handleChange = (
event: React.MouseEvent<HTMLElement>,
newDuration: number
newDuration: string
) => {
if (newDuration !== null) {
if (newDuration !== 15 &&
newDuration !== 30 &&
newDuration !== 60 &&
newDuration !== 120
) {
setExpandDurationTimePickerDrawer(true)
if (newDuration === 'Custom') {
setExpandDurationTimePickerDrawer(true);
onChange(-1);
} else {
setBookingDuration(newDuration);
onChange(newDuration);
setQuickDuration(newDuration);
onChange(parseInt(newDuration));
}
}
};
}

return (
<div>
<DurationButtonGroup
data-testid="DurationPicker"
color="primary"
value={bookingDuration}
value={quickDuration}
exclusive
onChange={handleChange}
aria-label="duration picker"
Expand All @@ -56,35 +78,35 @@ const DurationPicker = (props: DurationPickerProps) => {
>
<DurationButton
data-testid="DurationPicker15"
value={15}
value={'15'}
aria-label="15 minutes"
>
15 min
</DurationButton>
<DurationButton
data-testid="DurationPicker30"
value={30}
value={'30'}
aria-label="30 minutes"
>
30 min
</DurationButton>
<DurationButton
data-testid="DurationPicker60"
value={60}
value={'60'}
aria-label="1 hour"
>
1 h
</DurationButton>
<DurationButton
data-testid="DurationPicker120"
value={120}
value={'120'}
aria-label="2 hours"
>
2 h
</DurationButton>
<DurationButton
data-testid="DurationPickerCustom"
value={-1}
value={'Custom'}
aria-label="Custom duration"
>
Custom
Expand Down
10 changes: 9 additions & 1 deletion frontend/src/components/BookingView/BookingView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -314,12 +314,18 @@ function BookingView(props: BookingViewProps) {
);
}, [roomSize, resources, customFilter, onlyFavourites]);

const [expandTimePickerDrawer, setExpandTimePickerDrawer] = useState(false);

const handleDurationChange = (newDuration: number) => {
setBookingDuration(newDuration);
};

const handleStartingTimeChange = (newStartingTime: string) => {
setStartingTime(newStartingTime);
if (newStartingTime !== 'Custom') {
setStartingTime(newStartingTime);
} else {
setExpandTimePickerDrawer(true);
}
};

const updateBookings = useCallback(() => {
Expand Down Expand Up @@ -504,6 +510,8 @@ function BookingView(props: BookingViewProps) {
setPreferences={setPreferences}
setBookingDuration={setBookingDuration}
setDuration={setDuration}
setExpandTimePickerDrawer={setExpandTimePickerDrawer}
expandTimePickerDrawer={expandTimePickerDrawer}
/>
)}

Expand Down
12 changes: 11 additions & 1 deletion frontend/src/components/BookingView/StartingTimePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,9 @@ const StartingTimePicker = (props: StartingTimePickerProps) => {
newStartingTime: string
) => {
if (newStartingTime !== null) {
setStartingTime(newStartingTime);
if (newStartingTime !== 'Custom') {
setStartingTime(newStartingTime);
}
onChange(newStartingTime);
}
};
Expand All @@ -63,6 +65,7 @@ const StartingTimePicker = (props: StartingTimePickerProps) => {
const startingTime2 = formatTimeToHalfAndFullHours(now, 0);
const startingTime3 = formatTimeToHalfAndFullHours(now, 30);
const startingTime4 = formatTimeToHalfAndFullHours(now, 60);
const startingTimeCustom = 'Custom';

return (
<div>
Expand Down Expand Up @@ -112,6 +115,13 @@ const StartingTimePicker = (props: StartingTimePickerProps) => {
>
{startingTime4}
</StartingTimeButton>
<StartingTimeButton
data-testid="StartingTimePickerCustom"
value={startingTimeCustom}
aria-label={startingTimeCustom}
>
{startingTimeCustom}
</StartingTimeButton>
</ToggleButtonGroup>
</div>
);
Expand Down

0 comments on commit 63dafe0

Please sign in to comment.