Pipes for distance formatting

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

@@ -33,7 +33,9 @@ import { TrackPickerComponent } from './tracks/track-picker/track-picker.compone
 import { TrackPickerDialogComponent } from './tracks/track-picker-dialog/track-picker-dialog.component';
 import { EventViewComponent } from './events/event-view/event-view.component';
 import { ViewEventPageComponent } from './pages/view-event-page/view-event-page.component';
-import { UiLibraryModule } from './ui-library.module';
+import { UiLibraryModule } from './ui-library.module';
+import { DistancePipe } from './tracks/distance.pipe';
+import { ElevationPipe } from './tracks/elevation.pipe';
 
 @NgModule({
 	declarations: [
@@ -55,6 +57,8 @@ import { UiLibraryModule } from './ui-library.module';
 		TrackPickerDialogComponent,
 		EventViewComponent,
 		ViewEventPageComponent,
+  DistancePipe,
+  ElevationPipe,
 	],
 	imports: [
 		BrowserModule,

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

@@ -1,7 +1,7 @@
 <h1>Event Details</h1>
 <dl class="pivot-table">
 	<dt>Organizer</dt>
-	<dd>TODO</dd>
+	<dd>{{ event?.owner?.userId }} / {{ event?.owner?.displayName }}</dd>
 	<dt>Title</dt>
 	<dd>{{ event?.title }}</dd>
 	<dt>Description</dt>

src/RunnersMeet.Client/src/app/tracks/distance.pipe.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'distance'
+})
+export class DistancePipe implements PipeTransform {
+  transform(value: number | undefined): string {
+    return ((value ?? 0) / 1000).toFixed(1) + ' km';
+  }
+}

src/RunnersMeet.Client/src/app/tracks/elevation.pipe.ts

@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'elevation'
+})
+export class ElevationPipe implements PipeTransform {
+
+  transform(value: number | undefined, direction: 'up' | 'down' | undefined): unknown {
+    return (value ?? 0).toFixed(0) + ' m';
+  }
+
+}

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

@@ -9,11 +9,11 @@
 	<dt>Title</dt>
 	<dd>{{ track?.displayName }}</dd>
 	<dt>Distance</dt>
-	<dd>{{ track?.distance | number: '1.0-0' }}m</dd>
+	<dd>{{ track?.distance | distance }}</dd>
 	<dt>Elevation up</dt>
-	<dd>{{ track?.elevationUp | number: '1.0-0' }}m</dd>
+	<dd>{{ track?.elevationUp | elevation:'up' }}</dd>
 	<dt>Elevation down</dt>
-	<dd>{{ track?.elevationDown | number: '1.0-0' }}m</dd>
+	<dd>{{ track?.elevationDown | elevation:'down' }}</dd>
 </dl>
 
 <h1>Edit Track Details</h1>

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

@@ -3,7 +3,7 @@
 		{{ track?.displayName }}
 	</ng-template>
 	<ng-template pTemplate="subtitle">
-		↔{{ track?.distance | number: '1.0-0' }}m ↑{{ track?.elevationUp | number: '1.0-0' }}m ↓{{ track?.elevationDown | number: '1.0-0' }}m
+		↔{{ track?.distance | distance }} ↑{{ track?.elevationUp | elevation:'up' }} ↓{{ track?.elevationDown | elevation:'down' }}
 	</ng-template>
 	<ng-template pTemplate="content">
 		{{ track?.trackId }} - {{ track?.fileHash }}

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

@@ -10,11 +10,11 @@
 	<dt>Title</dt>
 	<dd>{{ track?.displayName }}</dd>
 	<dt>Distance</dt>
-	<dd>{{ track?.distance | number: '1.0-0' }}m</dd>
+	<dd>{{ track?.distance | distance }}</dd>
 	<dt>Elevation up</dt>
-	<dd>{{ track?.elevationUp | number: '1.0-0' }}m</dd>
+	<dd>{{ track?.elevationUp | elevation:'up' }}</dd>
 	<dt>Elevation down</dt>
-	<dd>{{ track?.elevationDown | number: '1.0-0' }}m</dd>
+	<dd>{{ track?.elevationDown | elevation:'down' }}</dd>
 </dl>
 
 <h1>Map</h1>