Suggestions

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
                                         <input className= 'times-input' placeholder='End Time' type="time" min={"14:15"} value={customEndTime} onClick={(e) => { e.stopPropagation();}} onChange={ (e) => {setCustomEndTime(e.target.value)}}></input>
                                     </div>
+                                    <div className="alternative-venues-container">
+    <label className="alternative-venues-label">Alternative Venues</label>
+    {suggestedVenues.length > 0 ? (
+        <ul className="alternative-venues-list">
+            {suggestedVenues.map((venue) => (
+                <li className="alternative-venues-item" key={venue.venueName}>
+                    {venue.venueName} (Capacity: {venue.capacity})
+                </li>
+            ))}
+        </ul>
+    ) : (
+        <p>No similar venues available.</p> // Message if no venues match the criteria
+    )}
+</div>
+
                                     <div className="admin-book-action-container">
                                         <textarea className={`description-input ${isBooking ? "shown" : "hidden"}`} data-testid = 'description-input-id' value = { bookingDescriptionText } onChange={(e) => setBookingDescriptionText(e.target.value)} required placeholder="Input a booking description" onClick={(e) => e.stopPropagation()}></textarea>
                                         <input className={`email-input ${isBooking ? "shown" : "hidden"}`} data-testid = 'email-input-id' value = { bookerEmail } onChange={(e) => setBookerEmail(e.target.value)} required placeholder="Input booker email" onClick={(e) => e.stopPropagation()}></input>

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}
           />
         )
       }

client/src/styles/Venues.css

@@ -689,4 +689,41 @@
       font-size: 0.8rem; /* Further reduce font size */
   }
 
-}
+}
+
+.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;
+}

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);