Release/summer 2024

docker-compose.yml

@@ -57,6 +57,8 @@ services:
             - ./:/usr/src/app/
         ports:
             - '${BACKEND_LOCAL_PORT}:8080'
+        expose:
+            - ${BACKEND_LOCAL_PORT}
         networks:
             - getaroom_network
         healthcheck:
@@ -94,7 +96,7 @@ services:
         ports:
             - '${FRONTEND_LOCAL_PORT}:3000'
         expose:
-            - 3000
+            - ${FRONTEND_LOCAL_PORT}
         networks:
             - getaroom_network
         command: |

frontend/src/components/BookingDrawer/BookingDrawer.tsx

@@ -4,14 +4,11 @@ import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
 import { DateTime } from 'luxon';
 import { styled } from '@mui/material/styles';
-import SwipeableEdgeDrawer, {
-    DrawerContent
-} from '../SwipeableEdgeDrawer/SwipeableEdgeDrawer';
 import { Room } from '../../types';
 import { getTimeLeft, getTimeLeftMinutes2 } from '../util/TimeLeft';
 import { theme } from '../../theme';
 import DurationPicker from './DurationPicker';
-import BottomDrawer from '../BottomDrawer/BottomDrawer';
+import BottomDrawer, { DrawerContent } from '../BottomDrawer/BottomDrawer';
 import { dateTimeToTimeString } from '../util/Time';
 
 const MIN_DURATION = 15;
