From f7af144275dc72be73d7662f2282a9eba4738109 Mon Sep 17 00:00:00 2001
From: ThompsonNye <thomas.nuyken@noreply.code.nuyken.dev>
Date: Sun, 22 Jun 2025 12:36:19 +0200
Subject: [PATCH] Display consumption in liter per 100 km

---
 .../api/consumptions/consumption-client.ts    |  2 --
 .../app/api/consumptions/consumption-entry.ts |  2 +-
 .../get-consumption-entries-entry.ts          |  3 ++-
 .../get-consumption-entries-response.ts       |  4 +---
 .../entry-card/entry-card.component.html      | 19 ++++++++++------
 .../entry-card/entry-card.component.scss      |  2 +-
 .../entry-card/entry-card.component.ts        | 22 +++++++++++++------
 .../fraction/fraction.component.html          |  9 ++++++++
 .../fraction/fraction.component.scss          | 11 ++++++++++
 .../components/fraction/fraction.component.ts | 12 ++++++++++
 .../entries/entries/entries.component.ts      |  4 +---
 11 files changed, 65 insertions(+), 25 deletions(-)
 create mode 100644 src/Vegasco-Web/src/app/modules/entries/entries/components/fraction/fraction.component.html
 create mode 100644 src/Vegasco-Web/src/app/modules/entries/entries/components/fraction/fraction.component.scss
 create mode 100644 src/Vegasco-Web/src/app/modules/entries/entries/components/fraction/fraction.component.ts

diff --git a/src/Vegasco-Web/src/app/api/consumptions/consumption-client.ts b/src/Vegasco-Web/src/app/api/consumptions/consumption-client.ts
index fa533ec..c360d2c 100644
--- a/src/Vegasco-Web/src/app/api/consumptions/consumption-client.ts
+++ b/src/Vegasco-Web/src/app/api/consumptions/consumption-client.ts
@@ -1,9 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
-import { GetConsumptionEntriesResponse } from '@vegasco-web/api/consumptions/get-consumption-entries-response';
 import { map, Observable } from 'rxjs';
 import { API_BASE_PATH } from '../api-base-path';
