machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change collapsing dashboard into 3 levels.

Browse Source
This commit is contained in:
softsimon 2020-10-27 16:34:27 +07:00
parent e61574c630
commit 396ff6a375
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
4 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
backend/src/api/disk-cache.ts
View File

@ -39,7 +39,7 @@ class DiskCache {
mempool: memPool.getMempool(), mempool: memPool.getMempool(),
blocks: blocks.getBlocks(), blocks: blocks.getBlocks(),
})); }));
logger.info('Mempool and blocks data saved to disk cache'); logger.debug('Mempool and blocks data saved to disk cache');
} catch (e) { } catch (e) {
logger.warn('Error writing to cache file asynchronously'); logger.warn('Error writing to cache file asynchronously');
} }

4
frontend/src/app/app.module.ts
View File

@ -43,7 +43,7 @@ import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
import { FeesBoxComponent } from './components/fees-box/fees-box.component'; import { FeesBoxComponent } from './components/fees-box/fees-box.component';
import { DashboardComponent } from './dashboard/dashboard.component'; import { DashboardComponent } from './dashboard/dashboard.component';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome'; import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faBolt, faChartArea, faCogs, faCubes, faDatabase, faInfoCircle, import { faAngleDoubleDown, faAngleDoubleUp, faAngleDown, faAngleUp, faBolt, faChartArea, faCogs, faCubes, faDatabase, faInfoCircle,
faLink, faList, faSearch, faTachometerAlt, faThList, faTint, faTv } from '@fortawesome/free-solid-svg-icons'; faLink, faList, faSearch, faTachometerAlt, faThList, faTint, faTv } from '@fortawesome/free-solid-svg-icons';
import { ApiDocsComponent } from './components/api-docs/api-docs.component'; import { ApiDocsComponent } from './components/api-docs/api-docs.component';
import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component'; import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
@ -119,5 +119,7 @@ export class AppModule {
library.addIcons(faLink); library.addIcons(faLink);
library.addIcons(faBolt); library.addIcons(faBolt);
library.addIcons(faTint); library.addIcons(faTint);
library.addIcons(faAngleDown);
library.addIcons(faAngleUp);
} }
} }

11
frontend/src/app/dashboard/dashboard.component.html
View File

@ -2,7 +2,7 @@
<div class="container-xl mt-2"> <div class="container-xl mt-2">
<div class="row row-cols-1 row-cols-md-2" *ngIf="{ value: (mempoolInfoData$ | async) } as mempoolInfoData"> <div class="row row-cols-1 row-cols-md-2" *ngIf="{ value: (mempoolInfoData$ | async) } as mempoolInfoData">
<ng-template [ngIf]="collapsed" [ngIfElse]="expanded"> <ng-template [ngIf]="collapseLevel === 'three'" [ngIfElse]="expanded">
<div class="col mb-4"> <div class="col mb-4">
<div class="card text-center"> <div class="card text-center">
<div class="card-body"> <div class="card-body">
@ -68,6 +68,7 @@
</div> </div>
</div> </div>
</div> </div>
<ng-template [ngIf]="collapseLevel === 'one'">
<div class="col mb-4"> <div class="col mb-4">
<div class="card text-center"> <div class="card text-center">
<div class="card-body"> <div class="card-body">
@ -122,9 +123,15 @@
</div> </div>
</div> </div>
</ng-template> </ng-template>
</ng-template>
</div> </div>
<button type="button" class="btn btn-secondary btn-sm d-block mx-auto" (click)="toggleCollapsed()">{{ collapsed ? 'Expand' : 'Collapse' }}</button> <button type="button" class="btn btn-secondary btn-sm d-block mx-auto" (click)="toggleCollapsed()">
<div [ngSwitch]="collapseLevel">
<fa-icon *ngSwitchCase="'three'" [icon]="['fas', 'angle-down']" [fixedWidth]="true" title="Collapse"></fa-icon>
<fa-icon *ngSwitchDefault [icon]="['fas', 'angle-up']" [fixedWidth]="true" title="Expand"></fa-icon>
</div>
</button>
<br> <br>

14
frontend/src/app/dashboard/dashboard.component.ts
View File

@ -43,7 +43,7 @@ interface MempoolStatsData {
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class DashboardComponent implements OnInit { export class DashboardComponent implements OnInit {
collapsed = true; collapseLevel: string;
network$: Observable<string>; network$: Observable<string>;
mempoolBlocksData$: Observable<MempoolBlocksData>; mempoolBlocksData$: Observable<MempoolBlocksData>;
mempoolInfoData$: Observable<MempoolInfoData>; mempoolInfoData$: Observable<MempoolInfoData>;
@ -69,7 +69,7 @@ export class DashboardComponent implements OnInit {
this.seoService.resetTitle(); this.seoService.resetTitle();
this.websocketService.want(['blocks', 'stats', 'mempool-blocks', 'live-2h-chart']); this.websocketService.want(['blocks', 'stats', 'mempool-blocks', 'live-2h-chart']);
this.network$ = merge(of(''), this.stateService.networkChanged$); this.network$ = merge(of(''), this.stateService.networkChanged$);
this.collapsed = this.storageService.getValue('dashboard-collapsed') === 'true' || false; this.collapseLevel = this.storageService.getValue('dashboard-collapsed') || 'one';
this.mempoolInfoData$ = combineLatest([ this.mempoolInfoData$ = combineLatest([
this.stateService.mempoolInfo$, this.stateService.mempoolInfo$,
@ -223,7 +223,13 @@ export class DashboardComponent implements OnInit {
} }
toggleCollapsed() { toggleCollapsed() {
this.collapsed = !this.collapsed; if (this.collapseLevel === 'one') {
this.storageService.setValue('dashboard-collapsed', this.collapsed); this.collapseLevel = 'two';
} else if (this.collapseLevel === 'two') {
this.collapseLevel = 'three';
} else {
this.collapseLevel = 'one';
}
this.storageService.setValue('dashboard-collapsed', this.collapseLevel);
} }
} }