Recherche avancée

Author: *rkeita31*

src/app/components/login/login.component.html

@@ -17,15 +17,32 @@
   }
 
   .form-group {
-
+    position: relative;
     background-color: none;
     margin-top: 5%;
     border-width: 10px;
     border-color: rgb(194, 93, 53);
     border-style:groove;
     border-radius: 15px;
 
-    
+  }
+
+  .form-group input{
+    border: 1px solid #ddd;
+    height : 40px;
+    padding: 0 15px;
+    border-radius: 5px;
+    font-size: 15px;
+    width: 100%;
+
+  }
+
+  .eyeicon{
+    position: absolute;
+    right: 60px;
+    top: 175px;
+    cursor: pointer;
+
   }
 
 
@@ -45,7 +62,10 @@ <h1>Connectez vous</h1>
       </div>
       <div>
         <label for="password">Mot de passe</label>
-        <input type="text" class="form-control" [(ngModel)]="credentials.password" name="password">
+        <input [type]="changetype? 'password' : 'text'" class="form-control" [(ngModel)]="credentials.password" name="password">
+        <span class = "eyeicon" (click)="viewpass()"><i [ngClass]="visible?'fa fa-eye' : 'fa fa-eye-slash'"></i>
+
+        </span>
         <br>
       </div>
       <button class="btn btn-warning" type="submit">Se connecter</button>

src/app/components/login/login.component.ts

