improve frontend

frontend/src/app/app.component.html

@@ -1,6 +1,7 @@
 <div class="container">
   <router-outlet></router-outlet>
 </div>
+
 <div class="navbar">
   @for (route of routes; track route.link) {
     <a [class.active]="activeRoute() == route.link"

frontend/src/app/app.component.scss

@@ -1,3 +1,4 @@
+
 .container {
   padding-bottom: 10vh;
 }
@@ -35,7 +36,7 @@
 }
 
 /* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
-@media screen and (max-width: 500px) {
+@media screen and (max-width: var(--small-device-width-border)) {
   .navbar a {
     float: none;
     display: block;

frontend/src/app/app.component.ts

@@ -10,7 +10,7 @@ import {isPlatformBrowser} from "@angular/common";
   imports: [RouterOutlet],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
   title = 'home-system';

frontend/src/app/models/animation.dto.ts

@@ -1,6 +1,6 @@
 export interface AnimationDto {
   id: string;
-  name: string;
+  name: string | undefined;
   steps: Step[];
 }
 

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

@@ -4,4 +4,5 @@ export interface Sensor {
   presence?: boolean;
   reachable: boolean;
   lastUpdate: string;
+  presenceChangedAt: string;
 }

frontend/src/app/pages/animation-page/animation-page.component.html

@@ -1,8 +1,8 @@
 @for (animation of animations(); track animation.id) {
   <div class="animation-container">
     <div>
-      <span>Animationsname: {{ animation.name }}</span>
-      <br>
+      <h3>{{ animation.name ?? 'kein Name' }}</h3>
+
       <span>Schritte:</span>
       <ul>
         @for (step of animation.steps; track step.id) {

frontend/src/app/pages/animation-page/animation-page.component.scss

@@ -1,9 +1,15 @@
 .animation-container {
   display: grid;
-  grid-template-columns: 1fr 4fr;
+  grid-template-columns: 2fr 4fr;
   align-items: center;
 
   .button-container {
-    max-width: 5%;
+    max-width: 30vh;
+  }
+}
+
+@media screen and (max-width: 700px) {
+  .animation-container {
+    grid-template-columns: 70% 30%;
   }
 }

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

@@ -11,9 +11,9 @@
   max-height: 50vh;
 }
 
-ul {
-  max-width: 20vw;
-  columns: 2;
-  -webkit-columns: 2;
-  -moz-columns: 2;
+@media screen and (max-width: 700px) {
+  :host {
+    grid-template-columns: 100%;
+  }
 }
+

frontend/src/styles.scss

@@ -1,6 +1,12 @@
 /* You can add global styles to this file, and also import other style files */
 
+:root {
+  --primary-color: #499ae6;
+  --primary-background-color: #00253c;
+  --small-device-width-border: 700px;
+}
+
 body {
-  background-color: black;
-  color: white;
+  background-color: var(--primary-background-color);
+  color: var(--primary-color);
 }