Tasmota component hinzugefuegt - CORSprobleme

angular.json

@@ -104,5 +104,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

src/app/app-routing.module.ts

@@ -1,10 +1,12 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { LinksComponent } from './links/links.component';
+import { TasmotaControlComponent } from './tasmota-control/tasmota-control.component';
 
 const routes: Routes = [
   { path: '', redirectTo: '/list-links', pathMatch: 'full'},
-  { path: 'list-links', component:LinksComponent }
+  { path: 'list-links', component:LinksComponent },
+  { path: 'steckdosen', component:TasmotaControlComponent}
 ];
 
 @NgModule({

src/app/app.component.html

@@ -5,6 +5,14 @@
         <img src="assets/img/net-so.org.logo.png" alt="" width="100" class="d-inline-block align-text-center">
         Net-So.Org
       </a>
+      <ul class="navbar-nav">
+        <li class="nav-item">
+          <a class="nav-link" routerLink="/list-links" routerLinkActive="active">Home</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLink="/steckdosen" routerLinkActive="active">Steckdosen</a>
+        </li>
+      </ul>
     </div>
   </nav>
 

src/app/app.module.ts

@@ -6,11 +6,14 @@ import { AppComponent } from './app.component';
 import { HttpClientModule } from '@angular/common/http';
 import { LinksComponent } from './links/links.component';
 import * as _ from 'lodash';
+import { TasmotaControlComponent } from './tasmota-control/tasmota-control.component';
+
 
 @NgModule({
   declarations: [
     AppComponent,
-    LinksComponent
+    LinksComponent,
+    TasmotaControlComponent
   ],
   imports: [
     BrowserModule,

src/app/links/links.component.css

@@ -0,0 +1,33 @@
+/* tasmota-control.component.css */
+.tasmota-control {
+  padding: 20px;
+}
+
+.socket-control {
+  margin: 20px 0;
+  padding: 15px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+.socket-control button {
+  padding: 10px 20px;
+  margin-right: 10px;
+  border-radius: 5px;
+  border: none;
+  cursor: pointer;
+}
+
+.socket-control button.on {
+  background-color: #ff4444;
+  color: white;
+}
+
+.socket-control button.off {
+  background-color: #44ff44;
+  color: black;
+}
+
+.socket-control span {
+  margin-left: 10px;
+}

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

@@ -0,0 +1,33 @@
+/* tasmota-control.component.css */
+.tasmota-control {
+  padding: 20px;
+}
+
+.socket-control {
+  margin: 20px 0;
+  padding: 15px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+.socket-control button {
+  padding: 10px 20px;
+  margin-right: 10px;
+  border-radius: 5px;
+  border: none;
+  cursor: pointer;
+}
+
+.socket-control button.on {
+  background-color: #ff4444;
+  color: white;
+}
+
+.socket-control button.off {
+  background-color: #44ff44;
+  color: black;
+}
+
+.socket-control span {
+  margin-left: 10px;
+}

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

@@ -0,0 +1,27 @@
+<!-- tasmota-control.component.html -->
+<div class="tasmota-control">
+  <h2>Tasmota Steckdosen Steuerung</h2>
+
+  <div class="socket-control">
+    <h3>Steckdose 1</h3>
+    <button
+      (click)="toggleSocket1()"
+      [class.on]="socket1Status"
+      [class.off]="!socket1Status">
+      {{ socket1Status ? 'Ausschalten' : 'Einschalten' }}
+    </button>
+    <span>Status: {{ socket1Status ? 'Ein' : 'Aus' }}</span>
+  </div>
+
+  <div class="socket-control">
+    <h3>Steckdose 2</h3>
+    <button
+      (click)="toggleSocket2()"
+      [class.on]="socket2Status"
+      [class.off]="!socket2Status">
+      {{ socket2Status ? 'Ausschalten' : 'Einschalten' }}
+    </button>
+    <span>Status: {{ socket2Status ? 'Ein' : 'Aus' }}</span>
+  </div>
+</div>
+

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TasmotaControlComponent } from './tasmota-control.component';
+
+describe('TasmotaControlComponent', () => {
+  let component: TasmotaControlComponent;
+  let fixture: ComponentFixture<TasmotaControlComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TasmotaControlComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(TasmotaControlComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,50 @@
+// tasmota-control.component.ts
+import { Component, OnInit } from '@angular/core';
+import { TasmotaService } from '../tasmota.service';
+
+@Component({
+  selector: 'app-tasmota-control',
+  templateUrl: './tasmota-control.component.html',
+  styleUrls: ['./tasmota-control.component.css']
+})
+export class TasmotaControlComponent implements OnInit {
+  socket1Status = false;
+  socket2Status = false;
+
+  constructor(private tasmotaService: TasmotaService) { }
+
+  ngOnInit(): void {
+    this.updateSocketStatuses();
+  }
+
+  updateSocketStatuses(): void {
+    this.tasmotaService.getSocketStatus(this.tasmotaService.socket1IP)
+      .subscribe({
+        next: (status) => this.socket1Status = status,
+        error: (error) => console.error('Fehler beim Abrufen des Status von Steckdose 1:', error)
+      });
+
+    this.tasmotaService.getSocketStatus(this.tasmotaService.socket2IP)
+      .subscribe({
+        next: (status) => this.socket2Status = status,
+        error: (error) => console.error('Fehler beim Abrufen des Status von Steckdose 2:', error)
+      });
+  }
+
+  toggleSocket1(): void {
+    this.tasmotaService.toggleSocket(this.tasmotaService.socket1IP, this.socket1Status)
+      .subscribe({
+        next: (status) => this.socket1Status = status,
+        error: (error) => console.error('Fehler beim Schalten von Steckdose 1:', error)
+      });
+  }
+
+  toggleSocket2(): void {
+    this.tasmotaService.toggleSocket(this.tasmotaService.socket2IP, this.socket2Status)
+      .subscribe({
+        next: (status) => this.socket2Status = status,
+        error: (error) => console.error('Fehler beim Schalten von Steckdose 2:', error)
+      });
+  }
+}
+

src/app/tasmota.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TasmotaService } from './tasmota.service';
+
+describe('TasmotaControlService', () => {
+  let service: TasmotaService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(TasmotaService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/tasmota.service.ts

@@ -0,0 +1,39 @@
+// tasmota.service.ts
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TasmotaService {
+  private SOCKET1_IP = '10.0.0.31'; // Ändere zu deiner ersten Tasmota IP
+  private SOCKET2_IP = '10.0.0.32'; // Ändere zu deiner zweiten Tasmota IP
+
+  constructor(private http: HttpClient) { }
+
+  toggleSocket(socketIP: string, currentStatus: boolean): Observable<boolean> {
+    const command = currentStatus ? 'Power%20Off' : 'Power%20On';
+    return this.http.get<any>(`http://${socketIP}/cm?cmnd=${command}`)
+      .pipe(
+        map(response => response.POWER === 'ON')
+      );
+  }
+
+  getSocketStatus(socketIP: string): Observable<boolean> {
+    return this.http.get<any>(`http://${socketIP}/cm?cmnd=Power`)
+      .pipe(
+        map(response => response.POWER === 'ON')
+      );
+  }
+
+  get socket1IP(): string {
+    return this.SOCKET1_IP;
+  }
+
+  get socket2IP(): string {
+    return this.SOCKET2_IP;
+  }
+}
+