Basic UI for events in a week

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

@@ -1 +1 @@
-<p>change works!</p>
+<p>Change details</p>

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

@@ -1,6 +1,4 @@
-<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>
+<h1>{{weekDayName}}</h1>
+<div *ngFor="let event of events">
+    <app-event [event]="event"></app-event>
+</div>

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

@@ -7,12 +7,16 @@ import {Event} from '../../models/event';
     styleUrls: ['./day.component.css']
 })
 export class DayComponent implements OnInit {
-    @Input() events: Event[]= [];
+    @Input() events: Event[] = [];
+    @Input() dayOfWeek: number = 0;
+
+    weekDayName: string = '';
 
     constructor() {
     }
 
     ngOnInit(): void {
+        this.weekDayName = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'][this.dayOfWeek];
     }
 
 }

Frontend/src/app/components/event-detail/event-detail.component.html

@@ -1 +1 @@
-<p>event-detail works!</p>
+<p>Event details popover</p>

Frontend/src/app/components/event/event.component.css

@@ -0,0 +1,17 @@
+.event-card {
+    border-radius: .5em;
+    padding: .25em;
+    margin: .5em;
+}
+
+.event-card-lecture {
+    background-color: #0A62D0;
+}
+
+.event-card-exam {
+    background-color: orangered;
+}
+
+.event-card-blocker {
+    background-color: dimgrey;
+}

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

@@ -1 +1,5 @@
-<p>event works!</p>
+<div class="event-card {{eventTypeClass}}">
+    Titel: {{event.latest_event_summary}}
+    Start: {{event.latest_start_date}}
+    Gelöscht: {{event.changes[event.changes.length-1].is_deleted}}
+</div>

Frontend/src/app/components/event/event.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-event',
@@ -6,11 +7,31 @@ import {Component, OnInit} from '@angular/core';
     styleUrls: ['./event.component.css']
 })
 export class EventComponent implements OnInit {
+    @Input() event: Event = {} as Event;
+    eventTypeClass: string = '';
 
     constructor() {
     }
 
     ngOnInit(): void {
+        let latestFullChange = this.event.changes[this.event.changes.length - 1];
+        if(latestFullChange.is_deleted) {
+            latestFullChange = this.event.changes[this.event.changes.length - 2];
+        }
+
+        switch(latestFullChange.new_categories) {
+            case 'Prüfung':
+                this.eventTypeClass = 'event-card-exam';
+                break;
+            case 'Lehrveranstaltung':
+                this.eventTypeClass = 'event-card-lecture';
+                break;
+            case 'Sonstige':
+                this.eventTypeClass = 'event-card-blocker';
+                break;
+            default:
+                this.eventTypeClass = 'event-card-blocker';
+        }
     }
 
 }

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

@@ -1,3 +1,5 @@
-<div id="week">
-    <app-day *ngFor="let day of eventsPerDay" [events]="day"></app-day>
+<div id="week" class="container-fluid">
+    <div class="row">
+        <app-day *ngFor="let day of eventsPerDay" [events]="day" [dayOfWeek]="eventsPerDay.indexOf(day)" class="col"></app-day>
+    </div>
 </div>