Skip to content

Commit

Permalink
Added placeholder for room card reservation status
Browse files Browse the repository at this point in the history
  • Loading branch information
@villepynttari
villepynttari committed Jun 26, 2024
1 parent a891bcf commit 768a810
Show file tree
Hide file tree
Showing 3 changed files with 136 additions and 33 deletions.
6 changes: 4 additions & 2 deletions frontend/src/components/BookingView/BookingView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -426,9 +426,11 @@ function BookingView(props: BookingViewProps) {
setExpandedFeaturesAll={setExpandedFeaturesAll}
/>
<DefaultHorizontalSpacer />
<CenterAlignedStack direction={'row'}>
<CenterAlignedStack
direction={'row'}
onClick={moveToChooseOfficePage}
>
<Typography
onClick={moveToChooseOfficePage}
textAlign="left"
variant="subtitle1"
color={'#ce3b20'}
Expand Down
137 changes: 106 additions & 31 deletions frontend/src/components/RoomCard/RoomCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,12 @@ import { minutesToSimpleString } from '../BookingDrawer/BookingDrawer';
import { DateTime, DateTimeMaybeValid } from 'luxon';
import { roomFreeIn } from '../BusyRoomList/BusyRoomList';
import { styled } from '@mui/material/styles';
import { CenterAlignedStack, DEFAULT_STYLES } from '../../theme_2024';
import {
CenterAlignedStack,
CheckCircle,
DEFAULT_STYLES,
DoNotDisturb
} from '../../theme_2024';
import {
Bookmark,
BookmarkBorder,
Expand Down Expand Up @@ -229,6 +234,100 @@ class RoomCardCapacityBox extends React.Component<{
);
}
}
/*TODO villep : Not implemented*/
export const RoomCardReservationStatusIndicator = (props: {
reserved?: boolean;
busy?: boolean;
myBookingAccepted?: boolean;
}) => {
if (props.reserved === true) {
if (props.busy === true) {
return (
<CenterAlignedStack direction={'row'}>
<DoNotDisturb />
<Typography variant={'subtitle1'} marginLeft={'5px'}>
Occupied for (TEST) minutes
</Typography>
</CenterAlignedStack>
);
} else {
return (
<CenterAlignedStack direction={'row'}>
<CheckCircle />
<Typography marginLeft={'5px'} variant={'subtitle1'}>
Reserved To you FOR (TEST) minutes.
</Typography>
</CenterAlignedStack>
);
}
} else {
return <></>;
}
};

const ReservationStatusText = (props: {
reserved: boolean | undefined;
booking: Booking | undefined;
busy: boolean | undefined;
room: Room;
}) => {
const myBookingAccepted =
props.booking?.resourceStatus === 'accepted' &&
DateTime.fromISO(props.booking.startTime) > DateTime.now();

return (
<>
{props.reserved ? (
<>
<Stack direction={'row'}>
<RoomCardReservationStatusIndicator
reserved={props.reserved}
busy={props.busy}
/>
</Stack>
<Typography>
{props.booking && myBookingAccepted
? `Your booking starts in ${getTimeLeft(
props.booking.startTime
)}`
: `Available for another ${minutesToSimpleString(
getTimeAvailableMinutes(props.booking)
)}`}
</Typography>
</>
) : props.busy ? (
<>
<RoomCardReservationStatusIndicator
reserved={props.reserved}
busy={props.busy}
/>
<Typography
variant="body1"
color="text.disabled"
align="left"
>
Available in <b>{roomFreeIn(props.room)} minutes</b> for{' '}
{minutesToSimpleString(busyAvailableFor(props.room))}
</Typography>
</>
) : (
<>
{/* /!*FIXME villep : remove when done testing*!/
(() => {
const reserved = Math.floor(Math.random() * 3) + 1 === 1;
const busy = Math.floor(Math.random() * 3) + 1 === 1;
return (<RoomCardReservationStatusIndicator reserved={reserved} busy={busy} />);
})()*/}

<TimeLeft
timeLeftText="Available for "
endTime={getNextCalendarEvent(props.room)}
/>
</>
)}
</>
);
};

const RoomCard = (props: RoomCardProps) => {
const {
Expand Down Expand Up @@ -375,36 +474,12 @@ const RoomCard = (props: RoomCardProps) => {

<Row>
<Stack direction={'column'}>
{isReserved ? (
<Typography>
{booking?.resourceStatus === 'accepted' &&
DateTime.fromISO(booking.startTime) >
DateTime.now()
? `Your booking starts in ${getTimeLeft(
booking.startTime
)}`
: `Available for another ${minutesToSimpleString(
getTimeAvailableMinutes(booking)
)}`}
</Typography>
) : isBusy ? (
<Typography
variant="body1"
color="text.disabled"
align="left"
>
Available in{' '}
<b>{roomFreeIn(room)} minutes</b> for{' '}
{minutesToSimpleString(
busyAvailableFor(room)
)}
</Typography>
) : (
<TimeLeft
timeLeftText="Available for "
endTime={getNextCalendarEvent(room)}
/>
)}
<ReservationStatusText
reserved={isReserved}
booking={booking}
busy={isBusy}
room={room}
/>
{/*TODO villep: Not Implemented?*/}
<Typography
variant={'h4'}
Expand Down
26 changes: 26 additions & 0 deletions frontend/src/theme_2024.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ import {
styled
} from '@mui/material';
import { GarApp } from './components/App';
import { DoNotDisturbOn } from '@mui/icons-material';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import { RoomCardReservationStatusIndicator } from './components/RoomCard/RoomCard';

export const COLORS = {
ACCENT_PINK: '#FFCAFF',
Expand All @@ -31,6 +34,13 @@ export const DEFAULT_STYLES = {
smallerSpacer: '16px'
};

export const DoNotDisturb = styled(DoNotDisturbOn)(({ theme }) => ({
color: COLORS.ACCENT_RED
}));
export const CheckCircle = styled(CheckCircleIcon)(({ theme }) => ({
color: COLORS.ACCENT_GREEN
}));

export const CenterAlignedStack = styled(Stack)(({ theme }) => ({
alignItems: 'center',
gap: 1
Expand Down Expand Up @@ -61,6 +71,9 @@ declare module '@mui/material/styles' {
GarApp: Partial<typeof GarApp>;
TimeLeftTypography: Partial<typeof TimeLeftTypography>;
BackButtonAndHeader: Partial<typeof CenterAlignedStack>;
RoomCardReservationStatusIndicator: Partial<
typeof RoomCardReservationStatusIndicator
>;
}

interface Components {
Expand All @@ -79,6 +92,11 @@ declare module '@mui/material/styles' {
styleOverrides?: ComponentsOverrides<Theme>['MuiStack'];
variants?: ComponentsVariants['MuiStack'];
};
RoomCardReservationStatusIndicator?: {
defaultProps?: ComponentsPropsList['MuiStack'];
styleOverrides?: ComponentsOverrides<Theme>['MuiStack'];
variants?: ComponentsVariants['MuiStack'];
};
}
}

Expand Down Expand Up @@ -231,6 +249,14 @@ export const DEFAULT_THEME_2024: ThemeOptions = {
flexWrap: 'wrap'
}
}
},
RoomCardReservationStatusIndicator: {
styleOverrides: {
root: {
marginTop: '8px',
marginBottom: '8px'
}
}
}
}
};
Expand Down

0 comments on commit 768a810

Please sign in to comment.