From d8a1f2b85e729f842fa6438bae3b76973a31d323 Mon Sep 17 00:00:00 2001 From: Daniel Ponte Date: Mon, 3 Feb 2025 21:34:08 -0500 Subject: [PATCH] html5 media --- .../calls/call-info/call-info.component.html | 7 +++ .../calls/call-info/call-info.component.scss | 0 .../call-info/call-info.component.spec.ts | 22 +++++++ .../calls/call-info/call-info.component.ts | 20 +++++++ .../stillbox/src/app/calls/calls.service.ts | 58 ++++++++++++++++++- .../incident/incident.component.html | 4 +- .../incidents/incident/incident.component.ts | 8 +-- .../src/app/share/share.component.html | 22 ++++--- .../stillbox/src/app/share/share.component.ts | 11 +++- .../src/app/talkgroups/talkgroups.service.ts | 7 ++- 10 files changed, 142 insertions(+), 17 deletions(-) create mode 100644 client/stillbox/src/app/calls/call-info/call-info.component.html create mode 100644 client/stillbox/src/app/calls/call-info/call-info.component.scss create mode 100644 client/stillbox/src/app/calls/call-info/call-info.component.spec.ts create mode 100644 client/stillbox/src/app/calls/call-info/call-info.component.ts 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 new file mode 100644 index 0000000..e04c8ba --- /dev/null +++ b/client/stillbox/src/app/calls/call-info/call-info.component.html @@ -0,0 +1,7 @@ + +
+
Time
+
{{ call.call_date }}
+
+ + 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 new file mode 100644 index 0000000..e69de29 diff --git a/client/stillbox/src/app/calls/call-info/call-info.component.spec.ts b/client/stillbox/src/app/calls/call-info/call-info.component.spec.ts new file mode 100644 index 0000000..88fbfaa --- /dev/null +++ b/client/stillbox/src/app/calls/call-info/call-info.component.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CallInfoComponent } from './call-info.component'; + +describe('CallInfoComponent', () => { + let component: CallInfoComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [CallInfoComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(CallInfoComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 0000000..500591c --- /dev/null +++ b/client/stillbox/src/app/calls/call-info/call-info.component.ts @@ -0,0 +1,20 @@ +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'; + +@Component({ + selector: 'app-call-info', + imports: [MatCardModule, SafePipe], + templateUrl: './call-info.component.html', + styleUrl: './call-info.component.scss', +}) +export class CallInfoComponent { + @Input() share!: Share; + call!: CallRecord; + + ngOnInit() { + this.call = this.share.sharedItem as CallRecord; + } +} diff --git a/client/stillbox/src/app/calls/calls.service.ts b/client/stillbox/src/app/calls/calls.service.ts index 19e7bc8..ffe8e8c 100644 --- a/client/stillbox/src/app/calls/calls.service.ts +++ b/client/stillbox/src/app/calls/calls.service.ts @@ -6,6 +6,14 @@ import { environment } from '.././../environments/environment'; import { TalkgroupService } from '../talkgroups/talkgroups.service'; import { Talkgroup } from '../talkgroup'; import { Share } from '../shares'; +import { + DomSanitizer, + SafeHtml, + SafeResourceUrl, + SafeScript, + SafeStyle, + SafeUrl, +} from '@angular/platform-browser'; @Pipe({ name: 'grabDate', @@ -43,7 +51,11 @@ export class TimePipe implements PipeTransform { export class TalkgroupPipe implements PipeTransform { constructor(private tgService: TalkgroupService) {} - transform(call: CallRecord, field: string, share: Share|null = null): Observable { + transform( + call: CallRecord, + field: string, + share: Share | null = null, + ): Observable { return this.tgService.getTalkgroup(call.system_id, call.tgid).pipe( map((tg: Talkgroup) => { switch (field) { @@ -82,6 +94,50 @@ export class FixedPointPipe implements PipeTransform { } } +/** + * Sanitize HTML + */ +@Pipe({ + name: 'safe', +}) +export class SafePipe implements PipeTransform { + /** + * Pipe Constructor + * + * @param _sanitizer: DomSanitezer + */ + // tslint:disable-next-line + constructor(protected _sanitizer: DomSanitizer) {} + + /** + * Transform + * + * @param value: string + * @param type: string + */ + transform( + value: string, + type: string, + ): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl { + switch (type) { + case 'html': + return this._sanitizer.bypassSecurityTrustHtml(value); + case 'style': + return this._sanitizer.bypassSecurityTrustStyle(value); + case 'script': + return this._sanitizer.bypassSecurityTrustScript(value); + case 'url': + return this._sanitizer.bypassSecurityTrustUrl(value); + case 'resourceUrl': + let res = this._sanitizer.bypassSecurityTrustResourceUrl(value); + console.log(res); + return res; + default: + return this._sanitizer.bypassSecurityTrustHtml(value); + } + } +} + @Pipe({ name: 'audioDownloadURL', standalone: true, diff --git a/client/stillbox/src/app/incidents/incident/incident.component.html b/client/stillbox/src/app/incidents/incident/incident.component.html index 0e07b87..e3cde1c 100644 --- a/client/stillbox/src/app/incidents/incident/incident.component.html +++ b/client/stillbox/src/app/incidents/incident/incident.component.html @@ -76,13 +76,13 @@ System - {{ call | talkgroup: "system":incident | async }} + {{ call | talkgroup: "system" : share | async }} Group - {{ call | talkgroup: "group":incident | async }} + {{ call | talkgroup: "group" : share | async }} diff --git a/client/stillbox/src/app/incidents/incident/incident.component.ts b/client/stillbox/src/app/incidents/incident/incident.component.ts index e934bf4..465e48a 100644 --- a/client/stillbox/src/app/incidents/incident/incident.component.ts +++ b/client/stillbox/src/app/incidents/incident/incident.component.ts @@ -154,7 +154,7 @@ export class IncidentEditDialogComponent { export class IncidentComponent { incPrime = new Subject(); inc$!: Observable; - @Input() incident?: Share; + @Input() share?: Share; subscriptions: Subscription = new Subscription(); dialog = inject(MatDialog); incID!: string; @@ -187,11 +187,11 @@ export class IncidentComponent { this.incID = this.route.snapshot.paramMap.get('id')!; incOb = this.incSvc.getIncident(this.incID); } else { - if (!this.incident) { + if (!this.share) { return; } - this.incID = (this.incident.sharedItem as IncidentRecord).id; - incOb = new BehaviorSubject(this.incident.sharedItem as IncidentRecord); + this.incID = (this.share.sharedItem as IncidentRecord).id; + incOb = new BehaviorSubject(this.share.sharedItem as IncidentRecord); } this.inc$ = merge(incOb, this.incPrime).pipe( tap((inc) => { diff --git a/client/stillbox/src/app/share/share.component.html b/client/stillbox/src/app/share/share.component.html index 7704aca..da8af0f 100644 --- a/client/stillbox/src/app/share/share.component.html +++ b/client/stillbox/src/app/share/share.component.html @@ -1,9 +1,17 @@ @let sh = share | async; -@if (sh == null) { -

Share invalid!

-} @else if (sh.type == "incident") { - -} @else if (sh.type == "call") { -} @else { -

Share type {{ sh.type }} unknown

+@switch (sh?.type) { + @case ("incident") { + + } + @case ("call") { + + } + @case (null) { + + } + @default { +

Share type {{ sh?.type }} unknown

+ } } diff --git a/client/stillbox/src/app/share/share.component.ts b/client/stillbox/src/app/share/share.component.ts index 90766d5..7c0a118 100644 --- a/client/stillbox/src/app/share/share.component.ts +++ b/client/stillbox/src/app/share/share.component.ts @@ -5,16 +5,23 @@ import { ActivatedRoute } from '@angular/router'; import { Observable, Subscription, switchMap } from 'rxjs'; import { IncidentComponent } from '../incidents/incident/incident.component'; import { AsyncPipe } from '@angular/common'; +import { CallInfoComponent } from '../calls/call-info/call-info.component'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; @Component({ selector: 'app-share', - imports: [AsyncPipe, IncidentComponent], + imports: [ + AsyncPipe, + IncidentComponent, + CallInfoComponent, + MatProgressSpinnerModule, + ], templateUrl: './share.component.html', styleUrl: './share.component.scss', }) export class ShareComponent { shareID!: string; - share!: Observable; + share!: Observable; constructor( private route: ActivatedRoute, private shareSvc: ShareService, diff --git a/client/stillbox/src/app/talkgroups/talkgroups.service.ts b/client/stillbox/src/app/talkgroups/talkgroups.service.ts index 9025ec9..bca0b81 100644 --- a/client/stillbox/src/app/talkgroups/talkgroups.service.ts +++ b/client/stillbox/src/app/talkgroups/talkgroups.service.ts @@ -9,6 +9,7 @@ import { switchMap, } from 'rxjs'; import { Talkgroup, TalkgroupUpdate, TGID } from '../talkgroup'; +import { Share } from '../shares'; export interface Pagination { page: number; @@ -54,7 +55,11 @@ export class TalkgroupService { return this.http.get('/api/talkgroup/'); } - getTalkgroup(sys: number, tg: number): Observable { + getTalkgroup( + sys: number, + tg: number, + share: Share | null = null, + ): Observable { const key = this.tgKey(sys, tg); if (!this._getTalkgroup.get(key)) { let rs = new ReplaySubject();