Replace Started At with Uptime

src/app/pages/detail/detail.component.html

@@ -37,6 +37,13 @@
   <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
     <div class="row d-flex justify-content-center">
 
+      <div class="card text-bg-dark m-3 text-center" style="max-width: 18rem;">
+        <div class="card-header"><strong>Uptime</strong></div>
+        <div class="card-body">
+          <h5 class="card-title">{{ uptime.hours }}:{{ uptime.minutes }}:{{ uptime.seconds }}</h5>
+        </div>
+      </div>
+
       @for(card of cards; track card.header) {
         @if(card.loading && !stoppingDaemon) {
           <div class="card text-bg-dark m-3 text-center" style="max-width: 18rem;" aria-hidden="true">

src/app/pages/detail/detail.component.ts

@@ -14,6 +14,32 @@ import { BasePageComponent } from '../base-page/base-page.component';
 })
 export class DetailComponent extends BasePageComponent implements AfterViewInit {
 
+  public get uptime(): { seconds: string, minutes: string, hours: string } {
+    const startedAt = this.daemonService.startedAt;
+
+    if (!startedAt) {
+      return {
+        seconds: '00',
+        minutes: '00',
+        hours: '00'
+      };
+    }
+
+    const now = new Date();
+    const elapsedMilliseconds = now.getTime() - startedAt.getTime();
+
+    const seconds = Math.floor((elapsedMilliseconds / 1000) % 60);
+    const minutes = Math.floor((elapsedMilliseconds / (1000 * 60)) % 60);
+    const hours = Math.floor(elapsedMilliseconds / (1000 * 60 * 60));
+
+    return {
+      hours: hours < 10 ? `0${hours}` : `${hours}`,
+      minutes: minutes < 10 ? `0${minutes}` : `${minutes}`,
+      seconds: seconds < 10 ? `0${seconds}` : `${seconds}`
+    }
+}
+
+
   public get daemonRunning(): boolean {
     return this.daemonData.running;
   }
@@ -190,10 +216,6 @@ export class DetailComponent extends BasePageComponent implements AfterViewInit
 
     const cards: SimpleBootstrapCard[] = [];
 
-    if (this.daemonService.startedAt) {
-      cards.push(new SimpleBootstrapCard('Started At', `${this.daemonService.startedAt.toLocaleDateString()} ${this.daemonService.startedAt.toLocaleTimeString()}`));
-    }
-
     cards.push(
       new SimpleBootstrapCard('Connection Status', this.connectionStatus, loading),
       new SimpleBootstrapCard('Network Type', this.networkType, loading),