Creating new events without tracks

src/RunnersMeet.Client/src/app/app.module.ts

@@ -33,9 +33,13 @@ import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { MatDatepickerModule } from '@angular/material/datepicker';
 import { EventsPageComponent } from './pages/events-page/events-page.component';
 import { EditEventPageComponent } from './pages/edit-event-page/edit-event-page.component';
 import { EventsApiService } from './events-api.service';
+import { EventCreateComponent } from './events/event-create/event-create.component';
+import { EventEditComponent } from './events/event-edit/event-edit.component';
+import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
 
 @NgModule({
 	declarations: [
@@ -51,6 +55,8 @@ import { EventsApiService } from './events-api.service';
 		MainMenuComponent,
   EventsPageComponent,
   EditEventPageComponent,
+  EventCreateComponent,
+  EventEditComponent,
 	],
 	imports: [
 		BrowserModule,
@@ -69,6 +75,8 @@ import { EventsApiService } from './events-api.service';
 		MatCheckboxModule,
 		MatFormFieldModule,
 		MatInputModule,
+		MatDatepickerModule,
+		MatNativeDateModule,
 	],
 	providers: [
 		ConfigService,
@@ -83,6 +91,10 @@ import { EventsApiService } from './events-api.service';
 			provide: ErrorHandler,
 			useClass: GlobalErrorHandler
 		},
+		{
+			provide: MAT_DATE_LOCALE,
+			useValue: 'de-CH'
+		},
 		UsersApiService,
 		PermissionService,
 		TracksApiService,

src/RunnersMeet.Client/src/app/events-api.service.ts

@@ -20,7 +20,7 @@ export class EventsApiService {
 		return lastValueFrom(this.http.get<ResultPage<GroupEvent>>(this.config.apiUri(`/api/events`), { params: searchParams.toHttpParams() }));
 	}
 
-	public createEvent(formData: FormData): Promise<GroupEvent> {
-		return lastValueFrom(this.http.post<GroupEvent>(this.config.apiUri(`/api/events`), formData));
+	public createEvent(groupEvent: GroupEvent): Promise<GroupEvent> {
+		return lastValueFrom(this.http.post<GroupEvent>(this.config.apiUri(`/api/events`), groupEvent));
 	}
 }

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

@@ -0,0 +1 @@
+<p>event-create works!</p>

src/RunnersMeet.Client/src/app/events/event-create/event-create.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EventCreateComponent } from './event-create.component';
+
+describe('EventCreateComponent', () => {
+  let component: EventCreateComponent;
+  let fixture: ComponentFixture<EventCreateComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ EventCreateComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(EventCreateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-event-create',
+  templateUrl: './event-create.component.html',
+  styleUrls: ['./event-create.component.scss']
+})
+export class EventCreateComponent {
+
+}

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

@@ -0,0 +1,25 @@
+<h1>Edit Event Details</h1>
+<form class="vertical-form" (ngSubmit)="updateEvent($event)" *ngIf="event">
+	<mat-form-field appearance="fill">
+		<mat-label>Title</mat-label>
+		<input type="text" matInput name="title" [(ngModel)]="event.title">
+	</mat-form-field>
+	<mat-form-field appearance="fill">
+		<mat-label>Description</mat-label>
+		<textarea matInput name="description" [(ngModel)]="event.description"></textarea>
+	</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>
+	</mat-form-field>
+	<mat-form-field appearance="fill">
+		<mat-label>Event start time</mat-label>
+		<input type="time" matInput name="startTime" [(ngModel)]="startTime">
+	</mat-form-field>
+	<div class="button-group">
+		<button type="submit" mat-raised-button color="primary">Save</button>
+		<button type="submit" mat-raised-button color="warn" (click)="deleteEvent()">Delete</button>
+	</div>
+</form>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EventEditComponent } from './event-edit.component';
+
+describe('EventEditComponent', () => {
+  let component: EventEditComponent;
+  let fixture: ComponentFixture<EventEditComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ EventEditComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(EventEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,61 @@
+import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
+import { EventsApiService } from 'src/app/events-api.service';
+import { GroupEvent } from '../group-event';
+
+@Component({
+  selector: 'app-event-edit',
+  templateUrl: './event-edit.component.html',
+  styleUrls: ['./event-edit.component.scss']
+})
+export class EventEditComponent {
+	@Input()
+	public eventId: string = '';
+	@Input()
+	public isCreateMode: boolean = false;
+
+	public event: GroupEvent | null = null;
+	public startDate: Date | null = null;
+	public startTime: string = '';
+
+	public constructor(
+		private readonly eventsApi: EventsApiService,
+		private readonly router: Router
+	) { }
+
+	public ngOnInit(): void {
+		if (this.isCreateMode) {
+			this.event = new GroupEvent();
+		}
+		// this.eventsApi.getTrack(this.trackId).then(track => {
+		// 	this.track = track;
+		// });
+	}
+
+	public updateEvent(event: SubmitEvent): void {
+		console.log({ date: this.startDate, time: this.startTime});
+		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;
+		}
+		console.log(this.event);
+		if (this.isCreateMode) {
+			this.eventsApi.createEvent(this.event!);
+		}
+		// if (this.track) {
+		// 	this.tracksApi.updateTrack(this.track).then(result => {
+		// 		this.track = result;
+		// 	});
+		// }
+	}
+
+	public deleteEvent(): void {
+		// if (this.track) {
+		// 	this.tracksApi.deleteTrack(this.track).then(() => {
+		// 		this.router.navigateByUrl("/tracks");
+		// 	});
+		// }
+	}
+}

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

@@ -5,7 +5,6 @@ export class GroupEvent {
 	public eventId: string = '';
 	public owner: UserProfile = new UserProfile();
 	public startTime?: Date;
-	public duration?: number = 0;
 	public title: string = '';
 	public description: string = '';
 	public track?: Track;

src/RunnersMeet.Client/src/app/pages/edit-event-page/edit-event-page.component.html

@@ -1 +1 @@
-<p>edit-event-page works!</p>
+<app-event-edit [isCreateMode]="isCreateMode" [eventId]="eventId"></app-event-edit>

src/RunnersMeet.Client/src/app/pages/edit-event-page/edit-event-page.component.ts

@@ -1,10 +1,24 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-edit-event-page',
-  templateUrl: './edit-event-page.component.html',
-  styleUrls: ['./edit-event-page.component.scss']
-})
-export class EditEventPageComponent {
-
-}
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-edit-event-page',
+  templateUrl: './edit-event-page.component.html',
+  styleUrls: ['./edit-event-page.component.scss']
+})
+export class EditEventPageComponent {
+	public isCreateMode: boolean = false;
+	public eventId: string = '';
+
+	public constructor(route: ActivatedRoute) {
+		route.params.subscribe(params => {
+			const oid = params['oid'];
+			if (oid === 'new') {
+				this.isCreateMode = true;
+			} else {
+				this.isCreateMode = false;
+				this.eventId = oid;
+			}
+		})
+	}
+}

