fix some issues

internal/ui/angular-ui/src/app/components/time-slot/time-slot.component.html

@@ -5,7 +5,7 @@
         <span class="mr d">{{ timeSlot()?.Start | date:"shortTime" }}</span>
       </div>
       <div class="v-line"></div>
-      @if (lastElement) {
+      @if (lastElement()) {
         <div class="endpoint">
           <span class="mr d">{{ timeSlot()?.End | date:"shortTime" }}</span>
         </div>

internal/ui/angular-ui/src/app/components/time-slot/time-slot.component.scss

@@ -1,5 +1,6 @@
 .time-slot {
-  width: 20rem;
+  width: 25rem;
+  padding-left: 10rem;
   .time-slot-divider {
 
     --endpoint-width: 20px;
@@ -33,7 +34,7 @@
       width: 20px;
       align-items: center;
       .v-line {
-        height: calc(100% - var(--endpoint-height) * 1);
+        height: calc(100% - var(--endpoint-height));
         width: 3px;
         background-color: rgba(87, 87, 87, 0.75);
         flex-grow: 0;

internal/ui/angular-ui/src/app/components/time-slot/time-slot.component.ts

@@ -17,15 +17,16 @@ export class TimeSlotComponent {
 
   timeSlot = input<TimeSlot>();
   scroll = input<number>(1);
-  @Input() lastElement = false;
+  lastElement = input<boolean>(false);
 
   heightPx = computed(() => {
     const ts = this.timeSlot();
     if (!ts) return 40;
     const from = new Date(ts.Start);
     const to = new Date(ts.End);
     const durationInMinutes = (to.getTime() - from.getTime()) / (1000 * 60);
-    return Math.max(40, durationInMinutes * this.scroll());
+    let height = durationInMinutes * this.scroll()
+    return Math.max(40, height);
   });
 
   protected readonly last = last;

internal/ui/angular-ui/src/app/components/timeline/timeline.component.html

@@ -1,11 +1,9 @@
 @let timeSlots = timeSlots$ | async;
 
 @if (timeSlots) {
-  <div class="timeline-container" (scroll)="handleScroll($event)">
-    <div class="time-slot-container">
+  <div class="timeline-container">
       @for (timeSlot of timeSlots; track timeSlot.ID; let last = $last) {
         <app-time-slot [timeSlot]="timeSlot" [scroll]="scroll" [lastElement]="last"></app-time-slot>
       }
-    </div>
   </div>
 }

internal/ui/angular-ui/src/app/components/timeline/timeline.component.scss

@@ -1,17 +1,6 @@
 .timeline-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  margin-top: 3rem;
-  padding: 1rem;
-  border-radius: 15px;
-  // box-shadow: 0 0 15px rgba(0, 0, 0, 0.45);
+  padding: 2rem;
+  margin-top: 4rem;
+  overflow-y: scroll;
   max-height: 95vh;
-
-  .line {
-    height: 100%;
-    width: 2px;
-    background-color: black;
-    border-radius: 1px;
-  }
 }

internal/ui/angular-ui/src/app/components/timeline/timeline.component.ts

@@ -1,9 +1,10 @@
 import {Component, HostListener, input} from '@angular/core';
 import {toObservable} from "@angular/core/rxjs-interop";
 import {TimeSlotService} from "../../services/TimeSlot/time-slot.service";
-import {filter, switchMap} from "rxjs";
+import {catchError, filter, of, switchMap} from "rxjs";
 import {AsyncPipe} from "@angular/common";
 import {TimeSlotComponent} from "../time-slot/time-slot.component";
+import {TimeSlot} from "../../models/TimeSlot";
 
 @Component({
   selector: 'app-timeline',
@@ -19,24 +20,20 @@ export class TimelineComponent {
   @HostListener('window:wheel', ['$event'])
   onWheel(event: WheelEvent) {
     if (event.deltaY > 0) {
-      this.scroll -= 1;
+      this.scroll -= .3;
     } else if (event.deltaY < 0) {
-      this.scroll += 1;
+      this.scroll += .3;
     }
   }
   scroll = 1;
   date = input<Date>()
   timeSlots$ = toObservable(this.date).pipe(
     filter(date => date !== undefined),
-    switchMap(date => this.timeSlotService.timeSlotsForDay$(date as Date))
+    switchMap(date => this.timeSlotService.timeSlotsForDay$(date as Date)),
+    catchError(() => of([] as TimeSlot[]) )
   )
   constructor(
     private timeSlotService: TimeSlotService
   ) {
   }
-
-  handleScroll($event: Event) {
-    console.log($event)
-
-  }
 }

internal/ui/web/index.html

@@ -9,5 +9,5 @@
 <style>*{box-sizing:border-box;margin:0;padding:0}html,body{height:100vh;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}</style><link rel="stylesheet" href="styles-ESB5IVWG.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles-ESB5IVWG.css"></noscript></head>
 <body>
   <app-root></app-root>
-<script src="polyfills-FFHMD2TL.js" type="module"></script><script src="main-E4ZHRT6B.js" type="module"></script></body>
+<script src="polyfills-FFHMD2TL.js" type="module"></script><script src="main-CUJIMF3V.js" type="module"></script></body>
 </html>