Add api

src/app/app.module.ts

@@ -4,6 +4,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http'; 
 
 /* Essentials */
 import { HeaderComponent } from './components/essentials/header/header.component';
@@ -30,7 +31,8 @@ import { CarItemComponent } from './components/cars/car-item/car-item.component'
   imports: [
     BrowserModule,
     AppRoutingModule,
-    FormsModule
+    FormsModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/cars/car-form/car-form.component.ts

@@ -30,11 +30,29 @@ export class CarFormComponent {
   }
 
   saveCar() {
+    // Vérifie que l'objet car a les bonnes propriétés
+    console.log('Car avant image:', this.car);
+  
+    // Récupération de l'image via l'API
+    const { marque, modele, couleur } = this.car;
+    this.carService.getCarImage(marque, modele, couleur).subscribe((imageUrl) => {
+  
+      // Mise à jour de l'objet car avec l'image
+      const carWithImage = { ...this.car, image: imageUrl };
+  
       if (this.editMode) {
-      this.carService.updateCar(this.car);
+        // Mise à jour de la voiture
+        this.carService.updateCar(carWithImage);
       } else {
-      this.carService.addCar(this.car);
+        // Ajout de la nouvelle voiture
+        this.carService.addCar(carWithImage);
       }
+  
+      // Redirection après l'ajout/mise à jour
       this.router.navigate(['/list']);
+    }, error => {
+      // Gestion des erreurs
+      console.error('Erreur lors de la récupération de l\'image:', error);
+    });
   }
 }

src/app/components/cars/car-list/car-list.component.html

@@ -1,6 +1,40 @@
-<h2>Liste des Voitures</h2>
+<div class="container py-4">
-<div *ngFor="let car of cars" class="card p-2 mb-2 bg-dark text-white">
+  <div class="text-center mb-5">
-  <div>{{ car.marque }} - {{ car.modele }} - {{ car.couleur }}</div>
+    <h2 class="fw-bold display-6">Liste des Voitures</h2>
-  <button class="btn btn-danger" (click)="deleteCar(car.id)">Supprimer</button>
+    <p class="text-dark">Visualisez et gérez vos véhicules enregistrés</p>
-  <button class="btn btn-warning" (click)="editCar(car.id)">Modifier</button>
+  </div>
+
+  <div class="table-responsive shadow-lg rounded-4 overflow-hidden">
+    <table class="table table-dark table-hover text-white align-middle m-0">
+      <thead class="bg-primary text-white">
+        <tr>
+          <th scope="col">Image</th>
+          <th scope="col">Marque</th>
+          <th scope="col">Modèle</th>
+          <th scope="col">Couleur</th>
+          <th scope="col" class="text-end">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let car of cars">
+          <td>
+            <img [src]="car.image" alt="Image voiture" width="100" height="60" class="rounded">
+          </td>
+          <td class="fw-semibold">{{ car.marque }}</td>
+          <td>{{ car.modele }}</td>
+          <td>
+            <span>{{ car.couleur }}</span>
+          </td>
+          <td class="text-end">
+            <button class="btn btn-sm btn-warning me-2" (click)="editCar(car.id)">
+              <i class="bi bi-pencil-square me-1"></i>Modifier
+            </button>
+            <button class="btn btn-sm btn-danger" (click)="deleteCar(car.id)">
+              <i class="bi bi-trash me-1"></i>Supprimer
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </div>

src/app/components/essentials/footer/footer.component.html

@@ -1,8 +1,8 @@
-<footer class="bg-primary text-white py-3">
+<footer class="bg-primary-custom text-white py-3">
     <div class="container">
-        <div class="row align-items-center">
+      <div class="row justify-content-center">
-            <div class="col-md-4 d-flex align-items-center text-start">
+        <div class="col-md-auto d-flex align-items-center justify-content-center">
-                <img src="/favicon.ico" alt="Angular Covid" height="50" class="me-2">
+          <img src="/favicon.ico" alt="Angular Car" height="50" class="me-2">
           <span class="fs-4 fw-bold">Angular Car</span>
         </div>
       </div>
@@ -11,3 +11,4 @@
       </div>
     </div>
   </footer>
+  

