Adding datepicker component

Frontend/src/app/app.module.ts

@@ -13,6 +13,7 @@ import {ChangeComponent} from './components/change/change.component';
 import {DatepickerComponent} from './components/datepicker/datepicker.component';
 import {EventDetailComponent} from './components/event-detail/event-detail.component';
 import {HttpClientModule} from '@angular/common/http';
+import {FormsModule} from '@angular/forms';
 
 @NgModule({
     declarations: [
@@ -30,7 +31,8 @@ import {HttpClientModule} from '@angular/common/http';
         BrowserModule,
         AppRouting,
         HttpClientModule,
-        NgbModule
+        NgbModule,
+        FormsModule
     ],
     providers: [],
     bootstrap: [AppComponent]

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

@@ -0,0 +1,3 @@
+.datepicker {
+    text-align: center;
+}

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

@@ -1 +1,18 @@
-<p>datepicker works!</p>
+<div class="datepicker">
+    <p *ngIf="itIsWednesday">It is Wednesday, my dudes!</p>
+    <select name="year" (change)="handleYearChange()" [(ngModel)]="selectedYear">
+        <option *ngFor="let year of years">
+            {{year}}
+        </option>
+    </select>
+    <select name="month" (change)="handleMonthChange()" [(ngModel)]="selectedMonth">
+        <option *ngFor="let month of months">
+            {{month}}
+        </option>
+    </select>
+    <select name="day" (change)="handleDayChange()" [(ngModel)]="selectedDay">
+        <option *ngFor="let day of days">
+            {{day}}
+        </option>
+    </select>
+</div>

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 
 @Component({
     selector: 'app-datepicker',
@@ -6,10 +6,161 @@ import { Component, OnInit } from '@angular/core';
     styleUrls: ['./datepicker.component.css']
 })
 export class DatepickerComponent implements OnInit {
+    selectedYear: string = '';
+    selectedMonth: string = '';
+    selectedDay: string = '';
 
-  constructor() { }
+    years: string[] = [];
+    months: string[] = [];
+    days: string[] = [];
+
+    itIsWednesday: boolean = false;
+
+    selectedMonday: string = '';
+
+    constructor() {
+    }
 
     ngOnInit(): void {
+        this.fillDatePickers();
+        this.handleDateChange();
+    }
+
+    /**
+     * Fills all the date pickers and sets the itIsWednesday variable
+     */
+    fillDatePickers(): void {
+        let currentDate = new Date();
+
+        if (currentDate.getDay() === 3) {
+            this.itIsWednesday = true;
+        }
+
+        this.fillYearPicker();
+        this.fillMonthPicker();
+        this.fillDayPicker();
+    }
+
+    /**
+     * Fills the "year" picker with the appropriate values and pre-selects the current year
+     */
+    fillYearPicker(): void {
+        this.years = [];
+        let currentDate = new Date();
+        let currentYear = currentDate.getFullYear().toString();
+
+        this.years = [
+            '2020',
+            '2021',
+            '2022'
+        ];
+        this.selectedYear = currentYear;
+    }
+
+    /**
+     * Fills the "month" picker with the appropriate values and pre-selects the current month
+     */
+    fillMonthPicker(): void {
+        this.months = [];
+        let currentDate = new Date();
+        let currentMonth = (currentDate.getMonth() + 1).toString().padStart(2, '0');
+
+        for (let month = 1; month <= 12; month++) {
+            let monthString = month.toString().padStart(2, '0');
+            this.months.push(monthString);
+        }
+        this.selectedMonth = currentMonth;
+    }
+
+    /**
+     * Fills the "day" picker with the appropriate values and pre-selects the current day if possible
+     */
+    fillDayPicker(): void {
+        this.days = [];
+        let currentDate = new Date();
+        let currentDay = currentDate.getDate().toString().padStart(2, '0');
+
+        let maxDays = 31;
+        if (this.selectedMonth !== '') {
+            maxDays = this.getDaysInGivenMonth(parseInt(this.selectedYear), parseInt(this.selectedMonth));
+        } else {
+            maxDays = 31;
+        }
+
+        for (let day = 1; day <= maxDays; day++) {
+            let dayString = day.toString().padStart(2, '0');
+            this.days.push(dayString);
+        }
+        this.selectedDay = parseInt(currentDay) < maxDays ? currentDay : maxDays.toString().padStart(2, '0');
+    }
+
+    /**
+     * Handles the change of the "year" picker
+     */
+    handleYearChange(): void {
+        this.fillDayPicker();
+        this.handleDateChange();
+    }
+
+    /**
+     * Handles the change of the "month" picker
+     */
+    handleMonthChange(): void {
+        this.fillDayPicker();
+        this.handleDateChange();
+    }
+
+    /**
+     * Handles a change of the "day" picker
+     */
+    handleDayChange(): void {
+        this.handleDateChange();
+    }
+
+    /**
+     * Handles changed date selections and fills the selectedMonday variable
+     */
+    handleDateChange(): void {
+        let mondayDate = this.findMondayInWeek(this.selectedYear, this.selectedMonth, this.selectedDay);
+        this.selectedMonday = mondayDate;
+    }
+
+    /**
+     * Calculates the date of the monday in the week for any given date.
+     * If you e.g. enter 2021, 09, 30 the result will be 2021-09-27
+     * @param year The year
+     * @param month The month
+     * @param day The day
+     */
+    findMondayInWeek(year: string, month: string, day: string): string {
+        let selectedDate = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+        let mondayInWeekDate = selectedDate;
+
+        let selectedDayInWeek = selectedDate.getDay();
+
+        // Sunday is 0 and Monday is 1, hence we want to substract until we land at 1.
+        // Sunday is the exeption as we need to go to 1 in the "previous" week
+        if (selectedDayInWeek === 0) {
+            mondayInWeekDate.setDate(selectedDate.getDate() - 6);
+        } else {
+            let difference = selectedDayInWeek - 1;
+            mondayInWeekDate.setDate(selectedDate.getDate() - difference);
+        }
+
+        let yearString = mondayInWeekDate.getFullYear();
+        let monthString = (mondayInWeekDate.getMonth() + 1).toString().padStart(2, '0');
+        let dayString = mondayInWeekDate.getDate().toString().padStart(2, '0');
+
+        return yearString + '-' + monthString + '-' + dayString;
+    }
+
+    /**
+     * Returns the number of days in the given month
+     * @param year The year
+     * @param month The month for which to return the number of days for
+     */
+    getDaysInGivenMonth(year: number, month: number) {
+        return new Date(year, month, 0).getDate();
     }
 
 }

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

@@ -1,4 +1,4 @@
-header {
+header p {
     text-align: center;
     font-size: 2em;
     font-weight: bold;

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

@@ -1,11 +1,12 @@
 <header>
     <p>TINF19B4 RaPla Changes</p>
+    <app-datepicker></app-datepicker>
 </header>
 <div id="content">
     Events: {{eventCount}}
 </div>
 <footer class="fixed-bottom start-50 translate-middle">
-    Footer
+    Copyright &#169; 2021 - Patrick Müller
 </footer>