Merge branch 'master' of https://github.com/benjamin-wilson/public-pool-ui

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

@@ -16,7 +16,10 @@ import { WorkerGroupComponent } from './components/worker-group/worker-group.com
 import { WorkerComponent } from './components/worker/worker.component';
 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';
+import { UserAgentPipe } from './pipes/user-agent.pipe';
 
 
 
@@ -29,7 +32,10 @@ import { NumberSuffixPipe } from './pipes/number-suffix.pipe';
     NumberSuffixPipe,
     DateAgoPipe,
     WorkerGroupComponent,
-    BackgroundParticlesComponent
+    BackgroundParticlesComponent,
+    HashSuffixPipe,
+    SettingsComponent,
+    UserAgentPipe
   ],
   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/dashboard/dashboard.component.html

@@ -1,4 +1,22 @@
 <ng-container *ngIf="clientInfo$ | async as clientInfo">
+    <div class="grid">
+        <div class="col-12 lg:col-6 xl:col-3">
+            <div class="card mb-4">
+                <div class="flex justify-content-between mb-3">
+                    <div>
+                        <span class="block text-500 font-medium mb-3">Best Difficulty</span>
+                        <div class="text-900 font-medium text-xl">{{clientInfo.bestDifficulty | numberSuffix}}
+                        </div>
+                    </div>
+                    <div class="flex align-items-center justify-content-center bg-orange-100 border-round"
+                        [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
+                        <i class="pi pi-star text-orange-500 text-xl"></i>
+                    </div>
+                </div>
+                <span class="text-green-500 font-medium">{{clientInfo.bestDifficulty | number}}</span>
+            </div>
+        </div>
+    </div>
     <div class="card">
 
 
@@ -31,7 +49,7 @@
                         {{getSessionCount(worker.name, clientInfo.workers)}} Sessions
                     </td>
                     <td>
-                        {{getTotalHashRate(worker.name, clientInfo.workers)}} GH/s
+                        {{getTotalHashRate(worker.name, clientInfo.workers) | hashSuffix}}
                     </td>
                     <td>
                         {{getBestDifficulty(worker.name, clientInfo.workers) | numberSuffix}}
@@ -47,7 +65,7 @@
                 <tr [routerLink]="[worker.name, worker.sessionId]">
                     <td></td>
                     <td>{{worker.sessionId}}</td>
-                    <td>{{worker.hashRate}} GH/s</td>
+                    <td>{{worker.hashRate | hashSuffix}}</td>
                     <td>{{worker.bestDifficulty | numberSuffix}}</td>
                     <td>{{worker.startTime | dateAgo}}</td>
                 </tr>

src/app/components/dashboard/dashboard.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { map, Observable, shareReplay } from 'rxjs';
 
+import { HashSuffixPipe } from '../../pipes/hash-suffix.pipe';
 import { ClientService } from '../../services/client.service';
 
 @Component({
@@ -18,6 +19,8 @@ export class DashboardComponent {
 
   public chartOptions: any;
 
+
+
   constructor(private clientService: ClientService, private route: ActivatedRoute) {
     this.address = this.route.snapshot.params['address'];
     this.clientInfo$ = this.clientService.getClientInfo(this.address).pipe(
@@ -61,18 +64,22 @@ export class DashboardComponent {
               label: '2 Hour',
               data: hourlyData,
               fill: false,
-              backgroundColor: documentStyle.getPropertyValue('--primary-color'),
-              borderColor: documentStyle.getPropertyValue('--primary-color'),
-              tension: .4
+              backgroundColor: documentStyle.getPropertyValue('--yellow-600'),
+              borderColor: documentStyle.getPropertyValue('--yellow-600'),
+              tension: .4,
+              pointRadius: 1,
+              borderWidth: 1
             },
             {
               type: 'line',
               label: '10 Minute',
               data: data,
               fill: false,
-              backgroundColor: documentStyle.getPropertyValue('--bluegray-700'),
-              borderColor: documentStyle.getPropertyValue('--bluegray-700'),
-              tension: .4
+              backgroundColor: documentStyle.getPropertyValue('--primary-color'),
+              borderColor: documentStyle.getPropertyValue('--primary-color'),
+              tension: .4,
+              pointRadius: 1,
+              borderWidth: 1
             },
 
           ]
@@ -108,7 +115,7 @@ export class DashboardComponent {
         y: {
           ticks: {
             color: textColorSecondary,
-            callback: (value: number) => value + ' GH/s',
+            callback: (value: number) => HashSuffixPipe.transform(value)
           },
           grid: {
             color: surfaceBorder,

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

@@ -0,0 +1,5 @@
+<div class="card">
+    <h5>Background Particles </h5>
+    <p-inputSwitch [(ngModel)]="value" (ngModelChange)="particlesChanged($event)" optionLabel="label"
+        optionValue="value"></p-inputSwitch>
+</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/components/splash/splash.component.html

@@ -1,26 +1,42 @@
-<div class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8">
+<div class="py-4 px-4 lg:px-8 mx-0 lg:mx-8 main">
     <div class="grid justify-content-center">
 
         <div class="col-12">
 
             <div class="card text-center">
-                <div class="col-12 text-center mt-4 mb-4">
-                    <h2 class="text-900 font-normal mb-2">Public Pool</h2>
-                </div>
 
                 <div>
                     <img style="height: 200px;" src="assets/layout/images/logo.svg" alt="logo">
 
                 </div>
+
+                <div class="col-12 text-center">
+                    <h1 class="text-900 font-normal">Public Pool</h1>
+                </div>
+                <div class="mb-4">
+                    <a class="mr-4" href="https://github.com/benjamin-wilson/public-pool" target="_blank">
+                        <i class="pi pi-github" style="font-size: 30pt; color: white;"></i>
+                    </a>
+                    <a href="https://discord.gg/pF9smpe3yE" target="_blank">
+                        <i class="pi pi-discord" style="font-size: 30pt; color: white;"></i>
+                    </a>
+                </div>
+
                 <div>
+                    <code>Fully Open Source Solo Bitcoin Mining Pool</code>
+                    <br>
+                    <br>
                     <div class="info">
-                        <code>stratum+tcp://public-pool-web.airdns.org:21496</code>
+                        <code>stratum+tcp://public-pool.airdns.org:21496</code>
                         <br>
                         <code>username: &lt;your BTC address&gt;.&lt;worker name&gt;, password: x</code>
                         <br>
                         <br>
                     </div>
-                    <code>1.8% fee includes donations to <a href="https://discord.gg/pF9smpe3yE" target="_blank">open source Bitcoin mining</a></code>
+                    <code>Pleb mining (under 50TH/s miners) mine with <b>NO FEES*</b></code>
+                    <br>
+                    <code>Miners with > 50TH/s will incur a 1.5% fee, a portion of which will go back into <a href="https://discord.gg/pF9smpe3yE" target="_blank">open source Bitcoin mining</a>*</code>
+                    <br>
                     <br>
                     <code>No second best.</code>
                 </div>
@@ -32,6 +48,65 @@
                     <button [disabled]="address.invalid" class="ml-3 mt-3" pButton label="My Workers"
                         [routerLink]="['app',address.value]"></button>
                 </div>
+
+                <code><small>* Based on a machine-by-machine basis</small></code>
+            </div>
+        </div>
+
+        <div class="col-12">
+
+            <div *ngIf="chartData$ | async as chartData">
+                <div class="card">
+                    <p-chart type="line" [data]="chartData" [options]="chartOptions"></p-chart>
+                </div>
+            </div>
+
+        </div>
+
+
+        <div class="col-12" *ngIf="userAgents$ | async as userAgents">
+            <div class="card">
+                <h4 style="text-align: center;">Devices</h4>
+                <p-table [value]="userAgents">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th>Device</th>
+                            <th>Currently Working</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-userAgent>
+                        <tr>
+                            <td>{{ userAgent.userAgent | userAgent }}</td>
+                            <td>{{ userAgent.count }}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+
+            </div>
+        </div>
+
+        <div class="col-12" *ngIf="blockData$ | async as blockData">
+            <div class="card">
+                <h4 style="text-align: center;"> Found Blocks</h4>
+                <p-table [value]="blockData">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th>Height</th>
+                            <th>Address</th>
+                            <th>Worker</th>
+                            <th>Session</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-block>
+                        <tr>
+                            <td>{{ block.height }}</td>
+                            <td>{{ block.minerAddress }}</td>
+                            <td>{{ block.worker }}</td>
+                            <td>{{ block.sessionId }}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+
             </div>
         </div>
     </div>

src/app/components/splash/splash.component.scss

@@ -2,6 +2,15 @@
     min-width: 50%;
 }
 
+.main {
+    margin-top: 60px;
+}
+
 .info {
     font-weight: bold;
+}
+
+.card {
+    max-width: 1024px;
+    margin: 0 auto;
 }

src/app/components/splash/splash.component.ts

@@ -1,6 +1,9 @@
 import { Component } from '@angular/core';
 import { FormControl } from '@angular/forms';
+import { map, Observable, shareReplay } from 'rxjs';
 
+import { HashSuffixPipe } from '../../pipes/hash-suffix.pipe';
+import { AppService } from '../../services/app.service';
 import { bitcoinAddressValidator } from '../../validators/bitcoin-address.validator';
 
 @Component({
@@ -11,7 +14,83 @@ import { bitcoinAddressValidator } from '../../validators/bitcoin-address.valida
 export class SplashComponent {
 
   public address: FormControl;
-  constructor() {
+
+  public chartData$: Observable<any>;
+  public blockData$: Observable<any>;
+  public userAgents$: Observable<any>;
+
+  public chartOptions: any;
+
+  constructor(private appService: AppService) {
+
+    const info$ = this.appService.getInfo().pipe(shareReplay({ refCount: true, bufferSize: 1 }));
+    this.blockData$ = info$.pipe(map(info => info.blockData));
+    this.userAgents$ = info$.pipe(map(info => info.userAgents));
+    this.chartData$ = info$.pipe(
+      map((info: any) => {
+        return {
+          labels: info.chartData.map((d: any) => d.label),
+          datasets: [
+            {
+              label: 'Public-Pool Hashrate',
+              data: info.chartData.map((d: any) => d.data),
+              fill: false,
+              backgroundColor: documentStyle.getPropertyValue('--primary-color'),
+              borderColor: documentStyle.getPropertyValue('--primary-color'),
+              tension: .4,
+              pointRadius: 1,
+              borderWidth: 1
+            }
+          ]
+        }
+      })
+    );
+
     this.address = new FormControl(null, bitcoinAddressValidator());
+
+
+
+    const documentStyle = getComputedStyle(document.documentElement);
+    const textColor = documentStyle.getPropertyValue('--text-color');
+    const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+    const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+
+
+    this.chartOptions = {
+      plugins: {
+        legend: {
+          labels: {
+            color: textColor
+          }
+        }
+      },
+      scales: {
+        x: {
+          type: 'time',
+          time: {
+            unit: 'hour', // Set the unit to 'minute'
+          },
+          ticks: {
+            color: textColorSecondary
+          },
+          grid: {
+            color: surfaceBorder,
+            drawBorder: false,
+            display: true
+          }
+        },
+        y: {
+          ticks: {
+            color: textColorSecondary,
+            callback: (value: number) => HashSuffixPipe.transform(value)
+          },
+          grid: {
+            color: surfaceBorder,
+            drawBorder: false
+          }
+        }
+      }
+    };
+
   }
 }

src/app/components/worker-group/worker-group.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { map, Observable, shareReplay } from 'rxjs';
 
+import { HashSuffixPipe } from '../../pipes/hash-suffix.pipe';
 import { WorkerService } from '../../services/worker.service';
 
 @Component({
@@ -37,9 +38,11 @@ export class WorkerGroupComponent {
               label: workerInfo.name,
               data: workerInfo.chartData.map((d: any) => d.data),
               fill: false,
-              backgroundColor: documentStyle.getPropertyValue('--bluegray-700'),
-              borderColor: documentStyle.getPropertyValue('--bluegray-700'),
-              tension: .4
+              backgroundColor: documentStyle.getPropertyValue('--primary-color'),
+              borderColor: documentStyle.getPropertyValue('--primary-color'),
+              tension: .4,
+              pointRadius: 1,
+              borderWidth: 1
             }
           ]
         }
@@ -60,9 +63,7 @@ export class WorkerGroupComponent {
         x: {
           type: 'time',
           time: {
-            unit: 'minute', // Set the unit to 'minute'
-            stepSize: 10, // Set the desired interval between labels in minutes
-
+            unit: 'hour'
           },
           ticks: {
             color: textColorSecondary
@@ -75,7 +76,7 @@ export class WorkerGroupComponent {
         y: {
           ticks: {
             color: textColorSecondary,
-            callback: (value: number) => value + ' GH/s',
+            callback: (value: number) => HashSuffixPipe.transform(value)
           },
           grid: {
             color: surfaceBorder,

src/app/components/worker/worker.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { map, Observable, shareReplay } from 'rxjs';
 
+import { HashSuffixPipe } from '../../pipes/hash-suffix.pipe';
 import { WorkerService } from '../../services/worker.service';
 
 @Component({
@@ -37,9 +38,11 @@ export class WorkerComponent {
               label: workerInfo.name,
               data: workerInfo.chartData.map((d: any) => d.data),
               fill: false,
-              backgroundColor: documentStyle.getPropertyValue('--bluegray-700'),
-              borderColor: documentStyle.getPropertyValue('--bluegray-700'),
-              tension: .4
+              backgroundColor: documentStyle.getPropertyValue('--primary-color'),
+              borderColor: documentStyle.getPropertyValue('--primary-color'),
+              tension: .4,
+              pointRadius: 1,
+              borderWidth: 1
             }
           ]
         }
@@ -60,9 +63,7 @@ export class WorkerComponent {
         x: {
           type: 'time',
           time: {
-            unit: 'minute', // Set the unit to 'minute'
-            stepSize: 10, // Set the desired interval between labels in minutes
-
+            unit: 'hour'
           },
           ticks: {
             color: textColorSecondary
@@ -75,7 +76,7 @@ export class WorkerComponent {
         y: {
           ticks: {
             color: textColorSecondary,
-            callback: (value: number) => value + ' GH/s',
+            callback: (value: number) => HashSuffixPipe.transform(value)
           },
           grid: {
             color: surfaceBorder,

src/app/layout/app.footer.component.html

@@ -1,3 +1,3 @@
-<div class="layout-footer">
+<div>
 
 </div>

src/app/layout/app.layout.component.html

@@ -9,6 +9,6 @@
         </div>
         <app-footer></app-footer>
     </div>
-    <app-config></app-config>
+    <!-- <app-config></app-config> -->
     <div class="layout-mask"></div>
-</div>
+</div>

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/pipes/hash-suffix.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { HashSuffixPipe } from './hash-suffix.pipe';
+
+describe('HashSuffixPipe', () => {
+  it('create an instance', () => {
+    const pipe = new HashSuffixPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/pipes/hash-suffix.pipe.ts

@@ -0,0 +1,33 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'hashSuffix'
+})
+export class HashSuffixPipe implements PipeTransform {
+
+  private static _this = new HashSuffixPipe();
+
+  public static transform(value: number): string {
+    return this._this.transform(value);
+  }
+
+  public transform(value: number): string {
+
+    if (value == null || value < 0) {
+      return '0';
+    }
+
+    const suffixes = [' H/s', ' KH/s', ' MH/s', ' GH/s', ' TH/s', ' PH/s', ' EH/s'];
+
+    let power = Math.floor(Math.log10(value) / 3);
+    if (power < 0) {
+      power = 0;
+    }
+    const scaledValue = value / Math.pow(1000, power);
+    const suffix = suffixes[power];
+
+    return scaledValue.toFixed(1) + suffix;
+  }
+
+
+}

src/app/pipes/number-suffix.pipe.ts

@@ -10,15 +10,18 @@ export class NumberSuffixPipe implements PipeTransform {
 
     const suffixes = ['', 'k', 'M', 'B', 'T', 'P', 'E'];
 
-    if (value === 0) {
+    if (value == null || value < 0) {
       return '0';
     }
 
-    const power = Math.floor(Math.log10(value) / 3);
+    let power = Math.floor(Math.log10(value) / 3);
+    if (power < 0) {
+      power = 0;
+    }
     const scaledValue = value / Math.pow(1000, power);
     const suffix = suffixes[power];
 
-    return scaledValue.toFixed(1) + suffix;
+    return scaledValue.toFixed(2) + suffix;
   }
 
 }

src/app/pipes/user-agent.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { UserAgentPipe } from './user-agent.pipe';
+
+describe('UserAgentPipe', () => {
+  it('create an instance', () => {
+    const pipe = new UserAgentPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/pipes/user-agent.pipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'userAgent'
+})
+export class UserAgentPipe implements PipeTransform {
+
+  transform(value: string): string {
+    const valueLowerCase = value.toLowerCase();
+    if (valueLowerCase.includes('bosminer')) {
+      return 'Braiins OS';
+    } else {
+      return value;
+    }
+  }
+
+}

src/app/services/app.service.ts

@@ -0,0 +1,19 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { environment } from '../../environments/environment';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AppService {
+
+    constructor(
+        private httpClient: HttpClient
+    ) { }
+
+    public getInfo() {
+        return this.httpClient.get(`${environment.API_URL}/api/info`) as Observable<any>;
+    }
+}

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/index.html

@@ -7,7 +7,7 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link id="theme-css" rel="stylesheet" type="text/css" href="assets/layout/styles/theme/lara-light-indigo/theme.css">
+  <link id="theme-css" rel="stylesheet" type="text/css" href="assets/layout/styles/theme/vela-blue/theme.css">
 </head>
 
 <body>

src/prime-ng.module.ts

@@ -13,12 +13,14 @@ import { DropdownModule } from 'primeng/dropdown';
 import { DynamicDialogModule } from 'primeng/dynamicdialog';
 import { FieldsetModule } from 'primeng/fieldset';
 import { InputNumberModule } from 'primeng/inputnumber';
+import { InputSwitchModule } from 'primeng/inputswitch';
 import { InputTextModule } from 'primeng/inputtext';
 import { InputTextareaModule } from 'primeng/inputtextarea';
 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';
@@ -58,7 +60,9 @@ const primeNgModules = [
     ChartModule,
     TagModule,
     StyleClassModule,
-    PanelModule
+    PanelModule,
+    SelectButtonModule,
+    InputSwitchModule
 ];