src/app/components/essentials/header/header.component.html

@@ -1,5 +1,5 @@
 <!-- Navbar Bootstrap -->
-<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+<nav class="navbar navbar-expand-lg navbar-dark bg-primary-custom">
     <div class="container">
         <a class="navbar-brand" routerLink="/">Angular Car</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">

src/app/interfaces/car.ts

@@ -3,4 +3,5 @@ export interface Car {
     marque: string;
     modele: string;
     couleur: string;
+    image?: string;
 }

src/app/services/car.service.ts

@@ -1,5 +1,8 @@
 import { Injectable } from '@angular/core';
-
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Observable, map, of } from 'rxjs';
+import { catchError } from 'rxjs/operators'; 
 import { Car } from '../interfaces/car';
 
 @Injectable({
@@ -7,11 +10,14 @@ import { Car } from '../interfaces/car';
 })
 export class CarService {
   private cars: Car[] = [
-    { id: 1, marque: 'Toyota', modele: 'Yaris', couleur: 'Rouge' },
+    { id: 1, marque: 'Toyota', modele: 'Yaris', couleur: 'Rouge', image: 'https://www.autoscout24.fr/cms-content-assets/1cPqBR2VWZf6dMHkKJ49R9-4a9d735fb0c54afe00fe00066a08a6b7-AS24-yaris_banner-1100.jpg' },
-    { id: 2, marque: 'Peugeot', modele: '307', couleur: 'Blanche' },
+    { id: 2, marque: 'Peugeot', modele: '307', couleur: 'Blanche', image: 'https://img.leboncoin.fr/api/v1/lbcpb1/images/3c/c7/e6/3cc7e6b624cd631eb7247bf40ab52b0b32fa106b.jpg?rule=ad-large' },
-    { id: 3, marque: 'Renault', modele: 'Clio', couleur: 'Blanche' },
+    { id: 3, marque: 'Renault', modele: 'Clio', couleur: 'Blanche', image: 'https://img.leboncoin.fr/api/v1/lbcpb1/images/ca/a5/97/caa5971e8997134dd28d400bc6b9f5e64f8bea66.jpg?rule=ad-large' },
+    { id: 4, marque: 'Mitsuoka', modele: 'Orochi', couleur: 'Violet', image: 'https://www.hpiracing.com/assets/images/cache/8403_8403_01p_800_600.jpg' },
   ];
 
+  constructor(private http: HttpClient) { }
+
   getCars(): Car[] {
     return this.cars;
   }
@@ -20,6 +26,25 @@ export class CarService {
     return this.cars.find(c => c.id === id);
   }
 
+  getCarImage(marque: string, modele: string, couleur: string): Observable<string> {
+    const query = `${marque} ${modele} ${couleur}`;
+    const apiKey = 'AIzaSyCFHuH3yQTHLWJVRS_qI3gMAlOkiPGMkFo'; // Ta clé API Google Custom Search
+    const cx = 'd70d26c240c084efc'; // Remplace cela par l'ID de ton moteur de recherche personnalisé
+    const apiUrl = `https://www.googleapis.com/customsearch/v1?q=${encodeURIComponent(query)}&searchType=image&key=${apiKey}&cx=${cx}&num=1`;
+
+    return this.http.get<any>(apiUrl).pipe(
+      map((res) => {
+        console.log('Réponse de l\'API Google Custom Search:', res);  // Ajout d'un log pour vérifier la réponse de l'API
+        return res.items?.[0]?.link || 'https://via.placeholder.com/100x60?text=Voiture';
+      }),
+      catchError((error: HttpErrorResponse) => {
+        // Gestion de l'erreur avec un typage explicite
+        console.error('Erreur dans l\'appel API Google Custom Search:', error);
+        return of('https://via.placeholder.com/100x60?text=Voiture');
+      })
+    );
+}
+
   addCar(car: Car) {
     car.id = Date.now();
     this.cars.push(car);
@@ -35,6 +60,4 @@ export class CarService {
   deleteCar(id: number) {
     this.cars = this.cars.filter(c => c.id !== id);
   }
-
-  constructor() { }
 }

src/styles.css

@@ -1 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
+
+.bg-primary-custom {
+    background-color: #414141;
+}