-import { ConsumptionEntry } from './consumption-entry';
 
 @Injectable({
   providedIn: 'root',
diff --git a/src/Vegasco-Web/src/app/api/consumptions/consumption-entry.ts b/src/Vegasco-Web/src/app/api/consumptions/consumption-entry.ts
index cff0df0..89774b5 100644
--- a/src/Vegasco-Web/src/app/api/consumptions/consumption-entry.ts
+++ b/src/Vegasco-Web/src/app/api/consumptions/consumption-entry.ts
@@ -1,4 +1,4 @@
-export interface ConsumptionEntry {
+interface ConsumptionEntry {
     id: string;
     dateTime: string;
     distance: number;
diff --git a/src/Vegasco-Web/src/app/api/consumptions/get-consumption-entries-entry.ts b/src/Vegasco-Web/src/app/api/consumptions/get-consumption-entries-entry.ts
index 1fcd163..2585c9b 100644
--- a/src/Vegasco-Web/src/app/api/consumptions/get-consumption-entries-entry.ts
+++ b/src/Vegasco-Web/src/app/api/consumptions/get-consumption-entries-entry.ts
@@ -1,4 +1,4 @@
-export interface GetConsumptionEntriesEntry {
+interface GetConsumptionEntriesEntry {
     id: string;
     dateTime: string;
     distance: number;
@@ -7,4 +7,5 @@ export interface GetConsumptionEntriesEntry {
         id: string;
         name: string;
     };
+    literPer100Km: number | null;
 }
diff --git a/src/Vegasco-Web/src/app/api/consumptions/get-consumption-entries-response.ts b/src/Vegasco-Web/src/app/api/consumptions/get-consumption-entries-response.ts
index 56e2f15..a18ec60 100644
--- a/src/Vegasco-Web/src/app/api/consumptions/get-consumption-entries-response.ts
+++ b/src/Vegasco-Web/src/app/api/consumptions/get-consumption-entries-response.ts
@@ -1,5 +1,3 @@
-import { GetConsumptionEntriesEntry } from "./get-consumption-entries-entry";
-
-export interface GetConsumptionEntriesResponse {
+interface GetConsumptionEntriesResponse {
     consumptions: GetConsumptionEntriesEntry[];
 }
diff --git a/src/Vegasco-Web/src/app/modules/entries/entries/components/entry-card/entry-card.component.html b/src/Vegasco-Web/src/app/modules/entries/entries/components/entry-card/entry-card.component.html
index 0140a69..ae2476a 100644
--- a/src/Vegasco-Web/src/app/modules/entries/entries/components/entry-card/entry-card.component.html
+++ b/src/Vegasco-Web/src/app/modules/entries/entries/components/entry-card/entry-card.component.html
@@ -12,13 +12,6 @@
         </div>
       </div>
 
-      <div class="col-span-4 sm:col-span-2 md:col-span-1 flex my-auto items-center justify-center">
-        <div class="flex gap-2 items-center">
-          <ng-icon name="matDirectionsCarOutline" />
-          <div>{{ entry().car.name }}</div>
-        </div>
-      </div>
-
       <div class="col-span-4 sm:col-span-2 md:col-span-1 flex my-auto items-center justify-center">
         <div class="flex gap-2 items-center">
           <ng-icon name="matStraightenSharp" />
@@ -32,6 +25,18 @@
           <div>{{entry().amount }} &#8467;</div>
         </div>
       </div>
+
+      <div class="col-span-4 sm:col-span-2 md:col-span-1 flex my-auto items-center justify-center">
+        @if (formattedLiterPer100Km(); as formattedLiterPer100Km) {
+          <div class="flex gap-2 items-center">
+            <ng-icon name="matSpeedSharp" />
+            <div class="flex items-center gap-1">
+              {{ formattedLiterPer100Km }}
+              <app-fraction numerator="&#8467;" [denominator]="'100km'" />
+            </div>
+          </div>
+        }
+      </div>
     </div>
   </div>
   <div class="bg-red-500 text-white rounded-r text-center flex flex-col justify-center">
diff --git a/src/Vegasco-Web/src/app/modules/entries/entries/components/entry-card/entry-card.component.scss b/src/Vegasco-Web/src/app/modules/entries/entries/components/entry-card/entry-card.component.scss
index 2006a40..42ece6f 100644
--- a/src/Vegasco-Web/src/app/modules/entries/entries/components/entry-card/entry-card.component.scss
+++ b/src/Vegasco-Web/src/app/modules/entries/entries/components/entry-card/entry-card.component.scss
@@ -1,3 +1,3 @@
 .edit-button {
     cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/src/Vegasco-Web/src/app/modules/entries/entries/components/entry-card/entry-card.component.ts b/src/Vegasco-Web/src/app/modules/entries/entries/components/entry-card/entry-card.component.ts
index 59d3ffc..39f8cea 100644
--- a/src/Vegasco-Web/src/app/modules/entries/entries/components/entry-card/entry-card.component.ts
+++ b/src/Vegasco-Web/src/app/modules/entries/entries/components/entry-card/entry-card.component.ts
@@ -1,26 +1,23 @@
 import { DatePipe } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, DestroyRef, inject, input, output } from '@angular/core';
+import { Component, computed, DestroyRef, inject, input, output } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
-import {
-  matDirectionsCarOutline,
-} from '@ng-icons/material-icons/outline';
 import {
   matCalendarMonthSharp,
   matDeleteSharp,
   matLocalGasStationSharp,
+  matSpeedSharp,
   matStraightenSharp,
 } from '@ng-icons/material-icons/sharp';
 import { ConsumptionClient } from '@vegasco-web/api/consumptions/consumption-client';
-import { GetConsumptionEntriesEntry } from '@vegasco-web/api/consumptions/get-consumption-entries-entry';
 import { RoutingService } from '@vegasco-web/services/routing.service';
 import { ConfirmationService, MessageService } from 'primeng/api';
 import { ButtonModule } from 'primeng/button';
 import { CardModule } from 'primeng/card';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { catchError, EMPTY, Observable, tap, throwError } from 'rxjs';
-
+import { FractionComponent } from "../fraction/fraction.component";
 
 @Component({
   selector: 'app-entry-card',
@@ -30,12 +27,13 @@ import { catchError, EMPTY, Observable, tap, throwError } from 'rxjs';
     ConfirmDialogModule,
     DatePipe,
     NgIconComponent,
+    FractionComponent
   ],
   providers: [
     provideIcons({
       matDeleteSharp,
       matCalendarMonthSharp,
-      matDirectionsCarOutline,
+      matSpeedSharp,
       matStraightenSharp,
       matLocalGasStationSharp,
     }),
@@ -47,6 +45,16 @@ import { catchError, EMPTY, Observable, tap, throwError } from 'rxjs';
 export class EntryCardComponent {
   readonly entry = input.required<GetConsumptionEntriesEntry>();
 
+  protected readonly formattedLiterPer100Km = computed(() => {
+    const entry = this.entry();
+
+    const formatted = entry.literPer100Km
+      ?.toFixed(2)
+      .replace('.', ',');
+    console.log('Formatted liter per 100km:', formatted);
+    return formatted;
+  })
+
   readonly entryDeleted = output<GetConsumptionEntriesEntry>();
 
   private readonly routingService = inject(RoutingService);
diff --git a/src/Vegasco-Web/src/app/modules/entries/entries/components/fraction/fraction.component.html b/src/Vegasco-Web/src/app/modules/entries/entries/components/fraction/fraction.component.html
new file mode 100644
index 0000000..896a396
--- /dev/null
+++ b/src/Vegasco-Web/src/app/modules/entries/entries/components/fraction/fraction.component.html
@@ -0,0 +1,9 @@
+<div class="flex flex-col items-center text-half-size">
+  <span>
+    {{ numerator() }}
+  </span>
+  <span class="separator"></span>
+  <span>
+    {{ denominator() }}
+  </span>
+</div>
diff --git a/src/Vegasco-Web/src/app/modules/entries/entries/components/fraction/fraction.component.scss b/src/Vegasco-Web/src/app/modules/entries/entries/components/fraction/fraction.component.scss
new file mode 100644
index 0000000..a8afa0b
--- /dev/null
+++ b/src/Vegasco-Web/src/app/modules/entries/entries/components/fraction/fraction.component.scss
@@ -0,0 +1,11 @@
+.separator {
+    border-bottom-width: 1px;
+    width: 100%
+}
+
+.text-half-size {
+    // Specifically use em here to allow the parent to control the font size
+    // The font size here should be smaller because it is a fraction and would
+    // otherwise look too large
+    font-size: 0.75em;
+}
diff --git a/src/Vegasco-Web/src/app/modules/entries/entries/components/fraction/fraction.component.ts b/src/Vegasco-Web/src/app/modules/entries/entries/components/fraction/fraction.component.ts
new file mode 100644
index 0000000..73fc12f
--- /dev/null
+++ b/src/Vegasco-Web/src/app/modules/entries/entries/components/fraction/fraction.component.ts
@@ -0,0 +1,12 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'app-fraction',
+  imports: [],
+  templateUrl: './fraction.component.html',
+  styleUrl: './fraction.component.scss'
+})
+export class FractionComponent {
+  readonly numerator = input.required<number | string>();
+  readonly denominator = input.required<number | string>();
+}
diff --git a/src/Vegasco-Web/src/app/modules/entries/entries/entries.component.ts b/src/Vegasco-Web/src/app/modules/entries/entries/entries.component.ts
index ffc0f62..23d19ed 100644
--- a/src/Vegasco-Web/src/app/modules/entries/entries/entries.component.ts
+++ b/src/Vegasco-Web/src/app/modules/entries/entries/entries.component.ts
@@ -10,7 +10,6 @@ import {
 } from '@ng-icons/material-icons/sharp';
 import { CarClient } from '@vegasco-web/api/cars/car-client';
 import { ConsumptionClient } from '@vegasco-web/api/consumptions/consumption-client';
-import { GetConsumptionEntriesEntry } from '@vegasco-web/api/consumptions/get-consumption-entries-entry';
 import { MessageService } from 'primeng/api';
 import { ButtonModule } from 'primeng/button';
 import { DataViewModule } from 'primeng/dataview';
@@ -30,7 +29,6 @@ import {
 } from 'rxjs';
 import { SelectedCarService } from '../services/selected-car.service';
 import { EntryCardComponent } from './components/entry-card/entry-card.component';
-import { ConsumptionEntry } from '@vegasco-web/api/consumptions/consumption-entry';
 
 @Component({
   selector: 'app-entries',
@@ -97,7 +95,7 @@ export class EntriesComponent implements OnInit {
           }
 
           return nonDeletedEntries.filter(entry => entry.car.id === selectedCar.id);
-        })
+        }),
       );
 
     this.cars$ = this.carClient.getAll()