From 6b55c438f6d507a57d6fc00d04aadf79118c3b9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrick=20M=C3=BCller?= Date: Sat, 2 Oct 2021 12:13:18 +0200 Subject: [PATCH] Adding ability to hide deleted events --- Frontend/src/app/app.module.ts | 2 -- .../datepicker/datepicker.component.css | 20 ++++++++++++++++++- .../datepicker/datepicker.component.html | 1 + .../datepicker/datepicker.component.ts | 19 ++++++++++++++++++ .../src/app/components/day/day.component.html | 2 +- .../src/app/components/day/day.component.ts | 1 + .../app/components/week/week.component.html | 2 +- .../src/app/components/week/week.component.ts | 1 + .../landingpage/landingpage.component.html | 4 ++-- .../landingpage/landingpage.component.ts | 5 +++++ 10 files changed, 50 insertions(+), 7 deletions(-) diff --git a/Frontend/src/app/app.module.ts b/Frontend/src/app/app.module.ts index 1a54f46..a0385c6 100644 --- a/Frontend/src/app/app.module.ts +++ b/Frontend/src/app/app.module.ts @@ -15,8 +15,6 @@ import {EventDetailComponent} from './components/event-detail/event-detail.compo import {HttpClientModule} from '@angular/common/http'; import {FormsModule} from '@angular/forms'; import {ApiService} from './services/api/api.service'; -import {MatDialogModule} from '@angular/material/dialog'; -import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @NgModule({ declarations: [ diff --git a/Frontend/src/app/components/datepicker/datepicker.component.css b/Frontend/src/app/components/datepicker/datepicker.component.css index 359eb66..6c9f763 100644 --- a/Frontend/src/app/components/datepicker/datepicker.component.css +++ b/Frontend/src/app/components/datepicker/datepicker.component.css @@ -3,7 +3,7 @@ } .switchWeekButton { - background-color: dimgrey; /* Green */ + background-color: dimgrey; border: none; color: #E0E5E9; padding: .15em .5em; @@ -13,6 +13,24 @@ margin: .5em; } +.showDeletedBtn { + border: none; + color: #E0E5E9; + padding: .15em .5em; + text-align: center; + display: inline-block; + border-radius: .5em; + margin: .5em; +} + +.show { + background-color: green; +} + +.hide { + background-color: darkred; +} + .datePickerDropdown { background-color: dimgrey; border: none; diff --git a/Frontend/src/app/components/datepicker/datepicker.component.html b/Frontend/src/app/components/datepicker/datepicker.component.html index 8d932f2..09b0462 100644 --- a/Frontend/src/app/components/datepicker/datepicker.component.html +++ b/Frontend/src/app/components/datepicker/datepicker.component.html @@ -17,5 +17,6 @@ + diff --git a/Frontend/src/app/components/datepicker/datepicker.component.ts b/Frontend/src/app/components/datepicker/datepicker.component.ts index 3af74b3..3d74214 100644 --- a/Frontend/src/app/components/datepicker/datepicker.component.ts +++ b/Frontend/src/app/components/datepicker/datepicker.component.ts @@ -16,6 +16,11 @@ export class DatepickerComponent implements OnInit { itIsWednesday: boolean = false; + internalShowDeletedEvents: boolean = true; + @Output() showDeletedEvents = new EventEmitter(); + switchDeletedBtnClass: string = 'show'; + showingDeletedBtnText: string = 'Showing deleted events'; + @Output() selectedMonday = new EventEmitter(); constructor() { @@ -190,4 +195,18 @@ export class DatepickerComponent implements OnInit { this.selectedDay = currentDate.getDate().toString().padStart(2, '0'); this.handleDateChange(); } + + switchShowDeletedEvents() { + if(this.internalShowDeletedEvents) { + this.internalShowDeletedEvents = false; + this.showDeletedEvents.emit(false); + this.switchDeletedBtnClass = 'hide'; + this.showingDeletedBtnText = 'Deleted events hidden'; + } else { + this.internalShowDeletedEvents = true; + this.showDeletedEvents.emit(true); + this.switchDeletedBtnClass = 'show'; + this.showingDeletedBtnText = 'Showing deleted events'; + } + } } diff --git a/Frontend/src/app/components/day/day.component.html b/Frontend/src/app/components/day/day.component.html index 1130efa..3b18691 100644 --- a/Frontend/src/app/components/day/day.component.html +++ b/Frontend/src/app/components/day/day.component.html @@ -1,4 +1,4 @@

{{weekDayName}}

- +
diff --git a/Frontend/src/app/components/day/day.component.ts b/Frontend/src/app/components/day/day.component.ts index 2d5c079..9c436cc 100644 --- a/Frontend/src/app/components/day/day.component.ts +++ b/Frontend/src/app/components/day/day.component.ts @@ -9,6 +9,7 @@ import {Event} from '../../models/event'; export class DayComponent implements OnInit { @Input() events: Event[] = []; @Input() dayOfWeek: number = 0; + @Input() showDeletedEvents: boolean = true; weekDayName: string = ''; diff --git a/Frontend/src/app/components/week/week.component.html b/Frontend/src/app/components/week/week.component.html index 47aba56..beb3893 100644 --- a/Frontend/src/app/components/week/week.component.html +++ b/Frontend/src/app/components/week/week.component.html @@ -1,5 +1,5 @@
- +
diff --git a/Frontend/src/app/components/week/week.component.ts b/Frontend/src/app/components/week/week.component.ts index 012bb26..766d8bb 100644 --- a/Frontend/src/app/components/week/week.component.ts +++ b/Frontend/src/app/components/week/week.component.ts @@ -8,6 +8,7 @@ import {Event} from '../../models/event'; }) export class WeekComponent implements OnInit { @Input() events: Event[] = []; + @Input() showDeletedEvents: boolean = true; eventsPerDay: Event[][] = []; constructor() { diff --git a/Frontend/src/app/pages/landingpage/landingpage.component.html b/Frontend/src/app/pages/landingpage/landingpage.component.html index 547ce29..2d5baf1 100644 --- a/Frontend/src/app/pages/landingpage/landingpage.component.html +++ b/Frontend/src/app/pages/landingpage/landingpage.component.html @@ -1,9 +1,9 @@

TINF19B4 RaPla Changes

- +
- +