Compare commits

..

2 Commits

Author SHA1 Message Date
8e1c071645 Adding some fancy buttons to the datepicker
All checks were successful
Jenkins Production Deployment
2021-09-30 20:56:50 +02:00
5c3870585e Basic UI for events in a week 2021-09-30 20:43:01 +02:00
11 changed files with 113 additions and 17 deletions

View File

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

View File

@ -1,3 +1,23 @@
.datepicker { .datepicker {
text-align: center; text-align: center;
} }
.switchWeekButton {
background-color: dimgrey; /* Green */
border: none;
color: #E0E5E9;
padding: .15em .5em;
text-align: center;
display: inline-block;
border-radius: .5em;
margin: .5em;
}
.datePickerDropdown {
background-color: dimgrey;
border: none;
color: #E0E5E9;
padding: .15em .5em;
border-radius: .5em;
margin: .1em;
}

View File

@ -1,18 +1,21 @@
<div class="datepicker"> <div class="datepicker">
<p *ngIf="itIsWednesday">It is Wednesday, my dudes!</p> <p *ngIf="itIsWednesday">It is Wednesday, my dudes!</p>
<select name="year" (change)="handleYearChange()" [(ngModel)]="selectedYear"> <button (click)="switchToPreviousWeek()" class="switchWeekButton">&lt;&lt; Previous week</button>
<select name="year" (change)="handleYearChange()" [(ngModel)]="selectedYear" class="datePickerDropdown">
<option *ngFor="let year of years"> <option *ngFor="let year of years">
{{year}} {{year}}
</option> </option>
</select> </select>
<select name="month" (change)="handleMonthChange()" [(ngModel)]="selectedMonth"> <select name="month" (change)="handleMonthChange()" [(ngModel)]="selectedMonth" class="datePickerDropdown">
<option *ngFor="let month of months"> <option *ngFor="let month of months">
{{month}} {{month}}
</option> </option>
</select> </select>
<select name="day" (change)="handleDayChange()" [(ngModel)]="selectedDay"> <select name="day" (change)="handleDayChange()" [(ngModel)]="selectedDay" class="datePickerDropdown">
<option *ngFor="let day of days"> <option *ngFor="let day of days">
{{day}} {{day}}
</option> </option>
</select> </select>
<button (click)="switchToToday()" class="switchWeekButton">Today</button>
<button (click)="switchToNextWeek()" class="switchWeekButton">Next week &gt;&gt;</button>
</div> </div>

View File

@ -147,7 +147,7 @@ export class DatepickerComponent implements OnInit {
mondayInWeekDate.setDate(selectedDate.getDate() - difference); mondayInWeekDate.setDate(selectedDate.getDate() - difference);
} }
let yearString = mondayInWeekDate.getFullYear(); let yearString = mondayInWeekDate.getFullYear().toString();
let monthString = (mondayInWeekDate.getMonth() + 1).toString().padStart(2, '0'); let monthString = (mondayInWeekDate.getMonth() + 1).toString().padStart(2, '0');
let dayString = mondayInWeekDate.getDate().toString().padStart(2, '0'); let dayString = mondayInWeekDate.getDate().toString().padStart(2, '0');
@ -163,4 +163,31 @@ export class DatepickerComponent implements OnInit {
return new Date(year, month, 0).getDate(); return new Date(year, month, 0).getDate();
} }
switchToNextWeek() {
let currentDate = new Date(parseInt(this.selectedYear), parseInt(this.selectedMonth)-1, parseInt(this.selectedDay));
let newDate = currentDate;
newDate.setDate(currentDate.getDate() + 7);
this.selectedYear = newDate.getFullYear().toString();
this.selectedMonth = (newDate.getMonth()+1).toString().padStart(2, '0');
this.selectedDay = newDate.getDate().toString().padStart(2, '0');
this.handleDateChange();
}
switchToPreviousWeek() {
let currentDate = new Date(parseInt(this.selectedYear), parseInt(this.selectedMonth)-1, parseInt(this.selectedDay));
let newDate = currentDate;
newDate.setDate(currentDate.getDate() - 7);
this.selectedYear = newDate.getFullYear().toString();
this.selectedMonth = (newDate.getMonth()+1).toString().padStart(2, '0');
this.selectedDay = newDate.getDate().toString().padStart(2, '0');
this.handleDateChange();
}
switchToToday() {
let currentDate = new Date();
this.selectedYear = currentDate.getFullYear().toString();
this.selectedMonth = (currentDate.getMonth()+1).toString().padStart(2, '0');
this.selectedDay = currentDate.getDate().toString().padStart(2, '0');
this.handleDateChange();
}
} }

View File

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

View File

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

View File

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

View File

@ -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;
}

View File

@ -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>

View File

@ -1,4 +1,5 @@
import {Component, OnInit} from '@angular/core'; import {Component, Input, OnInit} from '@angular/core';
import {Event} from '../../models/event';
@Component({ @Component({
selector: 'app-event', selector: 'app-event',
@ -6,11 +7,31 @@ import {Component, OnInit} from '@angular/core';
styleUrls: ['./event.component.css'] styleUrls: ['./event.component.css']
}) })
export class EventComponent implements OnInit { export class EventComponent implements OnInit {
@Input() event: Event = {} as Event;
eventTypeClass: string = '';
constructor() { constructor() {
} }
ngOnInit(): void { 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';
}
} }
} }

View File

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