stecker als array, anstatt der baseurl die adressen der stecker aus dem reverseproxy eingefügt

src/app/socket.interface.ts

@@ -0,0 +1,7 @@
+// src/app/socket.interface.ts
+export interface TasmotaSocket {
+  id: string;      // Ein eindeutiger Bezeichner für die Steckdose (z.B. '1', '2')
+  name: string;    // Der Anzeigename der Steckdose (z.B. 'Aktiv Kohle Lüfter')
+  path: string;    // Der Tasmota-Endpunkt, der für diese Steckdose verwendet wird (z.B. '/tasmota1')
+  status: boolean; // Der aktuelle Schaltzustand der Steckdose (true für 'Ein', false für 'Aus')
+}

src/app/tasmota-control/tasmota-control.component.html

@@ -2,7 +2,19 @@
 <div class="tasmota-control">
   <h2>Tasmota Steckdosen Steuerung</h2>
 
-  <div class="socket-control">
+  <!-- NEU: Verwendung von *ngFor, um über jede Steckdose im 'sockets'-Array zu iterieren -->
+<div *ngFor="let socket of sockets" class="socket-control">
+  <h3>{{ socket.name }}</h3>
+  <button (click)="toggleSocket(socket)"
+          [class.on]="socket.status"
+          [class.off]="!socket.status">
+    {{ socket.status ? 'Ausschalten' : 'Einschalten' }}
+  </button>
+  <span>Status: {{ socket.status ? 'Ein' : 'Aus' }}</span>
+</div>
+
+
+  <!-- <div class="socket-control">
     <h3>Aktiv Kohle Lüfter</h3>
     <button
       (click)="toggleSocket1()"
@@ -22,6 +34,6 @@
       {{ socket2Status ? 'Ausschalten' : 'Einschalten' }}
     </button>
     <span>Status: {{ socket2Status ? 'Ein' : 'Aus' }}</span>
-  </div>
+  </div> -->
 </div>
 

src/app/tasmota-control/tasmota-control.component.ts

@@ -1,6 +1,7 @@
 // tasmota-control.component.ts
 import { Component, OnInit } from '@angular/core';
 import { TasmotaService } from '../tasmota.service';
+import { TasmotaSocket } from '../socket.interface'; // NEU: Import des Interfaces
 
 @Component({
   selector: 'app-tasmota-control',
@@ -8,17 +9,30 @@ import { TasmotaService } from '../tasmota.service';
   styleUrls: ['./tasmota-control.component.css']
 })
 export class TasmotaControlComponent implements OnInit {
-  socket1Status = false;
+  // ALT: socket1Status = false;
-  socket2Status = false;
+  // ALT: socket2Status = false;
+
+  // NEU: Ein Array, das die Socket-Informationen und ihren Status hält
+  sockets: TasmotaSocket[] = [];
 
   constructor(private tasmotaService: TasmotaService) { }
 
   ngOnInit(): void {
+    // NEU: Initialisiere das `sockets`-Array aus dem Service beim Start der Komponente
+    this.sockets = this.tasmotaService.sockets;
     this.updateSocketStatuses();
   }
 
   updateSocketStatuses(): void {
-    this.tasmotaService.getSocketStatus(this.tasmotaService.socket1Path)
+    // NEU: Iteriere über das Array, um den Status jeder Steckdose abzurufen
+    this.sockets.forEach(socket => {
+      this.tasmotaService.getSocketStatus(socket.path)
+        .subscribe({
+          next: (status) => socket.status = status,
+          error: (error) => console.error(`Fehler beim Abrufen des Status von Steckdose ${socket.name}:`, error)
+        });
+    });
+    /* this.tasmotaService.getSocketStatus(this.tasmotaService.socket1Path)
       .subscribe({
         next: (status) => this.socket1Status = status,
         error: (error) => console.error('Fehler beim Abrufen des Status von Steckdose 1:', error)
@@ -28,10 +42,19 @@ export class TasmotaControlComponent implements OnInit {
       .subscribe({
         next: (status) => this.socket2Status = status,
         error: (error) => console.error('Fehler beim Abrufen des Status von Steckdose 2:', error)
+      }); */
+  }
+
+  // NEU: Eine generische Methode zum Schalten einer beliebigen Steckdose
+  toggleSocket(socket: TasmotaSocket): void {
+    this.tasmotaService.toggleSocket(socket.path, socket.status)
+      .subscribe({
+        next: (newStatus) => socket.status = newStatus, // Aktualisiert den Status im Array
+        error: (error) => console.error(`Fehler beim Schalten von Steckdose ${socket.name}:`, error)
       });
   }
 
-  toggleSocket1(): void {
+  /* toggleSocket1(): void {
     this.tasmotaService.toggleSocket(this.tasmotaService.socket1Path, this.socket1Status)
       .subscribe({
         next: (status) => this.socket1Status = status,
@@ -45,6 +68,6 @@ export class TasmotaControlComponent implements OnInit {
         next: (status) => this.socket2Status = status,
         error: (error) => console.error('Fehler beim Schalten von Steckdose 2:', error)
       });
-  }
+  } */
 }
 

src/app/tasmota.service.ts

@@ -4,6 +4,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { environment } from '../environments/environment';
+import { TasmotaSocket } from './socket.interface'; // NEU: Import des Interfaces
 
 @Injectable({
   providedIn: 'root'
@@ -13,8 +14,18 @@ export class TasmotaService {
     ? ''
     : '';
 
-  private SOCKET1_PATH = this.baseUrl + '/tasmota1';
+  // private SOCKET1_PATH = this.baseUrl + '/tasmota1';
-  private SOCKET2_PATH = this.baseUrl + '/tasmota2';
+  // private SOCKET2_PATH = this.baseUrl + '/tasmota2';
+
+  // NEU: Ein öffentliches Array, das alle zu steuernden Steckdosen und ihre Konfiguration enthält
+  public sockets: TasmotaSocket[] = [
+    // { id: '1', name: 'Aktiv Kohle Lüfter', path: this.baseUrl + '/tasmota1', status: false },
+    // { id: '2', name: 'Bambu P1P', path: this.baseUrl + '/tasmota2', status: false }
+    // anstatt der baseurl die adressen der stecker aus dem reverseproxy eingefügt
+    { id: '1', name: 'Aktiv Kohle Lüfter', path: 'http://stecker1.neugasse.lan', status: false },
+    { id: '2', name: 'Bambu P1P', path: 'http://stecker1.neugasse.lan', status: false }
+    // Hier können weitere Steckdosen-Objekte hinzugefügt werden
+  ];
 
   private httpOptions = {
     headers: new HttpHeaders({
@@ -40,11 +51,10 @@ export class TasmotaService {
       );
   }
 
-  get socket1Path(): string {
+  // ALT: Die Getter `socket1Path` und `socket2Path` werden entfernt,
-    return this.SOCKET1_PATH;
+  // da die Pfade nun direkt aus dem `sockets`-Array im Service oder in der Komponente bezogen werden.
-  }
+  /*
-
+  get socket1Path(): string { return this.SOCKET1_PATH; }
-  get socket2Path(): string {
+  get socket2Path(): string { return this.SOCKET2_PATH; }
-    return this.SOCKET2_PATH;
+  */
-  }
 }