Updating track list

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

@@ -44,6 +44,10 @@ import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
 import { TrackPickerComponent } from './tracks/track-picker/track-picker.component';
 import { TrackPickerDialogComponent } from './tracks/track-picker-dialog/track-picker-dialog.component';
 import { MenubarModule } from 'primeng/menubar';
+import { CheckboxModule } from 'primeng/checkbox';
+import { InputTextModule } from 'primeng/inputtext';
+import { ButtonModule } from 'primeng/button';
+import { CardModule } from 'primeng/card';
 
 @NgModule({
 	declarations: [
@@ -85,6 +89,10 @@ import { MenubarModule } from 'primeng/menubar';
 		MatNativeDateModule,
 		MatDialogModule,
 		MenubarModule,
+		CheckboxModule,
+		InputTextModule,
+		ButtonModule,
+		CardModule,
 	],
 	providers: [
 		ConfigService,

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

@@ -1,19 +1,23 @@
 <h1>Track Search</h1>
 
 <form class="vertical-form" (ngSubmit)="search($event)">
-	<mat-checkbox name="showMyTracks" [(ngModel)]="showMyTracks">
-		Show <em>my</em> tracks
-	</mat-checkbox>
-	<mat-form-field appearance="fill">
-		<mat-label>Track name</mat-label>
-		<input matInput name="nameFilter" [(ngModel)]="nameFilter">
-	</mat-form-field>
+	<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>
+	</div>
+
+	<span class="p-input-icon-left">
+		<i class="pi pi-search"></i>
+		<input type="text" pInputText name="nameFilter" [(ngModel)]="nameFilter" placeholder="Search">
+	</span>
 
 	<div class="button-group">
-		<button type="submit" mat-raised-button color="accent">Search</button>
+		<div class="col-12 md:col-6 lg:col-4">
+		<button type="submit" pButton color="accent">Search</button>
+	</div>
 	</div>
 </form>
 
 <app-track-list-item *ngFor="let track of tracks | async" [track]="track"></app-track-list-item>
 
-<button mat-raised-button color="accent" [disabled]="!hasMore" (click)="loadMore()">More</button>
+<button pButton class="p-button-secondary" [disabled]="!hasMore" (click)="loadMore()">More</button>

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

@@ -1,14 +1,16 @@
-<mat-card class="track-overview-item">
-	<mat-card-header>
-		<mat-card-title>{{ track?.displayName }}</mat-card-title>
-		<mat-card-subtitle>↔{{ track?.distance | number: '1.0-0' }}m ↑{{ track?.elevationUp | number: '1.0-0' }}m ↓{{ track?.elevationDown | number: '1.0-0' }}m</mat-card-subtitle>
-	</mat-card-header>
-	<mat-card-content>
-		<p>{{ track?.trackId }} - {{ track?.fileHash }}</p>
-	</mat-card-content>
-	<mat-card-actions class="button-group">
-		<a mat-stroked-button color="primary" [routerLink]="['/tracks/view', track?.trackId]">View</a>
-		<a mat-stroked-button [routerLink]="['/tracks/edit', track?.trackId]">Edit</a>
-		<a mat-stroked-button [href]="downloadUrl" target="_blank">Download</a>
-	</mat-card-actions>
-</mat-card>
+<p-card styleClass="track-overview-item">
+	<ng-template pTemplate="title">
+		{{ 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
+	</ng-template>
+	<ng-template pTemplate="content">
+		{{ track?.trackId }} - {{ track?.fileHash }}
+	</ng-template>
+	<ng-template pTemplate="footer">
+		<a pButton class="p-button-secondary" [routerLink]="['/tracks/view', track?.trackId]">View</a>
+		<a pButton class="p-button-secondary" [routerLink]="['/tracks/edit', track?.trackId]">Edit</a>
+		<a pButton class="p-button-secondary" [href]="downloadUrl" target="_blank">Download</a>
+	</ng-template>
+</p-card>