Editing of tracks

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

@@ -16,6 +16,7 @@ export class EditTrackPageComponent {
 			if (oid === 'new') {
 				this.isCreateMode = true;
 			} else {
+				this.isCreateMode = false;
 				this.trackId = oid;
 			}
 		})

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

@@ -20,4 +20,12 @@ export class TracksApiService {
 	public createTrack(formData: FormData): Promise<Track> {
 		return lastValueFrom(this.http.post<Track>(`${environment.apiUri}/api/tracks`, formData));
 	}
+
+	public getTrack(trackId: string): Promise<Track> {
+		return lastValueFrom(this.http.get<Track>(`${environment.apiUri}/api/tracks/${trackId}`));
+	}
+
+	public updateTrack(track: Track): Promise<Track> {
+		return lastValueFrom(this.http.put<Track>(`${environment.apiUri}/api/tracks/${track.trackId}`, track));
+	}
 }

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

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { NgForm } from '@angular/forms';
+import { Router } from '@angular/router';
 import { TracksApiService } from 'src/app/tracks-api.service';
 
 @Component({
@@ -9,7 +10,8 @@ import { TracksApiService } from 'src/app/tracks-api.service';
 })
 export class TrackCreateComponent {
 	public constructor(
-		private readonly tracksApi: TracksApiService
+		private readonly tracksApi: TracksApiService,
+		private readonly router: Router
 	) { }
 
 	public uploadFile(event: SubmitEvent, form: NgForm): void {
@@ -20,8 +22,11 @@ export class TrackCreateComponent {
 			const formData = new FormData();
 			formData.append("file", file);
 
-			this.tracksApi.createTrack(formData).then(track => console.log('created track', track));
-			form.resetForm();
+			this.tracksApi.createTrack(formData).then(track =>
+			{
+				form.resetForm();
+				this.router.navigateByUrl(`tracks/edit/${track.trackId}`, );
+			});
 		}
 	}
 }

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

@@ -1 +1,26 @@
-<p>track-edit works!</p>
+<form (ngSubmit)="updateTrack($event)">
+	<div>
+		<label>ID:</label> {{ track.trackId }}
+	</div>
+	<div>
+		<label>Owner:</label> {{ track.owner }}
+	</div>
+	<div>
+		<label>File Hash:</label> {{ track.fileHash }}
+	</div>
+	<div>
+		<label>Display Name:</label> <input type="text" name="displayName" [(ngModel)]="track.displayName" />
+	</div>
+	<div>
+		<label>Distance (m):</label> {{ track.distance }}
+	</div>
+	<div>
+		<label>Elevation up (m):</label> {{ track.elevationUp }}
+	</div>
+	<div>
+		<label>Elevation down (m):</label> {{ track.elevationDown }}
+	</div>
+	<div>
+		<button type="submit">Save</button>
+	</div>
+</form>

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

@@ -1,11 +1,33 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { TracksApiService } from 'src/app/tracks-api.service';
+import { Track } from '../track';
 
 @Component({
   selector: 'app-track-edit',
   templateUrl: './track-edit.component.html',
   styleUrls: ['./track-edit.component.scss']
 })
-export class TrackEditComponent {
+export class TrackEditComponent implements OnInit {
 	@Input()
 	public trackId: string = '';
+
+	public track: Track = {} as Track;
+
+	public constructor(
+		private readonly tracksApi: TracksApiService,
+		private readonly router: Router
+	) { }
+
+	public ngOnInit(): void {
+		this.tracksApi.getTrack(this.trackId).then(track => {
+			this.track = track;
+		});
+	}
+
+	public updateTrack(event: SubmitEvent): void {
+		this.tracksApi.updateTrack(this.track).then(result => {
+			this.track = result;
+		});
+	}
 }

src/RunnersMeet.Client/src/app/tracks/track-list-item/track-list-item.component.html

@@ -1,2 +1,3 @@
 {{ track?.trackId }} - {{ track?.displayName }} - {{ track?.fileHash }}<br />
-↔{{ track?.distance }}m ↑{{ track?.elevationUp }}m ↓{{ track?.elevationDown }}m
+↔{{ track?.distance }}m ↑{{ track?.elevationUp }}m ↓{{ track?.elevationDown }}m<br />
+<a [routerLink]="['/tracks/edit', track?.trackId]">Edit</a>