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

UI/UX - New component for difficult adjustment. (#602)

Browse Source 
* Add next difficulty blocks.
Add next difficulty target date.
Add next difficulty total progress.
Add ajustment difficulty avg min per block.

* Fix typo.

* Trigger difficulty calculation every 5 seconds.

* Add rxjs timer to difficultyEpoch.

* Fix pipe.

* Fix small bar position.

* Change i18n strings.

* Fix typo.

* Add time-until component.

* Speed up difficultyEpoch timer to 1000 ms.

* Fix values to 2 decimal places.

* Add title to fee and difficulty adjustment cards.

* Add title outside the card.

* Fix title to center position.

* Add other titles.

* Add new transalations strings.
Refactor time span component.

* Fix difficulty adjustment i18n string.
Fix duplicated i18n strings.
This commit is contained in:
Miguel Medeiros
2021-07-17 08:58:16 -03:00
committed by GitHub
parent 38aee1a897
commit d405334109
13 changed files with 509 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/components/footer/footer.component.html
View File

@@ -19,8 +19,8 @@
<div class="col">
<span class="mempoolSize"><ng-container i18n="dashboard.mempool-size|Mempool size">Mempool size</ng-container>:</span>
<div class="sub-text" *ngIf="(mempoolBlocksData$ | async) as mempoolBlocksData"><span [innerHtml]="mempoolBlocksData.size | bytes"></span> (<ng-container *ngTemplateOutlet="mempoolBlocksData.blocks === 1 ? blocksSingular : blocksPlural; context: {$implicit: mempoolBlocksData.blocks }"></ng-container>)</div>
<ng-template #blocksSingular let-i i18n="shared.block">{{ i }} block</ng-template>
<ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} blocks</ng-template>
<ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
<ng-template #blocksSingular let-i i18n="shared.block">{{ i }} <span class="shared-block">block</span></ng-template>
</div>
</div>
</div>

2
frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
View File

@@ -27,7 +27,7 @@
<ng-template #mergedBlock>
<div class="time-difference">
<b>(<ng-container *ngTemplateOutlet="blocksPlural; context: {$implicit: projectedBlock.blockVSize / 1000000 | ceil }"></ng-container>)</b>
<ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} blocks</ng-template>
<ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
</div>
</ng-template>
</div>

46
frontend/src/app/components/time-since/time-since.component.ts
View File

