From e8355ee451352e051617edf14bdd53bb357de6c4 Mon Sep 17 00:00:00 2001
From: Daniel Ponte <amigan@gmail.com>
Date: Sat, 21 Dec 2024 07:52:57 -0500
Subject: [PATCH] fix login;

---
 .../src/app/calls/calls.component.html        | 18 ++++++++++++++++++
 .../src/app/calls/calls.component.scss        | 14 +++++++++++---
 .../stillbox/src/app/calls/calls.component.ts | 19 ++++++++++++++++++-
 .../src/app/login/login.component.html        |  2 +-
 .../talkgroup-table.component.ts              |  2 +-
 5 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/client/stillbox/src/app/calls/calls.component.html b/client/stillbox/src/app/calls/calls.component.html
index 43f403d..554e7b9 100644
--- a/client/stillbox/src/app/calls/calls.component.html
+++ b/client/stillbox/src/app/calls/calls.component.html
@@ -12,6 +12,24 @@
 </div>
 <div class="tabFootContainer">
   <table class="callsTable" mat-table [dataSource]="callsResult">
+    <ng-container matColumnDef="select">
+      <th mat-header-cell *matHeaderCellDef>
+        <mat-checkbox
+          (change)="$event ? masterToggle() : null"
+          [checked]="selection.hasValue() && isAllSelected()"
+          [indeterminate]="selection.hasValue() && !isAllSelected()"
+        >
+        </mat-checkbox>
+      </th>
+      <td mat-cell *matCellDef="let row">
+        <mat-checkbox
+          (click)="$event.stopPropagation()"
+          (change)="$event ? selection.toggle(row) : null"
+          [checked]="selection.isSelected(row)"
+        >
+        </mat-checkbox>
+      </td>
+    </ng-container>
     <ng-container matColumnDef="play">
       <th mat-header-cell *matHeaderCellDef></th>
       <td mat-cell *matCellDef="let call">
diff --git a/client/stillbox/src/app/calls/calls.component.scss b/client/stillbox/src/app/calls/calls.component.scss
index 8c4ff5e..96160d0 100644
--- a/client/stillbox/src/app/calls/calls.component.scss
+++ b/client/stillbox/src/app/calls/calls.component.scss
@@ -39,17 +39,25 @@ tr.mat-mdc-row {
   display: block !important;
 }
 
+.mat-column-select,
 .mat-column-date,
 .mat-column-time,
 .mat-column-play,
 .mat-column-download,
 .mat-column-duration {
-  width: 70px;
+  width: 2%;
+}
+
+.mat-column-system {
+  width: 4%;
+}
+
+.mat-column-talkgroup {
+  width: 40%;
 }
 
 @media screen and (max-width: 768px) {
-  .mat-column-group,
-  .mat-column-frequency {
+  .mat-column-group {
     display: none;
   }
 
diff --git a/client/stillbox/src/app/calls/calls.component.ts b/client/stillbox/src/app/calls/calls.component.ts
index 07f563a..7396ebd 100644
--- a/client/stillbox/src/app/calls/calls.component.ts
+++ b/client/stillbox/src/app/calls/calls.component.ts
@@ -149,6 +149,7 @@ const reqPageSize = 200;
     MatInputModule,
     MatDatepickerModule,
     MatTimepickerModule,
+    MatCheckboxModule,
   ],
   templateUrl: './calls.component.html',
   styleUrl: './calls.component.scss',
@@ -159,8 +160,9 @@ export class CallsComponent {
   count = 0;
   page = 0;
   perPage = 25;
-  pageSizeOptions = [25, 50, 75, 100, 200, 500];
+  pageSizeOptions = [25, 50, 75, 100, 200];
   columns = [
+    'select',
     'play',
     'download',
     'date',
@@ -174,6 +176,8 @@ export class CallsComponent {
   currentSet!: CallRecord[];
   currentServerPage = 0; // page is never 0, forces load
 
+  selection = new SelectionModel<CallRecord>(true, []);
+
   start = new FormControl(this.lTime(new Date()));
   end = new FormControl(null);
 
@@ -182,6 +186,18 @@ export class CallsComponent {
     private prefsSvc: PrefsService,
   ) {}
 
+  isAllSelected() {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.curPage.pageSize;
+    return numSelected === numRows;
+  }
+
+  masterToggle() {
+    this.isAllSelected()
+      ? this.selection.clear()
+      : this.callsResult.value.forEach((row) => this.selection.select(row));
+  }
+
   lTime(now: Date): string {
     now.setDate(new Date().getDate() - 7);
     now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
@@ -196,6 +212,7 @@ export class CallsComponent {
   }
 
   setPage(p: PageEvent) {
+    this.selection.clear();
     this.curPage = p;
     const current = new Date();
     this.getCalls(p);
diff --git a/client/stillbox/src/app/login/login.component.html b/client/stillbox/src/app/login/login.component.html
index 8341f3e..293daed 100644
--- a/client/stillbox/src/app/login/login.component.html
+++ b/client/stillbox/src/app/login/login.component.html
@@ -25,7 +25,7 @@
       </mat-form-field>
     </div>
     <div>
-      <button class="login" (click)="onSubmit()">Login</button>
+      <button class="login sbButton" (click)="onSubmit()">Login</button>
     </div>
   </form>
   @if (failed) {
diff --git a/client/stillbox/src/app/talkgroups/talkgroup-table/talkgroup-table.component.ts b/client/stillbox/src/app/talkgroups/talkgroup-table/talkgroup-table.component.ts
index a9f64b9..258578b 100644
--- a/client/stillbox/src/app/talkgroups/talkgroup-table/talkgroup-table.component.ts
+++ b/client/stillbox/src/app/talkgroups/talkgroup-table/talkgroup-table.component.ts
@@ -83,7 +83,7 @@ export class TalkgroupTableComponent {
   talkgroups = input<TalkgroupsPaginated>();
   talkgroups$ = toObservable(this.talkgroups);
   dataSource = new MatTableDataSource<Talkgroup>();
-  pageSizeOptions = [25, 50, 75, 100, 200, 500];
+  pageSizeOptions = [25, 50, 75, 100, 200];
   perPage: number = 25;
   count = 0;
   columns = [