rollerShutter party

frontend/angular.json

@@ -26,7 +26,7 @@
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
-              "src/favicon.ico",
+              "src/favicon-home.ico",
               "src/assets"
             ],
             "styles": [
@@ -97,7 +97,7 @@
             "tsConfig": "tsconfig.spec.json",
             "inlineStyleLanguage": "scss",
             "assets": [
-              "src/favicon.ico",
+              "src/favicon-home.ico",
               "src/assets"
             ],
             "styles": [

frontend/src/app/app.component.scss

@@ -3,7 +3,6 @@
   padding-bottom: 10vh;
 }
 
-/* Style the navigation bar */
 .navbar {
   background-color: #555;
   overflow: auto;
@@ -14,7 +13,6 @@
   right: 0;
 }
 
-/* Navbar links */
 .navbar button {
   float: left;
   text-align: center;
@@ -27,17 +25,14 @@
   cursor: pointer;
 }
 
-/* Navbar links on mouse-over */
 .navbar button:hover {
   background-color: #000;
 }
 
-/* Current/active navbar link */
-.active {
+.navbar .active {
   background-color: #04AA6D;
 }
 
-/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
 @media screen and (max-width: var(--small-device-width-border)) {
   .navbar a {
     float: none;

frontend/src/app/app.component.ts

@@ -18,6 +18,7 @@ export class AppComponent {
   public readonly routes: { text: string; link: string }[] = [
     {text: 'Home', link: '/'},
     {text: 'Animationen', link: '/animation'},
+    {text: 'Störe', link: '/roller-shutter'},
     {text: 'Zug', link: '/train'},
     {text: 'Wetter', link: '/weather'},
     {text: 'Roggen', link: '/livecam'},
@@ -71,8 +72,7 @@ export class AppComponent {
     this.swipe(event, 'end');
   }
 
-
-  swipe(e: TouchEvent, when: string): void {
+  private swipe(e: TouchEvent, when: string): void {
     const coord: [number, number] = [e.changedTouches[0].clientX, e.changedTouches[0].clientY];
     const time = new Date().getTime();
 

frontend/src/app/app.config.ts

@@ -1,7 +1,7 @@
 import {ApplicationConfig} from '@angular/core';
 import {provideRouter} from '@angular/router';
 
-import {routes} from './app.routes';
+import {routes} from './pages/routes';
 import {provideClientHydration} from '@angular/platform-browser';
 import {provideHttpClient, withInterceptors} from "@angular/common/http";
 import {apiKeyInterceptor} from "./core/api-key.interceptor";

frontend/src/app/core/pipes/compass.pipe.ts

@@ -0,0 +1,16 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({
+  name: 'compass',
+  standalone: true
+})
+export class CompassPipe implements PipeTransform {
+  transform(value: string[]): string {
+    return value
+      .map(directions => directions
+        .split('_')
+        .map(direction => direction.at(0))
+        .join(''))
+      .join(', ');
+  }
+}

frontend/src/app/models/devices/device.dto.ts

@@ -0,0 +1,4 @@
+export interface Device {
+  id: string;
+  name: string;
+}

frontend/src/app/models/devices/light.dto.ts

@@ -1,6 +1,6 @@
-export interface Light {
-  id: string;
-  name: string;
+import {Device} from "./device.dto";
+
+export interface Light extends Device {
   brightness: number;
   on: boolean;
   reachable: boolean;

frontend/src/app/models/devices/roller-shutter.dto.ts

@@ -0,0 +1,15 @@
+import {Device} from "./device.dto";
+
+export interface RollerShutter extends Device {
+
+  currentLift: number;
+  currentTilt: number;
+  open: boolean;
+  config?: {
+    compassDirection: string[];
+    closeAt: string;
+    openAt: string;
+    noAutomaticsUntil: string | undefined;
+    closeWithInterrupt: string;
+  }
+}

frontend/src/app/models/devices/sensor.dto.ts

@@ -1,6 +1,6 @@
-export interface Sensor {
-  id: string;
-  name: string;
+import {Device} from "./device.dto";
+
+export interface MotionSensor extends Device {
   presence?: boolean;
   reachable: boolean;
   lastUpdate: string;

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

@@ -0,0 +1,27 @@
+import {ChangeDetectionStrategy, Component} from "@angular/core";
+import {AsyncPipe} from "@angular/common";
+import {DevicesService} from "../../services/devices.service";
+import {map, Observable} from "rxjs";
+import {RollerShutter} from "../../models/devices/roller-shutter.dto";
+import {RollerShutterPageComponent} from "./roller-shutter-page.component";
+
+@Component({
+  standalone: true,
+  imports: [
+    AsyncPipe,
+    RollerShutterPageComponent
+  ],
+  template: `
+    @if (rollerShutters$ | async; as rollerShutters) {
+      <app-roller-shutter-page [rollerShutters]="rollerShutters"/>
+    }`,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class RollerShutterPageContainerComponent {
+
+  rollerShutters$: Observable<RollerShutter[]>;
+
+  constructor(devicesService: DevicesService) {
+    this.rollerShutters$ = devicesService.rollerShutters$.pipe(map(deviceMap => [...deviceMap.values()]));
+  }
+}

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

@@ -0,0 +1,3 @@
+@for (rollerShutter of rollerShutters(); track rollerShutter.id) {
+  <app-roller-shutter-cell [rollerShutter]="rollerShutter"/>
+}

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

@@ -0,0 +1,10 @@
+:host {
+  display: grid;
+  grid-template-columns: 33% 33% 33%
+}
+
+@media screen and (max-width: 1000px) {
+  :host {
+    grid-template-columns: 100%;
+  }
+}

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

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

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

@@ -0,0 +1,19 @@
+import {ChangeDetectionStrategy, Component, input} from '@angular/core';
+import {RollerShutter} from "../../models/devices/roller-shutter.dto";
+import {RollerShutterCellComponent} from "./roller-shutter-cell/roller-shutter-cell.component";
+
+@Component({
+  selector: 'app-roller-shutter-page',
+  standalone: true,
+  imports: [
+    RollerShutterCellComponent
+  ],
+  templateUrl: './roller-shutter-page.component.html',
+  styleUrl: './roller-shutter-page.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class RollerShutterPageComponent {
+
+  public rollerShutters = input.required<RollerShutter[]>();
+
+}

frontend/src/app/pages/routes.ts

@@ -0,0 +1,52 @@
+import {Routes} from '@angular/router';
+import {TrainStationPageComponent} from "./train-station-page/train-station-page.component";
+import {WeatherPageComponent} from "./weather-page/weather-page.component";
+import {UnauthorizedPageComponent} from "./unauthorized-page/unauthorized-page.component";
+import {AuthGuard} from "../core/auth.service";
+import {StartPageContainerComponent} from "./start-page/start-page-container.component";
+import {LivecamPageComponent} from "./livecam-page/livecam-page.component";
+import {TrelloPageComponent} from "./trello-page/trello-page.component";
+import {AnimationPageContainerComponent} from "./animation-page/animation-page-container.component";
+import {RollerShutterPageContainerComponent} from "./roller-shutter-page/roller-shutter-page-container.component";
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: StartPageContainerComponent,
+    canActivate: [AuthGuard]
+  },
+  {
+    path: 'train',
+    component: TrainStationPageComponent,
+    canActivate: [AuthGuard]
+  },
+  {
+    path: 'weather',
+    component: WeatherPageComponent,
+    canActivate: [AuthGuard]
+  },
+  {
+    path: 'livecam',
+    component: LivecamPageComponent,
+    canActivate: [AuthGuard]
+  },
+  {
+    path: 'animation',
+    component: AnimationPageContainerComponent,
+    canActivate: [AuthGuard]
+  },
+  {
+    path: 'roller-shutter',
+    component: RollerShutterPageContainerComponent,
+    canActivate: [AuthGuard]
+  },
+  {
+    path: 'trello',
+    component: TrelloPageComponent,
+    canActivate: [AuthGuard]
+  },
+  {
+    path: 'unauthorized',
+    component: UnauthorizedPageComponent
+  }
+];

frontend/src/app/pages/start-page/start-page-container.component.ts

@@ -5,7 +5,7 @@ import {DevicesService} from "../../services/devices.service";
 import {map, Observable} from "rxjs";
 import {Light} from "../../models/devices/light.dto";
 import {WeatherService} from "../../services/weather.service";
-import {Sensor} from "../../models/devices/sensor.dto";
+import {MotionSensor} from "../../models/devices/sensor.dto";
 
 @Component({
   standalone: true,
@@ -29,7 +29,7 @@ import {Sensor} from "../../models/devices/sensor.dto";
 export class StartPageContainerComponent {
 
   lights$: Observable<Light[]>;
-  sensors$: Observable<Sensor[]>;
+  sensors$: Observable<MotionSensor[]>;
 
   constructor(devicesService: DevicesService, public weatherService: WeatherService) {
     this.lights$ = devicesService.lights$.pipe(map(deviceMap => [...deviceMap.values()]));

frontend/src/app/pages/start-page/start-page.component.ts

@@ -4,7 +4,7 @@ import {Weather} from "../../models/devices/weather.dto";
 import {WeatherValuePipe} from "../../core/pipes/weahter-value.pipe";
 import {DateAgoPipe} from "../../core/pipes/date-ago.pipe";
 import {AsyncPipe} from "@angular/common";
-import {Sensor} from "../../models/devices/sensor.dto";
+import {MotionSensor} from "../../models/devices/sensor.dto";
 
 @Component({
   selector: 'app-start-page',
@@ -25,7 +25,7 @@ export class StartPageComponent {
     .filter(device => device.on && device.reachable)
     .sort((a, b) => a.name.localeCompare(b.name)))
 
-  public sensors = input.required<Sensor[]>();
+  public sensors = input.required<MotionSensor[]>();
   public sensorsThatAreMoving = computed(() => this.sensors()
     .filter(sensor => sensor.reachable && sensor.presence)
     .sort((a, b) => a.name.localeCompare(b.name)));