From 7e667d81ab163b24ef6510fe573ee73f31e17e48 Mon Sep 17 00:00:00 2001
From: Daniel Ponte <amigan@gmail.com>
Date: Thu, 9 Jan 2025 23:58:21 -0500
Subject: [PATCH] Mat table alert rule builder wip

---
 .../src/app/calls/calls.component.html        |  6 ++-
 .../stillbox/src/app/calls/calls.component.ts |  2 +-
 client/stillbox/src/app/talkgroup.ts          | 20 +++++----
 .../alert-rule-builder.component.html         | 41 ++++++++-----------
 .../alert-rule-builder.component.ts           | 16 +++++---
 .../talkgroup-record.component.ts             |  4 ++
 6 files changed, 48 insertions(+), 41 deletions(-)

diff --git a/client/stillbox/src/app/calls/calls.component.html b/client/stillbox/src/app/calls/calls.component.html
index 3cbc7a4..7c2891d 100644
--- a/client/stillbox/src/app/calls/calls.component.html
+++ b/client/stillbox/src/app/calls/calls.component.html
@@ -169,7 +169,11 @@
       </td>
     </ng-container>
     <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
-    <tr mat-row *matRowDef="let row; columns: columns" [ngClass]="{'in-incident': row.incidents > 0}"></tr>
+    <tr
+      mat-row
+      *matRowDef="let row; columns: columns"
+      [ngClass]="{ 'in-incident': row.incidents > 0 }"
+    ></tr>
   </table>
 </div>
 <div class="pagFoot">