src/RunnersMeet.Server/Controllers/EventsController.cs

@@ -39,10 +39,10 @@ public class EventsController : ControllerBase
 	}
 
 	[HttpPost]
-	public ActionResult<Event> CreateEvent([FromBody] Event newEvent)
+	public ActionResult<Event> CreateEvent([FromBody] EventData eventData)
 	{
 		var createdEvent = _requestRouter
-			.For(newEvent)
+			.For(new Event(eventData))
 			.Process<Event>();
 
 		return Ok(createdEvent);

src/RunnersMeet.Server/Domain/Event.cs

@@ -2,20 +2,21 @@ using LiteDB;
 
 namespace RunnersMeet.Server.Domain;
 
-public class Event : IUserData
+public class Event : EventData, IUserData
 {
 	public ObjectId EventId { get; set; } = ObjectId.Empty;
 	[BsonRef("users")]
 	public UserProfile Owner { get; set; } = new UserProfile();
 
-	public DateTime StartTime { get; set; }
+	public Event()
+	{
+	}
 
-	public TimeSpan Duration { get; set; }
-
-	public string Title { get; set; } = String.Empty;
-
-	public string Description { get; set; } = String.Empty;
-
-	[BsonRef("tracks")]
-	public Track? Track { get; set; }
+	public Event(EventData eventData)
+	{
+		StartTime = eventData.StartTime;
+		Title = eventData.Title;
+		Description = eventData.Description;
+		Track = eventData.Track;
+	}
 }

src/RunnersMeet.Server/Domain/EventData.cs

@@ -0,0 +1,15 @@
+using LiteDB;
+
+namespace RunnersMeet.Server.Domain;
+
+public class EventData
+{
+	public DateTime StartTime { get; set; }
+
+	public string Title { get; set; } = String.Empty;
+
+	public string Description { get; set; } = String.Empty;
+
+	[BsonRef("tracks")]
+	public Track? Track { get; set; }
+}