open/close all

frontend/src/app/components/buttons/circle-button/circle-button.component.scss

@@ -1,8 +1,16 @@
+:host {
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.round-button {
+  height: 100%;
+  aspect-ratio: 1 / 1;
+}
 
 .round-button-circle {
   width: 100%;
-  height: 0;
-  padding-bottom: 100%;
+  height: 100%;
   border-radius: 50%;
   border: 3px solid #cfdcec;
   overflow: hidden;

frontend/src/app/pages/roller-shutter-page/roller-shutter-page-container.component.ts

@@ -13,15 +13,17 @@ import {RollerShutterPageComponent} from "./roller-shutter-page.component";
   ],
   template: `
     @if (rollerShutters$ | async; as rollerShutters) {
-      <app-roller-shutter-page [rollerShutters]="rollerShutters"/>
+      <app-roller-shutter-page [rollerShutters]="rollerShutters"
+                               (closeAll)="devicesService.closeAllRollerShutters().subscribe()"
+                               (openAll)="devicesService.openAllRollerShutters().subscribe()"/>
     }`,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RollerShutterPageContainerComponent {
 
   rollerShutters$: Observable<RollerShutter[]>;
 
-  constructor(devicesService: DevicesService) {
+  constructor(public devicesService: DevicesService) {
     this.rollerShutters$ = devicesService.rollerShutters$.pipe(map(deviceMap => [...deviceMap.values()]));
   }
 }

frontend/src/app/pages/roller-shutter-page/roller-shutter-page.component.html

@@ -1,3 +1,10 @@
-@for (rollerShutter of rollerShutters(); track rollerShutter.id) {
-  <app-roller-shutter-cell [rollerShutter]="rollerShutter"/>
-}
+<div class="controls">
+  <app-circle-button text="Alles auf" (triggered)="openAll.emit()"/>
+  <app-circle-button text="Alles zu" (triggered)="closeAll.emit()"/>
+</div>
+
+<div class="shutter-tiles">
+  @for (rollerShutter of rollerShutters(); track rollerShutter.id) {
+    <app-roller-shutter-cell [rollerShutter]="rollerShutter"/>
+  }
+</div>

frontend/src/app/pages/roller-shutter-page/roller-shutter-page.component.scss

@@ -1,10 +1,12 @@
-:host {
+.controls {
   display: grid;
-  grid-template-columns: 33% 33% 33%
+  grid-template-columns: 10% 10% auto;
+  grid-template-rows:  100%;
+  max-height: 25vh;
 }
 
-@media screen and (max-width: 1000px) {
-  :host {
-    grid-template-columns: 100%;
-  }
+.shutter-tiles {
+  display: grid;
+  grid-template-columns: repeat( auto-fit, minmax(405px, 1fr) );
 }
+

frontend/src/app/pages/roller-shutter-page/roller-shutter-page.component.ts

@@ -1,12 +1,14 @@
-import {ChangeDetectionStrategy, Component, input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, input, Output, OutputEmitterRef} from '@angular/core';
 import {RollerShutter} from "../../models/devices/roller-shutter.dto";
 import {RollerShutterCellComponent} from "./roller-shutter-cell/roller-shutter-cell.component";
+import {CircleButtonComponent} from "../../components/buttons/circle-button/circle-button.component";
 
 @Component({
   selector: 'app-roller-shutter-page',
   standalone: true,
   imports: [
-    RollerShutterCellComponent
+    RollerShutterCellComponent,
+    CircleButtonComponent
   ],
   templateUrl: './roller-shutter-page.component.html',
   styleUrl: './roller-shutter-page.component.scss',
@@ -16,4 +18,10 @@ export class RollerShutterPageComponent {
 
   public rollerShutters = input.required<RollerShutter[]>();
 
+  @Output()
+  public openAll = new OutputEmitterRef<void>();
+
+  @Output()
+  public closeAll = new OutputEmitterRef<void>();
+
 }

frontend/src/app/services/devices.service.ts

@@ -1,12 +1,13 @@
 import {DestroyRef, Injectable} from '@angular/core';
-import {BehaviorSubject, Observable, retry, Subject} from "rxjs";
+import {BehaviorSubject, EMPTY, mergeMap, Observable, retry, Subject} from "rxjs";
 import {environment} from "../../environments/environment";
 import {Light} from "../models/devices/light.dto";
 import {webSocket} from "rxjs/webSocket";
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 import {MotionSensor} from "../models/devices/sensor.dto";
 import {Device} from "../models/devices/device.dto";
 import {RollerShutter} from "../models/devices/roller-shutter.dto";
+import {HttpClient} from "@angular/common/http";
 
 @Injectable({
   providedIn: 'root'
@@ -17,7 +18,7 @@ export class DevicesService {
   private lightListener = new Listener<Light>('lights', this.destroyRef);
   private rollerShutterListener = new Listener<RollerShutter>('roller-shutters', this.destroyRef);
 
-  constructor(private destroyRef: DestroyRef) {
+  constructor(private destroyRef: DestroyRef, private httpClient: HttpClient) {
   }
 
   public get lights$(): Observable<Map<string, Light>> {
@@ -31,6 +32,20 @@ export class DevicesService {
   public get rollerShutters$(): Observable<Map<string, RollerShutter>> {
     return this.rollerShutterListener.subject$;
   }
+
+  public openAllRollerShutters(): Observable<never> {
+    return this.httpClient.post(`${baseUrl()}/v1/devices/roller-shutters/open-all`, null)
+      .pipe(mergeMap(() => EMPTY));
+  }
+
+  public closeAllRollerShutters(): Observable<never> {
+    return this.httpClient.post(`${environment.backend.protocol}${baseUrl()}/v1/devices/roller-shutters/close-all`, null)
+      .pipe(mergeMap(() => EMPTY));
+  }
+}
+
+export function baseUrl(): string {
+  return `${environment.backend.host}/${environment.backend.path}secured`;
 }
 
 class Listener<T extends Device> {
@@ -48,8 +63,8 @@ class Listener<T extends Device> {
       .subscribe(device => this.deviceUpdate(device));
   }
 
-  private static getUrl(name: string): string {
-    return `${environment.backend.webSocketProtocol}${environment.backend.host}/${environment.backend.path}secured/ws/v1/devices/${name}`;
+  public static getUrl(name: string): string {
+    return `${environment.backend.webSocketProtocol}${baseUrl()}/ws/v1/devices/${name}`;
   }
 
   private deviceUpdate(message: T): void {