diff --git a/client/stillbox/src/app/calls/calls.component.ts b/client/stillbox/src/app/calls/calls.component.ts
index 5ff0ae1..c82e9f4 100644
--- a/client/stillbox/src/app/calls/calls.component.ts
+++ b/client/stillbox/src/app/calls/calls.component.ts
@@ -394,7 +394,7 @@ export class CallsComponent {
           add: this.selection.selected.map((s, i, a) => {
             s.incidents++;
             return s.id;
-        }),
+          }),
         })
         .subscribe({
           next: () => {
diff --git a/client/stillbox/src/app/talkgroup.ts b/client/stillbox/src/app/talkgroup.ts
index 5a62385..7c8b2f7 100644
--- a/client/stillbox/src/app/talkgroup.ts
+++ b/client/stillbox/src/app/talkgroup.ts
@@ -15,21 +15,19 @@ export class AlertTime {
 }
 
 export class AlertRule {
-  times: string[];
-  timesProc: AlertTime[];
-  mult: number;
+  times!: string[];
+  mult!: number;
 
-  constructor(times: string[], mult: number) {
-    this.times = times;
-    this.timesProc = <AlertTime[]>[];
-    times.forEach((tm) => {
+  public getTimes(): AlertTime[] {
+    let timesProc = <AlertTime[]>[];
+    this.times.forEach((tm) => {
       let sr = tm.split('+');
-      this.timesProc.push(<AlertTime>{
+      timesProc.push(<AlertTime>{
         time: sr[0],
         duration: sr[1],
       });
     });
-    this.mult = mult;
+    return timesProc;
   }
 }
 
@@ -93,6 +91,10 @@ export class Talkgroup {
     icon?: string,
   ) {
     this.iconSvg = this.iconMap(this.metadata?.icon!);
+    this.alert_rules = this.alert_rules.map((x) =>
+      Object.assign(new AlertRule(), x),
+    );
+    console.log(this.alert_rules);
   }
 
   iconMap(icon: string): string {
diff --git a/client/stillbox/src/app/talkgroups/talkgroup-record/alert-rule-builder/alert-rule-builder.component.html b/client/stillbox/src/app/talkgroups/talkgroup-record/alert-rule-builder/alert-rule-builder.component.html
index ccf9ace..41284f9 100644
--- a/client/stillbox/src/app/talkgroups/talkgroup-record/alert-rule-builder/alert-rule-builder.component.html
+++ b/client/stillbox/src/app/talkgroups/talkgroup-record/alert-rule-builder/alert-rule-builder.component.html
@@ -1,30 +1,21 @@
 <div class="container flex">
   @for (rule of rules; track $index) {
-    <div class="">
-      <table class="table">
-        <thead>
-          <tr>
-            <td>Start</td>
-            <td>Duration</td>
-            <td></td>
-          </tr>
-        </thead>
-        <tbody>
-          @for (time of rule | ruleProc; track $index) {
-            <tr>
-              <td>
-                {{ time.time }}
-              </td>
-              <td>
-                {{ time.duration }}
-              </td>
-            </tr>
-          } @empty {
-            <tr>
-              <td><em>No times</em></td>
-            </tr>
-          }
-        </tbody>
+    <div class="rule">
+      <table mat-table [dataSource]="rule | ruleTimes">
+        <ng-container matColumnDef="time">
+          <th mat-header-cell *matHeaderCellDef>Time</th>
+          <td mat-cell *matCellDef="let time">{{ time.time }}</td>
+        </ng-container>
+        <ng-container matColumnDef="duration">
+          <th mat-header-cell *matHeaderCellDef>Duration</th>
+          <td mat-cell *matCellDef="let time">{{ time.duration }}</td>
+        </ng-container>
+        <ng-container matColumnDef="multiplier">
+          <th mat-header-cell *matHeaderCellDef>Multiplier</th>
+          <td mat-cell *matCellDef="let time">{{ rule.mult }}</td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
       </table>
     </div>
   } @empty {
diff --git a/client/stillbox/src/app/talkgroups/talkgroup-record/alert-rule-builder/alert-rule-builder.component.ts b/client/stillbox/src/app/talkgroups/talkgroup-record/alert-rule-builder/alert-rule-builder.component.ts
index 18ac0e6..56b6a1d 100644
--- a/client/stillbox/src/app/talkgroups/talkgroup-record/alert-rule-builder/alert-rule-builder.component.ts
+++ b/client/stillbox/src/app/talkgroups/talkgroup-record/alert-rule-builder/alert-rule-builder.component.ts
@@ -7,31 +7,37 @@ import {
   PipeTransform,
 } from '@angular/core';
 import { AlertRule, AlertTime } from '../../../talkgroup';
+import { MatTableModule } from '@angular/material/table';
 
 @Pipe({
-  name: 'ruleProc',
+  name: 'ruleTimes',
   standalone: true,
   pure: true,
 })
 export class AlertRulePipe implements PipeTransform {
   transform(rule: AlertRule, args?: any): AlertTime[] {
-    let tm = new AlertRule(rule.times, rule.mult);
-    return tm.timesProc;
+    return rule.getTimes();
   }
 }
 
 @Component({
   selector: 'alert-rule-builder',
-  imports: [AlertRulePipe],
+  imports: [MatTableModule, AlertRulePipe],
   templateUrl: './alert-rule-builder.component.html',
   styleUrl: './alert-rule-builder.component.scss',
 })
 export class AlertRuleBuilderComponent {
-  @Input() rules: AlertRule[] = [];
+  @Input() rules!: AlertRule[];
   @Output() rulesChange: EventEmitter<AlertRule[]> = new EventEmitter<
     AlertRule[]
   >();
 
+  displayedColumns = ['time', 'duration', 'multiplier'];
+
+  ngOnInit() {
+    this.rules = <AlertRule[]>this.rules;
+  }
+
   emit() {
     this.rulesChange.emit(this.rules);
   }
diff --git a/client/stillbox/src/app/talkgroups/talkgroup-record/talkgroup-record.component.ts b/client/stillbox/src/app/talkgroups/talkgroup-record/talkgroup-record.component.ts
index 60e0504..269acac 100644
--- a/client/stillbox/src/app/talkgroups/talkgroup-record/talkgroup-record.component.ts
+++ b/client/stillbox/src/app/talkgroups/talkgroup-record/talkgroup-record.component.ts
@@ -7,6 +7,7 @@ import {
   IconMap,
   iconMapping,
   TGID,
+  AlertRule,
 } from '../../talkgroup';
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { TalkgroupService } from '../talkgroups.service';
@@ -157,6 +158,9 @@ export class TalkgroupRecordComponent {
       .getTalkgroup(Number(this.tgid.sys), Number(this.tgid.tg))
       .pipe(
         tap((tg) => {
+          tg.alert_rules = tg.alert_rules.map((x) =>
+            Object.assign(new AlertRule(), x),
+          );
           this.form.patchValue(tg);
           this.form.controls['tagInput'].setValue('');
           this.form.controls['tagsControl'].setValue(this.tg?.tags ?? []);