broken

client/stillbox/src/app/calls/calls.component.html

@@ -76,12 +76,14 @@
         }
       </mat-select>
     </mat-form-field>
-  <div class="toolbarButtons">
-    <button class="sbButton" (click)="resetFilter()"><mat-icon class="material-symbols-outlined">reset_settings</mat-icon></button>
-    <button class="sbButton" (click)="refresh()">
-      <mat-icon>refresh</mat-icon>
-    </button>
-  </div>
+    <div class="toolbarButtons">
+      <button class="sbButton" (click)="resetFilter()">
+        <mat-icon class="material-symbols-outlined">reset_settings</mat-icon>
+      </button>
+      <button class="sbButton" (click)="refresh()">
+        <mat-icon>refresh</mat-icon>
+      </button>
+    </div>
   </form>
 </div>
 <div class="tabContainer" *ngIf="!isLoading; else spinner">

client/stillbox/src/app/calls/calls.component.scss

@@ -21,7 +21,8 @@ table,
   overflow: auto;
 }
 
-.toolbarButtons button, .toolbarButtons form,
+.toolbarButtons button,
+.toolbarButtons form,
 .toolbarButtons form button {
   justify-content: flex-end;
   align-content: center;
@@ -95,4 +96,3 @@ form {
 .tagSelect {
   flex: 1 1 250px;
 }
-

client/stillbox/src/app/calls/calls.component.ts

@@ -291,11 +291,13 @@ export class CallsComponent {
       this.currentServerPage = 0;
       this.setPage(this.zeroPage());
     });
-    this.setPage(<PageEvent>{
-      pageIndex: 0,
-      pageSize: 25,
+    this.prefsSvc.get('callsPerPage').subscribe((cpp) => {
+      this.perPage = cpp;
+      this.setPage(<PageEvent>{
+        pageIndex: 0,
+        pageSize: 25,
+      });
     });
-    this.perPage = this.prefsSvc.get('callsPerPage');
   }
 
   resetFilter() {

client/stillbox/src/app/prefs/prefs.service.ts

@@ -2,19 +2,27 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import {
   BehaviorSubject,
+  concatMap,
   Observable,
   shareReplay,
  } from 'rxjs';
 
 type Preferences = Map<string, any>;
 
+function mapToObj(map: Map<any, any>): { [key: string]: any } {
+  const obj: { [key: string]: any } = {};
+  map.forEach((value, key) => {
+      obj[key] = value;
+  });
+  return obj;
+}
+
 @Injectable({
   providedIn: 'root',
 })
 export class PrefsService {
   constructor(private http: HttpClient) {
     this.prefs$ = this.fetch().pipe(shareReplay(1));
-    this.fillPrefs();
   }
   last = <Preferences>{};
   private readonly _getPref = new Map<string, Observable<any>>();
@@ -24,31 +32,26 @@ export class PrefsService {
     return this.http.get<Preferences>('/api/user/prefs/stillbox');
   }
 
-  fillPrefs() {
-    this.prefs$.subscribe((prefs) => {
-      if (prefs.size > 0) {
-       prefs.forEach((k, v) => {
-        this._getPref.set(k, new BehaviorSubject<any>(v));
-      });
-    }
-    });
-  }
 
-  get(k: string): any{
-    const r = this._getPref.get(k);
-    return r;
-  }
+
+  get(k: string): Observable<any> {
+      return this.prefs$.pipe(
+        concatMap((prefs) => {
+          if (prefs instanceof Map) {
+        const v = prefs.get(k) ?? new BehaviorSubject(null);
+        return v;
+        }
+        return new BehaviorSubject(null);
+    })
+      );
+    }
 
   set(pref: string, value: any) {
-    if (this._getPref.get(pref) != value) {
-      this._getPref.set(pref, value);
-      this.setPrefs();
-    }
-  }
-
-  setPrefs() {
+    this.prefs$.subscribe((prefs) => {
+      prefs.set(pref, value);
     this.http
-      .put<Preferences>('/api/user/prefs/stillbox', this._getPref)
+      .put<Preferences>('/api/user/prefs/stillbox', mapToObj(prefs))
       .subscribe((event) => {});
+    });
   }
 }

client/stillbox/src/app/talkgroups/talkgroup-table/talkgroup-table.component.ts

@@ -123,7 +123,9 @@ export class TalkgroupTableComponent {
       this.suppress = false;
     });
 
-    this.perPage = this.prefsService.get('tgsPerPage');
+    this.prefsService.get('tgsPerPage').subscribe((tgpp) => {
+      this.perPage = tgpp;
+    });
     this.talkgroups$.subscribe((event) => {
       if (event != null) {
         this.dataSource.data = event!.talkgroups;

client/stillbox/src/app/talkgroups/talkgroups.component.ts

@@ -73,8 +73,10 @@ export class TalkgroupsComponent {
   }
 
   ngOnInit() {
-    this.perPage = this.prefsService.get('tgsPerPage');
-    this.switchPage(this.curPage);
+    this.prefsService.get('tgsPerPage').subscribe((tgpp) => {
+      this.perPage = tgpp;
+      this.switchPage(this.curPage);
+    });
   }
 
   ngAfterViewInit() {

client/stillbox/src/app/talkgroups/talkgroups.service.ts

@@ -1,11 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpResponse } from '@angular/common/http';
-import {
-  concatMap,
-  Observable,
-  ReplaySubject,
-  shareReplay,
-} from 'rxjs';
+import { concatMap, Observable, ReplaySubject, shareReplay } from 'rxjs';
 import { Talkgroup, TalkgroupUpdate, TGID } from '../talkgroup';
 
 export interface Pagination {
@@ -81,7 +76,9 @@ export class TalkgroupService {
 
   allTags(): Observable<string[]> {
     if (!this.tags$) {
-      this.tags$ = this.http.get<string[]>('/api/talkgroup/tags').pipe(shareReplay());
+      this.tags$ = this.http
+        .get<string[]>('/api/talkgroup/tags')
+        .pipe(shareReplay());
     }
 
     return this.tags$;

client/stillbox/src/styles.scss

@@ -109,14 +109,14 @@ html {
 }
 
 @font-face {
-  font-family: 'Material Symbols Outlined';
+  font-family: "Material Symbols Outlined";
   font-style: normal;
   font-weight: 400;
   src: url("./assets/MatSymOutline.ttf") format("truetype");
 }
 
 .material-symbols-outlined {
-  font-family: 'Material Symbols Outlined';
+  font-family: "Material Symbols Outlined";
   font-weight: normal;
   font-style: normal;
   font-size: 24px;
@@ -129,7 +129,6 @@ html {
   direction: ltr;
 }
 
-
 a,
 a:visited {
   text-decoration: none;
@@ -235,4 +234,4 @@ input {
   display: flex;
   margin-top: 40px;
   justify-content: center;
-}
+}