From 16c6740057abdd64ea22a6aca5a26cf1bc17e5ad Mon Sep 17 00:00:00 2001
From: AJ-222 <2538862@students.wits.ac.za>
Date: Tue, 1 Oct 2024 22:03:20 +0200
Subject: [PATCH 1/3] Getting venues array

Co-authored-by: dullseagull <2543772@students.wits.ac.za>
---
 client/src/components/SuggestionBox.js | 33 ++++++++++++++++++++++++++
 client/src/components/VenueRow.js      |  7 ++++++
 client/src/pages/Venues.js             | 16 +++++++++++++
 3 files changed, 56 insertions(+)
 create mode 100644 client/src/components/SuggestionBox.js

diff --git a/client/src/components/SuggestionBox.js b/client/src/components/SuggestionBox.js
new file mode 100644
index 0000000..f826603
--- /dev/null
+++ b/client/src/components/SuggestionBox.js
@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+
+function SuggestionBox({ campus, capacity, venueList }) {
+  const [suggestions, setSuggestions] = useState([]);
+
+  useEffect(() => {
+    // Filter venues that match the same campus and capacity as the selected venue
+    const filteredVenues = venueList.filter(venue => 
+      venue.campus === campus && venue.venueCapacity === capacity && !venue.isClosed
+    );
+    // Limit suggestions to 3 venues and exclude the selected venue
+    setSuggestions(filteredVenues.slice(0, 3));
+  }, [campus, capacity, venueList]);
+
+  return (
+    <div className="suggestion-box">
+      <h3>Suggested Venues</h3>
+      {suggestions.length > 0 ? (
+        suggestions.map((venue) => (
+          <div key={venue.venueName} className="suggestion-item">
+            <p>{venue.venueName}</p>
+            <p>Building: {venue.buildingName}</p>
+            <p>Capacity: {venue.venueCapacity}</p>
+          </div>
+        ))
+      ) : (
+        <p>No suggestions available</p>
+      )}
+    </div>
+  );
+}
+
+export default SuggestionBox;
diff --git a/client/src/components/VenueRow.js b/client/src/components/VenueRow.js
index a0d5c81..3c062b8 100644
--- a/client/src/components/VenueRow.js
+++ b/client/src/components/VenueRow.js
@@ -61,6 +61,13 @@ function VenueRow({id, buildingName, venueName, campus, venueType, venueCapacity
         }
     };
     
+    const venueInfo = {
+        venueName: venueName,
+        campus: campus,
+        capacity: venueCapacity,
+        timeSlots: timeSlots,
+    };
+
 
     const handleScheduleButtonClick = async () => {
         const [hours, minutes] = selectedSlot.time.split(':');
diff --git a/client/src/pages/Venues.js b/client/src/pages/Venues.js
index 7b1e01f..5fe2cff 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);

From 5add723e08b1fb59e675e3bc33ff136b0eac65b7 Mon Sep 17 00:00:00 2001
From: AJ-222 <2538862@students.wits.ac.za>
Date: Tue, 1 Oct 2024 23:14:12 +0200
Subject: [PATCH 2/3] Adding alternative venues

Co-authored-by: dullseagull <2543772@students.wits.ac.za>
---
 client/src/components/SuggestionBox.js | 33 --------------------
 client/src/components/VenueRow.js      | 43 ++++++++++++++++++++++++--
 client/src/pages/Venues.js             | 12 +++++--
 client/src/styles/Venues.css           | 39 ++++++++++++++++++++++-
 server/index.js                        |  8 ++---
 5 files changed, 92 insertions(+), 43 deletions(-)
 delete mode 100644 client/src/components/SuggestionBox.js

