From 1ce1f1875a4c5d54a142e26b402089ce45fd85cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrick=20M=C3=BCller?= Date: Thu, 30 Sep 2021 13:18:20 +0200 Subject: [PATCH] Adding datepicker component --- Frontend/src/app/app.module.ts | 4 +- .../datepicker/datepicker.component.css | 3 + .../datepicker/datepicker.component.html | 19 +- .../datepicker/datepicker.component.ts | 165 +++++++++++++++++- .../landingpage/landingpage.component.css | 2 +- .../landingpage/landingpage.component.html | 3 +- 6 files changed, 185 insertions(+), 11 deletions(-) diff --git a/Frontend/src/app/app.module.ts b/Frontend/src/app/app.module.ts index 3de1e98..0147992 100644 --- a/Frontend/src/app/app.module.ts +++ b/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] diff --git a/Frontend/src/app/components/datepicker/datepicker.component.css b/Frontend/src/app/components/datepicker/datepicker.component.css index e69de29..adc943c 100644 --- a/Frontend/src/app/components/datepicker/datepicker.component.css +++ b/Frontend/src/app/components/datepicker/datepicker.component.css @@ -0,0 +1,3 @@ +.datepicker { + text-align: center; +} diff --git a/Frontend/src/app/components/datepicker/datepicker.component.html b/Frontend/src/app/components/datepicker/datepicker.component.html index 2ecfa1c..b6c920d 100644 --- a/Frontend/src/app/components/datepicker/datepicker.component.html +++ b/Frontend/src/app/components/datepicker/datepicker.component.html @@ -1 +1,18 @@ -

datepicker works!

+
+

It is Wednesday, my dudes!

+ + + +
diff --git a/Frontend/src/app/components/datepicker/datepicker.component.ts b/Frontend/src/app/components/datepicker/datepicker.component.ts index 8fa936b..2e3d135 100644 --- a/Frontend/src/app/components/datepicker/datepicker.component.ts +++ b/Frontend/src/app/components/datepicker/datepicker.component.ts @@ -1,15 +1,166 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; @Component({ - selector: 'app-datepicker', - templateUrl: './datepicker.component.html', - styleUrls: ['./datepicker.component.css'] + selector: 'app-datepicker', + templateUrl: './datepicker.component.html', + styleUrls: ['./datepicker.component.css'] }) export class DatepickerComponent implements OnInit { + selectedYear: string = ''; + selectedMonth: string = ''; + selectedDay: string = ''; - constructor() { } + years: string[] = []; + months: string[] = []; + days: string[] = []; - ngOnInit(): void { - } + 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(); + } } diff --git a/Frontend/src/app/pages/landingpage/landingpage.component.css b/Frontend/src/app/pages/landingpage/landingpage.component.css index c658fc6..8daba88 100644 --- a/Frontend/src/app/pages/landingpage/landingpage.component.css +++ b/Frontend/src/app/pages/landingpage/landingpage.component.css @@ -1,4 +1,4 @@ -header { +header p { text-align: center; font-size: 2em; font-weight: bold; diff --git a/Frontend/src/app/pages/landingpage/landingpage.component.html b/Frontend/src/app/pages/landingpage/landingpage.component.html index a845ee7..1f323c7 100644 --- a/Frontend/src/app/pages/landingpage/landingpage.component.html +++ b/Frontend/src/app/pages/landingpage/landingpage.component.html @@ -1,11 +1,12 @@

TINF19B4 RaPla Changes

+
Events: {{eventCount}}