feat: add details dialog to dashboard

ODZ-UJF-AV-CR · Mar 2, 2025 · 241c6de · 241c6de
1 parent a95ab18
commit 241c6de
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 38 deletions.
diff --git a/apps/gapp-dashboard/src/components/time-ago-badge/time-ago-badge.component.ts b/apps/gapp-dashboard/src/components/time-ago-badge/time-ago-badge.component.ts
@@ -9,7 +9,7 @@ import { interval, map, merge } from 'rxjs';
 @Component({
     selector: 'time-ago-badge',
     template: `
-        <span [class-range]="options" [value]="secondsAgo$ | async" class="badge badge-outline">
+        <span [class-range]="options" [value]="secondsAgo$ | async" class="badge">
             <time-ago [date]="date()"></time-ago>
         </span>
     `,

diff --git a/apps/gapp-dashboard/src/pages/dashboard/car-status-card.component.html b/apps/gapp-dashboard/src/pages/dashboard/car-status-card.component.html
@@ -1,6 +1,6 @@
-<li class="list-row">
+<li class="list-row hover:bg-base-300 cursor-pointer" (click)="detail.open()">
     <div class="font-bold">
-        {{ car()?.callsign }}
+        {{ car().callsign }}
     </div>
 
     <div></div>
@@ -14,32 +14,26 @@
     </div>
 </li>
 
-<!--
-<div tabindex="0" class="collapse collapse-arrow bg-base-200">
-    <input type="checkbox" />
-    <div class="collapse-title flex flex-row justify-between">
-        <div class="font-bold">
-            {{ car()?.callsign }}
-        </div>
-
+<gapp-dialog #detail [title]="car().callsign">
+    <div class="flex flex-col gap-6">
         <div>
-            @if(telemetry(); as telemetry) {
-            <time-ago-badge [date]="telemetry._time"></time-ago-badge>
-            } @else {
-            <span class="badge badge-ghost badge-outline">Not connected</span>
-            }
+            <p>{{ car().description }}</p>
         </div>
-    </div>
 
-    <div class="collapse-content">
-        <div class="flex flex-col gap-2 border-l-2 border-neutral pl-2">
-            <span>{{ car()?.description }}</span>
-            <span>
-                <a class="btn btn-sm btn-info whitespace-nowrap" href="https://amateur.sondehub.org/{{ car()?.callsign }}_chase" target="_blank">
-                    SondeHub
-                    <ng-icon name="tablerExternalLink"></ng-icon>
-                </a>
-            </span>
+        <div class="flex justify-between">
+            <div>
+                @if(telemetry()?._time; as time) {
+                <time-ago-badge [date]="time"></time-ago-badge>
+                } @else {
+                <span class="badge badge-ghost badge-outline">Not connected</span>
+                }
+            </div>
+
+            @if(telemetry()?._time) {
+            <a class="btn btn-xs btn-info" href="https://amateur.sondehub.org/{{ car().callsign }}" target="_blank">
+                SondeHub
+                <ng-icon name="tablerExternalLink"></ng-icon> </a
+            >}
         </div>
     </div>
-</div> -->
+</gapp-dialog>
diff --git a/apps/gapp-dashboard/src/pages/dashboard/car-status-card.component.ts b/apps/gapp-dashboard/src/pages/dashboard/car-status-card.component.ts
@@ -2,15 +2,18 @@ import { Car } from '@/services/cars.service';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { TelemetryStatus } from './dashboard.service';
 import { TimeAgoBadgeComponent } from '@/components/time-ago-badge/time-ago-badge.component';
+import { DialogComponent } from '@gapp/ui/dialog';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { tablerExternalLink } from '@ng-icons/tabler-icons';
 
 @Component({
     selector: 'car-status-card',
     templateUrl: './car-status-card.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [TimeAgoBadgeComponent],
-    // providers: [provideIcons({ tablerExternalLink })],
+    imports: [TimeAgoBadgeComponent, DialogComponent, NgIcon],
+    providers: [provideIcons({ tablerExternalLink })],
 })
 export class CarStatusCardComponent {
-    public car = input<Car>();
+    public car = input.required<Car>();
     public telemetry = input<TelemetryStatus>();
 }
diff --git a/apps/gapp-dashboard/src/pages/dashboard/dashboard.component.html b/apps/gapp-dashboard/src/pages/dashboard/dashboard.component.html
@@ -15,7 +15,7 @@
         <scrollable blockBody>
             <ul class="list bg-base-200 rounded-box">
                 @for (car of availableCars()?.data; track $index) {
-                <car-status-card [car]="car" [telemetry]="getTelemetry([car.callsign])()?.[0]"></car-status-card>
+                <car-status-card [car]="car" [telemetry]="getTelemetry([car.callsign])()[0]"></car-status-card>
                 } @empty { @if (availableCars()?.loading) {
                 <loader></loader>
                 } @else { No data available. } }

diff --git a/apps/gapp-dashboard/src/pages/dashboard/vessel-status-card.component.html b/apps/gapp-dashboard/src/pages/dashboard/vessel-status-card.component.html
@@ -14,10 +14,7 @@
     </div>
 </li>
 
-<gapp-dialog
-    #detail
-    [title]="vessel().callsign"
->
+<gapp-dialog #detail [title]="vessel().callsign">
     <div class="flex flex-col gap-6">
         <div>
             <p>{{ vessel().description }}</p>
@@ -39,11 +36,11 @@
                 </div>
 
                 <div>
-@if(getTransmitterTelemetry(transmitter)()?._time) {
+                    @if(getTransmitterTelemetry(transmitter)()?._time) {
                     <a class="btn btn-xs btn-info" href="https://amateur.sondehub.org/{{ transmitter }}" target="_blank">
                         SondeHub
-                        <ng-icon name="tablerExternalLink"></ng-icon>
-                    </a>}
+                        <ng-icon name="tablerExternalLink"></ng-icon> </a
+                    >}
                 </div>
             </li>
             }