added filters for rent up and down and for cost per sqm

made filters appear only when city is choosen

angular/src/app/contactform/contactform.component.ts

@@ -37,7 +37,7 @@ export class ContactformComponent {
       message: this.message
     };
 
-    this.http.post('/api/contact', contactForm).subscribe(
+    this.http.post('/property/contact', contactForm).subscribe(
       () => {
         alert('Contact form submitted successfully!');
         // Reset the form fields

angular/src/app/models/property.ts

@@ -1,4 +1,5 @@
 export interface Property {
+  rentPerSqm: number;
   id: number;
   userId: number;
   externalId: string;

angular/src/app/property-list/property-list.component.css

@@ -54,22 +54,29 @@
 .contact-form.show {
   display: block; /* Show the contact form when the 'showContactForm' flag is set */
 }
-
-.property-filter {
-  margin-bottom: 20px;
+.property-filter select,
+.property-filter input[type="number"],
+.property-filter input[type="text"] {
+  margin-right: 10px;
+  height: 30px; /* Set a fixed height for all input fields */
 }
-
-.property-filter label {
+.property-filter button {
   margin-right: 10px;
 }
 
-.property-filter select,
 .property-filter input[type="number"] {
-  margin-right: 10px;
+  max-width: 100px; /* Limit the width of the number field */
+}
+
+.property-filter input[type="number"]::-webkit-inner-spin-button,
+.property-filter input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none; /* Remove the spinner arrows on number input */
+  margin: 0; /* Remove default margin */
 }
 
 .property-filter .apply-button {
   margin-left: 10px;
+  height: 30px; /* Set a fixed height for the apply button */
 }
 
 /* Adjust text size based on screen size */
@@ -84,3 +91,24 @@
     width: 100%; /* Set the width to 100% for single item on a row */
   }
 }
+.property-filter select,
+.property-filter input[type="number"],
+.property-filter input[type="text"] {
+  margin-right: 10px;
+  height: 30px; /* Set a fixed height for all input fields */
+}
+
+.property-filter input[type="number"] {
+  max-width: 100px; /* Limit the width of the number field */
+}
+
+.property-filter input[type="number"]::-webkit-inner-spin-button,
+.property-filter input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none; /* Remove the spinner arrows on number input */
+  margin: 0; /* Remove default margin */
+}
+
+.property-filter .apply-button {
+  margin-left: 10px;
+  height: 30px; /* Set a fixed height for the apply button */
+}

angular/src/app/property-list/property-list.component.html

@@ -3,28 +3,35 @@
 <h1>Properties</h1>
 
 <div class="property-filter">
-  <label for="city">City:</label>
+  City:
   <select [(ngModel)]="selectedCity" (change)="onCitySelect($event)">
-    <option value="">All Cities</option>
+    <option value="All Cities">All Cities</option>
     <option *ngFor="let city of distinctCities" [value]="city">{{ city }}</option>
   </select>
 
-  <label for="maxRent">     Max Rent:</label>
+  <label for="maxRent">Max Rent:</label>
   <input type="number" id="maxRent" name="maxRent" [(ngModel)]="maxRent">
 
-  <label for="gender">     Gender:</label>
+  <label for="gender">Gender:</label>
   <select id="gender" name="gender" [(ngModel)]="selectedGender">
     <option value="">All</option>
     <option value="Male">Male</option>
     <option value="Female">Female</option>
     <option value="Other">Other</option>
   </select>
 
+  <!-- Move the filter buttons inside the ngIf condition -->
   <button (click)="applyFilters()">Apply Filters</button>
-
+  <br><br>
+  <div *ngIf="showFilterButtons && selectedCity !== 'All Cities'">
+    <!-- Display the filter buttons only when the "Apply Filters" button is clicked and the selected city is not "All Cities" -->
+      <button (click)="filterRentUp(10)">Filter on rent UP</button>
+      <button (click)="filterRentDown(10)">Filter on rent DOWN</button>
+      <button (click)="filterSqmUp(10)">Filter on cost/sqm UP</button>
+      <button (click)="filterSqmDown(10)">Filter on cost/sqm DOWN</button>
+  </div>
 </div>
 
-
   <div class="property-grid">
   <div class="property-card" *ngFor="let property of properties?.content" [ngClass]="{'expanded': property === selectedProperty}">
     <div class="property-image">
@@ -34,6 +41,7 @@ <h1>Properties</h1>
     <div class="property-details">
       <p>{{ property.city }} - {{ property.propertyType }}</p>
       <p>{{ property.title }}, {{ property.postalCode }}</p>
+      <p><strong>Area (sqm):</strong> {{ property.areaSqm }}</p>
       <p><strong>Rent:</strong> € {{ property.rent }}</p>
       <p><strong> Additional Costs:</strong> € {{ property.additionalCosts }}</p>
       <p><strong>Deposit:</strong> € {{ property.deposit }}</p>
@@ -52,7 +60,7 @@ <h1>Properties</h1>
         <p>{{ property.descriptionTranslated }}</p>
         <!--<p><strong>Rent:</strong> € {{ property.rent }}<strong> Additional Costs:</strong> € {{ property.additionalCosts }}</p>
         <p><strong>Deposit:</strong> € {{ property.deposit }}</p>-->
-        <p><strong>Area (sqm):</strong> {{ property.areaSqm }}</p>
+
         <p><strong>Furnish:</strong> {{ property.furnish }}</p>
         <!--<p><strong>Latitude:</strong> {{ property.latitude }}</p>
         <p><strong>Longitude:</strong> {{ property.longitude }}</p>
@@ -67,7 +75,7 @@ <h1>Properties</h1>
         <p><strong>Energy Label:</strong> {{ property.energyLabel }}</p>
         <p><strong>Gender:</strong> {{ property.gender }}</p>
         <p><strong>Internet:</strong> {{ property.internet }}</p>
-<!--        <p><strong>Is Room Active:</strong> {{ property.isRoomActive }}</p>-->
+        <p><strong>Is Room Active:</strong> {{ property.isRoomActive }}</p>
         <p><strong>Kitchen:</strong> {{ property.kitchen }}</p>
         <p><strong>Living:</strong> {{ property.living }}</p>
         <p><strong>Match Age:</strong> {{ property.matchAge }}</p>

angular/src/app/property-list/property-list.component.ts

@@ -48,6 +48,8 @@ export class PropertyListComponent implements OnInit {
   selectedGender: string = '';
   id: number = 2;
   distinctCities: string[] = [];
+  showFilterButtons: boolean = false;
+
   currentPage = 1;
    constructor(
     private http: HttpClient,
@@ -59,9 +61,11 @@ export class PropertyListComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.applyFilters();
+    this.applyInit();
     this.getDistinctCities();
+    this.selectedCity = this.distinctCities.length > 0 ? '' : 'All Cities';
   }
+
   onCitySelect(event: any) {
     this.selectedCity = event.target.value;
   }
@@ -84,7 +88,7 @@ export class PropertyListComponent implements OnInit {
       (data: { cities: string[] }) => {
         this.distinctCities = data.toString().split(","); //data.split(",");
         if (this.distinctCities.length > 0) {
-          this.selectedCity = "all cities";
+          this.selectedCity = "All Cities";
         }
       },
       error => {
@@ -93,13 +97,33 @@ export class PropertyListComponent implements OnInit {
     );
 
   }
+  applyInit(): void {
+    console.log('Apply Filters clicked');
+    const apiUrl = 'http://localhost:8080/property';
+    const params: any = {};
+
+    if (this.selectedCity && this.selectedCity !== 'All Cities') {
+      params.city = this.selectedCity;
+    }
+    // Make the API call with the updated URL and query parameters
+    this.http.get<Page<Property>>(apiUrl, { params }).subscribe(
+      (data: Page<Property>) => {
+        console.log(data); // Log the API response
+        this.properties = data;
+        this.properties.content = this.properties.content.slice(0, 100);
+      },
+      (error) => {
+        console.error('Error retrieving properties:', error);
+      }
+    );
+  }
 
   applyFilters(): void {
     console.log('Apply Filters clicked');
     const apiUrl = 'http://localhost:8080/property';
     const params: any = {};
 
-    if (this.selectedCity) {
+    if (this.selectedCity && this.selectedCity !== 'All Cities') {
       params.city = this.selectedCity;
     }
 
@@ -121,7 +145,7 @@ export class PropertyListComponent implements OnInit {
         this.properties.content = this.properties.content.filter(property => {
           let meetsCriteria = true;
 
-          if (this.selectedCity && property.city !== this.selectedCity) {
+          if (this.selectedCity && this.selectedCity !== 'All Cities' && property.city !== this.selectedCity) {
             meetsCriteria = false;
           }
 
@@ -137,6 +161,9 @@ export class PropertyListComponent implements OnInit {
         });
 
         this.properties.content = this.properties.content.slice(0, 100);
+
+        // Set the flag to show the filter buttons only after the "Apply Filters" button is clicked
+        this.showFilterButtons = true;
       },
       (error) => {
         console.error('Error retrieving properties:', error);
@@ -145,6 +172,119 @@ export class PropertyListComponent implements OnInit {
   }
 
 
+  filterRentDown(topN: number): void {
+    if (this.selectedCity && this.selectedCity !== 'All Cities') {
+      const apiUrl = 'http://localhost:8080/property';
+      const params: any = {
+        city: this.selectedCity
+      };
+
+      // Make the API call with the updated URL and query parameters
+      this.http.get<Page<Property>>(apiUrl, { params }).pipe(
+        map((data: Page<Property>) => {
+          // Sort the properties based on rent in descending order
+          data.content.sort((a, b) => b.rent - a.rent);
+          return data;
+        }),
+        tap((data: Page<Property>) => {
+          // Get the top N properties
+          this.properties.content = data.content.slice(0, topN);
+        }),
+        catchError((error) => {
+          console.error('Error retrieving properties:', error);
+          return of(null);
+        })
+      ).subscribe();
+    }
+  }
+
+  filterRentUp(topN: number): void {
+    if (this.selectedCity && this.selectedCity !== 'All Cities') {
+      const apiUrl = 'http://localhost:8080/property';
+      const params: any = {
+        city: this.selectedCity
+      };
+
+      // Make the API call with the updated URL and query parameters
+      this.http.get<Page<Property>>(apiUrl, { params }).pipe(
+        map((data: Page<Property>) => {
+          // Sort the properties based on rent in ascending order
+          data.content.sort((a, b) => a.rent - b.rent);
+          return data;
+        }),
+        tap((data: Page<Property>) => {
+          // Get the top N properties
+          this.properties.content = data.content.slice(0, topN);
+        }),
+        catchError((error) => {
+          console.error('Error retrieving properties:', error);
+          return of(null);
+        })
+      ).subscribe();
+    }
+  }
+  filterSqmUp(topN: number): void {
+    if (this.selectedCity && this.selectedCity !== 'All Cities') {
+      const apiUrl = 'http://localhost:8080/property';
+      const params: any = {
+        city: this.selectedCity
+      };
+
+      // Make the API call with the updated URL and query parameters
+      this.http.get<Page<Property>>(apiUrl, { params }).pipe(
+        map((data: Page<Property>) => {
+          // Calculate rent per sqm for each property
+          data.content.forEach(property => {
+            property.rentPerSqm = property.rent / property.areaSqm;
+          });
 
+          // Sort the properties based on rent per sqm in ascending order
+          data.content.sort((a, b) => a.rentPerSqm - b.rentPerSqm);
+
+          return data;
+        }),
+        tap((data: Page<Property>) => {
+          // Get the top N properties
+          this.properties.content = data.content.slice(0, topN);
+        }),
+        catchError((error) => {
+          console.error('Error retrieving properties:', error);
+          return of(null);
+        })
+      ).subscribe();
+    }
+  }
+
+  filterSqmDown(topN: number): void {
+    if (this.selectedCity && this.selectedCity !== 'All Cities') {
+      const apiUrl = 'http://localhost:8080/property';
+      const params: any = {
+        city: this.selectedCity
+      };
+
+      // Make the API call with the updated URL and query parameters
+      this.http.get<Page<Property>>(apiUrl, { params }).pipe(
+        map((data: Page<Property>) => {
+          // Calculate rent per sqm for each property
+          data.content.forEach(property => {
+            property.rentPerSqm = property.rent / property.areaSqm;
+          });
+
+          // Sort the properties based on rent per sqm in descending order
+          data.content.sort((a, b) => b.rentPerSqm - a.rentPerSqm);
+
+          return data;
+        }),
+        tap((data: Page<Property>) => {
+          // Get the top N properties
+          this.properties.content = data.content.slice(0, topN);
+        }),
+        catchError((error) => {
+          console.error('Error retrieving properties:', error);
+          return of(null);
+        })
+      ).subscribe();
+    }
+  }
 
 }

src/main/java/com/example/studenthousing/AppConfig.java

@@ -1,18 +1,19 @@
 package com.example.studenthousing;
 import javax.persistence.EntityManagerFactory;
-
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.data.jpa.repository.config.EnableJpaRepositories;
 import org.springframework.orm.jpa.JpaTransactionManager;
 import org.springframework.orm.jpa.LocalEntityManagerFactoryBean;
 import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
 import org.springframework.security.crypto.password.PasswordEncoder;
+import org.springframework.beans.factory.annotation.Value;
 
 
 @Configuration
 @EnableJpaRepositories(basePackages = {"com.example.studenthousing"})
 public class AppConfig {
+
     @Bean
     public LocalEntityManagerFactoryBean entityManagerFactory() {
         LocalEntityManagerFactoryBean factoryBean = new LocalEntityManagerFactoryBean();
@@ -37,9 +38,9 @@ public PasswordEncoder encoder() {
 
     @Configuration
     public class EmailConfig {
-        private final String senderEmail = "your-sender-email@example.com"; // Replace with your sender email
-        private final String senderPassword = "your-sender-password"; // Replace with your sender email password
-        private final String smtpHost = "your-smtp-host"; // Replace with your SMTP host (e.g., "smtp.gmail.com")
+        private final String senderEmail = "codegorilla9@gmail.com"; // Replace with your sender email
+        private final String senderPassword = "CGA@2023"; // Replace with your sender email password
+        private final String smtpHost = "smtp.gmail.com"; // Replace with your SMTP host (e.g., "smtp.gmail.com")
         private final int smtpPort = 587; // Replace with your SMTP port (e.g., 587 for TLS)
 
         @Bean

src/main/java/com/example/studenthousing/controller/ContactFormController.java

@@ -23,7 +23,7 @@ public ContactFormController(EmailSender emailSender) {
     @PostMapping("/contact")
     public ResponseEntity<String> submitContactForm(@RequestBody ContactForm contactForm) {
         try {
-            String recipientEmail = "your-email@example.com";  // Replace with your desired recipient email address
+            String recipientEmail = "codegorilla9@gmail.com";  // Replace with your desired recipient email address
             String subject = "New Contact Form Submission";
             String body = "Name: " + contactForm.getName() + "\n"
                     + "Email: " + contactForm.getEmail() + "\n"