#7: Adding filters

src/app/pages/admin/admin.component.html

@@ -6,11 +6,21 @@
 	<input id="name" type="text" aria-label="Your Name" (keyup.enter)="login()" [(ngModel)]="name">
 </div>
 <div *ngIf="isLoggedIn">
+	<span>Logged in as {{getUserName()}}&nbsp; | &nbsp;</span>
+	<span>Calendar: </span>
 	<select [(ngModel)]="selectedCalendar" (change)="handleCalendarChange()">
 		<option value="" disabled selected hidden>Select calendar</option>
 		<option>public</option>
 		<option>members</option>
 		<option>management</option>
 	</select>
+	<span>&nbsp; | &nbsp;</span>
+	<span>Filter: </span>
+	<select [(ngModel)]="eventFilter" (change)="getEvents()">
+		<option value="" disabled selected hidden>Select filter</option>
+		<option value="all">All Events</option>
+		<option value="future">Future Events only</option>
+		<option value="past">Past Events only</option>
+	</select>
 	<app-events-table [events]="this.events" [selectedCalendar]="getCalendarId(selectedCalendar)"></app-events-table>
 </div>

src/app/pages/admin/admin.component.ts

@@ -15,6 +15,8 @@ export class AdminComponent implements OnInit {
 	selectedCalendar: string = '';
 	password: string = '';
 	name: string = '';
+	eventFilter: string = '';
+
 	constructor(
 		private api: ApiService
 	) {
@@ -28,19 +30,24 @@ export class AdminComponent implements OnInit {
 	}
 
 	getEvents(): void {
+		this.events = [];
+
 		if(this.selectedCalendar === '') {
 			return;
 		}
 
 		this.api.getEvents(this.selectedCalendar).subscribe((events: Event[]): void => {
-			events.forEach((event: Event) => {
+			for(let event of events) {
+				if(!this.checkEventMeetsFilterCriteria(event)) {
+					continue;
+				}
 				this.events.push({
 					...event,
 					startDateTime: new Date(event.startDateTime),
 					endDateTime: new Date(event.endDateTime),
 					createdDate: new Date(event.createdDate)
 				})
-			})
+			}
 		})
 	}
 
@@ -51,7 +58,6 @@ export class AdminComponent implements OnInit {
 	}
 
 	handleCalendarChange() {
-		this.events = [];
 		this.getEvents();
 	}
 
@@ -67,4 +73,32 @@ export class AdminComponent implements OnInit {
 				return -1;
 		}
 	}
+
+	checkEventMeetsFilterCriteria(event: Event): boolean {
+		switch (this.eventFilter) {
+			case '':
+				return true;
+			case 'all':
+				return true;
+			case 'future':
+				return this.reduceToDay(new Date(event.endDateTime)) >= this.reduceToDay(new Date());
+			case 'past':
+				return this.reduceToDay(new Date(event.endDateTime)) < this.reduceToDay(new Date());
+			default:
+				return true;
+		}
+	}
+
+	reduceToDay(date: Date): Date {
+		let dayOnlyDate: Date = new Date();
+		dayOnlyDate.setFullYear(date.getFullYear());
+		dayOnlyDate.setMonth(date.getMonth());
+		dayOnlyDate.setDate(date.getDate());
+
+		return dayOnlyDate;
+	}
+
+	getUserName(): string {
+		return UtilsService.getNameFromLocalStorage();
+	}
 }