diff --git a/src/app/components/event/event.component.css b/src/app/components/event/event.component.css index 86bb390..d631cbe 100644 --- a/src/app/components/event/event.component.css +++ b/src/app/components/event/event.component.css @@ -1,3 +1,12 @@ table, th, td { border: .05em solid black; } + +p.has-error { + color: red; +} + +td.has-error { + border-color: red; + border-width: 2px; +} diff --git a/src/app/components/event/event.component.html b/src/app/components/event/event.component.html index 572e3c2..830134f 100644 --- a/src/app/components/event/event.component.html +++ b/src/app/components/event/event.component.html @@ -1,67 +1,64 @@ - -
- {{this.event?.calendarId}} -
-
- {{this.event?.calendarId}} -
- - -
+ + + {{event?.calendarId}} + + -
-
- {{this.event?.name}} -
- - -
- -
-
- {{this.event?.description}} -
- - -
- -
-
- {{this.event?.startDateTime}} -
- - -
- -
-
- {{this.event?.endDateTime}} -
- - -
- -
-
- {{this.event?.location}} -
- - -
- -
-
- {{this.event?.createdBy}} -
- - -
- -
-
- {{this.event?.url}} -
- - - - + + + + + + + + + + + + + + + + + {{event?.createdBy}} + + + + + + +

Start Date must not be after end date!

+

Required fields are missing!

