From 4bf6efa8cc7f2fb1e7f6b06c8a4ce96470c21673 Mon Sep 17 00:00:00 2001 From: Daniel Ponte Date: Thu, 19 Dec 2024 23:53:00 -0500 Subject: [PATCH] audio --- client/stillbox/src/app/calls.ts | 16 +-- .../src/app/calls/calls.component.html | 108 ++++++++++-------- .../src/app/calls/calls.component.scss | 13 +++ .../stillbox/src/app/calls/calls.component.ts | 92 +++++++++------ .../stillbox/src/app/calls/calls.service.ts | 24 ++-- .../src/app/talkgroups/talkgroups.service.ts | 22 ++-- 6 files changed, 163 insertions(+), 112 deletions(-) diff --git a/client/stillbox/src/app/calls.ts b/client/stillbox/src/app/calls.ts index f305808..1da3392 100644 --- a/client/stillbox/src/app/calls.ts +++ b/client/stillbox/src/app/calls.ts @@ -1,9 +1,9 @@ export interface CallRecord { - id: string; - call_date: Date; - duration: number; - system_id: number; - tgid: number; - system_name: string; - tg_name: string; -}; \ No newline at end of file + id: string; + call_date: Date; + duration: number; + system_id: number; + tgid: number; + system_name: string; + tg_name: string; +} diff --git a/client/stillbox/src/app/calls/calls.component.html b/client/stillbox/src/app/calls/calls.component.html index 82e4e52..2f9b359 100644 --- a/client/stillbox/src/app/calls/calls.component.html +++ b/client/stillbox/src/app/calls/calls.component.html @@ -1,50 +1,60 @@
- - - - - - - - - - - - - - - - - - - - - - - -
play_arrow - - Date - {{ call.call_date | date }} - Time - {{ call.call_date | time }} - Talkgroup - {{ call | alphaTag | async }} - Duration - {{ call | duration }} -
-
- - -
-
\ No newline at end of file + + Start + + + + + + + + + + + + + + + + + + + + + + + + + + +
play_arrow + play_arrow + Date + {{ call.call_date | date }} + Time + {{ call.call_date | time }} + Talkgroup + {{ call | alphaTag | async }} + Duration + {{ call | duration }} +
+
+ + +
diff --git a/client/stillbox/src/app/calls/calls.component.scss b/client/stillbox/src/app/calls/calls.component.scss index e69de29..1371ed1 100644 --- a/client/stillbox/src/app/calls/calls.component.scss +++ b/client/stillbox/src/app/calls/calls.component.scss @@ -0,0 +1,13 @@ +.filterBox { + width: 240px; +} + +.duration { + text-align: right; + padding-right: 4em; +} + +.durationHdr, +.duration { + max-width: 3em; +} diff --git a/client/stillbox/src/app/calls/calls.component.ts b/client/stillbox/src/app/calls/calls.component.ts index e79f5ba..d0762ac 100644 --- a/client/stillbox/src/app/calls/calls.component.ts +++ b/client/stillbox/src/app/calls/calls.component.ts @@ -25,50 +25,52 @@ import { MatChipsModule } from '@angular/material/chips'; import { SelectionModel } from '@angular/cdk/collections'; import { MatCheckboxModule } from '@angular/material/checkbox'; import { Observable, Subscription } from 'rxjs'; -import { - map, -} from 'rxjs/operators'; -import { - CallsListParams, - CallsService, -} from './calls.service'; -import { - CallRecord, -} from '../calls'; +import { map } from 'rxjs/operators'; +import { CallsListParams, CallsService } from './calls.service'; +import { CallRecord } from '../calls'; -import { - TalkgroupService, -} from '../talkgroups/talkgroups.service'; +import { TalkgroupService } from '../talkgroups/talkgroups.service'; import { Talkgroup } from '../talkgroup'; +import { MatFormField, MatFormFieldModule } from '@angular/material/form-field'; +import { + FormGroup, + FormControl, + FormsModule, + ReactiveFormsModule, +} from '@angular/forms'; +import { MatInputModule } from '@angular/material/input'; @Pipe({ name: 'date', standalone: true, - pure: true + pure: true, }) export class DatePipe implements PipeTransform { transform(ts: string, args?: any): string { const timestamp = new Date(ts); - return (timestamp.getMonth() + 1) +"/"+ (timestamp.getDay()); + return timestamp.getMonth() + 1 + '/' + timestamp.getDay(); } } @Pipe({ name: 'time', standalone: true, - pure: true + pure: true, }) export class TimePipe implements PipeTransform { transform(ts: string, args?: any): string { const timestamp = new Date(ts); - return timestamp.toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit'}); + return timestamp.toLocaleTimeString(navigator.language, { + hour: '2-digit', + minute: '2-digit', + }); } } @Pipe({ name: 'alphaTag', standalone: true, - pure: true + pure: true, }) export class AlphaTagPipe implements PipeTransform { constructor(private tgService: TalkgroupService) {} @@ -77,7 +79,7 @@ export class AlphaTagPipe implements PipeTransform { return this.tgService.getTalkgroup(call.system_id, call.tgid).pipe( map((tg: Talkgroup) => { return tg.alpha_tag; - }) + }), ); } } @@ -85,7 +87,7 @@ export class AlphaTagPipe implements PipeTransform { @Pipe({ name: 'duration', standalone: true, - pure: true + pure: true, }) export class DurationPipe implements PipeTransform { constructor(callsSvc: CallsService) {} @@ -108,6 +110,10 @@ export class DurationPipe implements PipeTransform { MatPaginatorModule, MatTableModule, AsyncPipe, + MatFormFieldModule, + ReactiveFormsModule, + FormsModule, + MatInputModule, ], templateUrl: './calls.component.html', styleUrl: './calls.component.scss', @@ -119,23 +125,30 @@ export class CallsComponent { page = 0; perPage = 25; pageSizeOptions = [25, 50, 75, 100, 200, 500]; - columns = [ - 'play', - 'date', - 'time', - 'talkgroup', - 'duration', - ]; - curPage = ({pageIndex: 0, pageSize: 0}); + columns = ['play', 'date', 'time', 'talkgroup', 'duration']; + curPage = { pageIndex: 0, pageSize: 0 }; + start = new FormControl( + new Date(new Date().setDate(new Date().getDate() - 7)), + ); + end = new FormControl(null); - constructor(private callsSvc: CallsService) {} + constructor( + private callsSvc: CallsService, + private prefsSvc: PrefsService, + ) {} + + playAudio(ev: Event, call: CallRecord) { + let au = new Audio(); + au.src = this.callsSvc.callAudioURL(call.id); + au.load(); + au.play(); + } setPage(p: PageEvent) { this.curPage = p; const current = new Date(); - const start: Date = new Date(new Date().setDate(current.getDate() - 7)); const par: CallsListParams = { - start: start, + start: this.start.value, page: p.pageIndex, perPage: p.pageSize, end: null, @@ -149,11 +162,20 @@ export class CallsComponent { }); } - ngOnInit() { - this.setPage(({ + zeroPage(): PageEvent { + return { pageIndex: 0, - pageSize: 25, - })); + pageSize: this.curPage.pageSize, + }; } + ngOnInit() { + this.start.valueChanges.subscribe(() => { + this.setPage(this.zeroPage()); + }); + this.setPage({ + pageIndex: 0, + pageSize: 25, + }); + } } diff --git a/client/stillbox/src/app/calls/calls.service.ts b/client/stillbox/src/app/calls/calls.service.ts index 635e182..786cc55 100644 --- a/client/stillbox/src/app/calls/calls.service.ts +++ b/client/stillbox/src/app/calls/calls.service.ts @@ -1,15 +1,14 @@ import { Injectable } from '@angular/core'; import { HttpClient, HttpResponse } from '@angular/common/http'; import { Observable } from 'rxjs'; -import { - CallRecord, - } from '../calls'; +import { CallRecord } from '../calls'; +import { environment } from '.././../environments/environment'; export interface CallsListParams { - start: Date|null; - end: Date|null; - tagsAny: string[]|null; - tagsNot: string[]|null; + start: Date | null; + end: Date | null; + tagsAny: string[] | null; + tagsNot: string[] | null; dir: string; page: number; perPage: number; @@ -20,16 +19,17 @@ export interface CallsPaginated { count: number; } - - @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class CallsService { - - constructor(private http: HttpClient) { } + constructor(private http: HttpClient) {} getCalls(p: CallsListParams): Observable { return this.http.post('/api/call/', p); } + + callAudioURL(id: string): string { + return environment.baseUrl + '/api/call/' + id; + } } diff --git a/client/stillbox/src/app/talkgroups/talkgroups.service.ts b/client/stillbox/src/app/talkgroups/talkgroups.service.ts index 777d27c..e9be1ab 100644 --- a/client/stillbox/src/app/talkgroups/talkgroups.service.ts +++ b/client/stillbox/src/app/talkgroups/talkgroups.service.ts @@ -30,10 +30,14 @@ export class TalkgroupService { } getTalkgroup(sys: number, tg: number): Observable { - let tgid = ({sys: sys, tg: tg}); + let tgid = { sys: sys, tg: tg }; if (!this._getTalkgroup.get(tgid)) { - this._getTalkgroup.set(tgid, this.http. - get(`/api/talkgroup/${sys}/${tg}`).pipe(shareReplay())); + this._getTalkgroup.set( + tgid, + this.http + .get(`/api/talkgroup/${sys}/${tg}`) + .pipe(shareReplay()), + ); } return this._getTalkgroup.get(tgid)!; @@ -67,11 +71,13 @@ export class TalkgroupService { } putTalkgroup(tu: TalkgroupUpdate): Observable { - let tgid = ({sys: tu.system_id, tg: tu.tgid}); - this._getTalkgroup.set(tgid, this.http.put( - `/api/talkgroup/${tu.system_id}/${tu.tgid}`, - tu, - ).pipe(shareReplay())); + let tgid = { sys: tu.system_id, tg: tu.tgid }; + this._getTalkgroup.set( + tgid, + this.http + .put(`/api/talkgroup/${tu.system_id}/${tu.tgid}`, tu) + .pipe(shareReplay()), + ); return this._getTalkgroup.get(tgid)!; }