@@ -160,6 +157,7 @@ export const Alert = (props: {
     startingTime: string;
     showAlert: boolean;
     unavailable: number;
+    alertText: string;
 }) => {
     if (!props.showAlert) {
         return <></>;
@@ -180,20 +178,7 @@ export const Alert = (props: {
                 </span>
             </ColAlertIcon>
             <ColAlertMessage>
-                <p
-                    style={{
-                        flex: '1 1 0%',
-                        color: '#1D1D1D',
-                        fontSize: '16px',
-                        fontFamily: 'Studio Feixen Sans',
-                        textAlign: 'left',
-                        fontWeight: '2'
-                    }}
-                >
-                    Room is currently unavailable for {props.unavailable}
-                    minutes. You may book the room in advance. Your starting
-                    time was adjusted to {props.startingTime}.
-                </p>
+                <Typography variant={'body2'}>{props.alertText}</Typography>
             </ColAlertMessage>
         </RowAlert>
     );
@@ -377,6 +362,7 @@ const BookingDrawer = (props: Props) => {
     // Placeholder values
     const [nextHalfHour, setNextHalfHour] = useState('00:30');
     const [nextFullHour, setNextFullHour] = useState('01:00');
+    const [showAlert, setShowAlert] = useState<boolean>(false);
 
     const handleAdditionalTime = (minutes: number) => {
         onAddTime(minutes);
@@ -474,13 +460,29 @@ const BookingDrawer = (props: Props) => {
         setNextFullHour(fullHourString);
     };
 
-    let showAlert = false;
     let unavailable = 0;
-    if (room && DateTime.fromISO(room.nextCalendarEvent) < DateTime.now()) {
-        setStartingTime(getNextAvailableTime(room));
-        showAlert = true;
-        unavailable = getUnavailableTimeInMinutes(room);
-    }
+    const [alertText, setAlertText] = useState<string>('');
+
+    useEffect(() => {
+        if (startingTime && startingTime !== 'Now') {
+            setAlertText(`Note! You are booking the room for a future time`);
+            setShowAlert(true);
+        }
+    }, [startingTime]);
+
+    useEffect(() => {
+        if (room && DateTime.fromISO(room.nextCalendarEvent) < DateTime.now()) {
+            setAlertText(
+                `Room is currently unavailable for ${unavailable}
+             minutes. You may book the room in advance. Your starting
+             time was adjusted to ${startingTime}.`
+            );
+            setStartingTime(getNextAvailableTime(room));
+            setShowAlert(true);
+            unavailable = getUnavailableTimeInMinutes(room);
+        }
+    }, [room]);
+
     return (
         <BottomDrawer
             headerTitle={getName(room)}
@@ -503,6 +505,7 @@ const BookingDrawer = (props: Props) => {
                         startingTime={startingTime}
                         showAlert={showAlert}
                         unavailable={unavailable}
+                        alertText={alertText}
                     />
                     <RowCentered>
                         <TimeTextBold>

frontend/src/components/BookingDrawer/DurationPicker.tsx

@@ -9,7 +9,7 @@ const DurationButton = styled(ToggleButton)(() => ({
 
 const DurationButtonGroup = styled(ToggleButtonGroup)(() => ({
     minWidth: '100%',
-    paddingTop: '8px',
+    padding: '8px 24px',
     marginBottom: '0px !important'
 }));
 

frontend/src/components/BookingView/BookingView.tsx

@@ -18,17 +18,15 @@ import FilteringDrawer from './FilteringDrawer';
 
 import { useHistory } from 'react-router-dom';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import SwipeableEdgeDrawer, {
-    DrawerContent
-} from '../SwipeableEdgeDrawer/SwipeableEdgeDrawer';
+
 import UserDrawer from '../UserDrawer/UserDrawer';
 import BusyRoomList from '../BusyRoomList/BusyRoomList';
 import useCreateNotification from '../../hooks/useCreateNotification';
 import {
     CenterAlignedStack,
+    COLORS,
     DEFAULT_STYLES,
     DefaultVerticalSpacer,
-    StretchingHorizontalSpacer,
     UserIcon
 } from '../../theme_2024';
 import { useUserSettings } from '../../contexts/UserSettingsContext';
@@ -43,6 +41,9 @@ import { triggerClarityEvent } from '../../analytics/clarityService';
 import { AnalyticsEventEnum } from '../../analytics/AnalyticsEvent';
 import { triggerGoogleAnalyticsEvent } from '../../analytics/googleAnalytics/googleAnalyticsService';
 import { BookingEvent } from '../../analytics/googleAnalytics/googleAnalyticsEvents';
+import PageHeaderWithUserIcon from '../util/pageHeaderWithUserIcon';
+import AlertBox from '../util/alertBox';
+import BottomDrawer, { DrawerContent } from '../BottomDrawer/BottomDrawer';
 
 const UPDATE_FREQUENCY = 30000;
 const GET_RESERVED = true;
@@ -88,36 +89,26 @@ type BookingViewProps = {
     setBookingDuration: (min: number) => void;
 };
 
-const RoomsPageHeaderWithUserIcon = (props: { onClick: () => void }) => {
+export function UserIconButton(props: { open: boolean; onClick: () => void }) {
     return (
-        <CenterAlignedStack
-            direction={'row'}
+        <IconButton
+            aria-label="profile menu"
+            size="small"
             sx={{
-                width: '100%'
+                color: COLORS.TEXT_PRIMARY,
+                backgroundColor: props.open
+                    ? COLORS.ACCENT_PINK
+                    : COLORS.BACKGROUND_PRIMARY,
+                position: 'absolute',
+                right: 50,
+                cursor: 'pointer'
             }}
             onClick={props.onClick}
         >
-            <Typography variant={'h1'}>
-                ROOMS
-                <IconButton
-                    aria-label="profile menu"
-                    size="small"
-                    sx={{
-                        bgcolor: 'primary.main',
-                        color: '#fff',
-                        position: 'absolute',
-                        right: 50
-                    }}
-                    onClick={props.onClick}
-                    style={{ cursor: 'pointer' }}
-                ></IconButton>
-            </Typography>
-            <StretchingHorizontalSpacer />
-            {/*// TODO: Button not implemented*/}
             <UserIcon />
-        </CenterAlignedStack>
+        </IconButton>
     );
-};
+}
 
 function BookingView(props: BookingViewProps) {
     const {
@@ -503,6 +494,7 @@ function BookingView(props: BookingViewProps) {
             .minute(mm % 60)
             .hour(Math.floor(mm / 60));
     }
+
     const handleUntilHalf = () => {
         let halfTime =
             startingTime === 'Now'
@@ -675,7 +667,7 @@ function BookingView(props: BookingViewProps) {
                 pb={'120px'}
             >
                 <div id="gps-container">
-                    <SwipeableEdgeDrawer
+                    <BottomDrawer
                         headerTitle={'GPS has your back!'}
                         iconLeft={'Map'}
                         iconRight={'Close'}
@@ -708,7 +700,7 @@ function BookingView(props: BookingViewProps) {
                                 </RowCentered>
                             </DrawerContent>
                         </Box>
-                    </SwipeableEdgeDrawer>
+                    </BottomDrawer>
                 </div>
                 <Box
                     sx={{
@@ -747,8 +739,10 @@ function BookingView(props: BookingViewProps) {
                         </Box>
                     </CenterAlignedStack>
                     <RowCentered>
-                        <RoomsPageHeaderWithUserIcon
+                        <PageHeaderWithUserIcon
                             onClick={openSettingsDrawer}
+                            isOpen={showUserSettingsMenu}
+                            title={'ROOMS'}
                         />
                     </RowCentered>
                 </Box>

frontend/src/components/BookingView/FilteringDrawer.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { Box, Typography } from '@mui/material';
-import SwipeableEdgeDrawer, {
-    DrawerContent
-} from '../SwipeableEdgeDrawer/SwipeableEdgeDrawer';
+
 import TextField from '@mui/material/TextField';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import ToggleButton from '@mui/material/ToggleButton';
@@ -11,7 +9,9 @@ import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
 import InputAdornment from '@mui/material/InputAdornment';
 import styled from '@mui/styled-engine';
 import { useUserSettings } from '../../contexts/UserSettingsContext';
-import { COLORS, DEFAULT_STYLES } from '../../theme_2024';
+import { COLORS } from '../../theme_2024';
+import BottomDrawer, { DrawerContent } from '../BottomDrawer/BottomDrawer';
+import { Bookmark, BookmarkBorder } from '@mui/icons-material';
 
 export const Row = styled(Box)(({ theme }) => ({
     display: 'flex',
@@ -70,20 +70,28 @@ const FilteringDrawer = (props: Props) => {
     } = props;
 
     const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
+        paddingBottom: '8px',
         '& .MuiToggleButtonGroup-grouped': {
-            marginRight: '16px',
+            borderWidth: '1px',
+            borderStyle: 'solid',
+            borderColor: COLORS.ACCENT_PINK,
+            borderRadius: '20px',
             '&:not(:first-of-type)': {
-                borderWidth: 'thin',
-                borderRadius: '50px'
+                borderLeft: '1px solid COLORS.ACCENT_PINK', // Ensure the left border is visible
+                borderRadius: '20px', // Maintain the rounded corners
+                marginLeft: '-1px' // To prevent gaps between buttons
             },
             '&:first-of-type': {
-                backgroundColor: COLORS.ACCENT_PINK,
-                marginLeft: '0px',
-                borderRadius: '50px'
+                backgroundColor: COLORS.ACCENT_PINK
             }
         }
     }));
 
+    const StyledToggleButton = styled(ToggleButton)(({ theme }) => ({
+        borderRadius: '20px',
+        marginRight: '8px'
+    }));
+
     const StyledDrawerWrapper = styled(Box)(({ theme }) => ({
         width: '100%',
         display: 'flex',
@@ -123,7 +131,7 @@ const FilteringDrawer = (props: Props) => {
     };
 
     return (
-        <SwipeableEdgeDrawer
+        <BottomDrawer
             headerTitle={'Filters'}
             filterCount={filterCount}
             iconLeft={'FilterList'}
@@ -175,10 +183,12 @@ const FilteringDrawer = (props: Props) => {
                         value={roomSize}
                         onChange={handleRoomSizeChange}
                     >
-                        <ToggleButton value="1-2">1-2</ToggleButton>
-                        <ToggleButton value="3-5">3-5</ToggleButton>
-                        <ToggleButton value="6-7">6-7</ToggleButton>
-                        <ToggleButton value="8-99999">8+</ToggleButton>
+                        <StyledToggleButton value="1-2">1-2</StyledToggleButton>
+                        <StyledToggleButton value="3-5">3-5</StyledToggleButton>
+                        <StyledToggleButton value="6-7">6-7</StyledToggleButton>
+                        <StyledToggleButton value="8-99999">
+                            8+
+                        </StyledToggleButton>
                     </StyledToggleButtonGroup>
                     <Row>
                         <SmallText>Resources</SmallText>
@@ -189,9 +199,9 @@ const FilteringDrawer = (props: Props) => {
                         sx={{ minHeight: '56px' }}
                     >
                         {allFeatures.map((feature) => (
-                            <ToggleButton key={feature} value={feature}>
+                            <StyledToggleButton key={feature} value={feature}>
                                 {feature}
-                            </ToggleButton>
+                            </StyledToggleButton>
                         ))}
                     </StyledToggleButtonGroup>
                     <Row>
@@ -202,12 +212,16 @@ const FilteringDrawer = (props: Props) => {
                         selected={onlyFavourites}
                         onChange={() => setOnlyFavourites(!onlyFavourites)}
                     >
-                        <FavoriteBorderIcon />
-                        &nbsp; Only Favourites
+                        {props.onlyFavourites ? (
+                            <Bookmark sx={{ color: '#F04E30' }} />
+                        ) : (
+                            <BookmarkBorder />
+                        )}
+                        &nbsp; Only bookmarked
                     </ToggleButton>
                 </DrawerContent>
             </StyledDrawerWrapper>
-        </SwipeableEdgeDrawer>
+        </BottomDrawer>
     );
 };