Highlighting expired event list items

src/RunnersMeet.Client/src/app/events/event-list-item/event-list-item.component.html

@@ -3,7 +3,7 @@
 		{{ groupEvent?.title }} <span class="owner-idicator">by {{ groupEvent?.owner?.displayName}}</span>
 	</ng-template>
 	<ng-template pTemplate="subtitle">
-		🕑 {{ groupEvent?.startTime?.toFullDateTimeString() }} &nbsp; ↔{{ groupEvent?.track?.distance | distance }} ↑{{ groupEvent?.track?.elevationUp | elevation:'up' }} ↓{{ groupEvent?.track?.elevationDown | elevation:'down' }}
+		<span [class.expired]="isEventExpired()">🕑 {{ groupEvent?.startTime?.toFullDateTimeString() }}</span> &nbsp; ↔{{ groupEvent?.track?.distance | distance }} ↑{{ groupEvent?.track?.elevationUp | elevation:'up' }} ↓{{ groupEvent?.track?.elevationDown | elevation:'down' }}
 	</ng-template>
 	<ng-template pTemplate="content">
 		<div class="description-text">{{ groupEvent?.description }}</div>

src/RunnersMeet.Client/src/app/events/event-list-item/event-list-item.component.ts

@@ -11,4 +11,8 @@ export class EventListItemComponent {
 	public groupEvent?: GroupEvent;
 
 	public constructor(	) { }
+
+	public isEventExpired() {
+		return this.groupEvent ? this.groupEvent.startTime!.date < new Date() : false;
+	}
 }

src/RunnersMeet.Client/src/styles.scss

@@ -116,6 +116,10 @@ dl.pivot-table {
 	white-space: pre-wrap;
 }
 
+.expired {
+	color: #dd0000;
+}
+
 ///////////////////
 /// PrimeNG "fixes"