summaryrefslogtreecommitdiff
path: root/overlays/spm/frontend
diff options
context:
space:
mode:
Diffstat (limited to 'overlays/spm/frontend')
-rw-r--r--overlays/spm/frontend/src/app/spm/spm.component.html4
-rw-r--r--overlays/spm/frontend/src/app/spm/spm.component.sass7
-rw-r--r--overlays/spm/frontend/src/app/spm/spm.component.ts23
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 @@
31 </ng-template> 31 </ng-template>
32</div> 32</div>
33 33
34<button id="style-button" mat-fab color="primary" (click)="cycle_style()">
35 <span>{{style.value}}</span>
36</button>
37
34<button id="add-button" mat-fab color="accent" (click)="add()"> 38<button id="add-button" mat-fab color="accent" (click)="add()">
35 <mat-icon aria-hidden="false" aria-label="Add" svgIcon="add"></mat-icon> 39 <mat-icon aria-hidden="false" aria-label="Add" svgIcon="add"></mat-icon>
36</button> 40</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
7 bottom: 16px 7 bottom: 16px
8 right: 16px 8 right: 16px
9 9
10#style-button
11 position: fixed
12 bottom: 16px
13 right: 88px
14 width: 7rem
15 border-radius: 28px
16
10#mail-panel-container 17#mail-panel-container
11 margin-bottom: 88px 18 margin-bottom: 88px
12 19
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';
2import { MatIconRegistry, MatIconModule } from '@angular/material/icon'; 2import { MatIconRegistry, MatIconModule } from '@angular/material/icon';
3import { DomSanitizer } from "@angular/platform-browser"; 3import { DomSanitizer } from "@angular/platform-browser";
4import { BehaviorSubject, interval, Subscription, catchError, throwError } from 'rxjs'; 4import { BehaviorSubject, interval, Subscription, catchError, throwError } from 'rxjs';
5import { HttpClient, HttpHeaders, HttpErrorResponse, HttpResponse } from '@angular/common/http'; 5import { HttpClient, HttpHeaders, HttpErrorResponse, HttpResponse, HttpParams } from '@angular/common/http';
6 6
7import { v4 as uuidv4 } from 'uuid'; 7import { v4 as uuidv4 } from 'uuid';
8import jwtDecode, { JwtPayload } from "jwt-decode"; 8import jwtDecode, { JwtPayload } from "jwt-decode";
@@ -43,6 +43,8 @@ type SpmJwtPayload = JwtPayload & SpmJwtUnregisteredPayload;
43 43
44export type SpmMail = LoadingSpmMail | LoadedSpmMail | ClaimedSpmMail | ExpiredSpmMail; 44export type SpmMail = LoadingSpmMail | LoadedSpmMail | ClaimedSpmMail | ExpiredSpmMail;
45 45
46export type SpmMailStyle = 'words' | 'consonants';
47
46function percentExpiration(start: Date, exp: Date, now?: Date) { 48function percentExpiration(start: Date, exp: Date, now?: Date) {
47 if (!now) { 49 if (!now) {
48 now = new Date(); 50 now = new Date();
@@ -80,6 +82,7 @@ function updateSpmExpiration(value: SpmMail): SpmMail {
80export class SpmComponent implements OnInit, OnDestroy { 82export class SpmComponent implements OnInit, OnDestroy {
81 spmMails$: BehaviorSubject<Map<string, SpmMail>> = new BehaviorSubject(new Map()); 83 spmMails$: BehaviorSubject<Map<string, SpmMail>> = new BehaviorSubject(new Map());
82 http: HttpClient; 84 http: HttpClient;
85 style: BehaviorSubject<SpmMailStyle> = new BehaviorSubject<SpmMailStyle>('words');
83 86
84 intervalSubscription?: Subscription; 87 intervalSubscription?: Subscription;
85 88
@@ -101,6 +104,10 @@ export class SpmComponent implements OnInit, OnDestroy {
101 ); 104 );
102 105
103 this.http = http; 106 this.http = http;
107
108 if (['words', 'consonants'].includes(localStorage['style'])) {
109 this.style.next(localStorage['style']);
110 }
104 } 111 }
105 112
106 add() { 113 add() {
@@ -108,7 +115,19 @@ export class SpmComponent implements OnInit, OnDestroy {
108 const curr: Map<string, SpmMail> = this.spmMails$.getValue(); 115 const curr: Map<string, SpmMail> = this.spmMails$.getValue();
109 curr.set(ident, { state: 'loading' }); 116 curr.set(ident, { state: 'loading' });
110 this.spmMails$.next(curr); 117 this.spmMails$.next(curr);
111 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)) 118 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))
119 }
120
121 cycle_style() {
122 let newVal: SpmMailStyle;
123 if (this.style.value === 'words') {
124 newVal = 'consonants';
125 } else {
126 newVal = 'words';
127 }
128
129 this.style.next(newVal);
130 localStorage.setItem('style', newVal);
112 } 131 }
113 132
114 load(k: string, encoded: string) { 133 load(k: string, encoded: string) {