From 8e1c0716455b161367c11a05b6d221091513401f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20M=C3=BCller?= <patrick@mueller-patrick.tech>
Date: Thu, 30 Sep 2021 20:56:50 +0200
Subject: [PATCH] Adding some fancy buttons to the datepicker

---
 .../datepicker/datepicker.component.css       | 20 +++++++++++++
 .../datepicker/datepicker.component.html      |  9 ++++--
 .../datepicker/datepicker.component.ts        | 29 ++++++++++++++++++-
 3 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/Frontend/src/app/components/datepicker/datepicker.component.css b/Frontend/src/app/components/datepicker/datepicker.component.css
index adc943c..359eb66 100644
--- a/Frontend/src/app/components/datepicker/datepicker.component.css
+++ b/Frontend/src/app/components/datepicker/datepicker.component.css
@@ -1,3 +1,23 @@
 .datepicker {
     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;
+}
diff --git a/Frontend/src/app/components/datepicker/datepicker.component.html b/Frontend/src/app/components/datepicker/datepicker.component.html
index b6c920d..8d932f2 100644
--- a/Frontend/src/app/components/datepicker/datepicker.component.html
+++ b/Frontend/src/app/components/datepicker/datepicker.component.html
@@ -1,18 +1,21 @@
 <div class="datepicker">
     <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">
             {{year}}
         </option>
     </select>
-    <select name="month" (change)="handleMonthChange()" [(ngModel)]="selectedMonth">
+    <select name="month" (change)="handleMonthChange()" [(ngModel)]="selectedMonth" class="datePickerDropdown">
         <option *ngFor="let month of months">
             {{month}}
         </option>
     </select>
-    <select name="day" (change)="handleDayChange()" [(ngModel)]="selectedDay">
+    <select name="day" (change)="handleDayChange()" [(ngModel)]="selectedDay" class="datePickerDropdown">
         <option *ngFor="let day of days">
             {{day}}
         </option>
     </select>
+    <button (click)="switchToToday()" class="switchWeekButton">Today</button>
+    <button (click)="switchToNextWeek()" class="switchWeekButton">Next week &gt;&gt;</button>
 </div>
diff --git a/Frontend/src/app/components/datepicker/datepicker.component.ts b/Frontend/src/app/components/datepicker/datepicker.component.ts
index 804c018..3af74b3 100644
--- a/Frontend/src/app/components/datepicker/datepicker.component.ts
+++ b/Frontend/src/app/components/datepicker/datepicker.component.ts
@@ -147,7 +147,7 @@ export class DatepickerComponent implements OnInit {
             mondayInWeekDate.setDate(selectedDate.getDate() - difference);
         }
 
-        let yearString = mondayInWeekDate.getFullYear();
+        let yearString = mondayInWeekDate.getFullYear().toString();
         let monthString = (mondayInWeekDate.getMonth() + 1).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();
     }
 
+    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();
+    }
 }