wip

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="cardHdr">
-    <div class="field field-label">Time</div>
+    <h1>
-    <div class="field field-data">{{ call.call_date }}</div>
+      {{ 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>

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;
+}

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',
 })

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',
     });
   }

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;