+ + + + + {{event?.calendarId}} + + + {{event?.name}} + + + {{event?.description}} + + + + + + + + + + + {{event?.location}} + + + {{event?.createdBy}} + + + {{event?.url}} + + + + + diff --git a/src/app/components/event/event.component.ts b/src/app/components/event/event.component.ts index 50b7fe7..88e2497 100644 --- a/src/app/components/event/event.component.ts +++ b/src/app/components/event/event.component.ts @@ -11,20 +11,119 @@ export class EventComponent implements OnInit { @Input() event: Event | undefined; - editActive: boolean = false; + @Input() editActive: boolean = false; + newStartDate: string | undefined; + newStartTime: string | undefined; + newEndDate: string | undefined; + newEndTime: string | undefined; + showDateError: boolean = false; + requiredFieldsMissing: boolean = false; + constructor(private api: ApiService) { } ngOnInit(): void { + if (this.event) { + this.newStartDate = this.serializeDate(this.event.startDateTime); + this.newStartTime = this.serializeTime(this.event.startDateTime); + this.newEndDate = this.serializeDate(this.event.endDateTime); + this.newEndTime = this.serializeTime(this.event.endDateTime); + } } toggleEdit() { - if(this.editActive && this.event !== undefined) { - this.api.updateEvent(this.event).subscribe((res: any) => { - console.log(res); - }); + if (this.editActive && this.event !== undefined) { + // Prevent save if endDateTime is before startDateTime + if(this.event.endDateTime < this.event.startDateTime) { + this.showDateError = true; + return; + } + + // Check required fields + if( + this.isNullOrBlank(this.event.name) || + this.isNullOrBlank(this.event.createdBy) || + this.event.startDateTime == undefined || + this.event.endDateTime == undefined + ) { + this.requiredFieldsMissing = true; + return; + } + + if(this.event.eventId === undefined) { + this.api.createEvent(this.event).subscribe((res: any) => { + console.log(res); + this.event!.eventId = res.eventId; + }); + } else { + // Update existing event + this.api.updateEvent(this.event).subscribe((res: any) => { + console.log(res); + }); + } } this.editActive = !this.editActive; } + + setStartDateTime() { + if (this.newStartDate && this.event) { + let newDate: Date = this.parseDate(this.newStartDate); + + this.event.startDateTime.setFullYear(newDate.getFullYear()); + this.event.startDateTime.setMonth(newDate.getMonth()); + this.event.startDateTime.setDate(newDate.getDate()); + } + if (this.newStartTime && this.event) { + let newTime: Date = this.parseTime(this.newStartTime); + + this.event.startDateTime.setHours(newTime.getHours()); + this.event.startDateTime.setMinutes(newTime.getMinutes()); + this.event.startDateTime.setSeconds(0); + } + } + + setEndDateTime() { + if (this.newEndDate && this.event) { + let newDate: Date = this.parseDate(this.newEndDate); + + this.event.endDateTime.setFullYear(newDate.getFullYear()); + this.event.endDateTime.setMonth(newDate.getMonth()); + this.event.endDateTime.setDate(newDate.getDate()); + } + if (this.newEndTime && this.event) { + let newTime: Date = this.parseTime(this.newEndTime); + + this.event.endDateTime.setHours(newTime.getHours()); + this.event.endDateTime.setMinutes(newTime.getMinutes()); + this.event.endDateTime.setSeconds(0); + } + } + + serializeDate(date: Date): string { + let year = date.getFullYear(); + let month = (date.getMonth() + 1).toString().padStart(2, '0'); + let day = date.getDate().toString().padStart(2, '0'); + + return `${year}-${month}-${day}`; + } + + serializeTime(date: Date): string { + let hours = date.getHours().toString().padStart(2, '0'); + let minutes = date.getMinutes().toString().padStart(2, '0'); + + return `${hours}:${minutes}`; + } + + parseDate(text: string): Date { + return new Date(text); + } + + parseTime(text: string): Date { + return new Date(`2000-01-01T${text}:00`); + } + + isNullOrBlank(str: string | null): boolean { + return str === null || str === undefined || str.trim() === ''; + } } diff --git a/src/app/components/events-table/events-table.component.html b/src/app/components/events-table/events-table.component.html index 6da37cb..dc15afc 100644 --- a/src/app/components/events-table/events-table.component.html +++ b/src/app/components/events-table/events-table.component.html @@ -10,5 +10,6 @@ URL Edit - + + diff --git a/src/app/components/events-table/events-table.component.ts b/src/app/components/events-table/events-table.component.ts index e484e35..3cc1313 100644 --- a/src/app/components/events-table/events-table.component.ts +++ b/src/app/components/events-table/events-table.component.ts @@ -1,5 +1,6 @@ import {Component, Input, OnInit} from '@angular/core'; import {Event} from '../../models/event'; +import {UtilsService} from '../../services/utils.service'; @Component({ selector: 'app-events-table', @@ -9,10 +10,20 @@ import {Event} from '../../models/event'; export class EventsTableComponent implements OnInit { @Input() events: Event[] = []; + @Input() selectedCalendar: number = -1; constructor() { } ngOnInit(): void { } + addEvent() { + this.events.push({ + calendarId: this.selectedCalendar, + startDateTime: new Date(), + endDateTime: new Date(), + createdDate: new Date(), + createdBy: UtilsService.getNameFromLocalStorage() + } as Event); + } } diff --git a/src/app/pages/admin/admin.component.html b/src/app/pages/admin/admin.component.html index 59808fc..c41926b 100644 --- a/src/app/pages/admin/admin.component.html +++ b/src/app/pages/admin/admin.component.html @@ -4,11 +4,11 @@
- - +
diff --git a/src/app/pages/admin/admin.component.ts b/src/app/pages/admin/admin.component.ts index e0c98de..76955cd 100644 --- a/src/app/pages/admin/admin.component.ts +++ b/src/app/pages/admin/admin.component.ts @@ -49,4 +49,22 @@ export class AdminComponent implements OnInit { this.isLoggedIn = true; this.getEvents(); } + + handleCalendarChange() { + this.events = []; + this.getEvents(); + } + + getCalendarId(text: string): number { + switch(text) { + case 'public': + return 1; + case 'members': + return 2; + case 'management': + return 3; + default: + return -1; + } + } } diff --git a/src/app/services/api.service.ts b/src/app/services/api.service.ts index 4aaa5db..5e95643 100644 --- a/src/app/services/api.service.ts +++ b/src/app/services/api.service.ts @@ -37,12 +37,25 @@ export class ApiService { updateEvent.password = password; - console.log(event); - return this.http.put(this.apiUrl + updateEvent.eventId, updateEvent); } catch (exception) { console.log('Error fetching events from API'); } return new Observable(); } + + createEvent(event: Event): Observable { + try { + let password = UtilsService.getPasswordFromLocalStorage(); + + let createEvent: any = event; + + createEvent.password = password; + + return this.http.post(this.apiUrl, createEvent); + } catch (exception) { + console.log('Error fetching events from API'); + } + return new Observable(); + } } diff --git a/src/app/services/utils.service.ts b/src/app/services/utils.service.ts index 963ab83..4bec2b5 100644 --- a/src/app/services/utils.service.ts +++ b/src/app/services/utils.service.ts @@ -16,4 +16,8 @@ export class UtilsService { static getPasswordFromLocalStorage(): string { return localStorage.getItem('password') ?? ''; } + + static getNameFromLocalStorage(): string { + return localStorage.getItem('name') ?? ''; + } }