@@ -16,13 +16,20 @@ export class LoginComponent implements OnInit {
   username!: string;
   password!: string;
   credentials = { username: '', password: '' }
+  visible:boolean = true;
+  changetype:boolean = true;
+
   constructor(private appService: AppService, private httpClient: HttpClient, private router: Router) { }
 
 
   login() {
     this.appService.authenticate(this.credentials, () => { this.router.navigateByUrl("/home") });
   }
 
+  viewpass(){
+    this.visible = !this.visible
+    this.changetype = !this.changetype;
+  }
 
   /*onSubmit(form:NgForm) {
     // Récupération des données du formulaire

src/app/components/registration/registration.component.html

@@ -49,6 +49,7 @@ <h3 class="card-title">Creer un compte</h3>
                     <div class="row">
                         <div class="update ml-auto mr-auto">
                             <button class="btn btn-primary btn-round" name="btn1">Valider</button>
+                    
                         </div>
                     </div>
                 </form>

src/app/components/registration/registration.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 import { Utilisateur } from 'app/model/utilisateur';
 import { UtilisateurService } from 'app/services/utilisateur.service';
@@ -15,7 +15,7 @@ export class RegistrationComponent implements OnInit {
 
   utilisateur: Utilisateur = new Utilisateur();
   myForm: FormGroup;
-  constructor(private utilisateurService: UtilisateurService, private router: Router) { }
+  constructor(private fb:FormBuilder, private utilisateurService: UtilisateurService, private router: Router) { }
   ngOnInit(): void {
     this.saveUtilisateur();
 
@@ -26,16 +26,19 @@ export class RegistrationComponent implements OnInit {
 
   }
 
+  onSubmit() {
+    const password = this.myForm.get('password').value;
+    const hashedPassword = bcrypt.hashSync(password);
+    }
+
+
+
   saveUtilisateur() {
     this.utilisateurService.save(this.utilisateur).subscribe(
       () => {
         this.utilisateur = new Utilisateur();
       }
     )
   }
-  onSubmit() {
-    const password = this.myForm.get('password').value;
-    const hashedPassword = bcrypt.hashSync(password, 10);
-
-}
+ 
 }

src/app/table-list/table-list.component.html

@@ -1,13 +1,77 @@
+
 <div class="main-content">
     <div class="container-fluid">
         <div class="row">
-            <div class="col-md-12">
-                <p>Ici on pourra mettre des exmples d'offres, genre villa pas cher, appart parisien au top, etc.</p>
-            </div>
-            <div class="col-md-12">
-                <p>Ici on pourra mettre un bouton et un champ pour faire des recherches spécifique</p>
-                <button mat-raised-button type="submit" class="btn btn-danger pull-right">Lancer la recherche !</button>
+            <div id="rechercheavancee" class="col-md-12">
+    <form (ngSubmit)="onSubmit()" class="form-group col-md-6">
+        <label for="ville">Ville :</label>
+        <input class="form-control" type="text" name="ville" [(ngModel)]="ville">
+  
+        <label for="typeOffre">Type d'offre :</label>
+        <input class="form-control" type="text" name="typeOffre" [(ngModel)]="typeOffre">
+
+        <label for="prix">Prix :</label>
+        <input class="form-control" type="number" name="prix" [(ngModel)]="prix">
+
+        <label for="surface">Surface :</label>
+        <input class="form-control" type="number" name="surface" [(ngModel)]="surface">
+
+        <label for="orientation">Orientation : </label>
+        <input class="form-control" type="text" name="orientation" [(ngModel)]="orientation">
+
+        <label for="bien">Type de Biens :</label>
+        <select name="bien" [(ngModel)]="bien">
+        <option value="appartement">Appartement</option>
+        <option value="maison">Maison</option>
+        <option value="maison">Garage</option>
+        <option value="maison">Terrain</option>
+        </select>
+        <button mat-raised-button type="submit" class="btn btn-danger pull-right" (click)="rechercher()">Rechercher</button>
+  </form>
+    </div>
+    <div>
+        <input type="button" name="boutonrecherche" class="boutonrecherche" id="boutonrecherche" value="Faire une recherche">
+
+    </div>
+    <div class="row">
+        <div class="col-md-12">
+          <div class="card">
+            <div class="card-header">
+              <h4 class="card-title"></h4>
             </div>
+            <div class="card-body">
+                <!-- <table>
+                    <thead>
+                        <tr>
+                            <th scope="col">imageOffre</th>
+                            <th scope="col">description</th>
+                            <th scope="col">ville</th>
+                            <th scope="col">adresse</th>
+                            <th scope="col">surfaceOffre</th>
+                            <th scope="col">orientationOffre</th>
+                            <th scope="col">etatOffre</th>
+                            <th scope="col">typeOffre</th>
+                            <th scope="col">prixOffre</th>
+                            <th scope="col">disponibiliteOffre</th>                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr *ngFor="let o of offreRecherche">
+                            <td>{{o.imageOffre}}</td>
+                            <td>{{o.description}}</td>
+                            <td>{{o.ville}}</td>
+                            <td>{{o.adresse}}</td>
+                            <td>{{o.surfaceOffre}}</td>
+                            <td>{{o.orientationOffre}}</td>
+                            <td>{{o.etatOffre}}</td>
+                            <td>{{o.typeOffre}}</td>
+                            <td>{{o.prixOffre}}</td>
+                            <td>{{o.disponibiliteOffre}}</td>
+                        </tr>
+
+                    </tbody>
+                </table> -->
+
+
 
             <!--Table d'affichage des offres-->
             <div class="container-fluid mt--7">

src/app/table-list/table-list.component.ts

@@ -1,3 +1,4 @@
+import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { AppService } from 'app/app.service';
@@ -12,17 +13,54 @@ import { OffreService } from 'app/services/offre.service';
 export class TableListComponent implements OnInit {
 
   offres: any[];
+  offreRecherche: any;
+  bien : any;
+  ville: string;
+  typeOffre: string;
+  prix: number;
+  surface: number;
+  orientation: string;
+
+
 
   offre: Offre = new Offre();
 
-  constructor(private offreService: OffreService, private appService: AppService, private router: Router) { }
+  constructor(private httpClient:HttpClient, private offreService: OffreService, private appService: AppService, private router: Router) { }
 
   ngOnInit() {
     this.findAllOffre();
-  }
+    this.ville ='';
+    this.typeOffre = '';
+    this.prix = 0;
+    this.surface = 0;
+    this.orientation = '';
+    this.bien = '';
+    this.rechercher();
+
+
+
+    $(document).ready(function(){
+      $("#rechercheavancee").hide(); 
+    $("#boutonrecherche").click(function(){
+      $("#rechercheavancee").toggle(2500); 
+  });
+});
+}
 
   findAllOffre() {
     this.offreService.findAll().subscribe(data => { this.offres = data; });
   }
 
+  rechercher(){
+    const url = `/table-list/recherche?ville=${this.ville}&type=${this.typeOffre}
+    &prix=${this.prix}&surface=${this.surface}&orientation=${this.orientation}`;
+    this.httpClient.get<any[]>(url).subscribe(data => {
+      this.bien = data;
+    });
+  }
+
+  onSubmit(){
+    this.rechercher();
+  }
+
 }