add missing files

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

@@ -0,0 +1,19 @@
+<div class="container">
+  <div id="wrapper">
+    <div class="stripe" [style.--lift]="rollerShutter().currentLift + '%'"
+         [style.--tilt]="rollerShutter().currentTilt + '%'"></div>
+  </div>
+
+  <div>
+    <span>{{ rollerShutter().name }}</span>
+    @if (rollerShutter().config?.compassDirection; as directions) {
+      <br>
+      <span>{{ directions | compass }}</span>
+    }
+    @if (rollerShutter().config?.noAutomaticsUntil; as noAutomaticsUntil) {
+      <br>
+      <span>blockiert bis zum {{ noAutomaticsUntil | date:'dd.MM.yyyy' }}</span>
+    }
+  </div>
+
+</div>

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

@@ -0,0 +1,45 @@
+
+.container {
+  display: grid;
+  grid-template-columns: 130px auto;
+  align-items: center;
+  border: #555555 solid 1px;
+  border-radius: 10px;
+  height: 100px;
+  width: 400px;
+  margin: 15px
+}
+
+#wrapper {
+  margin-left: 5px;
+  width: 100px;
+  height: 80px;
+  border: #555555 1px solid;
+  position: relative;
+}
+
+.stripe {
+  --lift: 100%;
+  --tilt: 90%;
+  --color: gray;
+
+  --tilt-start: calc(10% - var(--tilt) / 100 * 10);
+
+  position: absolute;
+  width: 100%;
+  height: calc(100% - var(--lift));
+  background: repeating-linear-gradient(
+      var(--color),
+      var(--color) var(--tilt-start),
+      transparent var(--tilt-start),
+      transparent 10%
+  );
+  z-index: 1;
+  transition: height 500ms ease-in-out;
+}
+
+.stripe:first-child {
+  border-bottom: 1px solid transparent;
+  top: 0;
+}
+

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

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

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

@@ -0,0 +1,20 @@
+import {Component, input} from '@angular/core';
+import {RollerShutter} from "../../../models/devices/roller-shutter.dto";
+import {CompassPipe} from "../../../core/pipes/compass.pipe";
+import {DatePipe} from "@angular/common";
+
+@Component({
+  selector: 'app-roller-shutter-cell',
+  standalone: true,
+  imports: [
+    CompassPipe,
+    DatePipe
+  ],
+  templateUrl: './roller-shutter-cell.component.html',
+  styleUrl: './roller-shutter-cell.component.scss'
+})
+export class RollerShutterCellComponent {
+
+  public rollerShutter = input.required<RollerShutter>();
+
+}