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

* 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.
2021-07-17 08:58:16 -03:00
parent be8be9d603
commit 394a48b9cd
13 changed files with 509 additions and 117 deletions
--- a/frontend/src/app/components/time-until/time-until.component.ts
+++ b/frontend/src/app/components/time-until/time-until.component.ts
@@ -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:`;
+            }
+          }
+        }
+      }
+    }
+  }
+
+}