From f87df48b5f4caebfc9f48aea1a73d58c53d8a0d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ville=20Pyntt=C3=A4ri?= Date: Thu, 12 Sep 2024 09:38:36 +0300 Subject: [PATCH 01/14] Fixed page top padding --- frontend/package-lock.json | 12 +- .../AvailableRoomList/AvailableRoomList.tsx | 76 +++---- .../components/BookingView/BookingView.tsx | 205 +++++++++--------- .../components/BuildingList/BuildingList.tsx | 196 +++++++++-------- 4 files changed, 251 insertions(+), 238 deletions(-) mode change 100644 => 100755 frontend/package-lock.json mode change 100644 => 100755 frontend/src/components/AvailableRoomList/AvailableRoomList.tsx mode change 100644 => 100755 frontend/src/components/BookingView/BookingView.tsx mode change 100644 => 100755 frontend/src/components/BuildingList/BuildingList.tsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json old mode 100644 new mode 100755 index f5f40a5..1b29875 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -3829,9 +3829,9 @@ "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" }, "node_modules/path-to-regexp": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", - "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.9.0.tgz", + "integrity": "sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==", "dependencies": { "isarray": "0.0.1" } @@ -7263,9 +7263,9 @@ "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" }, "path-to-regexp": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", - "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.9.0.tgz", + "integrity": "sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==", "requires": { "isarray": "0.0.1" } diff --git a/frontend/src/components/AvailableRoomList/AvailableRoomList.tsx b/frontend/src/components/AvailableRoomList/AvailableRoomList.tsx old mode 100644 new mode 100755 index 368e09f..a65d823 --- a/frontend/src/components/AvailableRoomList/AvailableRoomList.tsx +++ b/frontend/src/components/AvailableRoomList/AvailableRoomList.tsx @@ -1,7 +1,7 @@ -import { Box, List, ToggleButton, Typography } from '@mui/material'; +import { useEffect, useState } from 'react'; +import { Box, List, ToggleButton } from '@mui/material'; import { styled } from '@mui/material/styles'; -import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; -import { Booking, Preferences, Room } from '../../types'; +import { Preferences, Room } from '../../types'; import RoomCard from '../RoomCard/RoomCard'; import NoRoomsCard from '../RoomCard/NoRoomsCard'; import { sortByFavoritedAndName } from '../../util/arrayUtils'; @@ -20,26 +20,14 @@ const TimePickerButton = styled(ToggleButton)(() => ({ } })); -export async function isFavorited(room: Room, pref?: Preferences) { - try { - if (pref === undefined || pref.fav_rooms === undefined) { - return false; - } - if (pref.fav_rooms.includes(room.id)) { - room.favorited = true; - } else { - room.favorited = false; - } - } catch { - // add error notification +async function checkIfFavorited(room: Room, pref?: Preferences) { + if (pref && pref.fav_rooms) { + room.favorited = pref.fav_rooms.includes(room.id); + } else { room.favorited = false; } } -function noAvailableRooms(rooms: Room[]) { - return rooms.length === 0; -} - type BookingListProps = { bookingDuration: number; rooms: Room[]; @@ -67,30 +55,42 @@ const AvailableRoomList = (props: BookingListProps) => { selectedRoom } = props; + const [updatedRooms, setUpdatedRooms] = useState([]); + + // Effect to update room favorited status + useEffect(() => { + const updateFavoritedRooms = async () => { + const roomsCopy = [...rooms]; // Make a shallow copy of rooms + for (const room of roomsCopy) { + await checkIfFavorited(room, preferences); + } + setUpdatedRooms(roomsCopy); // Update state after processing all rooms + }; + + updateFavoritedRooms(); + }, [rooms, preferences]); + return ( - {noAvailableRooms(rooms) ? ( + {updatedRooms.length === 0 ? ( ) : ( - sortByFavoritedAndName(rooms).map((room) => - isAvailableFor(bookingDuration, room, startingTime) - ? (isFavorited(room, preferences), - ( -
  • - -
    • - )) - : null + sortByFavoritedAndName(updatedRooms).map((room) => + isAvailableFor(bookingDuration, room, startingTime) ? ( +
  • + +
    • + ) : null ) )}     diff --git a/frontend/src/components/BookingView/BookingView.tsx b/frontend/src/components/BookingView/BookingView.tsx old mode 100644 new mode 100755 index c7a0ba8..8608095 --- a/frontend/src/components/BookingView/BookingView.tsx +++ b/frontend/src/components/BookingView/BookingView.tsx @@ -42,7 +42,6 @@ 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; @@ -79,6 +78,10 @@ const RowCentered = styled(Box)(({ theme }) => ({ width: '100%' })); +const BookingViewContent = styled('div')(({ theme }) => ({ + paddingTop: '56px' +})); + type BookingViewProps = { preferences?: Preferences; setPreferences: (pref: Preferences) => void; @@ -701,120 +704,122 @@ function BookingView(props: BookingViewProps) {     - - - - + - - - - - {preferences?.building - ? preferences.building.name - : 'Back'} - - - - + + + + + + + {preferences?.building + ? preferences.building.name + : 'Back'} + + + - - - - - - - {!areRoomsFetched(rooms) ? ( - - ) : ( - + - )} - {areRoomsFetched(rooms) ? ( - - ) : null} - -
    - -
    + + {!areRoomsFetched(rooms) ? ( + + ) : ( + + )} + + {areRoomsFetched(rooms) ? ( + + ) : null} + +
    + +
    + ); diff --git a/frontend/src/components/BuildingList/BuildingList.tsx b/frontend/src/components/BuildingList/BuildingList.tsx old mode 100644 new mode 100755 index 0b22a53..61f536d --- a/frontend/src/components/BuildingList/BuildingList.tsx +++ b/frontend/src/components/BuildingList/BuildingList.tsx @@ -45,6 +45,10 @@ const EndBox = styled(Box)(({ theme }) => ({ alignItems: 'center' })); +const BuildingListContent = styled('div')(({ theme }) => ({ + paddingTop: '60px' +})); + const handleProfileMenuOpen = (e: React.MouseEvent) => { // TODO villep NOT IMPLEMENTED }; @@ -137,108 +141,112 @@ const BuildingList = (props: BuildingSelectProps) => { }; return ( -
    - -
    - - - Welcome, {name}! - - - setShowUserSettingsMenu(true)} - /> - - SORT BASED ON - - -
    - - +
    + - - - Proximity - - - + + Welcome, {name}! + + + setShowUserSettingsMenu(true)} + /> + + SORT BASED ON + + +
    + + - - Names - - -
    - + + Proximity + + + + + Names + + +
    - OFFICES - -
    - - - {renderBuildingList()} - - setShowUserSettingsMenu(!showUserSettingsMenu)} - name={name} - expandedFeaturesAll={expandedFeaturesAll} - setExpandedFeaturesAll={setExpandedFeaturesAll} - /> -
    + + OFFICES + +
    + + + {renderBuildingList()} + + + setShowUserSettingsMenu(!showUserSettingsMenu) + } + name={name} + expandedFeaturesAll={expandedFeaturesAll} + setExpandedFeaturesAll={setExpandedFeaturesAll} + /> + + ); }; From 3fdb6dc26785157f6dc9e0f1a46f3541d0f907bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ville=20Pyntt=C3=A4ri?= Date: Thu, 12 Sep 2024 09:55:16 +0300 Subject: [PATCH 02/14] Fixed available for text --- frontend/src/components/util/TimeLeft.tsx | 6 +++--- frontend/src/theme_2024.ts | 8 ++++++++ 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/util/TimeLeft.tsx b/frontend/src/components/util/TimeLeft.tsx index ae700f6..2b4d1ce 100644 --- a/frontend/src/components/util/TimeLeft.tsx +++ b/frontend/src/components/util/TimeLeft.tsx @@ -89,14 +89,14 @@ const TimeLeft = (props: TimeLeftProps) => { return ( ); }; diff --git a/frontend/src/theme_2024.ts b/frontend/src/theme_2024.ts index 56744f4..46b5e47 100644 --- a/frontend/src/theme_2024.ts +++ b/frontend/src/theme_2024.ts @@ -208,6 +208,14 @@ export const DEFAULT_THEME_2024: ThemeOptions = { lineHeight: '12px', textTransform: 'uppercase' }, + subtitle2: { + color: COLORS.TEXT_PRIMARY, + fontFamily: 'StudioFeixenSans-Regular', + fontStyle: 'normal', + fontWeight: 2, + fontSize: '16px', + lineHeight: 'normal' + }, h4: { color: COLORS.TEXT_DIMGREY, fontFamily: 'StudioFeixenSans-Regular', From 1ea39ca748804ccea8603e6d7ca320d6a2b8486c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ville=20Pyntt=C3=A4ri?= Date: Thu, 12 Sep 2024 10:26:10 +0300 Subject: [PATCH 03/14] Replace floor text with icon --- frontend/src/components/RoomCard/RoomCard.tsx | 49 +++++++++---------- frontend/src/icons/Floor.tsx | 20 ++++++++ 2 files changed, 42 insertions(+), 27 deletions(-) create mode 100644 frontend/src/icons/Floor.tsx diff --git a/frontend/src/components/RoomCard/RoomCard.tsx b/frontend/src/components/RoomCard/RoomCard.tsx index 22647ca..54fb9e8 100644 --- a/frontend/src/components/RoomCard/RoomCard.tsx +++ b/frontend/src/components/RoomCard/RoomCard.tsx @@ -13,7 +13,7 @@ import TimeLeft, { } from '../util/TimeLeft'; import Group from '@mui/icons-material/People'; -import { Card, CardActionArea, CircularProgress } from '@mui/material'; +import { Card, CardActionArea, CircularProgress, Stack } from '@mui/material'; import { minutesToSimpleString } from '../BookingDrawer/BookingDrawer'; import { DateTime, DateTimeMaybeValid } from 'luxon'; import { roomFreeIn } from '../BusyRoomList/BusyRoomList'; @@ -28,6 +28,7 @@ import { import { dateTimeToTimeString } from '../util/Time'; import { ReservationStatus } from '../../enums'; import BookmarkButton from '../util/bookmarkButton'; +import Floor from '../../icons/Floor'; function getName(room: Room) { return room.name; @@ -123,7 +124,8 @@ export const Row = styled(Box)(({ theme }) => ({ const EndBox = styled(Box)(({ theme }) => ({ display: 'flex', justifyContent: 'flex-end', - alignItems: 'center' + alignItems: 'center', + gap: '16px' })); const StartBox = styled(Box)(({ theme }) => ({ @@ -187,23 +189,6 @@ const RoomCardTitleWithDescription = (props: { {getName(props.room)} - {/* Wrap the h4 in a Box */} - - {' '} - {/* You can adjust margin as needed */} - - {getNumberWithOrdinalSuffix(parseInt(getFloor(props.room)))}{' '} - floor - - ); }; @@ -225,18 +210,28 @@ class RoomCardFavoriteButton extends React.Component<{ } } -class RoomCardCapacityBox extends React.Component<{ +class RoomCardIndicatorsBox extends React.Component<{ busy: boolean | undefined; room: Room; }> { render() { return ( - - - - {getCapacity(this.props.room)} - - + <> + + + + + {getFloor(this.props.room)} + + + + + + {getCapacity(this.props.room)} + + + + ); } } @@ -529,7 +524,7 @@ const RoomCard = (props: RoomCardProps) => { isBusy={isBusy} room={room} /> - + { + return ( + + + + ); +}; + +export default Floor; From e1f71f37a7fbec6d0c9281c63cc762dc71285e6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ville=20Pyntt=C3=A4ri?= Date: Thu, 12 Sep 2024 10:35:45 +0300 Subject: [PATCH 04/14] Fixing bookmark button padding --- frontend/src/components/RoomCard/RoomCard.tsx | 2 -- frontend/src/components/util/bookmarkButton.tsx | 9 +++++---- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/RoomCard/RoomCard.tsx b/frontend/src/components/RoomCard/RoomCard.tsx index 54fb9e8..dc62815 100644 --- a/frontend/src/components/RoomCard/RoomCard.tsx +++ b/frontend/src/components/RoomCard/RoomCard.tsx @@ -4,7 +4,6 @@ import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import { Booking, Preferences, Room } from '../../types'; import { updatePreferences } from '../../services/preferencesService'; -import { getNumberWithOrdinalSuffix } from '../../util/commonUtils'; import TimeLeft, { getTimeDiff, @@ -21,7 +20,6 @@ import { styled } from '@mui/material/styles'; import { CenterAlignedStack, CheckCircle, - DEFAULT_STYLES, DoNotDisturb, ScheduleCircle } from '../../theme_2024'; diff --git a/frontend/src/components/util/bookmarkButton.tsx b/frontend/src/components/util/bookmarkButton.tsx index 6e51f71..d20251e 100644 --- a/frontend/src/components/util/bookmarkButton.tsx +++ b/frontend/src/components/util/bookmarkButton.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; -import { IconButton } from '@mui/material'; +import { Container, Divider, IconButton, styled } from '@mui/material'; import { Bookmark, BookmarkBorder } from '@mui/icons-material'; import { PropsWithChildren } from 'react'; import { children } from 'happy-dom/lib/PropertySymbol'; +const ButtonContent = styled('span')(({ theme }) => ({})); function BookmarkButton( props: PropsWithChildren<{ @@ -14,16 +15,16 @@ function BookmarkButton( }> ) { return ( - + {props.isSelected ? ( - + ) : ( )} {props.children} - + ); } From 7604a50e2168361af3e916709ee84ea43801f7fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ville=20Pyntt=C3=A4ri?= Date: Thu, 12 Sep 2024 10:52:55 +0300 Subject: [PATCH 05/14] Fixing duration quick button group --- .../BookingDrawer/DurationPicker.tsx | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/frontend/src/components/BookingDrawer/DurationPicker.tsx b/frontend/src/components/BookingDrawer/DurationPicker.tsx index a293567..82f8d90 100644 --- a/frontend/src/components/BookingDrawer/DurationPicker.tsx +++ b/frontend/src/components/BookingDrawer/DurationPicker.tsx @@ -3,14 +3,11 @@ import ToggleButton from '@mui/material/ToggleButton'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import { styled, Typography } from '@mui/material'; -const DurationButton = styled(ToggleButton)(() => ({ - padding: '4px 4px' -})); +const DurationButton = styled(ToggleButton)(() => ({})); const DurationButtonGroup = styled(ToggleButtonGroup)(() => ({ minWidth: '100%', - padding: '8px 24px', - marginBottom: '0px !important' + padding: '16px 8px' })); type DurationPickerProps = { @@ -74,7 +71,7 @@ const DurationPicker = (props: DurationPickerProps) => { value={quickDuration} aria-label={toHourMinuteFormat(quickDuration)} > - {quickDuration} + {quickDuration} min ); } @@ -90,7 +87,6 @@ const DurationPicker = (props: DurationPickerProps) => { exclusive onChange={handleChange} aria-label="duration picker" - sx={{ marginBottom: '24px' }} fullWidth > { value={'15'} aria-label="15 minutes" > - 15 + 15 min - 30 + 30 min - 60 + 60 min - 120 + 120 min {CustomDurationValueButton()} Date: Thu, 12 Sep 2024 11:04:40 +0300 Subject: [PATCH 06/14] Added time picker button paddings --- .../DurationTimePickerDrawer.tsx | 22 ++++++--- .../StartingTimePickerDrawer.tsx | 46 +++++++++++-------- .../TimePickerDrawer/TimePickerDrawer.tsx | 2 +- 3 files changed, 43 insertions(+), 27 deletions(-) diff --git a/frontend/src/components/DurationTimePickerDrawer/DurationTimePickerDrawer.tsx b/frontend/src/components/DurationTimePickerDrawer/DurationTimePickerDrawer.tsx index 87fee53..7072f21 100644 --- a/frontend/src/components/DurationTimePickerDrawer/DurationTimePickerDrawer.tsx +++ b/frontend/src/components/DurationTimePickerDrawer/DurationTimePickerDrawer.tsx @@ -30,6 +30,12 @@ const DurationDrawerContent = styled(DrawerContent)(({ theme }) => ({ justifyContent: 'center' })); +const DurationDrawerButtons = styled('div')(({ theme }) => ({ + width: '100%', + margin: '8px 24px', + padding: '0px 24px' +})); + interface DurationTimePickerDrawerProps { open: boolean; toggle: (open: boolean) => void; @@ -100,13 +106,15 @@ const DurationTimePickerDrawer = (props: DurationTimePickerDrawerProps) => { /> - handleSetDuration()} - > - Confirm - + + handleSetDuration()} + > + Confirm + + diff --git a/frontend/src/components/StartingTimePickerDrawer/StartingTimePickerDrawer.tsx b/frontend/src/components/StartingTimePickerDrawer/StartingTimePickerDrawer.tsx index d09da6f..00d3c80 100644 --- a/frontend/src/components/StartingTimePickerDrawer/StartingTimePickerDrawer.tsx +++ b/frontend/src/components/StartingTimePickerDrawer/StartingTimePickerDrawer.tsx @@ -1,6 +1,6 @@ -import React, { useState, useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { MultiSectionDigitalClock } from '@mui/x-date-pickers/MultiSectionDigitalClock'; -import { TextField, Box, styled } from '@mui/material'; +import { Box, styled } from '@mui/material'; import { DateTime } from 'luxon'; import { @@ -19,6 +19,12 @@ export const BoxForm = styled(GetARoomForm)(({ theme }) => ({ flexWrap: 'wrap' })); +const TimePickerButtons = styled('div')(({ theme }) => ({ + width: '100%', + margin: '8px 24px', + padding: '0px 24px' +})); + interface StartingTimePickerDrawerProps { open: boolean; toggle: (open: boolean) => void; @@ -112,23 +118,25 @@ const StartingTimePickerDrawer = (props: StartingTimePickerDrawerProps) => { data-testid="CustomStartingTimeClock" /> - - handleSetTime(true)} - > - Set to Now - - - - handleSetTime(false)} - data-testid="ConfirmStartingTimeButton" - > - Confirm - - + + + handleSetTime(true)} + > + Set to Now + + + + handleSetTime(false)} + data-testid="ConfirmStartingTimeButton" + > + Confirm + + + diff --git a/frontend/src/components/TimePickerDrawer/TimePickerDrawer.tsx b/frontend/src/components/TimePickerDrawer/TimePickerDrawer.tsx index 2b7f3b3..bae8a3d 100644 --- a/frontend/src/components/TimePickerDrawer/TimePickerDrawer.tsx +++ b/frontend/src/components/TimePickerDrawer/TimePickerDrawer.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { TextField, Box } from '@mui/material'; +import { TextField, Box, styled } from '@mui/material'; import { DateTime } from 'luxon'; import { From 9e4f80ad0e5f644cba5ff838e9da43af074a2975 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ville=20Pyntt=C3=A4ri?= Date: Thu, 12 Sep 2024 11:11:40 +0300 Subject: [PATCH 07/14] Fixed alert box width --- frontend/src/components/util/alertBox.tsx | 29 ++++++++++++++++------- 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/util/alertBox.tsx b/frontend/src/components/util/alertBox.tsx index 182b69c..bf31d33 100644 --- a/frontend/src/components/util/alertBox.tsx +++ b/frontend/src/components/util/alertBox.tsx @@ -5,8 +5,8 @@ const AlertBox = (props: { alertText: string; sx?: SxProps }) => { return ( { { {/* Text Container */} - {props.alertText} + + {props.alertText} + ); From 208c751b6f93d6def4dc65fb52e7df36567f62d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ville=20Pyntt=C3=A4ri?= Date: Thu, 12 Sep 2024 11:20:01 +0300 Subject: [PATCH 08/14] Fixing filter drawer vertical margins --- .../BookingDrawer/DurationPicker.tsx | 3 +-- .../BookingView/FilteringDrawer.tsx | 23 ++++++++++--------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/frontend/src/components/BookingDrawer/DurationPicker.tsx b/frontend/src/components/BookingDrawer/DurationPicker.tsx index 82f8d90..78f574d 100644 --- a/frontend/src/components/BookingDrawer/DurationPicker.tsx +++ b/frontend/src/components/BookingDrawer/DurationPicker.tsx @@ -6,8 +6,7 @@ import { styled, Typography } from '@mui/material'; const DurationButton = styled(ToggleButton)(() => ({})); const DurationButtonGroup = styled(ToggleButtonGroup)(() => ({ - minWidth: '100%', - padding: '16px 8px' + minWidth: '100%' })); type DurationPickerProps = { diff --git a/frontend/src/components/BookingView/FilteringDrawer.tsx b/frontend/src/components/BookingView/FilteringDrawer.tsx index dbadfc6..f47b40e 100644 --- a/frontend/src/components/BookingView/FilteringDrawer.tsx +++ b/frontend/src/components/BookingView/FilteringDrawer.tsx @@ -27,7 +27,7 @@ export const SmallText = styled(Typography)(({ theme }) => ({ lineHeight: '12px', fontWeight: 'bold', fontStyle: 'normal', - margin: '24px 8px 8px 0' + margin: '8px 0px' })); interface Props { @@ -181,18 +181,19 @@ const FilteringDrawer = (props: Props) => { }} /> - + Custom Duration (Minutes) - - + + + Room Size (People) From f47d6ad2d3a63e2e48c9bc4a4b48f2d59ebf002f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ville=20Pyntt=C3=A4ri?= Date: Thu, 12 Sep 2024 11:59:40 +0300 Subject: [PATCH 09/14] Fixing custom filter --- .../BookingView/FilteringDrawer.tsx | 66 ++++++++++++++----- frontend/src/icons/Floor.tsx | 2 +- 2 files changed, 50 insertions(+), 18 deletions(-) diff --git a/frontend/src/components/BookingView/FilteringDrawer.tsx b/frontend/src/components/BookingView/FilteringDrawer.tsx index f47b40e..29d5942 100644 --- a/frontend/src/components/BookingView/FilteringDrawer.tsx +++ b/frontend/src/components/BookingView/FilteringDrawer.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { Box, Typography } from '@mui/material'; import TextField from '@mui/material/TextField'; @@ -52,6 +52,52 @@ interface Props { setBookingDuration: (minutes: number) => void; } +function CustomFilterTextField(props: { + value: string; + setCustomFilter: (customFilter: string) => void; +}) { + const [searchTerm, setSearchTerm] = useState(''); + + useEffect(() => { + const delayDebounceFn = setTimeout(() => { + props.setCustomFilter(searchTerm); + // Send Axios request here + }, 2000); + + return () => clearTimeout(delayDebounceFn); + }, [searchTerm]); + + useEffect(() => { + setSearchTerm(props.value); + }, [props.value]); + + return ( + setSearchTerm(event.target.value)} + value={searchTerm} + placeholder="Room name, resource..." + size="small" + slotProps={{ + input: { + startAdornment: ( + + + + ), + sx: { + fontFamily: 'Studio Feixen Sans', + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 2, + lineHeight: 'normal', + borderRadius: '20px' + } + } + }} + /> + ); +} + // Note: Actual filtering of the rooms is done one level up in booking view const FilteringDrawer = (props: Props) => { const { showUserSettingsMenu } = useUserSettings(); @@ -120,9 +166,6 @@ const FilteringDrawer = (props: Props) => { setResources(newResources); }; - const handleCustomFilter = (event: React.ChangeEvent) => { - setCustomFilter(event.target.value); - }; const handleDurationChange = (newDuration: number) => { if (newDuration !== -1) { setBookingDuration(newDuration); @@ -165,20 +208,9 @@ const FilteringDrawer = (props: Props) => { Custom Filter - - - - ) - } - }} /> diff --git a/frontend/src/icons/Floor.tsx b/frontend/src/icons/Floor.tsx index 4bf35a6..13ccad6 100644 --- a/frontend/src/icons/Floor.tsx +++ b/frontend/src/icons/Floor.tsx @@ -11,7 +11,7 @@ const Floor = () => { d="M5 15V16H14C14.5523 16 15 15.5523 15 15V6H14V9H11V12H8V15H5Z" fill="#1D1D1D" stroke="#1D1D1D" - stroke-width="2" + strokeWidth="2" /> ); From 3c83feefd1802cbfb2ed1a948a80adf8dfe25d02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ville=20Pyntt=C3=A4ri?= Date: Thu, 12 Sep 2024 12:22:51 +0300 Subject: [PATCH 10/14] Fixed starting time alert bug --- .../BookingDrawer/BookingDrawer.tsx | 51 +++++++++++-------- 1 file changed, 31 insertions(+), 20 deletions(-) diff --git a/frontend/src/components/BookingDrawer/BookingDrawer.tsx b/frontend/src/components/BookingDrawer/BookingDrawer.tsx index 7d94a21..4ca690d 100644 --- a/frontend/src/components/BookingDrawer/BookingDrawer.tsx +++ b/frontend/src/components/BookingDrawer/BookingDrawer.tsx @@ -162,24 +162,30 @@ export const Alert = (props: { return <>; } return ( - - - - not_interested - - - - {props.alertText} - - + <> + {props.showAlert && ( + + + + not_interested + + + + + {props.alertText} + + + + )} + ); }; @@ -470,7 +476,8 @@ const BookingDrawer = (props: Props) => { }, [startingTime]); useEffect(() => { - if (room && DateTime.fromISO(room.nextCalendarEvent) < DateTime.now()) { + const date = DateTime.fromFormat(startingTime, 'hh:mm'); + if (room && date < DateTime.now()) { setAlertText( `Room is currently unavailable for ${unavailable} minutes. You may book the room in advance. Your starting @@ -479,8 +486,12 @@ const BookingDrawer = (props: Props) => { setStartingTime(getNextAvailableTime(room)); setShowAlert(true); unavailable = getUnavailableTimeInMinutes(room); + } else { + if (showAlert) { + setShowAlert(false); + } } - }, [room]); + }, [startingTime]); return ( Date: Thu, 12 Sep 2024 13:38:49 +0300 Subject: [PATCH 11/14] Added background color to html body --- frontend/src/components/App.tsx | 5 ++++- frontend/src/components/MainView/MainView.tsx | 1 + frontend/src/index.tsx | 7 ++++++- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx index c9e9b07..324788b 100644 --- a/frontend/src/components/App.tsx +++ b/frontend/src/components/App.tsx @@ -10,7 +10,10 @@ import { UserSettingsProvider } from '../contexts/UserSettingsContext'; import { clarity } from 'react-microsoft-clarity'; import GETAROOM_ENV from '../util/getARoomEnv'; -export const GarApp = styled(Divider)(() => ({})); +export const GarApp = styled(Divider)(() => ({ + width: '100%', + height: '100%' +})); const App = () => { if (GETAROOM_ENV().VITE_CLARITY_ID != null) { diff --git a/frontend/src/components/MainView/MainView.tsx b/frontend/src/components/MainView/MainView.tsx index 8b49730..8397dad 100644 --- a/frontend/src/components/MainView/MainView.tsx +++ b/frontend/src/components/MainView/MainView.tsx @@ -23,6 +23,7 @@ import { COLORS } from '../../theme_2024'; const MainContent = styled(Box)(({ theme }) => ({ id: 'main-view', // Changed to proper object key-value pair display: 'flex', + width: '100%', flexDirection: 'column', minHeight: '100vh', alignItems: 'center', diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 69fda0b..df0c7c3 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -1,5 +1,4 @@ import React, { StrictMode } from 'react'; -import ReactDOM from 'react-dom'; import './index.css'; import App from './components/App'; import reportWebVitals from './create-react-app/reportWebVitals'; @@ -11,6 +10,7 @@ import '@fontsource/roboto/400.css'; import '@fontsource/roboto/500.css'; import '@fontsource/roboto/700.css'; import { createRoot } from 'react-dom/client'; +import { COLORS } from './theme_2024'; checkEnvVariables(); const element: HTMLElement | null = document.getElementById('root'); @@ -22,6 +22,11 @@ if (!element) { const root = createRoot(element); root.render( + ); From c19be4f5bcead8a640f2d133b67233fba9c041ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ville=20Pyntt=C3=A4ri?= Date: Thu, 12 Sep 2024 13:41:56 +0300 Subject: [PATCH 12/14] Fixed favourites text --- frontend/src/components/BookingView/FilteringDrawer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/BookingView/FilteringDrawer.tsx b/frontend/src/components/BookingView/FilteringDrawer.tsx index 29d5942..2ce99cf 100644 --- a/frontend/src/components/BookingView/FilteringDrawer.tsx +++ b/frontend/src/components/BookingView/FilteringDrawer.tsx @@ -255,7 +255,7 @@ const FilteringDrawer = (props: Props) => { ))} - Favourites + Pinned rooms Date: Thu, 12 Sep 2024 14:02:38 +0300 Subject: [PATCH 13/14] Fixin page header position --- .../BookingView/StartingTimePicker.tsx | 123 ++++++------ .../components/BuildingList/BuildingList.tsx | 188 +++++++++--------- 2 files changed, 154 insertions(+), 157 deletions(-) diff --git a/frontend/src/components/BookingView/StartingTimePicker.tsx b/frontend/src/components/BookingView/StartingTimePicker.tsx index 5525146..a1b1448 100644 --- a/frontend/src/components/BookingView/StartingTimePicker.tsx +++ b/frontend/src/components/BookingView/StartingTimePicker.tsx @@ -3,17 +3,12 @@ import ToggleButton from '@mui/material/ToggleButton'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import { Box, styled, Typography } from '@mui/material'; import { DateTime } from 'luxon'; -import { - getHourMinute, - timeFormat, - timeToHalfAndFullHours, - formatTimeToHalfAndFullHours -} from '../util/Time'; +import { formatTimeToHalfAndFullHours } from '../util/Time'; import AlertBox from '../util/alertBox'; const StartingTimeButton = styled(ToggleButton)(() => ({})); const StartingTimePickerContent = styled(Box)(({ theme }) => ({ - margin: '8px 24px' + margin: '8px 0px' })); type StartingTimePickerProps = { @@ -70,63 +65,69 @@ const StartingTimePicker = (props: StartingTimePickerProps) => { }; return ( - - + <> + {title} - - - {startingTimeNow} - - - {startingTime2} - - - {startingTime3} - - - {startingTime4} - - {CustomStartingTimeButton()} - + - {startingTimeCustom} - - - {props.startingTime !== 'Now' && ( - - )} - + + {startingTimeNow} + + + {startingTime2} + + + {startingTime3} + + + {startingTime4} + + {CustomStartingTimeButton()} + + {startingTimeCustom} + + + {props.startingTime !== 'Now' && ( + + )} + + ); }; diff --git a/frontend/src/components/BuildingList/BuildingList.tsx b/frontend/src/components/BuildingList/BuildingList.tsx index 61f536d..9a0c57b 100755 --- a/frontend/src/components/BuildingList/BuildingList.tsx +++ b/frontend/src/components/BuildingList/BuildingList.tsx @@ -142,110 +142,106 @@ const BuildingList = (props: BuildingSelectProps) => { return ( -
    - + -
    + + Welcome, {name}! + + + setShowUserSettingsMenu(true)} + /> + + SORT BASED ON + + + + + + - - - Welcome, {name}! - - - setShowUserSettingsMenu(true)} - /> - - SORT BASED ON - - -
    - - + Proximity + + + - - - Proximity - - - - - Names - - -
    + Names + + +
    + - - OFFICES - -
    - - - {renderBuildingList()} - - - setShowUserSettingsMenu(!showUserSettingsMenu) - } - name={name} - expandedFeaturesAll={expandedFeaturesAll} - setExpandedFeaturesAll={setExpandedFeaturesAll} - /> -
    + OFFICES + +
    + + + {renderBuildingList()} + + setShowUserSettingsMenu(!showUserSettingsMenu)} + name={name} + expandedFeaturesAll={expandedFeaturesAll} + setExpandedFeaturesAll={setExpandedFeaturesAll} + />     ); }; From 88cc6c3d1282ced6e754a8427189c48c4ea526ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ville=20Pyntt=C3=A4ri?= Date: Thu, 12 Sep 2024 14:19:54 +0300 Subject: [PATCH 14/14] Fixing start time picker padding and margin --- .../components/AvailableRoomList/AvailableRoomList.test.tsx | 1 + .../src/components/AvailableRoomList/AvailableRoomList.tsx | 6 +++--- frontend/src/components/BookingView/StartingTimePicker.tsx | 6 ++---- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/AvailableRoomList/AvailableRoomList.test.tsx b/frontend/src/components/AvailableRoomList/AvailableRoomList.test.tsx index ca5c460..67d0dff 100644 --- a/frontend/src/components/AvailableRoomList/AvailableRoomList.test.tsx +++ b/frontend/src/components/AvailableRoomList/AvailableRoomList.test.tsx @@ -119,6 +119,7 @@ describe('AvailableRoomList', () => { }, selectedRoom: fakeRooms[0] }; + it('renders room data', async () => { render( ({ } })); -async function checkIfFavorited(room: Room, pref?: Preferences) { +function checkIfFavorited(room: Room, pref?: Preferences) { if (pref && pref.fav_rooms) { room.favorited = pref.fav_rooms.includes(room.id); } else { @@ -59,10 +59,10 @@ const AvailableRoomList = (props: BookingListProps) => { // Effect to update room favorited status useEffect(() => { - const updateFavoritedRooms = async () => { + const updateFavoritedRooms = () => { const roomsCopy = [...rooms]; // Make a shallow copy of rooms for (const room of roomsCopy) { - await checkIfFavorited(room, preferences); + checkIfFavorited(room, preferences); } setUpdatedRooms(roomsCopy); // Update state after processing all rooms }; diff --git a/frontend/src/components/BookingView/StartingTimePicker.tsx b/frontend/src/components/BookingView/StartingTimePicker.tsx index a1b1448..04553ba 100644 --- a/frontend/src/components/BookingView/StartingTimePicker.tsx +++ b/frontend/src/components/BookingView/StartingTimePicker.tsx @@ -7,9 +7,7 @@ import { formatTimeToHalfAndFullHours } from '../util/Time'; import AlertBox from '../util/alertBox'; const StartingTimeButton = styled(ToggleButton)(() => ({})); -const StartingTimePickerContent = styled(Box)(({ theme }) => ({ - margin: '8px 0px' -})); +const StartingTimePickerContent = styled(Box)(({ theme }) => ({})); type StartingTimePickerProps = { startingTime: string; @@ -81,7 +79,7 @@ const StartingTimePicker = (props: StartingTimePickerProps) => { exclusive onChange={handleChange} aria-label="duration picker" - sx={{ margin: '8px 0' }} + sx={{ marginTop: '8px', paddingBottom: '8px' }} fullWidth >