spm: style switch

3 files changed, 32 insertions, 2 deletions

diff --git a/overlays/spm/frontend/src/app/spm/spm.component.html b/overlays/spm/frontend/src/app/spm/spm.component.html
index 416da91f..9b4dc2dc 100644
--- a/overlays/spm/frontend/src/app/spm/spm.component.html
+++ b/overlays/spm/frontend/src/app/spm/spm.component.html
@@ -31,6 +31,10 @@
   </ng-template>
 </div>
 
+<button id="style-button" mat-fab color="primary" (click)="cycle_style()">
+  <span>{{style.value}}</span>
+</button>
+
 <button id="add-button" mat-fab color="accent" (click)="add()">
   <mat-icon aria-hidden="false" aria-label="Add" svgIcon="add"></mat-icon>
 </button>
diff --git a/overlays/spm/frontend/src/app/spm/spm.component.sass b/overlays/spm/frontend/src/app/spm/spm.component.sass
index 773eb879..b37baf39 100644
--- a/overlays/spm/frontend/src/app/spm/spm.component.sass
+++ b/overlays/spm/frontend/src/app/spm/spm.component.sass
@@ -7,6 +7,13 @@ a
   bottom: 16px
   right: 16px
 
+#style-button
+  position: fixed
+  bottom: 16px
+  right: 88px
+  width: 7rem
+  border-radius: 28px
+
 #mail-panel-container
   margin-bottom: 88px
 
diff --git a/overlays/spm/frontend/src/app/spm/spm.component.ts b/overlays/spm/frontend/src/app/spm/spm.component.ts
index f0655b55..f6892d7c 100644
--- a/overlays/spm/frontend/src/app/spm/spm.component.ts
+++ b/overlays/spm/frontend/src/app/spm/spm.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { MatIconRegistry, MatIconModule } from '@angular/material/icon';
 import { DomSanitizer } from "@angular/platform-browser";
 import { BehaviorSubject, interval, Subscription, catchError, throwError } from 'rxjs';
-import { HttpClient, HttpHeaders, HttpErrorResponse, HttpResponse } from '@angular/common/http';
+import { HttpClient, HttpHeaders, HttpErrorResponse, HttpResponse, HttpParams } from '@angular/common/http';
 
 import { v4 as uuidv4 } from 'uuid';
 import jwtDecode, { JwtPayload } from "jwt-decode";
@@ -43,6 +43,8 @@ type SpmJwtPayload = JwtPayload & SpmJwtUnregisteredPayload;
 
 export type SpmMail = LoadingSpmMail | LoadedSpmMail | ClaimedSpmMail | ExpiredSpmMail;
 
+export type SpmMailStyle = 'words' | 'consonants';
+
 function percentExpiration(start: Date, exp: Date, now?: Date) {
   if (!now) {
     now = new Date();
@@ -80,6 +82,7 @@ function updateSpmExpiration(value: SpmMail): SpmMail {
 export class SpmComponent implements OnInit, OnDestroy {
   spmMails$: BehaviorSubject<Map<string, SpmMail>> = new BehaviorSubject(new Map());
   http: HttpClient;
+  style: BehaviorSubject<SpmMailStyle> = new BehaviorSubject<SpmMailStyle>('words');
 
   intervalSubscription?: Subscription;
 
@@ -101,6 +104,10 @@ export class SpmComponent implements OnInit, OnDestroy {
     );
 
     this.http = http;
+
+    if (['words', 'consonants'].includes(localStorage['style'])) {
+      this.style.next(localStorage['style']);
+    }
   }
 
   add() {
@@ -108,7 +115,19 @@ export class SpmComponent implements OnInit, OnDestroy {
     const curr: Map<string, SpmMail> = this.spmMails$.getValue();
     curr.set(ident, { state: 'loading' });
     this.spmMails$.next(curr);
-    this.http.get('/spm/generate', { headers: new HttpHeaders({ 'Accept': 'text/plain' }), observe: 'body' as const, responseType: 'text' as const }).subscribe(payload => this.load(ident, payload))
+    this.http.get('/spm/generate', { headers: new HttpHeaders({ 'Accept': 'text/plain' }), observe: 'body' as const, responseType: 'text' as const, params: new HttpParams().set('style', this.style.value) }).subscribe(payload => this.load(ident, payload))
+  }
+
+  cycle_style() {
+    let newVal: SpmMailStyle;
+    if (this.style.value === 'words') {
+      newVal = 'consonants';
+    } else {
+      newVal = 'words';
+    }
+
+    this.style.next(newVal);
+    localStorage.setItem('style', newVal);
   }
 
   load(k: string, encoded: string) {