Calendar_Frontend/src/app/components/event/event.component.ts

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {Event} from '../../models/event';
import {ApiService} from '../../services/api.service';

@Component({
	selector: '[app-event]',
	templateUrl: './event.component.html',
	styleUrls: ['./event.component.css']
})
export class EventComponent implements OnInit {

	@Input() event: Event | undefined;
	@Input() editActive: boolean = false;
	newStartDate: string | undefined;
	newStartTime: string | undefined;
	newEndDate: string | undefined;
	newEndTime: string | undefined;
	showDateError: boolean = false;
	invalidUrlError: boolean = false;
	requiredFieldsMissing: boolean = false;
	showCreateError: boolean = false;
	@Output() deleteEvent = new EventEmitter<number>();

	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) {
			// 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.event.startDateTime == undefined ||
				this.event.endDateTime == undefined
			) {
				this.requiredFieldsMissing = true;
				return;
			}

			if(!this.checkEventValidUrl()) {
				this.invalidUrlError = true;
				return;
			}

			if(this.event.eventId === undefined) {
				this.api.createEvent(this.event).subscribe((res: any) => {
					console.log(res);

					if(res.eventId) {
						this.event!.eventId = res.eventId;
					} else {
						this.showCreateError = true;
						return;
					}
				});
			} 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);
		}

		// Set end date accordingly if behind start date
		if(this.event) {
			if(this.event.endDateTime < this.event.startDateTime) {
				this.newEndDate = this.serializeDate(this.event.startDateTime);
				this.newEndTime = this.serializeTime(this.event.startDateTime);
				this.setEndDateTime();
			}
		}
	}

	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() === '';
	}

	triggerDelete() {
		let deleteConfirmed = window.confirm(`Are you sure you want to delete "${this.event!.name}"? This action cannot be undone.`);

		if(deleteConfirmed && this.event) {
			this.api.deleteEvent(this.event).subscribe((res: any) => {
				console.log(res);
				if(res.message) {
					this.deleteEvent.next(this.event!.eventId);
				}
			});
		}
	}

	checkEventValidUrl(): boolean {
		if(this.isNullOrBlank(this.event!.url)) {
			return true;
		}

		const urlRegex = /^(https?:\/\/)?((www\.)?([a-z0-9äöü]*\.)+[a-z]{2,10}.*)$/i;

		let validUrl = urlRegex.test(this.event!.url);

		if(validUrl){
			let match = this.event!.url.match(urlRegex);
			if(match) {
				this.event!.url = 'https://' + match[2];
			} else {
				validUrl = false;
			}
		}

		return validUrl;
	}

	getEventStatusFriendlyName(): string {
		switch (this.event!.status) {
			case 'DRAFT':
				return 'Draft';
			case 'PUBLIC':
				return 'Published';
			default:
				return 'Error';
		}
	}
}