From 898141a8fe4f9f06ee971d27af8f8ffe8c753f49 Mon Sep 17 00:00:00 2001 From: Ben Wilson Date: Mon, 24 Jul 2023 22:20:55 -0400 Subject: [PATCH] particles setting --- src/app/app-routing.module.ts | 9 +++- src/app/app.component.html | 2 +- src/app/app.component.ts | 8 ++++ src/app/app.module.ts | 4 +- .../background-particles.component.ts | 6 +-- .../settings/settings.component.html | 4 ++ .../settings/settings.component.scss | 0 .../settings/settings.component.spec.ts | 21 +++++++++ .../components/settings/settings.component.ts | 24 ++++++++++ src/app/layout/app.menu.component.ts | 7 +-- .../services/local-storage.service.spec.ts | 16 +++++++ src/app/services/local-storage.service.ts | 44 +++++++++++++++++++ src/prime-ng.module.ts | 5 ++- 13 files changed, 140 insertions(+), 10 deletions(-) create mode 100644 src/app/components/settings/settings.component.html create mode 100644 src/app/components/settings/settings.component.scss create mode 100644 src/app/components/settings/settings.component.spec.ts create mode 100644 src/app/components/settings/settings.component.ts create mode 100644 src/app/services/local-storage.service.spec.ts create mode 100644 src/app/services/local-storage.service.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index bf5f12c..3e4eabc 100644 --- a/src/app/app-routing.module.ts +++ b/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 } ] - } + }, + ] } diff --git a/src/app/app.component.html b/src/app/app.component.html index 6074af9..e7c1f29 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,2 +1,2 @@ - + \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e79f631..104b3b3 100644 --- a/src/app/app.component.ts +++ b/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; + constructor(private localService: LocalStorageService) { + this.particles$ = this.localService.particles$; + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 61023b5..9d48d0c 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/components/background-particles/background-particles.component.ts b/src/app/components/background-particles/background-particles.component.ts index 69c9645..5565a20 100644 --- a/src/app/components/background-particles/background-particles.component.ts +++ b/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 { - 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 diff --git a/src/app/components/settings/settings.component.html b/src/app/components/settings/settings.component.html new file mode 100644 index 0000000..58fa911 --- /dev/null +++ b/src/app/components/settings/settings.component.html @@ -0,0 +1,4 @@ +
+ +
\ No newline at end of file diff --git a/src/app/components/settings/settings.component.scss b/src/app/components/settings/settings.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/settings/settings.component.spec.ts b/src/app/components/settings/settings.component.spec.ts new file mode 100644 index 0000000..c2333ad --- /dev/null +++ b/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; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [SettingsComponent] + }); + fixture = TestBed.createComponent(SettingsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/settings/settings.component.ts b/src/app/components/settings/settings.component.ts new file mode 100644 index 0000000..8519d8e --- /dev/null +++ b/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; + } +} diff --git a/src/app/layout/app.menu.component.ts b/src/app/layout/app.menu.component.ts index 95a5cfe..63dec8f 100644 --- a/src/app/layout/app.menu.component.ts +++ b/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'] } ] - }, + } ]; diff --git a/src/app/services/local-storage.service.spec.ts b/src/app/services/local-storage.service.spec.ts new file mode 100644 index 0000000..ba1dbd4 --- /dev/null +++ b/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(); + }); +}); diff --git a/src/app/services/local-storage.service.ts b/src/app/services/local-storage.service.ts new file mode 100644 index 0000000..deff011 --- /dev/null +++ b/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; + public particles$: Observable; + + constructor() { + this._particles$ = new BehaviorSubject(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); + + } + + +} diff --git a/src/prime-ng.module.ts b/src/prime-ng.module.ts index de16ee6..2a4460b 100644 --- a/src/prime-ng.module.ts +++ b/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 ];