diff --git a/client/src/components/VenueRow.js b/client/src/components/VenueRow.js
index a0d5c81..0163ef8 100644
--- a/client/src/components/VenueRow.js
+++ b/client/src/components/VenueRow.js
@@ -11,10 +11,9 @@ import { auth } from "../firebase";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSquareCaretDown, faSquareCaretUp} from '@fortawesome/free-solid-svg-icons';
-function VenueRow({id, buildingName, venueName, campus, venueType, venueCapacity, timeSlots, isClosed, bookings, relevantDate, setBookingsList, isAdmin, isManaging, getAllVenues, isScheduling, schedules, setSchedules}) {
+function VenueRow({id, buildingName, venueName, campus, venueType, venueCapacity, timeSlots, isClosed, bookings, relevantDate, setBookingsList, isAdmin, isManaging, getAllVenues, isScheduling, schedules, setSchedules, allVenues}) {
const user = auth.currentUser;
-
const [isVenueOpen, setIsVenueOpen] = useState(false);
const [isBooking, setIsBooking] = useState(false);
const [bookingTime, setBookingTime] = useState("");
@@ -28,7 +27,7 @@ function VenueRow({id, buildingName, venueName, campus, venueType, venueCapacity
const [errorMessage, setErrorMessage] = useState("");
const [clickedScheduleEmail, setClickedScheduleEmail] = useState("");
const [clickedScheduleDescription, setClickedScheduleDescription] = useState("");
-
+ const [suggestedVenues, setSuggestedVenues] = useState([]);
const daysOfWeek = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]; //schedule table columns
@@ -61,6 +60,12 @@ function VenueRow({id, buildingName, venueName, campus, venueType, venueCapacity
}
};
+ const venueInfo = {
+ venueName: venueName,
+ campus: campus,
+ capacity: venueCapacity,
+ };
+
const handleScheduleButtonClick = async () => {
const [hours, minutes] = selectedSlot.time.split(':');
@@ -135,6 +140,29 @@ function VenueRow({id, buildingName, venueName, campus, venueType, venueCapacity
}
}, [bookingTime, customEndTime])
+
+ useEffect(() => {
+ // Debugging: Log the entire allVenues array to ensure it's populated
+ console.log("All venues:", allVenues);
+
+ // Normalize campus to lowercase and ensure capacity is a number before comparison
+ const filteredVenues = allVenues
+ .filter((venue) => {
+ // Normalize the campus comparison to lowercase, and ensure capacities are numbers
+ const isSameCampus = venue.campus.toLowerCase() === campus.toLowerCase();
+ const isSameCapacity = Number(venue.capacity) === Number(venueCapacity);
+ const isDifferentVenue = venue.venueName !== venueName;
+ return isSameCampus && isSameCapacity && isDifferentVenue;
+ })
+ .slice(0, 3); // Get up to 3 venues
+
+ // Debugging: Log the filtered venues
+ console.log("Filtered suggested venues:", filteredVenues);
+
+ setSuggestedVenues(filteredVenues);
+ }, [allVenues, campus, venueCapacity, venueName]);
+
+
useEffect(() => {
if (firstRender.current){// Doesn't run on first render in order to give bookingTime and bookingEndTime time to reflect changes
firstRender.current = false;
@@ -316,6 +344,21 @@ function VenueRow({id, buildingName, venueName, campus, venueType, venueCapacity
to
{ e.stopPropagation();}} onChange={ (e) => {setCustomEndTime(e.target.value)}}>
+
+
+ {suggestedVenues.length > 0 ? (
+
+ {suggestedVenues.map((venue) => (
+ -
+ {venue.venueName} (Capacity: {venue.capacity})
+
+ ))}
+
+ ) : (
+
No similar venues available.
// Message if no venues match the criteria
+ )}
+
setBookerEmail(e.target.value)} required placeholder="Input booker email" onClick={(e) => e.stopPropagation()}>
diff --git a/client/src/pages/Venues.js b/client/src/pages/Venues.js
index 7b1e01f..5e0e985 100644
--- a/client/src/pages/Venues.js
+++ b/client/src/pages/Venues.js
@@ -81,7 +81,23 @@ function Venues(){
fetchUserInfo(); //Get user info
}
}, [user, isLoading]);
+
+
+ useEffect(() => {
+ if (venueList.length > 0) {
+ const venueArray = venueList.map(venue => ({
+ venueName: venue.venueName,
+ campus: venue.campus,
+ capacity: venue.venueCapacity,
+ timeSlots: venue.timeSlots,
+ }));
+
+ // console.log(venueArray); // You can log or use this array as needed.
+ }
+ }, [venueList]); // This will run whenever venueList changes.
+
+
useEffect(() => {
callGetAllVenues();
fetchSchedules(setSchedules);
@@ -103,7 +119,11 @@ function Venues(){
const handleDateChange = (newDate) => { // Function for changing the selected date
setDisplayDate(newDate);
};
-
+ const venueArray = venueList.map(venue => ({
+ venueName: venue.venueName,
+ campus: venue.campus,
+ capacity: venue.venueCapacity,
+ }));
//Map the elements of venueList onto VenueRow components and add them to an array
const venueComponents = venueList.map((venue) => {
// Find all bookings for this venue
@@ -138,6 +158,7 @@ function Venues(){
isScheduling={isScheduling}
schedules={schedules}
setSchedules={setSchedules}
+ allVenues = {venueArray}
/>
);
}
@@ -160,6 +181,7 @@ function Venues(){
isScheduling={null}
schedules={null}
setSchedules={null}
+ allVenues = {venueArray}
/>
)
}
@@ -182,6 +204,7 @@ function Venues(){
isScheduling={null}
schedules={null}
setSchedules={null}
+ allVenues = {venueArray}
/>
)
}
diff --git a/client/src/styles/Venues.css b/client/src/styles/Venues.css
index 8de83eb..c089755 100644
--- a/client/src/styles/Venues.css
+++ b/client/src/styles/Venues.css
@@ -689,4 +689,41 @@
font-size: 0.8rem; /* Further reduce font size */
}
-}
\ No newline at end of file
+}
+
+.alternative-venues-container {
+ margin-left: 20px;
+ margin-bottom: 10px;
+ padding-left: 20px;
+ padding-right: 10px;
+}
+
+.alternative-venues-label {
+ font-size: 1.5rem; /* Match font size to other elements */
+ font-weight: bold; /* Similar to other labels */
+ text-shadow: 0 5px 5px rgba(0,0,0,.1); /* Similar to .arrow-button */
+}
+
+.alternative-venues-list {
+ list-style-type: none; /* Remove bullet points */
+ padding: 0;
+ margin: 10px 0;
+}
+
+.alternative-venues-item {
+ font-size: 1.2rem; /* Match font size to venue-row-text */
+ padding: 10px 20px; /* Adjust padding to create spacing */
+ background-color: #043673; /* Background color */
+ color: white; /* Text color */
+ margin: 5px 0; /* Space between items */
+ border-radius: 15px; /* Rounded corners */
+ display: inline-block; /* Ensures items adjust based on content */
+ box-shadow: 0 2px 2px rgba(0,0,0,.1); /* Similar box shadow to venue-row-content */
+ max-width: 25%;
+}
+
+.alternative-venues-item:hover {
+ background-color: #917248; /* Hover effect similar to timeslot-button */
+ color: white;
+ cursor: pointer;
+}
diff --git a/server/index.js b/server/index.js
index f5dd594..795d202 100644
--- a/server/index.js
+++ b/server/index.js
@@ -7,7 +7,7 @@ const multer = require('multer');
const {onRequest} = require("firebase-functions/v2/https");
const { getStorage, ref, uploadBytes, getDownloadURL } = require('firebase/storage');
const logger = require("firebase-functions/logger");
-// const PORT = process.env.PORT || 3001; //Must be commented out for production build
+const PORT = process.env.PORT || 3001; //Must be commented out for production build
const dotenv = require('dotenv').config({ path: './.env' });
const app = express();
@@ -1373,8 +1373,8 @@ const rekognition = new AWS.Rekognition({
// Left out for deployment
// Prints to console the port of the server
-// app.listen(PORT, () => {
-// console.log(`Server listening on ${PORT}`);
-// });
+ app.listen(PORT, () => {
+ console.log(`Server listening on ${PORT}`);
+ });
exports.api = onRequest(app);