Mat table alert rule builder wip

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">

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: () => {

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 {

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 {

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);
   }

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 ?? []);