Adding week and day components - POC release

Frontend/src/app/components/day/day.component.html

@@ -1 +1,6 @@
-<p>day works!</p>
+<h1>Day</h1>
+<p *ngFor="let event of events">
+    Titel: {{event.latest_event_summary}}
+    Start: {{event.latest_start_date}}
+    Gelöscht: {{event.changes[event.changes.length-1].is_deleted}}
+</p>

Frontend/src/app/components/day/day.component.ts

@@ -1,4 +1,5 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
+import {Event} from '../../models/event';
 
 @Component({
     selector: 'app-day',
@@ -6,6 +7,7 @@ import {Component, OnInit} from '@angular/core';
     styleUrls: ['./day.component.css']
 })
 export class DayComponent implements OnInit {
+    @Input() events: Event[]= [];
 
     constructor() {
     }

Frontend/src/app/components/week/week.component.html

@@ -1 +1,3 @@
-<p>week works!</p>
+<div id="week">
+    <app-day *ngFor="let day of eventsPerDay" [events]="day"></app-day>
+</div>

Frontend/src/app/components/week/week.component.ts

@@ -1,4 +1,5 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, Input, OnInit, SimpleChanges} from '@angular/core';
+import {Event} from '../../models/event';
 
 @Component({
     selector: 'app-week',
@@ -6,11 +7,42 @@ import {Component, OnInit} from '@angular/core';
     styleUrls: ['./week.component.css']
 })
 export class WeekComponent implements OnInit {
+    @Input() events: Event[] = [];
+    eventsPerDay: Event[][] = [];
 
     constructor() {
     }
 
     ngOnInit(): void {
+        this.splitEventsIntoDays();
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        this.splitEventsIntoDays();
+    }
+
+    splitEventsIntoDays() {
+        // Pre-fill list with 7 empty days
+        this.eventsPerDay = [];
+        for(let day = 0; day < 7; day++) {
+            this.eventsPerDay.push([]);
+        }
+
+        this.events.forEach((event) => {
+            let startDate = new Date(event.latest_start_date);
+            let year = startDate.getFullYear().toString();
+            let month = startDate.getMonth().toString().padStart(2, '0');
+            let day = startDate.getDate().toString().padStart(2, '0');
+            let dayIndex = startDate.getDay();
+            // Because these start with fucking sunday
+            if(dayIndex === 0) {
+                dayIndex = 6;
+            } else {
+                dayIndex--;
+            }
+
+            this.eventsPerDay[dayIndex].push(event);
+        });
     }
 
 }

Frontend/src/app/pages/landingpage/landingpage.component.html

@@ -3,7 +3,7 @@
     <app-datepicker (selectedMonday)="dateChangedFromPicker($event)"></app-datepicker>
 </header>
 <div id="content">
-    Events: {{eventCount}}
+    <app-week [events]="events"></app-week>
 </div>
 <footer class="fixed-bottom start-50 translate-middle">
     Copyright &#169; 2021 - Patrick Müller