save on enable

mlapaglia · Jul 1, 2021 · a340aa9 · a340aa9
1 parent 5bcd9c7
commit a340aa9
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/OpenAlprWebhookProcessor/ClientApp/src/app/settings/alerts/pushover/pushover.component.html b/OpenAlprWebhookProcessor/ClientApp/src/app/settings/alerts/pushover/pushover.component.html
@@ -5,7 +5,8 @@
             <mat-card-subtitle>https://pushover.net/</mat-card-subtitle>
             <mat-slide-toggle
                 style="padding-top: 10px;"
-                [(ngModel)]="client.isEnabled"></mat-slide-toggle>
+                [(ngModel)]="client.isEnabled"
+                (change)="onPushoverToggle($event)"></mat-slide-toggle>
         </mat-card-header>
         <mat-card-content *ngIf="client.isEnabled" [@inOutAnimation]>
             <div style="margin:16px;" fxLayout="row wrap" fxLayout="row wrap" fxLayoutGap=20px>
@@ -25,8 +26,14 @@
             </div>
         </mat-card-content>
         <mat-card-actions align="end" *ngIf="client.isEnabled" [@inOutAnimation]>
-            <button mat-button (click)="testClient();" [disabled]="isTesting">Test</button>
-            <button mat-button (click)="saveClient();" [disabled]="isSaving">Save</button>
+            <button mat-raised-button (click)="testClient();" [disabled]="isTesting">
+                <span *ngIf="isTesting" class="spinner-border spinner-border-sm mr-1"></span>
+                Test
+            </button>
+            <button mat-raised-button color="primary" (click)="saveClient();" [disabled]="isSaving" btn-primary>
+                <span *ngIf="isSaving" class="spinner-border spinner-border-sm mr-1"></span>
+                Save
+            </button>
           </mat-card-actions>
     </mat-card>
 </div>
diff --git a/OpenAlprWebhookProcessor/ClientApp/src/app/settings/alerts/pushover/pushover.component.ts b/OpenAlprWebhookProcessor/ClientApp/src/app/settings/alerts/pushover/pushover.component.ts
@@ -1,5 +1,6 @@
 import { animate, style, transition, trigger } from '@angular/animations';
 import { Component, OnInit } from '@angular/core';
+import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 import { SnackbarService } from '@app/snackbar/snackbar.service';
 import { SnackBarType } from '@app/snackbar/snackbartype';
 import { Pushover } from './pushover';
@@ -59,4 +60,14 @@ export class PushoverComponent implements OnInit {
       this.isTesting = false;
     });
   }
+
+  public onPushoverToggle(event: MatSlideToggleChange) {
+    if (!event.checked) {
+      this.client.isEnabled = event.checked;
+      this.isSaving = true;
+      this.pushoverService.upsertPushover(this.client).subscribe(_ => {
+        this.isSaving = false;
+      });
+    }
+  }
 }