Creating a new event directly from a track

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

@@ -9,6 +9,7 @@ import { TracksPageComponent } from './pages/tracks-page/tracks-page.component';
 import { ViewEventPageComponent } from './pages/view-event-page/view-event-page.component';
 import { ViewTrackPageComponent } from './pages/view-track-page/view-track-page.component';
 import { ProfilePageComponent } from './pages/profile-page/profile-page.component';
+import { trackQueryResolver } from './tracks/track-query-resolver';
 
 const routes: Routes = [
 	{
@@ -44,6 +45,9 @@ const routes: Routes = [
 		path: 'events/edit/:oid',
 		component: EditEventPageComponent,
 		canActivate: [AuthGuard],
+		resolve: {
+			track: trackQueryResolver
+		}
 	},
 	{
 		path: 'events/view/:oid',

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

@@ -4,6 +4,7 @@ import { Router } from '@angular/router';
 import { DateTime } from 'src/app/datetime';
 import { EventsApiService } from 'src/app/events-api.service';
 import { GroupEvent } from '../group-event';
+import { Track } from 'src/app/tracks/track';
 
 @Component({
   selector: 'app-event-edit',
@@ -15,6 +16,8 @@ export class EventEditComponent {
 	public eventId: string = '';
 	@Input()
 	public isCreateMode: boolean = false;
+	@Input()
+	public track: Track | null = null;
 
 	public event: GroupEvent | null = null;
 	public startDate: Date = new Date();
@@ -28,6 +31,7 @@ export class EventEditComponent {
 	public ngOnInit(): void {
 		if (this.isCreateMode) {
 			this.event = new GroupEvent();
+			this.event.track = this.track ?? undefined;
 		} else {
 			this.eventsApi.getEvent(this.eventId).then(event => {
 				this.event = event;

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

@@ -8,7 +8,9 @@
 	<dd><div class="description-text">{{ event?.description }}</div></dd>
 </dl>
 
-<a *ngIf="event?.owner?.userId | isOwner" pButton class="p-button-primary" [routerLink]="['/events/edit', event?.eventId]">Edit</a>
+<div class="button-group">
+	<a *ngIf="event?.owner?.userId | isOwner" pButton class="p-button-primary" [routerLink]="['/events/edit', event?.eventId]">Edit</a>
+</div>
 
 <h1>Registrations</h1>
 <h3>Your registration</h3>

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

@@ -1 +1 @@
-<app-event-edit [isCreateMode]="isCreateMode" [eventId]="eventId"></app-event-edit>
+<app-event-edit [isCreateMode]="isCreateMode" [track]="track | async" [eventId]="eventId"></app-event-edit>

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

@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { Observable, map } from 'rxjs';
+import { Track } from 'src/app/tracks/track';
 
 @Component({
   selector: 'app-edit-event-page',
@@ -9,8 +11,10 @@ import { ActivatedRoute } from '@angular/router';
 export class EditEventPageComponent {
 	public isCreateMode: boolean = false;
 	public eventId: string = '';
+	public readonly track: Observable<Track>;
 
 	public constructor(route: ActivatedRoute) {
+		this.track = route.data.pipe(map(data => data['track'] as Track));
 		route.params.subscribe(params => {
 			const oid = params['oid'];
 			if (oid === 'new') {

src/RunnersMeet.Client/src/app/tracks/track-query-resolver.ts

@@ -0,0 +1,11 @@
+import { ActivatedRouteSnapshot, ResolveFn } from "@angular/router";
+import { Track } from "./track";
+import { TracksApiService } from "../tracks-api.service";
+import { inject } from "@angular/core";
+
+export const trackQueryResolver: ResolveFn<Track | null> = (routeSnapshot: ActivatedRouteSnapshot) => {
+	const tracksApiService = inject(TracksApiService);
+	const trackId = routeSnapshot.queryParamMap.get('track')!;
+
+	return trackId ? tracksApiService.getTrack(trackId) : null;
+  };

src/RunnersMeet.Client/src/app/tracks/track-view/track-view.component.html

@@ -19,7 +19,10 @@
 	<dd>{{ track?.elevationDown | elevation:'down' }}</dd>
 </dl>
 
-<a *ngIf="track?.owner?.userId | isOwner" pButton class="p-button-primary" [routerLink]="['/tracks/edit', track?.trackId]">Edit</a>
+<div class="button-group">
+	<a *ngIf="track?.owner?.userId | isOwner" pButton class="p-button-primary" [routerLink]="['/tracks/edit', track?.trackId]">Edit</a>
+	<button type="button" pButton (click)="createEventFromTrack()">Create Event</button>
+</div>
 
 <h1>Map</h1>
 <app-map [track]="track"></app-map>

src/RunnersMeet.Client/src/app/tracks/track-view/track-view.component.ts

@@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { TracksApiService } from 'src/app/tracks-api.service';
 import { Track } from '../track';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-track-view',
@@ -17,7 +18,8 @@ export class TrackViewComponent {
 
 	public constructor(
 		private readonly tracksApi: TracksApiService,
-		private readonly sanitizer: DomSanitizer
+		private readonly sanitizer: DomSanitizer,
+		private readonly router: Router
 	) {	}
 
 	public ngOnInit(): void {
@@ -30,4 +32,12 @@ export class TrackViewComponent {
 			this.gpxStudioEmbedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(`https://gpx.studio/?state=${state}&embed&running&distance&direction`);
 		});
 	}
+
+	public createEventFromTrack(): void {
+		this.router.navigate(['/events', 'edit', 'new'], {
+			queryParams: {
+				track: this.track?.trackId
+			}
+		});
+	}
 }