CSS aangepast

isRoomActive filter added

angular/src/app/app.component.css

@@ -0,0 +1,4 @@
+.container {
+  padding-left: 10px;
+  padding-right: 10px;
+}

angular/src/app/app.component.html

@@ -1,10 +1,11 @@
+<div class="container">
 <img src="{{ logoUrl }}" alt="Logo"><br><br>
 
 <button (click)="showFormComponent()">New property</button>
 <button (click)="showRegisterComponent()">New user</button>
 <button (click)="showListComponent()">Properties</button>
 <button (click)="showUserAddComponent()">Write Advertisement</button>
-
+</div>
 <router-outlet></router-outlet>
 
 

angular/src/app/contactform/contactform.component.css

@@ -0,0 +1,19 @@
+.form-container {
+  width: 200%; /* Adjust the width as needed */
+}
+
+.form-container form {
+  width: 50%; /* Adjust the width as needed */
+  margin: 0 auto; /* Center the form horizontally */
+}
+
+.form-container label,
+.form-container input,
+.form-container textarea {
+  width: 100%; /* Make the form fields occupy the full width of the form */
+  box-sizing: border-box; /* Include padding and border in the width calculation */
+}
+
+.form-container button[type="submit"] {
+  width: auto; /* Allow the submit button to adjust its width based on content */
+}

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

@@ -5,6 +5,8 @@ import { HttpClient } from '@angular/common/http';
 @Component({
   selector: 'app-contactform',
   template: `
+    <div class="form-container">
+
     <h2>Contact Form</h2>
     <form (submit)="submitForm()">
       <div>

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

@@ -1,3 +1,9 @@
+.container {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+
 .property-grid {
   display: flex;
   flex-wrap: wrap;
@@ -53,6 +59,8 @@
 
 .contact-form.show {
   display: block; /* Show the contact form when the 'showContactForm' flag is set */
+  width: 200%; /* Make the form occupy double the width */
+
 }
 .property-filter select,
 .property-filter input[type="number"],

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

@@ -1,5 +1,5 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
-
+<div class = 'container'>
 <h1>Properties</h1>
 
 <div class="property-filter">
@@ -25,10 +25,12 @@ <h1>Properties</h1>
   <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>
+    <p>Number of properties to show: <input type="number" id="topN" name="topN" [(ngModel)]="topN">
+    <button (click)="filterRentUp()">Filter on rent UP</button>
+      <button (click)="filterRentDown()">Filter on rent DOWN</button>
+      <button (click)="filterSqmUp()">Filter on cost/sqm UP</button>
+      <button (click)="filterSqmDown()">Filter on cost/sqm DOWN</button>
+    </p>
   </div>
 </div>
 
@@ -58,9 +60,6 @@ <h1>Properties</h1>
         </div>
 <!--        <h2>{{ property.title }}</h2>-->
         <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>Furnish:</strong> {{ property.furnish }}</p>
         <!--<p><strong>Latitude:</strong> {{ property.latitude }}</p>
         <p><strong>Longitude:</strong> {{ property.longitude }}</p>
@@ -120,3 +119,4 @@ <h1>Properties</h1>
     </div>
   </div>
   </div>
+</div>

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

@@ -49,6 +49,7 @@ export class PropertyListComponent implements OnInit {
   id: number = 2;
   distinctCities: string[] = [];
   showFilterButtons: boolean = false;
+  topN: number = 10;
 
   currentPage = 1;
    constructor(
@@ -172,7 +173,7 @@ export class PropertyListComponent implements OnInit {
   }
 
 
-  filterRentDown(topN: number): void {
+  filterRentDown(): void {
     if (this.selectedCity && this.selectedCity !== 'All Cities') {
       const apiUrl = 'http://localhost:8080/property';
       const params: any = {
@@ -188,7 +189,7 @@ export class PropertyListComponent implements OnInit {
         }),
         tap((data: Page<Property>) => {
           // Get the top N properties
-          this.properties.content = data.content.slice(0, topN);
+          this.properties.content = data.content.slice(0, this.topN);
         }),
         catchError((error) => {
           console.error('Error retrieving properties:', error);
@@ -198,7 +199,7 @@ export class PropertyListComponent implements OnInit {
     }
   }
 
-  filterRentUp(topN: number): void {
+  filterRentUp(): void {
     if (this.selectedCity && this.selectedCity !== 'All Cities') {
       const apiUrl = 'http://localhost:8080/property';
       const params: any = {
@@ -214,7 +215,7 @@ export class PropertyListComponent implements OnInit {
         }),
         tap((data: Page<Property>) => {
           // Get the top N properties
-          this.properties.content = data.content.slice(0, topN);
+          this.properties.content = data.content.slice(0, this.topN);
         }),
         catchError((error) => {
           console.error('Error retrieving properties:', error);
@@ -223,7 +224,7 @@ export class PropertyListComponent implements OnInit {
       ).subscribe();
     }
   }
-  filterSqmUp(topN: number): void {
+  filterSqmUp(): void {
     if (this.selectedCity && this.selectedCity !== 'All Cities') {
       const apiUrl = 'http://localhost:8080/property';
       const params: any = {
@@ -245,7 +246,7 @@ export class PropertyListComponent implements OnInit {
         }),
         tap((data: Page<Property>) => {
           // Get the top N properties
-          this.properties.content = data.content.slice(0, topN);
+          this.properties.content = data.content.slice(0, this.topN);
         }),
         catchError((error) => {
           console.error('Error retrieving properties:', error);
@@ -255,7 +256,7 @@ export class PropertyListComponent implements OnInit {
     }
   }
 
-  filterSqmDown(topN: number): void {
+  filterSqmDown(): void {
     if (this.selectedCity && this.selectedCity !== 'All Cities') {
       const apiUrl = 'http://localhost:8080/property';
       const params: any = {
@@ -277,7 +278,7 @@ export class PropertyListComponent implements OnInit {
         }),
         tap((data: Page<Property>) => {
           // Get the top N properties
-          this.properties.content = data.content.slice(0, topN);
+          this.properties.content = data.content.slice(0, this.topN);
         }),
         catchError((error) => {
           console.error('Error retrieving properties:', error);

src/main/java/com/example/studenthousing/repository/PropertyRepository.java

@@ -10,17 +10,17 @@
 import org.springframework.data.repository.query.Param;
 
 public interface PropertyRepository extends JpaRepository<Property, Integer> {
-    @Query("SELECT p FROM Property p ORDER BY p.id ASC")
+    @Query("SELECT p FROM Property p WHERE p.isRoomActive = 'true' ORDER BY p.id ASC")
     List<Property> findFirst10Properties(Pageable pageable);
 
     Optional<Property> findPropertyById(int id);
 
-    @Query("SELECT DISTINCT p.city FROM Property p ORDER BY p.city ASC ")
+    @Query("SELECT DISTINCT p.city FROM Property p WHERE p.isRoomActive = 'true' ORDER BY p.city ASC ")
     List<String> findAllDistinctCities();
 
-    @Query("SELECT p FROM Property p WHERE p.city = :city ORDER BY p.rent ASC ")
+    @Query("SELECT p FROM Property p WHERE p.city = :city AND p.isRoomActive = 'true' ORDER BY p.rent ASC ")
     Page<Property> findByCity(@Param("city") String city, Pageable pageable);
 
-    @Query("SELECT p FROM Property p WHERE p.id = :id")
+    @Query("SELECT p FROM Property p WHERE p.id = :id AND p.isRoomActive = 'true' ")
     Page<Property> findById(@Param("id") Integer id, Pageable pageable);
 }