Updating event edit and track picker

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

@@ -48,6 +48,9 @@ import { CheckboxModule } from 'primeng/checkbox';
 import { InputTextModule } from 'primeng/inputtext';
 import { ButtonModule } from 'primeng/button';
 import { CardModule } from 'primeng/card';
+import { CalendarModule } from 'primeng/calendar';
+import { DynamicDialogModule } from 'primeng/dynamicdialog';
+import { TableModule } from 'primeng/table';
 
 @NgModule({
 	declarations: [
@@ -93,6 +96,9 @@ import { CardModule } from 'primeng/card';
 		InputTextModule,
 		ButtonModule,
 		CardModule,
+		CalendarModule,
+		DynamicDialogModule,
+		TableModule,
 	],
 	providers: [
 		ConfigService,

src/RunnersMeet.Client/src/app/datetime.ts

@@ -1,6 +1,6 @@
 
 export class DateTime {
-	private readonly date: Date;
+	public readonly date: Date;
 
 	public constructor();
 	public constructor(date: string);
@@ -25,7 +25,7 @@ export class DateTime {
 		return this.date.toJSON();
 	}
 
-	public static fromLocalDateAndTime(dateStr: string, timeStr: string) {
-		return new DateTime(`${dateStr} ${timeStr}`);
+	public withTime(localTime: Date): DateTime {
+		return new DateTime(`${this.toDateString()} ${localTime.toLocaleTimeString('sv-SE')}`);
 	}
 }

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

@@ -1,27 +1,22 @@
 <h1>Edit Event Details</h1>
 <form #eventForm="ngForm" class="vertical-form" (ngSubmit)="updateEvent(eventForm, $event)" *ngIf="event">
-	<mat-form-field appearance="fill">
-		<mat-label>Title</mat-label>
-		<input type="text" matInput name="title" [(ngModel)]="event.title" required>
-	</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 type="date" matInput name="startDate" [(ngModel)]="startDate" required>
-	</mat-form-field>
-	<mat-form-field appearance="fill">
-		<mat-label>Event start time</mat-label>
-		<input type="time" matInput name="startTime" [(ngModel)]="startTime" required>
-	</mat-form-field>
+	<span class="p-float-label">
+		<input type="text" pInputText name="title" [(ngModel)]="event.title" placeholder="Title" required>
+	</span>
+	<span class="p-float-label">
+		<input type="text" pInputText name="description" [(ngModel)]="event.description" placeholder="Description">
+	</span>
+	<div>
+		<p-calendar [(ngModel)]="startDate" name="startDate" dateFormat="yy-mm-dd" [showIcon]="true" [required]="true"></p-calendar>
+	</div>
+	<div>
+		<p-calendar [(ngModel)]="startTime" name="startTime" [timeOnly]="true" hourFormat="24" [required]="true"></p-calendar>
+	</div>
 	<div>
-		<label>Track</label>
 		<app-track-picker [(track)]="event.track"></app-track-picker>
 	</div>
 	<div class="button-group">
-		<button type="submit" mat-raised-button color="primary">Save</button>
-		<button *ngIf="!isCreateMode" type="submit" mat-raised-button color="warn" (click)="deleteEvent()">Delete</button>
+		<button type="submit" pButton>Save</button>
+		<button *ngIf="!isCreateMode" type="button" pButton class="p-button-danger" (click)="deleteEvent()">Delete</button>
 	</div>
 </form>

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

@@ -17,8 +17,8 @@ export class EventEditComponent {
 	public isCreateMode: boolean = false;
 
 	public event: GroupEvent | null = null;
-	public startDate: string = '';
-	public startTime: string = '';
+	public startDate: Date = new Date();
+	public startTime: Date = new Date();
 
 	public constructor(
 		private readonly eventsApi: EventsApiService,
@@ -32,8 +32,8 @@ export class EventEditComponent {
 			this.eventsApi.getEvent(this.eventId).then(event => {
 				this.event = event;
 				const date = this.event.startTime ?? new DateTime();
-				this.startDate = date.toDateString();
-				this.startTime = date.toTimeString();
+				this.startDate = date.date;
+				this.startTime = date.date;
 			});
 		}
 	}
@@ -44,7 +44,7 @@ export class EventEditComponent {
 		}
 
 		if (this.startDate) {
-			this.event!.startTime = DateTime.fromLocalDateAndTime(this.startDate, this.startTime);
+			this.event!.startTime = new DateTime(this.startDate).withTime(this.startTime);
 		}
 
 		if (this.event)

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

@@ -2,8 +2,8 @@
 
 <form class="vertical-form" (ngSubmit)="search($event)">
 	<div class="field-checkbox">
-		<p-checkbox name="showMyTracks" [(ngModel)]="showMyTracks" [binary]="true" inputId="binary"></p-checkbox>
-		<label for="binary">Show <em>my</em> tracks</label>
+		<p-checkbox name="showMyTracks" [(ngModel)]="showMyTracks" [binary]="true" inputId="showMyTracks"></p-checkbox>
+		<label for="showMyTracks">Show <em>my</em> tracks</label>
 	</div>
 
 	<span class="p-input-icon-left">

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

@@ -2,13 +2,12 @@
 <form class="" #uploadForm="ngForm" (ngSubmit)="uploadFile(uploadForm)">
 	<p>
 		<input #uploadField class="hidden" type="file" name="trackFile" (change)="fileSelectionChange($event)" />
-		<button (click)="uploadField.click()" mat-raised-button><mat-icon aria-hidden="false" aria-label="Attach" fontIcon="attach_file"></mat-icon> Choose GPX File</button>
+		<button pButton class="p-button-secondary" icon="pi pi-paperclip" (click)="uploadField.click()">Choose GPX File</button>
 	</p>
 	<p>
-		<mat-form-field appearance="fill">
-			<mat-label>File Name</mat-label>
-			<input type="text" disabled [value]="fileName" matInput>
-		</mat-form-field>
+		<span class="p-float-label">
+			<input type="text" pInputText disabled [value]="fileName" placeholder="File Name">
+		</span>
 	</p>
-	<button type="submit" mat-raised-button color="primary" [disabled]="!file">Upload</button>
+	<button type="submit" pButton [disabled]="!file">Upload</button>
 </form>

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

@@ -18,12 +18,11 @@
 
 <h1>Edit Track Details</h1>
 <form class="vertical-form" (ngSubmit)="updateTrack($event)" *ngIf="track">
-	<mat-form-field appearance="fill">
-		<mat-label>Title</mat-label>
-		<input type="text" matInput name="displayName" [(ngModel)]="track.displayName">
-	</mat-form-field>
+	<span class="p-float-label">
+		<input type="text" pInputText name="displayName" [(ngModel)]="track.displayName" placeholder="Title">
+	</span>
 	<div class="button-group">
-		<button type="submit" mat-raised-button color="primary">Save</button>
-		<button type="submit" mat-raised-button color="warn" (click)="deleteTrack()">Delete</button>
+		<button type="submit" pButton>Save</button>
+		<button type="button" pButton class="p-button-danger" (click)="deleteTrack()">Delete</button>
 	</div>
 </form>

src/RunnersMeet.Client/src/app/tracks/track-picker-dialog/track-picker-dialog.component.html

@@ -1,27 +1,30 @@
-<h1 mat-dialog-title>Choose a Track</h1>
-<div mat-dialog-content>
-	<form class="vertical-form" (ngSubmit)="search($event)">
-		<mat-form-field appearance="fill">
-			<mat-label>Filter text</mat-label>
-			<input matInput name="nameFilter" [(ngModel)]="nameFilter">
-		</mat-form-field>
+<form class="vertical-form" (ngSubmit)="search($event)">
+	<span class="p-input-icon-left">
+		<i class="pi pi-search"></i>
+		<input type="text" pInputText name="nameFilter" [(ngModel)]="nameFilter" placeholder="Filter text">
+	</span>
 
-		<div class="button-group">
-			<button type="submit" mat-raised-button color="accent">Search</button>
-		</div>
-	</form>
+	<div class="button-group">
+		<button type="submit" pButton>Search</button>
+	</div>
+</form>
 
-	<mat-list role="list">
-		<mat-list-item role="listitem" *ngFor="let track of tracks | async">
-			<div matListItemTitle>{{ track.displayName }}</div>
-			<div matListItemLine>{{ track.distance }}</div>
-			<div matListItemMeta><button type="button" mat-button (click)="onPick(track)">Pick</button></div>
-		</mat-list-item>
-	</mat-list>
+<p-table [value]="(tracks | async) ?? []" selectionMode="single" (onRowSelect)="onPick($event)" dataKey="trackId">
+	<ng-template pTemplate="header">
+		<tr>
+			<th>Name</th>
+			<th>Distance</th>
+		</tr>
+	</ng-template>
+	<ng-template pTemplate="body" let-track>
+		<tr [pSelectableRow]="track">
+			<td>{{ track.displayName }}</td>
+			<td>{{ track.distance }}</td>
+		</tr>
+	</ng-template>
+</p-table>
 
-	<button mat-raised-button color="accent" [disabled]="!hasMore" (click)="loadMore()">More</button>
-</div>
-<div mat-dialog-actions>
-  <button mat-button (click)="onCancelClick()">Cancel</button>
-  <button mat-button (click)="onPick(null)">None</button>
+<div class="button-group">
+	<button type="button" pInputText [disabled]="!hasMore" (click)="loadMore()">More</button>
+	<button type="button" pInputText (click)="clear()">None</button>
 </div>

src/RunnersMeet.Client/src/app/tracks/track-picker-dialog/track-picker-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
 import { Subject } from 'rxjs';
 import { TracksApiService } from 'src/app/tracks-api.service';
 import { Track } from '../track';
@@ -19,7 +19,7 @@ export class TrackPickerDialogComponent {
 	private searchParams: TrackSearchParams = new TrackSearchParams();
 
 	constructor(
-		public dialogRef: MatDialogRef<TrackPickerDialogComponent>,
+		public dialogRef: DynamicDialogRef,
 		private readonly tracksApi: TracksApiService
 	) {
 		this.updateTracks();
@@ -29,8 +29,12 @@ export class TrackPickerDialogComponent {
 		this.dialogRef.close();
 	}
 
-	public onPick(track: Track | null): void {
-		this.dialogRef.close(track);
+	public onPick(event: any): void {
+		this.dialogRef.close(event.data as Track);
+	}
+
+	public clear(): void {
+		this.dialogRef.close(null);
 	}
 
 	public search(event: SubmitEvent): void {

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

@@ -1,2 +1,2 @@
-<button type="button" mat-raised-button (click)="pick()">Choose a Track</button>
+<button type="button" pButton class=" p-button-secondary" (click)="pick()">Choose a Track</button>
 {{ track?.displayName ?? 'No Track' }}

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

@@ -1,5 +1,6 @@
 import { Component, Input, Output } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { DialogService } from 'primeng/dynamicdialog';
 import { Observable, Subject } from 'rxjs';
 import { Track } from '../track';
 import { TrackPickerDialogComponent } from '../track-picker-dialog/track-picker-dialog.component';
@@ -7,7 +8,10 @@ import { TrackPickerDialogComponent } from '../track-picker-dialog/track-picker-
 @Component({
 	selector: 'app-track-picker',
 	templateUrl: './track-picker.component.html',
-	styleUrls: ['./track-picker.component.scss']
+	styleUrls: ['./track-picker.component.scss'],
+	providers: [
+		DialogService
+	]
 })
 export class TrackPickerComponent {
 	private readonly trackChangeSubject: Subject<Track | undefined> = new Subject<Track | undefined>();
@@ -18,16 +22,17 @@ export class TrackPickerComponent {
 	@Output()
 	public trackChange: Observable<Track | undefined> = this.trackChangeSubject.asObservable();
 
-	public constructor(private readonly dialog: MatDialog) {
+	public constructor(public dialogService: DialogService) {
 	}
 
 	public pick(): void {
-		const dialogRef = this.dialog.open(TrackPickerDialogComponent, {
+		const dialogRef = this.dialogService.open(TrackPickerDialogComponent, {
+			header: 'Choose a Track',
 			width: '60%',
 			height: '80%',
 		});
 
-		dialogRef.afterClosed().subscribe(result => {
+		dialogRef.onClose.subscribe(result => {
 			console.log('The dialog was closed', result);
 			if (result === null || result) {
 				this.track = result;