particles setting

src/app/app-routing.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { DashboardComponent } from './components/dashboard/dashboard.component';
+import { SettingsComponent } from './components/settings/settings.component';
 import { SplashComponent } from './components/splash/splash.component';
 import { WorkerGroupComponent } from './components/worker-group/worker-group.component';
 import { WorkerComponent } from './components/worker/worker.component';
@@ -19,6 +20,10 @@ const routes: Routes = [
       {
         path: ':address',
         children: [
+          {
+            path: 'settings',
+            component: SettingsComponent
+          },
           {
             path: '',
             component: DashboardComponent,
@@ -26,6 +31,7 @@ const routes: Routes = [
           {
             path: ':workerName',
             children: [
+
               {
                 path: '',
                 component: WorkerGroupComponent
@@ -35,7 +41,8 @@ const routes: Routes = [
                 component: WorkerComponent
               }
             ]
-          }
+          },
+
 
         ]
       }

src/app/app.component.html

@@ -1,2 +1,2 @@
-<app-background-particles></app-background-particles>
+<app-background-particles *ngIf="particles$ | async"></app-background-particles>
 <router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,4 +1,7 @@
 import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { LocalStorageService } from './services/local-storage.service';
 
 @Component({
   selector: 'app-root',
@@ -7,4 +10,9 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'public-pool-ui';
+
+  public particles$: Observable<boolean>;
+  constructor(private localService: LocalStorageService) {
+    this.particles$ = this.localService.particles$;
+  }
 }

src/app/app.module.ts

@@ -18,6 +18,7 @@ import { AppLayoutModule } from './layout/app.layout.module';
 import { DateAgoPipe } from './pipes/date-ago.pipe';
 import { HashSuffixPipe } from './pipes/hash-suffix.pipe';
 import { NumberSuffixPipe } from './pipes/number-suffix.pipe';
+import { SettingsComponent } from './components/settings/settings.component';
 
 
 
@@ -31,7 +32,8 @@ import { NumberSuffixPipe } from './pipes/number-suffix.pipe';
     DateAgoPipe,
     WorkerGroupComponent,
     BackgroundParticlesComponent,
-    HashSuffixPipe
+    HashSuffixPipe,
+    SettingsComponent
   ],
   imports: [
     CommonModule,

src/app/components/background-particles/background-particles.component.ts

@@ -32,7 +32,7 @@ export class BackgroundParticlesComponent implements OnInit {
     const lineColor: string = '#afccfa';
 
     this.particleOptions = {
-      fpsLimit: this.deviceService.isDesktop() ? 30 : 1,
+      fpsLimit: 30,
       detectRetina: true,
       background: {
         position: "50% 50%",
@@ -75,11 +75,11 @@ export class BackgroundParticlesComponent implements OnInit {
   }
 
   particlesLoaded(container: Container): void {
-    console.log(container);
+
   }
 
   async particlesInit(engine: Engine): Promise<void> {
-    console.log(engine);
+
 
     // Starting from 1.19.0 you can add custom presets or shape here, using the current tsParticles instance (main)
     // this loads the tsparticles package bundle, it's the easiest method for getting everything ready

src/app/components/settings/settings.component.html

@@ -0,0 +1,4 @@
+<div class="card">
+    <p-selectButton [options]="stateOptions" [(ngModel)]="value" (ngModelChange)="particlesChanged($event)"
+        optionLabel="label" optionValue="value"></p-selectButton>
+</div>

src/app/components/settings/settings.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsComponent } from './settings.component';
+
+describe('SettingsComponent', () => {
+  let component: SettingsComponent;
+  let fixture: ComponentFixture<SettingsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SettingsComponent]
+    });
+    fixture = TestBed.createComponent(SettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/settings/settings.component.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+
+import { LocalStorageService } from '../../services/local-storage.service';
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.scss']
+})
+export class SettingsComponent {
+
+  public stateOptions: any[] = [{ label: 'On', value: true }, { label: 'Off', value: false },];
+
+  public value: boolean = true;
+
+  constructor(private localStorageService: LocalStorageService) {
+    this.value = this.localStorageService.getParticles();
+  }
+
+  public particlesChanged(newVal: boolean) {
+    this.localStorageService.setParticles(newVal);
+    this.value = newVal;
+  }
+}

src/app/layout/app.menu.component.ts

@@ -39,11 +39,12 @@ export class AppMenuComponent implements OnInit {
 
             return [
                 {
-                    label: 'Home',
+                    label: 'Dashboard',
                     items: [
-                        { label: 'Dashboard', icon: 'pi pi-fw pi-home', routerLink: [params.address] }
+                        { label: 'Dashboard', icon: 'pi pi-fw pi-home', routerLink: [params.address] },
+                        { label: 'Settings', icon: 'pi pi-fw pi-cog', routerLink: [params.address, 'settings'] }
                     ]
-                },
+                }
 
             ];
 

src/app/services/local-storage.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LocalStorageService } from './local-storage.service';
+
+describe('LocalStorageService', () => {
+  let service: LocalStorageService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LocalStorageService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/local-storage.service.ts

@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable, shareReplay } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LocalStorageService {
+
+  private PARTICLES = 'PARTICLES';
+
+  private _particles$: BehaviorSubject<boolean>;
+  public particles$: Observable<boolean>;
+
+  constructor() {
+    this._particles$ = new BehaviorSubject<boolean>(this.getParticles());
+    this.particles$ = this._particles$.asObservable().pipe(shareReplay({ refCount: true, bufferSize: 1 }));
+  }
+
+  private get(key: string): string | null {
+    return localStorage.getItem(key);
+  }
+
+  private set(key: string, value: string) {
+    localStorage.setItem(key, value);
+  }
+
+  private remove(key: string): void {
+    localStorage.removeItem(key);
+  }
+
+
+  public getParticles(): boolean {
+    const result = this.get(this.PARTICLES);
+    return result == null || JSON.parse(result)?.particles === true;
+  }
+
+  public setParticles(particles: boolean) {
+    this.set(this.PARTICLES, JSON.stringify({ particles }));
+    this._particles$.next(particles);
+
+  }
+
+
+}

src/prime-ng.module.ts

@@ -19,6 +19,7 @@ import { MenuModule } from 'primeng/menu';
 import { OverlayPanelModule } from 'primeng/overlaypanel';
 import { PanelModule } from 'primeng/panel';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
+import { SelectButtonModule } from 'primeng/selectbutton';
 import { StepsModule } from 'primeng/steps';
 import { StyleClassModule } from 'primeng/styleclass';
 import { TableModule } from 'primeng/table';
@@ -28,6 +29,7 @@ import { ToastModule } from 'primeng/toast';
 
 
 
+
 export const primeNgServices = [
     MessageService,
     ConfirmationService
@@ -58,7 +60,8 @@ const primeNgModules = [
     ChartModule,
     TagModule,
     StyleClassModule,
-    PanelModule
+    PanelModule,
+    SelectButtonModule
 ];