IlanSimchon · ChenLipschitz · Feb 11, 2024 · Feb 11, 2024 · Feb 11, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "antd": "^5.13.2",
     "body-parser": "^1.20.2",
     "express": "^4.18.2",
+    "lite-server": "^2.6.1",
     "mongoose": "^8.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/src/apartment.css b/src/apartment.css
@@ -1,39 +1,85 @@
  body {
      font-family: Arial, sans-serif;
-     margin: 0;
      padding: 0;
-     background-color: #f4f4f4;
+     background-color: white;
  }
+
+ h1 {
+    font-size: 3em;
+    color: #db9d00;
+    margin-top: 60px;
+    margin-bottom: 0;
+    text-align: center;
+}
+
+.content {
+    max-width: 800px;
+    margin: 10 auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-content: center;
+}
+
 .apartment {
-    width: 80%;
-    margin: 20px auto;
-    background-color: #fff;
-    border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: row-reverse;
+    background-size: cover;
+    border-radius: 30px;
     overflow: hidden;
+    max-width: 100%;
+    min-height: 530px;
+    min-width: 1200px;
 }
 .apartment img {
-    max-width: 50%;
+    max-width: 45%;
     height: auto;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
+    padding: 20px;
 }
-.details {
+
+.apartment_details {
     padding: 20px;
 }
-.details h2 {
+
+.apartment_details h2 {
     margin-top: 0;
     font-size: 24px;
     color: #333;
     border-bottom: 2px solid #ff8c00;
     padding-bottom: 10px;
 }
-.details p {
+
+.apartment_details p {
     margin: 0;
     font-size: 16px;
     color: #666;
     margin-bottom: 10px;
 }
-.details p:first-child {
+/* 
+.apartment_details p:first-child {
     margin-top: 10px
+} */
+
+.apartment-details i {
+    margin-right: 18px; /* Adjust the margin as needed */
+}
+
+
+.menu a {
+    padding: 20px 10px;
+    text-decoration: none;
+    font-size: 15px;
+    color: #818181;
+}
+
+.menu a:hover {
+    color: #007bff;
+}
+
+.owl-carousel {
+    margin-top: 20px;
 }
diff --git a/src/apartment.html b/src/apartment.html
@@ -6,18 +6,55 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Apartment Details</title>
     <link rel="stylesheet" href="apartment.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
+    <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
 </head>
+
 <body>
-<div class="apartment">
-    <img src="back.jpg" alt="Apartment Image">
-    <div class="details">
-        <h2>Location: New York City</h2>
-        <p>Price Per Night: $150</p>
-        <p>Availability: 2024-02-10 to 2024-02-15</p>
-        <p>Reviews: "Great location, comfortable stay."</p>
-        <p>Average Rate: 4.5</p>
-        <p>Connection Details: "Moshe: 0523334444"</p>
+    <div id="menu" class="menu">
+        <a href="http://127.0.0.1:5500/src/homePage.html"><i class="fa fa-fw fa-home"></i> Home</a>
+        <a href="#login_house_owner"><i class="fa fa-fw fa-key"></i> Login As A House Owner</a>
+        <a href="#my_profile"><i class="fa fa-fw fa-user"></i> My Profile</a>
+        <!-- <a href="#contact"><i class="fa fa-fw fa-envelope"></i> Contact Us</a> -->
+        <a href="#log_out"><i class="fa fa-fw fa-lock"></i> Log Out</a>
+    </div>
+    <h1>Maybe This Is Your Match...</h1>
+    <div class="apartment">
+        <img src="back.jpg" alt="Apartment Image">
+
+        <div id="apartment_details" class="apartment_details">
+            <!-- Dynamic apartment details will be inserted here -->
+        </div>
     </div>
-</div>
+    <script>
+        // Function to parse URL parameters
+        function getUrlParams() {
+            const params = {};
+            const queryString = window.location.search;
+            const urlParams = new URLSearchParams(queryString);
+            for (const [key, value] of urlParams) {
+                params[key] = value;
+            }
+            return params;
+        }
+
+        // Get the URL parameters
+        const params = getUrlParams();
+
+        // Display apartment details with icons
+        const apartmentDetailsContainer = document.getElementById('apartment_details');
+        apartmentDetailsContainer.innerHTML = `
+            <h2><i class="fas fa-map-marker-alt"></i> Location: ${params['location']}</h2>
+            <p><i class="fas fa-sack-dollar"></i> Price Per Night: ${params['pricePerNight']}</p>
+            <p><i class="far fa-calendar-alt"></i> Availability: ${params['availability']}</p>
+            <p><i class="far fa-star"></i> Reviews: ${params['reviews']}</p>
+            <p><i class="fas fa-star"></i> Average Rate: ${params['avgRate']}</p>
+            <p><i class="far fa-address-card"></i> Connection Details: ${params['connectionDetails']}</p>
+        `;
+    </script>
 </body>
-</html>
+
+</html>
diff --git a/src/apartment.js b/src/apartment.js
@@ -1 +1,40 @@
+export class Apartment {
+    constructor(apartmentId) {
+        // Initialize apartment ID
+        this.apartmentId = apartmentId;
 
+        // Call getApartmentDetails method with the apartmentId
+        this.getApartmentDetails();
+    }
+
+    async getApartmentDetails() {
+        try {
+            // Fetch apartment details from the server using apartmentId
+            const response = await fetch(`http://localhost:63341/ApartmentByID/${this.apartmentId}`);
+            const apartmentDetails = await response.json();
+
+            console.log(apartmentDetails);
+
+            // Call a method to display apartment details
+            this.displayApartmentDetails(apartmentDetails);
+        } catch (error) {
+            console.error('Error fetching apartment details:', error);
+        }
+    }
+
+    displayApartmentDetails(apartmentDetails) {
+        // Construct the query parameters string
+        const queryParams = new URLSearchParams({
+            location: apartmentDetails.location,
+            pricePerNight: apartmentDetails.pricePerNight,
+            availability: JSON.stringify(apartmentDetails.availability),
+            reviews: apartmentDetails.reviews,
+            avgRate: apartmentDetails.avgRate,
+            photo: apartmentDetails.photo,
+            connectionDetails: apartmentDetails.connectionDetails
+        });
+
+        // Redirect to apartment.html with query parameters
+        window.location.href = `apartment.html?${queryParams.toString()}`;
+    }
+}
diff --git a/src/homePage.css b/src/homePage.css
@@ -15,7 +15,7 @@
 }
 
 h1 {
-    font-size: 3.5em;
+    font-size: 3em;
     color: #db9d00;
     margin-bottom: 0px;
     display: contents;
@@ -30,6 +30,10 @@ h1 {
     align-content: center;
 }
 
+body {
+    font-family: Arial, sans-serif;
+}
+
 .apartment-box {
     box-sizing: border-box;
     width: calc(50% - 20px);
@@ -50,14 +54,6 @@ h1 {
     margin-top: 10px;
 }
 
-#menuButton {
-    position: fixed;
-    top: 20px;
-    left: 20px;
-    z-index: 999;
-    /* Ensure it's on top of other elements */
-}
-
 
 .filter-bar {
     display: flex;
@@ -86,12 +82,12 @@ h1 {
 
 
 .menu a {
-    padding: 6px 8px 6px 16px;
+    padding: 20px 10px;
     text-decoration: none;
-    font-size: 20px;
+    font-size: 15px;
     color: #818181;
 }
 
 .menu a:hover {
     color: #007bff;
-}
+}
diff --git a/src/homePage.html b/src/homePage.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Inner Page</title>
+    <title>Home Page Subtenant</title>
     <link rel="stylesheet" href="homePage.css"> <!-- Include the global styles -->
     <link rel="stylesheet" href="homePage.css"> <!-- Include the specific styles for homePage.html -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@@ -14,11 +14,11 @@
 
 <body>
     <div id="menu" class="menu">
-        <a href="file:///C:/Users/chenl/.vscode/SubNet/src/homePage.html"><i class="fa fa-fw fa-home"></i> Home</a>
-        <a href="#login_house_owner"><i class="fa fa-fw fa-wrench"></i> Login As A House Owner</a>
+        <a href="http://127.0.0.1:5500/src/homePage.html"><i class="fa fa-fw fa-home"></i> Home</a>
+        <a href="#login_house_owner"><i class="fa fa-fw fa-key"></i> Login As A House Owner</a>
         <a href="#my_profile"><i class="fa fa-fw fa-user"></i> My Profile</a>
-        <a href="#contact"><i class="fa fa-fw fa-envelope"></i> Contact Us</a>
-
+        <!-- <a href="#contact"><i class="fa fa-fw fa-envelope"></i> Contact Us</a> -->
+        <a href="#log_out"><i class="fa fa-fw fa-lock"></i> Log Out</a>
     </div>
     <div class="container">
         <h1>Find Your Match!</h1>
@@ -34,10 +34,9 @@ <h1>Find Your Match!</h1>
                 <button type="button" id="advancedFilterButton">Advanced Filter</button>
             </form>
         </div>
-        <div class="content">
-        </div>
+        <div class="content"></div>
     </div>
-    <script src="homePage.js"></script>
+    <script type="module" src="homePage.js"></script>
 </body>
 
 </html>