feat(interval-timer): store interval as user setting

src/app/IntervalTimer/interval-timer.component.scss

@@ -12,7 +12,7 @@
 }
 
 .countdown-number {
-  color: black;
+  color: var(--clr-forms-label-color);
   display: inline-block;
   line-height: 40px;
 }

src/app/IntervalTimer/interval-timer.component.ts

@@ -6,6 +6,8 @@ import {
   Output,
   EventEmitter,
 } from '@angular/core';
+import { Settings, SettingsService } from '../data/settings.service';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'interval-timer',
@@ -29,24 +31,36 @@ export class IntervalTimerComponent implements OnInit, OnDestroy {
   public currentCallDelay: number;
   public circleVisible: boolean = true;
   public delayOptions: Generator;
+  private settingsSubscription: Subscription;
+
+  constructor(private settingsService: SettingsService) {}
 
   ngOnInit(): void {
     function* cycle<T>(array: T[]) {
       while (true) yield* array;
     }
     this.delayOptions = cycle(this.delayOptionsArray);
-    this.changeDelay();
+    this.settingsSubscription = this.settingsService.settings$.subscribe(
+      (settings: Settings) => {
+        this.currentCallDelay = settings.refresh_timer_interval;
+        this.changeDelay(false);
+      },
+    );
   }
 
   onTimerClick() {
     this.changeDelay();
     this.intervalElapsed.emit();
+    this.settingsService
+      .update({ refresh_timer_interval: this.currentCallDelay })
+      .subscribe();
   }
 
-  changeDelay() {
+  changeDelay(incrementInterval: boolean = true) {
     //Set next value of the interval array as call delay
-    this.currentCallDelay = this.delayOptions.next().value;
-
+    if (incrementInterval) {
+      this.currentCallDelay = this.delayOptions.next().value;
+    }
     if (this.callInterval !== null) {
       clearInterval(this.callInterval);
       this.callInterval = null;
@@ -63,6 +77,7 @@ export class IntervalTimerComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
+    this.settingsSubscription.unsubscribe();
     if (this.callInterval !== null) {
       clearInterval(this.callInterval);
       this.callInterval = null;

src/app/data/forms.ts

@@ -78,6 +78,7 @@ export type SettingFormGroup = FormGroup<{
   theme: FormControl<'dark' | 'light' | 'system'>;
   progress_view_mode: FormControl<ProgressViewMode>;
   currency_symbol: FormControl<string>;
+  refresh_timer_interval: FormControl<number>;
 }>;
 
 // This object type maps VMTemplate names to the number of requested VMs

src/app/data/settings.service.ts

@@ -24,6 +24,7 @@ export interface Settings {
   theme: 'dark' | 'light' | 'system';
   progress_view_mode: ProgressViewMode;
   currency_symbol: string;
+  refresh_timer_interval: number;
 }
 
 /**
@@ -55,6 +56,9 @@ export class SettingsService {
     currency_symbol: new FormControl<string>('$', {
       nonNullable: true,
     }),
+    refresh_timer_interval: new FormControl<number>(10, {
+      nonNullable: true,
+    }),
   });
 
   fetch() {
@@ -69,6 +73,7 @@ export class SettingsService {
               theme: 'system',
               progress_view_mode: 'cardView',
               currency_symbol: '$',
+              refresh_timer_interval: 10,
             } as Settings),
       ),
       tap((s: Settings) => {

src/app/header/header.component.html

@@ -133,6 +133,19 @@ <h3 class="modal-title">Settings</h3>
                 />
                 <label class="clr-col-md-4">Currency Symbol</label>
               </clr-input-container>
+
+              <clr-input-container>
+                <input
+                  class="clr-col-md-8"
+                  clrInput
+                  type="number"
+                  placeholder="Currency Symbol"
+                  name="refresh_timer_interval"
+                  formControlName="refresh_timer_interval"
+                  required
+                />
+                <label class="clr-col-md-4">Refresh Timer Interval</label>
+              </clr-input-container>
             </clr-tab-content>
             <clr-tab-content> </clr-tab-content>
           </clr-tab>

src/app/header/header.component.ts

@@ -104,13 +104,15 @@ export class HeaderComponent implements OnInit {
           theme = 'system',
           progress_view_mode = 'cardView',
           currency_symbol = '$',
+          refresh_timer_interval = 10,
         }) => {
           this.settingsForm.setValue({
             terminal_theme,
             hide_usernames_status,
             theme,
             progress_view_mode,
             currency_symbol,
+            refresh_timer_interval,
           });
 
           this.fetchingSettings = false;