New Angular based web version #1

Closed
thomas.nuyken wants to merge 150 commits from main into ddd
3 changed files with 27 additions and 23 deletions
Showing only changes of commit edafe0e4ec - Show all commits

View File

@@ -0,0 +1,3 @@
interface GetConsumptionEntriesResponse {
consumptions: ConsumptionEntry[];
}

View File

@@ -1,22 +1,22 @@
@if (consumptionEntries$ | async; as consumptionEntries) {
<div>
<table>
<thead>
<tr>
<th>Datum</th>
<th>Distanz</th>
<th>Menge</th>
</tr>
</thead>
<tbody>
@for (entry of consumptionEntries; track entry.id) {
<tr>
<td>{{ entry.dateTime | date }}</td>
<td>{{ entry.distance }} km</td>
<td>{{ entry.amount }} l</td>
</tr>
}
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<th>Datum</th>
<th>Distanz</th>
<th>Menge</th>
</tr>
</thead>
<tbody>
@for (entry of consumptionEntries; track entry.id) {
<tr>
<td>{{ entry.dateTime | date }}</td>
<td>{{ entry.distance }} km</td>
<td>{{ entry.amount }} l</td>
</tr>
}
</tbody>
</table>
</div>
}

View File

@@ -2,7 +2,7 @@ import { AsyncPipe, DatePipe } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, inject } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { Observable, tap } from 'rxjs';
import { map, Observable, tap } from 'rxjs';
@Component({
selector: 'app-entries',
@@ -16,12 +16,13 @@ export class EntriesComponent {
protected readonly consumptionEntries$: Observable<ConsumptionEntry[]>;
constructor() {
this.consumptionEntries$ = this.http.get<ConsumptionEntry[]>('/api/v1/consumptions')
this.consumptionEntries$ = this.http.get<GetConsumptionEntriesResponse>('/api/v1/consumptions')
.pipe(
takeUntilDestroyed(),
tap((response) => {
console.log('Entries response:', response);
}),
map(response => response.consumptions)
);
}
}