From 3d39878198a3196946666d201b36a11bea7b4158 Mon Sep 17 00:00:00 2001
From: Daniel Ponte <amigan@gmail.com>
Date: Tue, 4 Feb 2025 08:54:19 -0500
Subject: [PATCH] wip

---
 .../calls/call-info/call-info.component.html  | 14 ++++-
 .../calls/call-info/call-info.component.scss  | 63 +++++++++++++++++++
 .../calls/call-info/call-info.component.ts    | 12 +++-
 .../stillbox/src/app/calls/calls.service.ts   |  5 +-
 .../incident/incident.component.scss          |  8 +--
 5 files changed, 88 insertions(+), 14 deletions(-)

diff --git a/client/stillbox/src/app/calls/call-info/call-info.component.html b/client/stillbox/src/app/calls/call-info/call-info.component.html
index e04c8ba..f15bf1a 100644
--- a/client/stillbox/src/app/calls/call-info/call-info.component.html
+++ b/client/stillbox/src/app/calls/call-info/call-info.component.html
@@ -1,7 +1,15 @@
 <mat-card class="callInfo" appearance="outlined">
-  <div class="inc-heading">
-    <div class="field field-label">Time</div>
-    <div class="field field-data">{{ call.call_date }}</div>
+  <div class="cardHdr">
+    <h1>
+      {{ call | talkgroup: "alpha" | async }} &#64;
+      {{ call.call_date | grabDate }} {{ call.call_date | time: true }}
+    </h1>
+  </div>
+  <div class="call-heading">
+    <div class="field field-label">Talkgroup</div>
+    <div class="field field-data">{{ call | talkgroup: "name" | async }}</div>
+    <div class="field field-label">Group</div>
+    <div class="field field-data">{{ call | talkgroup: "group" | async }}</div>
   </div>
   <audio controls [src]="call.audioURL! | safe: 'resourceUrl'"></audio>
 </mat-card>
diff --git a/client/stillbox/src/app/calls/call-info/call-info.component.scss b/client/stillbox/src/app/calls/call-info/call-info.component.scss
index e69de29..3cb56ff 100644
--- a/client/stillbox/src/app/calls/call-info/call-info.component.scss
+++ b/client/stillbox/src/app/calls/call-info/call-info.component.scss
@@ -0,0 +1,63 @@
+.callInfo {
+  margin: 0px 50px 50px 50px;
+  padding: 50px 50px 50px 50px;
+  display: flex;
+  flex-flow: column;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.call-heading {
+  display: flex;
+  margin-bottom: 20px;
+  flex: 0 0;
+  flex-wrap: wrap;
+}
+
+.cardHdr {
+  display: flex;
+  flex-flow: row wrap;
+  margin-bottom: 24px;
+}
+
+.field {
+  flex: 1 0;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.field-label {
+  font-weight: bolder;
+  flex-grow: 0;
+  padding-right: 5px;
+}
+.field-label::after {
+  content: ":";
+}
+
+.cardHdr h1 {
+  flex: 1 1;
+  margin: 0;
+}
+
+.cardHdr a {
+  flex: 0 0;
+  justify-content: flex-end;
+  align-content: center;
+  cursor: pointer;
+}
+
+form mat-form-field {
+  width: 60rem;
+  flex: 0 0;
+  display: flex;
+}
+
+.callRecord {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  margin-top: 20px;
+  margin-left: auto;
+  margin-right: auto;
+}
diff --git a/client/stillbox/src/app/calls/call-info/call-info.component.ts b/client/stillbox/src/app/calls/call-info/call-info.component.ts
index 500591c..f8668fc 100644
--- a/client/stillbox/src/app/calls/call-info/call-info.component.ts
+++ b/client/stillbox/src/app/calls/call-info/call-info.component.ts
@@ -2,11 +2,19 @@ import { Component, Input } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { CallRecord } from '../../calls';
 import { Share } from '../../shares';
-import { SafePipe } from '../calls.service';
+import { DatePipe, SafePipe, TalkgroupPipe, TimePipe } from '../calls.service';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
   selector: 'app-call-info',
-  imports: [MatCardModule, SafePipe],
+  imports: [
+    MatCardModule,
+    TimePipe,
+    DatePipe,
+    TalkgroupPipe,
+    AsyncPipe,
+    SafePipe,
+  ],
   templateUrl: './call-info.component.html',
   styleUrl: './call-info.component.scss',
 })
diff --git a/client/stillbox/src/app/calls/calls.service.ts b/client/stillbox/src/app/calls/calls.service.ts
index ffe8e8c..1d6c8ee 100644
--- a/client/stillbox/src/app/calls/calls.service.ts
+++ b/client/stillbox/src/app/calls/calls.service.ts
@@ -21,7 +21,7 @@ import {
   pure: true,
 })
 export class DatePipe implements PipeTransform {
-  transform(ts: string, args?: any): string {
+  transform(ts: string | Date, args?: any): string {
     const timestamp = new Date(ts);
     return timestamp.getMonth() + 1 + '/' + timestamp.getDate();
   }
@@ -33,11 +33,12 @@ export class DatePipe implements PipeTransform {
   pure: true,
 })
 export class TimePipe implements PipeTransform {
-  transform(ts: string, args?: any): string {
+  transform(ts: string | Date, haveSecond: boolean = false): string {
     const timestamp = new Date(ts);
     return timestamp.toLocaleTimeString(navigator.language, {
       hour: '2-digit',
       minute: '2-digit',
+      second: haveSecond ? '2-digit' : undefined,
       hourCycle: 'h23',
     });
   }
diff --git a/client/stillbox/src/app/incidents/incident/incident.component.scss b/client/stillbox/src/app/incidents/incident/incident.component.scss
index 08e0820..3ac603c 100644
--- a/client/stillbox/src/app/incidents/incident/incident.component.scss
+++ b/client/stillbox/src/app/incidents/incident/incident.component.scss
@@ -1,5 +1,5 @@
 .incident {
-  margin: 50px 50px 50px 50px;
+  margin: 0px 50px 50px 50px;
   padding: 50px 50px 50px 50px;
   display: flex;
   flex-flow: column;
@@ -7,12 +7,6 @@
   margin-right: auto;
 }
 
-@media not screen and (max-width: 768px) {
-  .incident {
-    width: 75%;
-  }
-}
-
 .inc-heading {
   display: flex;
   margin-bottom: 20px;