dev en cours

src/app/composants/webcam-list/webcam-list.component.html

@@ -3,15 +3,11 @@
 
   <div id="webcamscarousel" class="carousel slide carousel-fade center" data-bs-ride="carousel">
     <div class="carousel-inner">
-      <div class="carousel-item active">
-        <div class="d-flex justify-content-center fixed-height"><img src="https://www.triplea.fr/alchimie/images/webcams/hirezcam.jpg" data-bs-interval="10000"></div>
-      </div>
-      <div class="carousel-item">
-        <div class="d-flex justify-content-center fixed-height"><img src="https://www.triplea.fr/alchimie/images/webcams/mobilecam.jpg" data-bs-interval="10000"></div>
-      </div>
-      <div class="carousel-item">
-        <div class="d-flex justify-content-center fixed-height"><img src="https://www.triplea.fr/alchimie/images/webcams/mobilecam2.jpg" data-bs-interval="10000"></div>
+@for (scene of webcams; track scene.id) {
+      <div class="carousel-item" [class.active]="scene.id === 1">
+        <div class="d-flex justify-content-center fixed-height"><img [src]="scene.vue" [alt]="scene.id" data-bs-interval="10000"></div>
       </div>
+}
     </div>
     <button class="carousel-control-prev" type="button" data-bs-target="#webcamscarousel" data-bs-slide="prev">
       <span class="carousel-control-prev-icon" aria-hidden="true"></span>

src/app/composants/webcam-list/webcam-list.component.ts

@@ -1,16 +1,47 @@
 import { Component, OnInit } from '@angular/core';
+import { timer } from 'rxjs';
 
 import { MenuComponent } from '../menu/menu.component';
+import { Webcam } from '../../interfaces/webcam';
+import { WebcamService } from '../../services/webcam.service';
 
 @Component({ selector: 'app-webcam-list', imports: [MenuComponent], templateUrl: './webcam-list.component.html', styleUrl: './webcam-list.component.css' })
 
 export class WebcamListComponent implements OnInit
 {
 
-  // TODO : téléchargement depuis l'API et non pas directement
+  webcams: Webcam[] = [];
 
-  constructor() { }
+  webcamu: Webcam = new Webcam();
 
-  ngOnInit() { }
+  constructor(private webcamService: WebcamService) { }
+
+  ngOnInit()
+  {
+    this.recupererToutesVues();
+
+    timer(0, 15000).subscribe(() => { this.updaterVues(); });
+  }
+
+  recupererToutesVues() { this.webcamService.getList().subscribe(data => { this.webcams = data; }); }
+
+  updaterVues()
+  {
+    for (var i = 0; i < this.webcams.length; i++)
+    {
+      this.webcamu = new Webcam();
+      this.webcamu.id = this.webcams[i].id;
+      this.webcamu.crc32 = this.webcams[i].crc32;
+      this.webcamu.vue = "";
+
+      this.webcamService.updateVue(this.webcamu).subscribe(data => { this.webcamu = data; });
+
+      if (this.webcamu.vue !== "")
+      {
+        this.webcams[i].crc32 = this.webcamu.crc32;
+        this.webcams[i].vue = this.webcamu.vue;
+      }
+    }
+  }
 
 }

src/app/interfaces/webcam.ts

@@ -0,0 +1,6 @@
+export class Webcam
+{
+  id: number = 0;
+  crc32: number = 0;
+  vue: string = "";
+}

src/app/services/webcam.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http'
+import { Observable } from 'rxjs';
+import { Environnement } from '../env';
+import { Webcam } from '../interfaces/webcam';
+
+@Injectable({ providedIn: 'root' })
+
+export class WebcamService
+{
+
+  private baseURL = Environnement.apiUrl + "webcam";
+
+  constructor(private httpClient: HttpClient) { }
+
+  getList(): Observable<Webcam[]> { return this.httpClient.get<Webcam[]>(`${this.baseURL}/list`); }
+
+  updateVue(webcam: Webcam): Observable<Webcam> { return this.httpClient.post<Webcam>(`${this.baseURL}/update`, webcam); }
+
+}