Format the number of minutes of tunnel to "x hours and y minutes"

Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.html

@@ -33,7 +33,7 @@
     <mat-nav-list>
         @for (stat of stats; track stat) {
             <mat-list-item matListItemLine>
-                <label>{{ stat.id }} : {{ stat.values }}</label>
+                <label>{{ stat.label }} : {{ stat.hoursAndMinutes.hours }}h {{ stat.hoursAndMinutes.minutes }}m</label>
             </mat-list-item>
         }
     </mat-nav-list>

Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.ts

@@ -59,7 +59,13 @@ export class ListOfTunnelFlightsComponent implements OnInit {
         "flightDate",
         "actions",
     ];
-    public stats: Array<{ id: String | Number; values: String | Number }> = [];
+    public stats: Array<{
+        label: String;
+        hoursAndMinutes: {
+            hours: number;
+            minutes: number;
+        };
+    }> = [];
 
     constructor(
         private serviceComm: ServiceComm,
@@ -92,6 +98,14 @@ export class ListOfTunnelFlightsComponent implements OnInit {
         this.getDataForTable();
     }
 
+    public delete(item: TunnelFlight) {
+        let data: Array<TunnelFlight> = this.dataSourceTable.data;
+        data = data.filter((d) => d.id !== item.id);
+
+        this.dataSourceTable.data = data;
+        this.serviceTunnelFlight.deleteTunnelFlight(item);
+    }
+
     private chartConfig() {
         this.barChartType = "bar";
         this.barChartOptions = {
@@ -190,15 +204,25 @@ export class ListOfTunnelFlightsComponent implements OnInit {
                     ),
                 ),
                 map((arr) => ({
-                    id: arr[0],
+                    label: arr[0],
                     values: arr
                         .slice(1)
                         .reduce((a, b) => Number(a) + Number(b), 0),
+                    hoursAndMinutes: {},
                 })),
             )
             .subscribe((p) => {
-                console.log(p);
-                this.stats.push(p);
+                let newStat: {
+                    label: String;
+                    hoursAndMinutes: {
+                        hours: number;
+                        minutes: number;
+                    };
+                } = {
+                    label: p.label.toString(),
+                    hoursAndMinutes: this.toHoursAndMinutes(+p.values),
+                };
+                this.stats.push(newStat);
             });
     }
 
@@ -285,11 +309,13 @@ export class ListOfTunnelFlightsComponent implements OnInit {
         return beginDate;
     }
 
-    public delete(item: TunnelFlight) {
-        let data: Array<TunnelFlight> = this.dataSourceTable.data;
-        data = data.filter((d) => d.id !== item.id);
+    private toHoursAndMinutes(totalMinutes: number): {
+        hours: number;
+        minutes: number;
+    } {
+        const hours = Math.floor(totalMinutes / 60);
+        const minutes = totalMinutes % 60;
 
-        this.dataSourceTable.data = data;
-        this.serviceTunnelFlight.deleteTunnelFlight(item);
+        return { hours, minutes };
     }
 }