Custom DateTime handling

src/RunnersMeet.Client/src/app/datetime.ts

@@ -0,0 +1,31 @@
+
+export class DateTime {
+	private readonly date: Date;
+
+	public constructor();
+	public constructor(date: string);
+	public constructor(date: Date);
+	public constructor(date?: Date | string) {
+		if (date) {
+			this.date = new Date(date);
+		} else {
+			this.date = new Date();
+		}
+	}
+
+	public toDateString(): string {
+		return this.date.toLocaleDateString('sv-SE');
+	}
+
+	public toTimeString(): string {
+		return this.date.toLocaleTimeString('sv-SE');
+	}
+
+	public toJSON(): string {
+		return this.date.toJSON();
+	}
+
+	public static fromLocalDateAndTime(dateStr: string, timeStr: string) {
+		return new DateTime(`${dateStr} ${timeStr}`);
+	}
+}

src/RunnersMeet.Client/src/app/events/event-edit/event-edit.component.html

@@ -1,8 +1,8 @@
 <h1>Edit Event Details</h1>
-<form class="vertical-form" (ngSubmit)="updateEvent($event)" *ngIf="event">
+<form #eventForm="ngForm" class="vertical-form" (ngSubmit)="updateEvent(eventForm, $event)" *ngIf="event">
 	<mat-form-field appearance="fill">
 		<mat-label>Title</mat-label>
-		<input type="text" matInput name="title" [(ngModel)]="event.title">
+		<input type="text" matInput name="title" [(ngModel)]="event.title" required>
 	</mat-form-field>
 	<mat-form-field appearance="fill">
 		<mat-label>Description</mat-label>
@@ -10,13 +10,11 @@
 	</mat-form-field>
 	<mat-form-field appearance="fill">
 		<mat-label>Event date</mat-label>
-		<input matInput [matDatepicker]="picker" name="startDate" [(ngModel)]="startDate">
-		<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
-		<mat-datepicker #picker></mat-datepicker>
+		<input type="date" matInput name="startDate" [(ngModel)]="startDate" required>
 	</mat-form-field>
 	<mat-form-field appearance="fill">
 		<mat-label>Event start time</mat-label>
-		<input type="time" matInput name="startTime" [(ngModel)]="startTime">
+		<input type="time" matInput name="startTime" [(ngModel)]="startTime" required>
 	</mat-form-field>
 	<div class="button-group">
 		<button type="submit" mat-raised-button color="primary">Save</button>

src/RunnersMeet.Client/src/app/events/event-edit/event-edit.component.ts

@@ -1,5 +1,7 @@
 import { Component, Input } from '@angular/core';
+import { NgForm } from '@angular/forms';
 import { Router } from '@angular/router';
+import { DateTime } from 'src/app/datetime';
 import { EventsApiService } from 'src/app/events-api.service';
 import { GroupEvent } from '../group-event';
 
@@ -15,7 +17,7 @@ export class EventEditComponent {
 	public isCreateMode: boolean = false;
 
 	public event: GroupEvent | null = null;
-	public startDate: Date | null = null;
+	public startDate: string = '';
 	public startTime: string = '';
 
 	public constructor(
@@ -29,29 +31,32 @@ export class EventEditComponent {
 		} else {
 			this.eventsApi.getEvent(this.eventId).then(event => {
 				this.event = event;
-				this.startDate = new Date(this.event.startTime ?? new Date());
-				this.startTime =
-					(this.event.startTime?.getHours() ?? 0).toString().padStart(2, '0')
-					+ ':'
-					+ (this.event.startTime?.getMinutes() ?? 0).toString().padStart(2, '0');
+				const date = this.event.startTime ?? new DateTime();
+				this.startDate = date.toDateString();
+				this.startTime = date.toTimeString();
 			});
 		}
 	}
 
-	public updateEvent(event: SubmitEvent): void {
-		const match = this.startTime.match(/(\d{1,2}):(\d{1,2})/);
-		if (this.startDate && match) {
-			this.startDate.setHours(parseInt(match[1]));
-			this.startDate.setMinutes(parseInt(match[2]));
-			this.event!.startTime = this.startDate;
+	public updateEvent(form: NgForm, event: SubmitEvent): void {
+		if (!form.valid) {
+			return;
+		}
+
+		if (this.startDate) {
+			this.event!.startTime = DateTime.fromLocalDateAndTime(this.startDate, this.startTime);
 		}
 
 		if (this.event)
 		{
 			if (this.isCreateMode) {
-				this.eventsApi.createEvent(this.event);
+				this.eventsApi.createEvent(this.event).then(result => {
+					this.router.navigateByUrl(`events/edit/${result.eventId}`);
+				})
 			} else {
-				this.eventsApi.updateEvent(this.event);
+				this.eventsApi.updateEvent(this.event).then(result => {
+					this.router.navigateByUrl(`events/edit/${result.eventId}`);
+				});
 			}
 		}
 	}

src/RunnersMeet.Client/src/app/events/group-event.ts

@@ -1,10 +1,11 @@
+import { DateTime } from "../datetime";
 import { Track } from "../tracks/track";
 import { UserProfile } from "../users/user-profile";
 
 export class GroupEvent {
 	public eventId: string = '';
 	public owner: UserProfile = new UserProfile();
-	public startTime?: Date;
+	public startTime?: DateTime;
 	public title: string = '';
 	public description: string = '';
 	public track?: Track;
@@ -12,7 +13,7 @@ export class GroupEvent {
 	public static deserialize(data: Readonly<GroupEvent>): GroupEvent {
 		const obj = new GroupEvent();
 		Object.assign(obj, data);
-		obj.startTime = new Date(obj.startTime as unknown as string);
+		obj.startTime = new DateTime(obj.startTime as unknown as string);
 		return obj;
 	}
 }