@@ -1,5 +1,6 @@
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges, PLATFORM_ID, Inject } from '@angular/core';
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges } from '@angular/core';
import { StateService } from 'src/app/services/state.service';
import { dates } from 'src/app/shared/i18n/dates';
@Component({
selector: 'app-time-since',
@@ -53,48 +54,49 @@ export class TimeSinceComponent implements OnInit, OnChanges, OnDestroy {
calculate() {
const seconds = Math.floor((+new Date() - +new Date(this.time * 1000)) / 1000);
if (seconds < 60) {
return $localize`:@@time-since.just-now:Just now`;
return $localize`:@@date-base.just-now:Just now`;
}
let counter;
for (const i in this.intervals) {
if (this.intervals.hasOwnProperty(i)) {
counter = Math.floor(seconds / this.intervals[i]);
const dateStrings = dates(counter);
if (counter > 0) {
if (counter === 1) {
switch (i) { // singular (1 day ago)
case 'year': return $localize`:@@time-since.year.ago:${counter}:INTERPOLATION: year ago`; break;
case 'month': return $localize`:@@time-since.month.ago:${counter}:INTERPOLATION: month ago`; break;
case 'week': return $localize`:@@time-since.week.ago:${counter}:INTERPOLATION: week ago`; break;
case 'day': return $localize`:@@time-since.day.ago:${counter}:INTERPOLATION: day ago`; break;
case 'hour': return $localize`:@@time-since.hour.ago:${counter}:INTERPOLATION: hour ago`; break;
switch (i) { // singular (1 day)
case 'year': return $localize`:@@time-since:${dateStrings.i18nYear}:DATE: ago`; break;
case 'month': return $localize`:@@time-since:${dateStrings.i18nMonth}:DATE: ago`; break;
case 'week': return $localize`:@@time-since:${dateStrings.i18nWeek}:DATE: ago`; break;
case 'day': return $localize`:@@time-since:${dateStrings.i18nDay}:DATE: ago`; break;
case 'hour': return $localize`:@@time-since:${dateStrings.i18nHour}:DATE: ago`; break;
case 'minute':
if (document.body.clientWidth < 768) {
return $localize`:@@time-since.min.ago:${counter}:INTERPOLATION: min ago`;
return $localize`:@@time-since:${dateStrings.i18nMin}:DATE: ago`;
}
return $localize`:@@time-since.minute.ago:${counter}:INTERPOLATION: minute ago`;
return $localize`:@@time-since:${dateStrings.i18nMinute}:DATE: ago`;
case 'second':
if (document.body.clientWidth < 768) {
return $localize`:@@time-since.sec.ago:${counter}:INTERPOLATION: sec ago`;
return $localize`:@@time-since:${dateStrings.i18nSec}:DATE: ago`;
}
return $localize`:@@time-since.second.ago:${counter}:INTERPOLATION: second ago`;
return $localize`:@@time-since:${dateStrings.i18nSecond}:DATE: ago`;
}
} else {
switch (i) { // plural (2 days ago)
case 'year': return $localize`:@@time-since.years.ago:${counter}:INTERPOLATION: years ago`; break;
case 'month': return $localize`:@@time-since.months.ago:${counter}:INTERPOLATION: months ago`; break;
case 'week': return $localize`:@@time-since.weeks.ago:${counter}:INTERPOLATION: weeks ago`; break;
case 'day': return $localize`:@@time-since.days.ago:${counter}:INTERPOLATION: days ago`; break;
case 'hour': return $localize`:@@time-since.hours.ago:${counter}:INTERPOLATION: hours ago`; break;
switch (i) { // plural (2 days)
case 'year': return $localize`:@@time-since:${dateStrings.i18nYears}:DATE: ago`; break;
case 'month': return $localize`:@@time-since:${dateStrings.i18nMonths}:DATE: ago`; break;
case 'week': return $localize`:@@time-since:${dateStrings.i18nWeeks}:DATE: ago`; break;
case 'day': return $localize`:@@time-since:${dateStrings.i18nDays}:DATE: ago`; break;
case 'hour': return $localize`:@@time-since:${dateStrings.i18nHours}:DATE: ago`; break;
case 'minute':
if (document.body.clientWidth < 768) {
return $localize`:@@time-since.mins.ago:${counter}:INTERPOLATION: mins ago`;
return $localize`:@@time-since:${dateStrings.i18nMins}:DATE: ago`;
}
return $localize`:@@time-since.minutes.ago:${counter}:INTERPOLATION: minutes ago`;
return $localize`:@@time-since:${dateStrings.i18nMinutes}:DATE: ago`;
case 'second':
if (document.body.clientWidth < 768) {
return $localize`:@@time-since.secs.ago:${counter}:INTERPOLATION: secs ago`;
return $localize`:@@time-since:${dateStrings.i18nSecs}:DATE: ago`;
}
return $localize`:@@time-since.seconds.ago:${counter}:INTERPOLATION: seconds ago`;
return $localize`:@@time-since:${dateStrings.i18nSeconds}:DATE: ago`;
}
}
}

107
frontend/src/app/components/time-span/time-span.component.ts Normal file
View File

@@ -0,0 +1,107 @@
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges } from '@angular/core';
import { StateService } from 'src/app/services/state.service';
import { dates } from 'src/app/shared/i18n/dates';
@Component({
selector: 'app-time-span',
template: `{{ text }}`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TimeSpanComponent implements OnInit, OnChanges, OnDestroy {
interval: number;
text: string;
intervals = {};
@Input() time: number;
@Input() fastRender = false;
constructor(
private ref: ChangeDetectorRef,
private stateService: StateService,
) {
this.intervals = {
year: 31536000,
month: 2592000,
week: 604800,
day: 86400,
hour: 3600,
minute: 60,
second: 1
};
}
ngOnInit() {
if (!this.stateService.isBrowser) {
this.text = this.calculate();
this.ref.markForCheck();
return;
}
this.interval = window.setInterval(() => {
this.text = this.calculate();
this.ref.markForCheck();
}, 1000 * (this.fastRender ? 1 : 60));
}
ngOnChanges() {
this.text = this.calculate();
this.ref.markForCheck();
}
ngOnDestroy() {
clearInterval(this.interval);
}
calculate() {
const seconds = Math.floor((+new Date() - +new Date(this.time * 1000)) / 1000);
if (seconds < 60) {
return $localize`:@@date-base.just-now:Just now`;
}
let counter;
for (const i in this.intervals) {
if (this.intervals.hasOwnProperty(i)) {
counter = Math.floor(seconds / this.intervals[i]);
const dateStrings = dates(counter);
if (counter > 0) {
if (counter === 1) {
switch (i) { // singular (1 day)
case 'year': return $localize`:@@time-span:After ${dateStrings.i18nYear}:DATE:`; break;
case 'month': return $localize`:@@time-span:After ${dateStrings.i18nMonth}:DATE:`; break;
case 'week': return $localize`:@@time-span:After ${dateStrings.i18nWeek}:DATE:`; break;
case 'day': return $localize`:@@time-span:After ${dateStrings.i18nDay}:DATE:`; break;
case 'hour': return $localize`:@@time-span:After ${dateStrings.i18nHour}:DATE:`; break;
case 'minute':
if (document.body.clientWidth < 768) {
return $localize`:@@time-span:After ${dateStrings.i18nMin}:DATE:`;
}
return $localize`:@@time-span:After ${dateStrings.i18nMinute}:DATE:`;
case 'second':
if (document.body.clientWidth < 768) {
return $localize`:@@time-span:After ${dateStrings.i18nSec}:DATE:`;
}
return $localize`:@@time-span:After ${dateStrings.i18nSecond}:DATE:`;
}
} else {
switch (i) { // plural (2 days)
case 'year': return $localize`:@@time-span:After ${dateStrings.i18nYears}:DATE:`; break;
case 'month': return $localize`:@@time-span:After ${dateStrings.i18nMonths}:DATE:`; break;
case 'week': return $localize`:@@time-span:After ${dateStrings.i18nWeeks}:DATE:`; break;
case 'day': return $localize`:@@time-span:After ${dateStrings.i18nDays}:DATE:`; break;
case 'hour': return $localize`:@@time-span:After ${dateStrings.i18nHours}:DATE:`; break;
case 'minute':
if (document.body.clientWidth < 768) {
return $localize`:@@time-span:After ${dateStrings.i18nMins}:DATE:`;
}
return $localize`:@@time-span:After ${dateStrings.i18nMinutes}:DATE:`;
case 'second':
if (document.body.clientWidth < 768) {
return $localize`:@@time-span:After ${dateStrings.i18nSecs}:DATE:`;
}
return $localize`:@@time-span:After ${dateStrings.i18nSeconds}:DATE:`;
}
}
}
}
}
}
}

108
frontend/src/app/components/time-until/time-until.component.ts Normal file
View File

@@ -0,0 +1,108 @@
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges } from '@angular/core';
import { StateService } from 'src/app/services/state.service';
import { dates } from 'src/app/shared/i18n/dates';
@Component({
selector: 'app-time-until',
template: `{{ text }}`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TimeUntilComponent implements OnInit, OnChanges, OnDestroy {
interval: number;
text: string;
intervals = {};
@Input() time: number;
@Input() fastRender = false;
constructor(
private ref: ChangeDetectorRef,
private stateService: StateService,
) {
this.intervals = {
year: 31536000,
month: 2592000,
week: 604800,
day: 86400,
hour: 3600,
minute: 60,
second: 1
};
}
ngOnInit() {
if (!this.stateService.isBrowser) {
this.text = this.calculate();
this.ref.markForCheck();
return;
}
this.interval = window.setInterval(() => {
this.text = this.calculate();
this.ref.markForCheck();
}, 1000 * (this.fastRender ? 1 : 60));
}
ngOnChanges() {
this.text = this.calculate();
this.ref.markForCheck();
}
ngOnDestroy() {
clearInterval(this.interval);
}
calculate() {
const seconds = Math.floor((+new Date(this.time) - +new Date()) / 1000);
if (seconds < 60) {
return $localize`:@@date-base.last-minute:In ~1 min`;
}
let counter;
for (const i in this.intervals) {
if (this.intervals.hasOwnProperty(i)) {
counter = Math.floor(seconds / this.intervals[i]);
const dateStrings = dates(counter);
if (counter > 0) {
if (counter === 1) {
switch (i) { // singular (In ~1 day)
case 'year': return $localize`:@@time-until:In ~${dateStrings.i18nYear}:DATE:`; break;
case 'month': return $localize`:@@time-until:In ~${dateStrings.i18nMonth}:DATE:`; break;
case 'week': return $localize`:@@time-until:In ~${dateStrings.i18nWeek}:DATE:`; break;
case 'day': return $localize`:@@time-until:In ~${dateStrings.i18nDay}:DATE:`; break;
case 'hour': return $localize`:@@time-until:In ~${dateStrings.i18nHour}:DATE:`; break;
case 'minute':
if (document.body.clientWidth < 768) {
return $localize`:@@time-until:In ~${dateStrings.i18nMin}:DATE:`;
}
return $localize`:@@time-until:In ~${dateStrings.i18nMinute}:DATE:`;
case 'second':
if (document.body.clientWidth < 768) {
return $localize`:@@time-until:In ~${dateStrings.i18nSec}:DATE:`;
}
return $localize`:@@time-until:In ~${dateStrings.i18nSecond}:DATE:`;
}
} else {
switch (i) { // plural (In ~2 days)
case 'year': return $localize`:@@time-until:In ~${dateStrings.i18nYears}:DATE:`; break;
case 'month': return $localize`:@@time-until:In ~${dateStrings.i18nMonths}:DATE:`; break;
case 'week': return $localize`:@@time-until:In ~${dateStrings.i18nWeeks}:DATE:`; break;
case 'day': return $localize`:@@time-until:In ~${dateStrings.i18nDays}:DATE:`; break;
case 'hour': return $localize`:@@time-until:In ~${dateStrings.i18nHours}:DATE:`; break;
case 'minute':
if (document.body.clientWidth < 768) {
return $localize`:@@time-until:In ~${dateStrings.i18nMins}:DATE:`;
}
return $localize`:@@time-until:In ~${dateStrings.i18nMinutes}:DATE:`;
case 'second':
if (document.body.clientWidth < 768) {
return $localize`:@@time-until:In ~${dateStrings.i18nSecs}:DATE:`;
}
return $localize`:@@time-until:In ~${dateStrings.i18nSeconds}:DATE:`;
}
}
}
}
}
}
}

45
frontend/src/app/components/timespan/timespan.component.ts
View File

@@ -1,45 +0,0 @@
import { Component, ChangeDetectionStrategy, Input, OnChanges } from '@angular/core';
@Component({
selector: 'app-timespan',
template: `{{ text }}`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TimespanComponent implements OnChanges {
@Input() time: number;
text: string;
constructor() { }
ngOnChanges() {
const seconds = this.time;
if (seconds < 60) {
this.text = '< 1 minute';
return;
}
const intervals = {
year: 31536000,
month: 2592000,
week: 604800,
day: 86400,
hour: 3600,
minute: 60,
second: 1
};
let counter;
for (const i in intervals) {
if (intervals.hasOwnProperty(i)) {
counter = Math.floor(seconds / intervals[i]);
if (counter > 0) {
if (counter === 1) {
this.text = counter + ' ' + i; // singular (1 day ago)
break;
} else {
this.text = counter + ' ' + i + 's'; // plural (2 days ago)
break;
}
}
}
}
}
}

6
frontend/src/app/components/transaction/transaction.component.html
View File

@@ -65,7 +65,7 @@
<ng-template [ngIf]="transactionTime > 0">
<tr>
<td i18n="transaction.confirmed|Transaction Confirmed state">Confirmed</td>
<td><ng-container i18n="transaction.confirmed.after|Transaction confirmed after">After <app-timespan [time]="tx.status.block_time - transactionTime"></app-timespan></ng-container></td>
<td><app-time-span [time]="tx.status.block_time - transactionTime" [fastRender]="true"></app-time-span></td>
</tr>
</ng-template>
<tr *ngIf="network !== 'liquid'">
@@ -321,8 +321,8 @@
<ng-template let-i #nextBlockEta i18n="mempool-blocks.eta-of-next-block|Block Frequency">In ~{{ i }} minute</ng-template>
<ng-template #blocksSingular let-i i18n="shared.block">{{ i }} block</ng-template>
<ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} blocks</ng-template>
<ng-template #blocksSingular let-i i18n="shared.block">{{ i }} <span class="shared-block">block</span></ng-template>
<ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
<ng-template #feeTable>
<table class="table table-borderless table-striped">