diff --git a/client/stillbox/src/app/incidents/incident/incident.component.html b/client/stillbox/src/app/incidents/incident/incident.component.html index b7b7d36..9c19fe7 100644 --- a/client/stillbox/src/app/incidents/incident/incident.component.html +++ b/client/stillbox/src/app/incidents/incident/incident.component.html @@ -15,4 +15,74 @@
{{ inc?.description }}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + download + Date + {{ call.call_date | grabDate }} + Time + {{ call.call_date | time }} + System + {{ call | talkgroup: "system" | async }} + Group + {{ call | talkgroup: "group" | async }} + Talkgroup + {{ call | talkgroup: "alpha" | async }} + Duration + {{ call.duration | fixedPoint: 1000 : 2 }}s +
diff --git a/client/stillbox/src/app/incidents/incident/incident.component.ts b/client/stillbox/src/app/incidents/incident/incident.component.ts index f97ba64..a5278cb 100644 --- a/client/stillbox/src/app/incidents/incident/incident.component.ts +++ b/client/stillbox/src/app/incidents/incident/incident.component.ts @@ -1,7 +1,7 @@ import { Component, computed, inject, ViewChild } from '@angular/core'; import { map, tap } from 'rxjs/operators'; -import { CommonModule, DatePipe } from '@angular/common'; -import { Subject, Subscription } from 'rxjs'; +import { CommonModule } from '@angular/common'; +import { BehaviorSubject, Subject, Subscription } from 'rxjs'; import { Observable } from 'rxjs'; import { ReactiveFormsModule, @@ -15,9 +15,8 @@ import { MatFormFieldModule } from '@angular/material/form-field'; import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatIconModule } from '@angular/material/icon'; import { IncidentsService } from '../incidents.service'; -import { IncidentRecord } from '../../incidents'; +import { IncidentCall, IncidentRecord } from '../../incidents'; import { MatCardModule } from '@angular/material/card'; -import { FmtDatePipe } from '../incidents.component'; import { MAT_DIALOG_DATA, MatDialog, @@ -28,6 +27,18 @@ import { } from '@angular/material/dialog'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatButtonModule } from '@angular/material/button'; +import { CallRecord } from '../../calls'; +import { SelectionModel } from '@angular/cdk/collections'; +import { MatTableDataSource, MatTableModule } from '@angular/material/table'; +import { + FixedPointPipe, + TalkgroupPipe, + TimePipe, + DatePipe, + DownloadURLPipe, +} from '../../calls/calls.component'; +import { CallPlayerComponent } from '../../calls/player/call-player/call-player.component'; +import { FmtDatePipe } from '../incidents.component'; @Component({ selector: 'app-incident-editor', @@ -87,7 +98,14 @@ export class IncidentEditDialogComponent { MatCheckboxModule, MatIconModule, MatCardModule, + FixedPointPipe, + TimePipe, + DatePipe, + TalkgroupPipe, + DownloadURLPipe, + CallPlayerComponent, FmtDatePipe, + MatTableModule, ], templateUrl: './incident.component.html', styleUrl: './incident.component.scss', @@ -98,6 +116,19 @@ export class IncidentComponent { subscriptions: Subscription = new Subscription(); dialog = inject(MatDialog); incID!: string; + columns = [ + 'select', + 'play', + 'download', + 'date', + 'time', + 'system', + 'group', + 'talkgroup', + 'duration', + ]; + callsResult = new MatTableDataSource(); + selection = new SelectionModel(true, []); constructor( private route: ActivatedRoute, @@ -109,7 +140,17 @@ export class IncidentComponent { ngOnInit() { this.incID = this.route.snapshot.paramMap.get('id')!; this.inc$ = this.incPrime.pipe(map((inc) => inc)); - this.incSvc.getIncident(this.incID).subscribe(this.incPrime); + this.incSvc + .getIncident(this.incID) + .pipe( + tap((inc) => { + if (inc.calls) { + console.log(inc.calls); + this.callsResult.data = inc.calls; + } + }), + ) + .subscribe(this.incPrime); } editIncident(incID: string) { @@ -127,4 +168,16 @@ export class IncidentComponent { ngOnDestroy() { this.subscriptions.unsubscribe(); } + + isAllSelected() { + const numSelected = this.selection.selected.length; + const numRows = this.callsResult.data.length; + return numSelected === numRows; + } + + masterToggle() { + this.isAllSelected() + ? this.selection.clear() + : this.callsResult.data.forEach((row) => this.selection.select(row)); + } }