Displaying track names

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

@@ -36,6 +36,7 @@ export class CreateTrackPageComponent {
 			formData.append("name", form.value.fileName);
 
 			this.tracksApi.createTrack(formData).then(track => console.log('created track', track));
+			form.resetForm();
 		}
 	}
 }

src/RunnersMeet.Client/src/app/pages/tracks-page/tracks-page.component.html

@@ -1,4 +1,4 @@
 Tracks:
 <ul>
-	<li *ngFor="let track of tracks | async"></li>
+	<li *ngFor="let track of tracks | async">{{ track.displayName }}</li>
 </ul>

src/RunnersMeet.Client/src/app/pages/tracks-page/tracks-page.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { Track } from 'src/app/track';
 import { TracksApiService } from 'src/app/tracks-api.service';
 
 @Component({
@@ -7,7 +8,7 @@ import { TracksApiService } from 'src/app/tracks-api.service';
 	styleUrls: ['./tracks-page.component.scss']
 })
 export class TracksPageComponent {
-	public tracks: Promise<object[]>;
+	public tracks: Promise<Track[]>;
 
 	public constructor(
 		private readonly tracksApi: TracksApiService

src/RunnersMeet.Client/src/app/track.ts

@@ -0,0 +1,9 @@
+export class Track {
+	//public trackId: string = '';
+	public owner: string = '';
+	public fileHash: string = '';
+	public displayName: string = '';
+	public distance: number = 0;
+	public elevationUp: number = 0;
+	public elevationDown: number = 0;
+}

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

@@ -2,6 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { lastValueFrom } from 'rxjs';
 import { environment } from 'src/env/environment';
+import { Track } from './track';
 
 @Injectable({
 	providedIn: 'root'
@@ -12,11 +13,11 @@ export class TracksApiService {
 		private readonly http: HttpClient
 	) { }
 
-	public getTracks(): Promise<object[]> {
-		return lastValueFrom(this.http.get<object[]>(`${environment.apiUri}/api/tracks`));
+	public getTracks(): Promise<Track[]> {
+		return lastValueFrom(this.http.get<Track[]>(`${environment.apiUri}/api/tracks`));
 	}
 
-	public createTrack(formData: FormData): Promise<unknown> {
-		return lastValueFrom(this.http.post(`${environment.apiUri}/api/tracks`, formData));
+	public createTrack(formData: FormData): Promise<Track> {
+		return lastValueFrom(this.http.post<Track>(`${environment.apiUri}/api/tracks`, formData));
 	}
 }