Add preferences

src/app/dialogues/account/account.component.html

@@ -10,6 +10,8 @@
 
 <app-sshkeys></app-sshkeys>
 
+<app-preferences></app-preferences>
+
 <div class="mat-typography">
 	<h2>Account Management</h2>
 	<p class="mat-body-1">

src/app/dialogues/dialogues.module.ts

@@ -6,6 +6,7 @@ import { FormsModule } from '@angular/forms';
 import { MaterialModule } from '../material/material.module';
 import { SharedModule } from '../shared/shared.module';
 import { SshkeysModule } from '../sshkeys/sshkeys.module';
+import { PreferencesModule } from '../preferences/preferences.module';
 
 // declarations
 import { QuestionnaireComponent } from './questionnaire/questionnaire.component';
@@ -26,6 +27,7 @@ import { ProfileDialogService } from './profile-dialog.service';
     MaterialModule,
     SharedModule,
     SshkeysModule,
+    PreferencesModule,
   ],
   declarations: [
     QuestionnaireComponent,

src/app/material/material.module.ts

@@ -13,9 +13,8 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatInputModule } from '@angular/material/input';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatTabsModule } from '@angular/material/tabs';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
 @NgModule({
   imports: [
@@ -33,7 +32,7 @@ import { MatTabsModule } from '@angular/material/tabs';
     MatCheckboxModule,
     MatTooltipModule,
     MatProgressSpinnerModule,
-    MatTabsModule,
+    MatSlideToggleModule,
   ],
   exports: [
     MatButtonModule,
@@ -49,7 +48,7 @@ import { MatTabsModule } from '@angular/material/tabs';
     MatCheckboxModule,
     MatTooltipModule,
     MatProgressSpinnerModule,
-    MatTabsModule,
+    MatSlideToggleModule,
   ],
 })
 export class MaterialModule { }

src/app/preferences/preferences.component.html

+<div class="mat-typography" style="margin-bottom: 50px;">
+  <h2>Preferences</h2>
+  <div  *ngIf="(prefs.connect() | async) as ps">
+	<mat-slide-toggle color="primary" (change)="prefChanged(ps)" [(ngModel)]="ps.showEmptyVOs">
+	  Show VOs for which no service is provided
+	</mat-slide-toggle>
+  </div>
+</div>

src/app/preferences/preferences.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PreferencesComponent } from './preferences.component';
+
+describe('PreferencesComponent', () => {
+  let component: PreferencesComponent;
+  let fixture: ComponentFixture<PreferencesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PreferencesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PreferencesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/preferences/preferences.component.ts

+import { Component, OnInit } from '@angular/core';
+
+import { PreferencesService, Prefs } from './preferences.service';
+
+@Component({
+  selector: 'app-preferences',
+  templateUrl: './preferences.component.html',
+  styleUrls: ['./preferences.component.css']
+})
+export class PreferencesComponent implements OnInit {
+
+  constructor(
+    public prefs: PreferencesService,
+  ) { }
+
+  ngOnInit() {
+  }
+
+  public prefChanged(prefs: Prefs) {
+    this.prefs.save(prefs);
+  }
+}

src/app/preferences/preferences.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { PreferencesComponent } from './preferences.component';
+import { PreferencesService } from './preferences.service';
+
+import { MaterialModule } from '../material/material.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MaterialModule,
+    FormsModule,
+  ],
+  exports: [
+    PreferencesComponent,
+  ],
+  declarations: [
+    PreferencesComponent,
+  ],
+  providers: [
+    PreferencesService,
+  ],
+})
+export class PreferencesModule { }

src/app/preferences/preferences.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { PreferencesService } from './preferences.service';
+
+describe('PreferencesService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: PreferencesService = TestBed.get(PreferencesService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/preferences/preferences.service.ts

+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+export const prefsKey = "feudalPrefs";
+
+export interface Prefs {
+  showEmptyVOs?: boolean;
+};
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PreferencesService {
+
+  private prefs: Prefs = {};
+  private prefs$ = new BehaviorSubject<Prefs>(this.prefs);
+
+  constructor() {
+    this.load();
+  }
+
+  public save(prefs: Prefs): void {
+    console.log("Saved prefs:", prefs);
+    localStorage.setItem(prefsKey, JSON.stringify(prefs));
+  }
+
+  public load(): void {
+    this.prefs = JSON.parse(localStorage.getItem(prefsKey));
+    if (this.prefs != null &&  this.prefs != undefined) {
+      this.prefs$.next(this.prefs);
+    }
+    console.log("Loaded prefs:", this.prefs);
+  }
+
+  public connect(): Observable<Prefs> {
+    return this.prefs$.asObservable();
+  }
+}