src/Vegasco-Web/src/app/api/models/get-consumption-entries-response.ts

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

src/Vegasco-Web/src/app/modules/entries/entries/entries.component.html

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

src/Vegasco-Web/src/app/modules/entries/entries/entries.component.ts

@@ -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)
       );
   }
 }