Update time formatting pipe to allow display of hours when needed

Author: mengdaming

webapp/src/app/pipes/format-timer.pipe.spec.ts

@@ -11,13 +11,18 @@ describe('FormatTimerPipe', () => {
   const testCases = [
     {input: 'abc', expected: defaultFormat},
     {input: '', expected: defaultFormat},
+    {input: undefined, expected: defaultFormat},
+    {input: null, expected: defaultFormat},
     {input: '0', expected: '00:00'},
     {input: '1', expected: '00:01'},
     {input: '60', expected: '01:00'},
     {input: '119', expected: '01:59'},
+    {input: '3600', expected: '1:00:00'},
+    {input: '3661', expected: '1:01:01'},
     {input: '-1', expected: '-00:01'},
     {input: '-60', expected: '-01:00'},
-    {input: '-119', expected: '-01:59'}
+    {input: '-119', expected: '-01:59'},
+    {input: '-3600', expected: '-1:00:00'},
   ];
 
   for (const testCase of testCases) {

webapp/src/app/pipes/format-timer.pipe.ts

@@ -1,20 +1,28 @@
 import {Pipe, PipeTransform} from '@angular/core';
 
+const SEPARATOR = ":";
+const SECONDS_PER_MINUTE = 60;
+const SECONDS_PER_HOUR = 3600;
+
 @Pipe({
   name: 'formatTimer',
   standalone: true
 })
 export class FormatTimerPipe implements PipeTransform {
-
   transform(value: unknown, ..._args: unknown[]): unknown {
     const duration = parseInt(value as string, 10);
     if (isNaN(duration)) {
-      return "--:--";
+      return `--${SEPARATOR}--`;
     }
     const sign = duration < 0 ? "-" : "";
-    const minutes = Math.floor(Math.abs(duration) / 60).toString().padStart(2, "0");
-    const seconds = (Math.abs(duration) % 60).toString().padStart(2, "0");
-    return `${sign}${minutes}:${seconds}`;
+    const totalMinutes = Math.abs(duration);
+    const nbHours = Math.floor(totalMinutes / SECONDS_PER_HOUR);
+    const nbMinutes = Math.floor((totalMinutes - nbHours * SECONDS_PER_HOUR) / SECONDS_PER_MINUTE);
+    const nbSeconds = totalMinutes % SECONDS_PER_MINUTE;
+    const hours = nbHours > 0 ? nbHours.toString() + SEPARATOR : "";
+    const minutes = nbMinutes.toString().padStart(2, "0") + SEPARATOR;
+    const seconds = nbSeconds.toString().padStart(2, "0");
+    return `${sign}${hours}${minutes}${seconds}`;
   }
 
 }