diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 891c1a351..7d4cbd365 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -46,6 +46,7 @@ import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontaweso import { faBolt, faChartArea, faCogs, faCubes, faDatabase, faInfoCircle, faLink, faList, faSearch, faTachometerAlt, faThList, faTv } from '@fortawesome/free-solid-svg-icons'; import { ApiDocsComponent } from './components/api-docs/api-docs.component'; import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component'; +import { StorageService } from './services/storage.service'; @NgModule({ declarations: [ @@ -97,6 +98,7 @@ import { TermsOfServiceComponent } from './components/terms-of-service/terms-of- WebsocketService, AudioService, SeoService, + StorageService, ], bootstrap: [AppComponent] }) diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html index 998f3ddc1..e8cb825b3 100644 --- a/frontend/src/app/dashboard/dashboard.component.html +++ b/frontend/src/app/dashboard/dashboard.component.html @@ -2,67 +2,60 @@
-
-
-
- -
-
-
-
-
-
-
Difficulty adjustment
-
-
+{{ epochData.change | number: '1.0-2' }}%
-
-
+ +
+
+
+
-
-
-
-
-
- - - - - -
-
Mempool size
-

- {{ mempoolBlocksData.size | bytes }} ({{ mempoolBlocksData.blocks }} blocks) -

- 		-
Unconfirmed
-

- {{ mempoolInfoData.value.memPoolInfo.size | number }} TXs -

-
-
-
-
- +
+
+
+
-
-
-
-
-
Tx vBytes per second
- - -  Backend is synchronizing - - -
-
{{ mempoolInfoData.value.vBytesPerSecond | ceil | number }} vB/s
-
- - +
+
+
+ +
+
+
+
+ +
+ + +
+
+
+ +
+
+
+
+ +
+
+
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+
@@ -72,64 +65,67 @@ [options]="transactionsWeightPerSecondOptions">
+
-
-
-
-
-
Latest blocks
- - - - - - - - - - - - - - - -
HeightMinedTxsFilled
{{ block.height }} ago{{ block.tx_count | number }} -
-
-
{{ block.size | bytes: 2 }}
-
-
-
View all »
+
+
+
+
Latest blocks
+ + + + + + + + + + + + + + + +
HeightMinedTxsFilled
{{ block.height }} ago{{ block.tx_count | number }} +
+
+
{{ block.size | bytes: 2 }}
+
+
+
View all »
+
-
-
-
-
-
Latest transactions
- - - - - - - - - - - - - - - -
TXIDAmountUSDFee
{{ transaction.txid | shortenString : 10 }}{{ transaction.fee / (transaction.weight / 4) | number : '1.1-1' }} sat/vB
-
 
+
+
+
+
Latest transactions
+ + + + + + + + + + + + + + + +
TXIDAmountUSDFee
{{ transaction.txid | shortenString : 10 }}{{ transaction.fee / (transaction.weight / 4) | number : '1.1-1' }} sat/vB
+
 
+
-
+
+ +
@@ -147,3 +143,49 @@
+ + + + + + + +
+
Mempool size
+

+ {{ mempoolBlocksData.size | bytes }} ({{ mempoolBlocksData.blocks }} blocks) +

+ 		+
Unconfirmed
+

+ {{ mempoolInfoData.value.memPoolInfo.size | number }} TXs +

+
+ + + +
Tx vBytes per second
+ + +  Backend is synchronizing + + +
+
{{ mempoolInfoData.value.vBytesPerSecond | ceil | number }} vB/s
+
+ + + + + +
+
+
Difficulty adjustment
+
+
+{{ epochData.change | number: '1.0-2' }}%
+
+
+
+
+
+ \ No newline at end of file diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts index 102098bee..25c545382 100644 --- a/frontend/src/app/dashboard/dashboard.component.ts +++ b/frontend/src/app/dashboard/dashboard.component.ts @@ -10,6 +10,7 @@ import * as Chartist from 'chartist'; import { formatDate } from '@angular/common'; import { WebsocketService } from '../services/websocket.service'; import { SeoService } from '../services/seo.service'; +import { StorageService } from '../services/storage.service'; interface MempoolBlocksData { blocks: number; @@ -42,6 +43,7 @@ interface MempoolStatsData { changeDetection: ChangeDetectionStrategy.OnPush }) export class DashboardComponent implements OnInit { + collapsed = true; network$: Observable; mempoolBlocksData$: Observable; mempoolInfoData$: Observable; @@ -60,12 +62,14 @@ export class DashboardComponent implements OnInit { private apiService: ApiService, private websocketService: WebsocketService, private seoService: SeoService, + private storageService: StorageService, ) { } ngOnInit(): void { this.seoService.resetTitle(); this.websocketService.want(['blocks', 'stats', 'mempool-blocks', 'live-2h-chart']); this.network$ = merge(of(''), this.stateService.networkChanged$); + this.collapsed = this.storageService.getValue('dashboard-collapsed') === 'true' || false; this.mempoolInfoData$ = combineLatest([ this.stateService.mempoolInfo$, @@ -217,4 +221,9 @@ export class DashboardComponent implements OnInit { trackByBlock(index: number, block: Block) { return block.height; } + + toggleCollapsed() { + this.collapsed = !this.collapsed; + this.storageService.setValue('dashboard-collapsed', this.collapsed); + } } diff --git a/frontend/src/app/services/storage.service.ts b/frontend/src/app/services/storage.service.ts new file mode 100644 index 000000000..c39117a9e --- /dev/null +++ b/frontend/src/app/services/storage.service.ts @@ -0,0 +1,22 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class StorageService { + getValue(key: string): string { + try { + return localStorage.getItem(key); + } catch (e) { + console.log(e); + } + } + + setValue(key: string, value: any): void { + try { + localStorage.setItem(key, value); + } catch (e) { + console.log(e); + } + } +}