diff --git a/client/admin/src/app/app.component.html b/client/admin/src/app/app.component.html index 12e01e0..fedb1d5 100644 --- a/client/admin/src/app/app.component.html +++ b/client/admin/src/app/app.component.html @@ -163,37 +163,6 @@ - - -
    -
  1. - Application Layout - - - -
    2. -
  2. - Dashboard -
    3. -
- @@ -289,14 +258,16 @@ @if (auth.loggedIn) { -
-
+
+
} @else {
-
+
diff --git a/client/admin/src/app/app.config.ts b/client/admin/src/app/app.config.ts index 280f53e..5c4a112 100644 --- a/client/admin/src/app/app.config.ts +++ b/client/admin/src/app/app.config.ts @@ -1,5 +1,5 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; -import { provideRouter, } from '@angular/router'; +import { provideRouter } from '@angular/router'; import { environment } from './../environments/environment'; import { HttpRequest, diff --git a/client/admin/src/app/talkgroup.ts b/client/admin/src/app/talkgroup.ts index 5ed74fe..70716e9 100644 --- a/client/admin/src/app/talkgroup.ts +++ b/client/admin/src/app/talkgroup.ts @@ -34,16 +34,16 @@ export interface Metadata { icon: string | null; } - export interface IconMap { - [name: string]: string; - } +export interface IconMap { + [name: string]: string; +} export const iconMapping: IconMap = { - 'police': 'matLocalPoliceOutline', - 'fire': 'matFireTruckOutline', - 'ems': 'matEmergencyOutline', - 'bus': 'matDirectionsBusOutline', - '': 'matGroupWorkOutline', + police: 'matLocalPoliceOutline', + fire: 'matFireTruckOutline', + ems: 'matEmergencyOutline', + bus: 'matDirectionsBusOutline', + '': 'matGroupWorkOutline', }; export class Talkgroup { diff --git a/client/admin/src/app/talkgroups/talkgroup-record/talkgroup-record.component.html b/client/admin/src/app/talkgroups/talkgroup-record/talkgroup-record.component.html index 8dff380..3ea67eb 100644 --- a/client/admin/src/app/talkgroups/talkgroup-record/talkgroup-record.component.html +++ b/client/admin/src/app/talkgroups/talkgroup-record/talkgroup-record.component.html @@ -60,14 +60,14 @@
- + @for (opt of iconMapping | keyvalue; track opt) { + }
diff --git a/client/admin/src/app/talkgroups/talkgroup-record/talkgroup-record.component.ts b/client/admin/src/app/talkgroups/talkgroup-record/talkgroup-record.component.ts index b8384a9..925d5db 100644 --- a/client/admin/src/app/talkgroups/talkgroup-record/talkgroup-record.component.ts +++ b/client/admin/src/app/talkgroups/talkgroup-record/talkgroup-record.component.ts @@ -1,5 +1,10 @@ import { Component, inject } from '@angular/core'; -import { Talkgroup, TalkgroupUpdate, IconMap, iconMapping } from '../../talkgroup'; +import { + Talkgroup, + TalkgroupUpdate, + IconMap, + iconMapping, +} from '../../talkgroup'; import { TalkgroupService } from '../talkgroups.service'; import { AlertRuleBuilderComponent } from './alert-rule-builder/alert-rule-builder.component'; import { CommonModule } from '@angular/common'; @@ -40,19 +45,17 @@ export class TalkgroupRecordComponent { .getTalkgroup(Number(sysId), Number(tgId)) .subscribe((data: Talkgroup) => { this.tg = data; - this.form = new FormGroup({ - name: new FormControl(this.tg.name), - alpha_tag: new FormControl(this.tg.alpha_tag), - tg_group: new FormControl(this.tg.tg_group), - frequency: new FormControl(this.tg.frequency), - alert: new FormControl(this.tg.alert), - weight: new FormControl(this.tg.weight), - icon: new FormControl(this.tg.icon), - }); - console.log(this.tg.icon); + this.form = new FormGroup({ + name: new FormControl(this.tg.name), + alpha_tag: new FormControl(this.tg.alpha_tag), + tg_group: new FormControl(this.tg.tg_group), + frequency: new FormControl(this.tg.frequency), + alert: new FormControl(this.tg.alert), + weight: new FormControl(this.tg.weight), + icon: new FormControl(this.tg.icon), + }); + console.log(this.tg.icon); }); - - } submit() { @@ -84,9 +87,11 @@ export class TalkgroupRecordComponent { tgu.metadata = {}; } if (this.tg.icon == null || this.tg.icon == '') { - tgu.metadata = Object.assign(tgu.metadata, {icon: undefined}); + tgu.metadata = Object.assign(tgu.metadata, { icon: undefined }); } else { - tgu.metadata = Object.assign(tgu.metadata!, { icon: this.form.controls['icon'] }); + tgu.metadata = Object.assign(tgu.metadata!, { + icon: this.form.controls['icon'], + }); } } this.tgService diff --git a/client/admin/src/app/talkgroups/talkgroups.component.css b/client/admin/src/app/talkgroups/talkgroups.component.css index c4d0414..9d9365a 100644 --- a/client/admin/src/app/talkgroups/talkgroups.component.css +++ b/client/admin/src/app/talkgroups/talkgroups.component.css @@ -1,2 +1,2 @@ .tgIcon { -} \ No newline at end of file +} diff --git a/client/admin/src/app/talkgroups/talkgroups.component.html b/client/admin/src/app/talkgroups/talkgroups.component.html index da219fb..5849924 100644 --- a/client/admin/src/app/talkgroups/talkgroups.component.html +++ b/client/admin/src/app/talkgroups/talkgroups.component.html @@ -1,45 +1,179 @@ -Import
- - - - - - - - - - - - - - - - @let tgs = talkgroups$ | async; - @for (tg of tgs?.talkgroups ; track tg.id) { - - - - - - - - - - - - - } - -
SysSys IDGroupNameAlphaTG IDLearned
{{ tg.system?.name }}{{ tg.system?.id }}{{ tg.tg_group }}{{ tg.name }}{{ tg.alpha_tag }}{{ tg.tgid }}{{ tg?.learned ? "Y" : "" }} - -
-
- Total: {{ tgs?.count }} - - Page {{ page }} of {{ totalPages }} - + Import +
+
+ + + + + + + + + + + + + + + + + @let tgs = talkgroups$ | async; + @for (tg of tgs?.talkgroups; track tg.id) { + + + + + + + + + + + + + } + +
+ Sys + + Sys ID + + Group + + Name + + Alpha Tag + + TG ID + + Learned +
+ + + {{ tg.system?.name }} + + {{ tg.system?.id }} + + {{ tg.tg_group }} + + {{ tg.name }} + + {{ tg.alpha_tag }} + + {{ tg.tgid }} + + {{ tg?.learned ? "Y" : "" }} + + +
+
+ +
+
    +
  1. + +
    2. + + @for (pgn of [].constructor(totalPages); track i; let i = $index) { + @if (i != page) { +
  2. + +
    3. + } @else { +
  3. + {{ i + 1 }} +
    4. + } + } + +
  4. + +
    5. +
+
diff --git a/client/admin/src/app/talkgroups/talkgroups.component.ts b/client/admin/src/app/talkgroups/talkgroups.component.ts index a944339..5e35bb9 100644 --- a/client/admin/src/app/talkgroups/talkgroups.component.ts +++ b/client/admin/src/app/talkgroups/talkgroups.component.ts @@ -1,7 +1,11 @@ import { Component, inject, Pipe, PipeTransform } from '@angular/core'; import { TalkgroupService, TalkgroupsPaginated } from './talkgroups.service'; import { NgIconComponent, provideIcons } from '@ng-icons/core'; -import { ionCreateOutline, ionChevronBack, ionChevronForward } from '@ng-icons/ionicons'; +import { + ionCreateOutline, + ionChevronBack, + ionChevronForward, +} from '@ng-icons/ionicons'; import { matFireTruckOutline, matLocalPoliceOutline, @@ -17,7 +21,6 @@ import { RouterModule, RouterOutlet, RouterLink } from '@angular/router'; import { CommonModule } from '@angular/common'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; - @Pipe({ standalone: true, name: 'iconify', @@ -35,19 +38,16 @@ export class IconifyPipe implements PipeTransform { @Pipe({ standalone: true, - name: 'sanitizeHtml' + name: 'sanitizeHtml', }) export class SanitizeHtmlPipe implements PipeTransform { + constructor(private _sanitizer: DomSanitizer) {} - constructor(private _sanitizer:DomSanitizer) { - } - - transform(v:string):SafeHtml { + transform(v: string): SafeHtml { return this._sanitizer.bypassSecurityTrustHtml(v); } } - @Component({ selector: 'talkgroups', standalone: true, @@ -62,15 +62,18 @@ export class SanitizeHtmlPipe implements PipeTransform { ], templateUrl: './talkgroups.component.html', styleUrl: './talkgroups.component.css', - providers: [provideIcons({ ionCreateOutline, - matFireTruckOutline, - matLocalPoliceOutline, - matEmergencyOutline, - matDirectionsBusOutline, - matGroupWorkOutline, - ionChevronBack, - ionChevronForward, -})], + providers: [ + provideIcons({ + ionCreateOutline, + matFireTruckOutline, + matLocalPoliceOutline, + matEmergencyOutline, + matDirectionsBusOutline, + matGroupWorkOutline, + ionChevronBack, + ionChevronForward, + }), + ], }) export class TalkgroupsComponent { selectedSys: number = 0; @@ -97,16 +100,25 @@ export class TalkgroupsComponent { } } + setPage(p: number) { + if (p <= this.totalPages && p > 0) { + this.page = p; + this.fetchTGs(); + } + } + fetchTGs() { this.talkgroups$ = this.route.paramMap.pipe( switchMap((params) => { this.selectedSys = Number(params.get('sys')); this.selectedId = Number(params.get('tg')); - return this.tgService.getTalkgroupsPag({page: this.page, perPage: this.perPage}).pipe( - tap((event) => { - this.totalPages = Math.ceil(event.count/this.perPage); - }) - ); + return this.tgService + .getTalkgroupsPag({ page: this.page, perPage: this.perPage }) + .pipe( + tap((event) => { + this.totalPages = Math.ceil(event.count / this.perPage); + }), + ); }), ); }