diff --git a/client/src/components/SuggestionBox.js b/client/src/components/SuggestionBox.js
deleted file mode 100644
index f826603..0000000
--- a/client/src/components/SuggestionBox.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useEffect, useState } from "react";
-
-function SuggestionBox({ campus, capacity, venueList }) {
-  const [suggestions, setSuggestions] = useState([]);
-
-  useEffect(() => {
-    // Filter venues that match the same campus and capacity as the selected venue
-    const filteredVenues = venueList.filter(venue => 
-      venue.campus === campus && venue.venueCapacity === capacity && !venue.isClosed
-    );
-    // Limit suggestions to 3 venues and exclude the selected venue
-    setSuggestions(filteredVenues.slice(0, 3));
-  }, [campus, capacity, venueList]);
-
-  return (
-    <div className="suggestion-box">
-      <h3>Suggested Venues</h3>
-      {suggestions.length > 0 ? (
-        suggestions.map((venue) => (
-          <div key={venue.venueName} className="suggestion-item">
-            <p>{venue.venueName}</p>
-            <p>Building: {venue.buildingName}</p>
-            <p>Capacity: {venue.venueCapacity}</p>
-          </div>
-        ))
-      ) : (
-        <p>No suggestions available</p>
-      )}
-    </div>
-  );
-}
-
-export default SuggestionBox;
diff --git a/client/src/components/VenueRow.js b/client/src/components/VenueRow.js
index 3c062b8..f38f24e 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
 
@@ -142,6 +141,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;
@@ -323,6 +345,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>
diff --git a/client/src/pages/Venues.js b/client/src/pages/Venues.js
index 5fe2cff..1e34221 100644
--- a/client/src/pages/Venues.js
+++ b/client/src/pages/Venues.js
@@ -92,7 +92,7 @@ function Venues(){
           timeSlots: venue.timeSlots,
         }));
     
-        console.log(venueArray); // You can log or use this array as needed.
+       // console.log(venueArray); // You can log or use this array as needed.
       }
     }, [venueList]); // This will run whenever venueList changes.
     
@@ -119,7 +119,12 @@ 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,
+      timeSlots: venue.timeSlots,
+  }));
     //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
@@ -154,6 +159,7 @@ function Venues(){
             isScheduling={isScheduling}
             schedules={schedules}
             setSchedules={setSchedules}
+            allVenues = {venueArray}
           />
         );
       }
@@ -176,6 +182,7 @@ function Venues(){
             isScheduling={null}
             schedules={null}
             setSchedules={null}
+            allVenues = {venueArray}
           />
         )
       }
@@ -198,6 +205,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);

From 94e143abd01295ea391e8ccd67dcce952699d66b Mon Sep 17 00:00:00 2001
From: AJ-222 <2538862@students.wits.ac.za>
Date: Tue, 1 Oct 2024 23:29:34 +0200
Subject: [PATCH 3/3] Removing time slots until work out how to incorporate

Co-authored-by: dullseagull <2543772@students.wits.ac.za>
---
 client/src/components/VenueRow.js | 1 -
 client/src/pages/Venues.js        | 1 -
 2 files changed, 2 deletions(-)

diff --git a/client/src/components/VenueRow.js b/client/src/components/VenueRow.js
index f38f24e..0163ef8 100644
--- a/client/src/components/VenueRow.js
+++ b/client/src/components/VenueRow.js
@@ -64,7 +64,6 @@ function VenueRow({id, buildingName, venueName, campus, venueType, venueCapacity
         venueName: venueName,
         campus: campus,
         capacity: venueCapacity,
-        timeSlots: timeSlots,
     };
 
 
diff --git a/client/src/pages/Venues.js b/client/src/pages/Venues.js
index 1e34221..5e0e985 100644
--- a/client/src/pages/Venues.js
+++ b/client/src/pages/Venues.js
@@ -123,7 +123,6 @@ function Venues(){
       venueName: venue.venueName,
       campus: venue.campus,
       capacity: venue.venueCapacity,
-      timeSlots: venue.timeSlots,
   }));
     //Map the elements of venueList onto VenueRow components and add them to an array
     const venueComponents = venueList.map((venue) => {