Display halving countdown with double units

frontend/src/app/components/difficulty-mining/difficulty-mining.component.html

@@ -50,16 +50,12 @@
           <h5 class="card-title" i18n="difficulty-box.next-halving">Next Halving</h5>
           <div class="card-text" i18n-ngbTooltip="mining.average-fee" [ngbTooltip]="halvingBlocksLeft" [tooltipContext]="{ epochData: epochData }" placement="bottom">
             <span>{{ timeUntilHalving | date }}</span>
-            <div class="symbol" *ngIf="!countdownObject; else countdownValid">
+            <div class="symbol" *ngIf="blocksUntilHalving === 1; else approxTime">
               <app-time kind="until" [time]="epochData.timeAvg + now" [fastRender]="false" [fixedRender]="true" [precision]="1" minUnit="minute"></app-time>
             </div>
-            <ng-template #countdownValid>
+            <ng-template #approxTime>
               <div class="symbol">
-                <span>In </span>
+                <app-time kind="until" [time]="timeUntilHalving" [fastRender]="false" [fixedRender]="true" [precision]="0" [numUnits]="2" [units]="['year', 'day', 'hour', 'minute']"></app-time>
-                <span *ngIf="countdownObject.years">{{ countdownObject.years }} years </span>
-                <span *ngIf="countdownObject.months">{{ countdownObject.months }} months </span>
-                <span *ngIf="countdownObject.days">{{ countdownObject.days }} days </span>
-                <span *ngIf="countdownObject.hours">{{ countdownObject.hours }} hours</span>
               </div>
             </ng-template>
           </div>

frontend/src/app/components/difficulty-mining/difficulty-mining.component.ts

@@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core
 import { combineLatest, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { StateService } from '../../services/state.service';
-const countdown = require('./countdown');
 
 interface EpochProgress {
   base: string;
@@ -28,7 +27,7 @@ interface EpochProgress {
 export class DifficultyMiningComponent implements OnInit {
   isLoadingWebSocket$: Observable<boolean>;
   difficultyEpoch$: Observable<EpochProgress>;
-  countdownObject = null;
+  blocksUntilHalving: number | null = null;
   timeUntilHalving = 0;
   now = new Date().getTime();
 
@@ -69,22 +68,10 @@ export class DifficultyMiningComponent implements OnInit {
           colorPreviousAdjustments = '#ffffff66';
         }
 
-        const blocksUntilHalving = 210000 - (maxHeight % 210000);
+        this.blocksUntilHalving = 210000 - (maxHeight % 210000);
-        this.timeUntilHalving = new Date().getTime() + (blocksUntilHalving * 600000);
+        this.timeUntilHalving = new Date().getTime() + (this.blocksUntilHalving * 600000);
         this.now = new Date().getTime();
 
-        if (blocksUntilHalving - 1 === 0) {
-          this.countdownObject = null;
-        } else {
-          this.countdownObject = countdown(this.timeUntilHalving, new Date().getTime(), countdown.YEARS | countdown.MONTHS);
-          if (this.countdownObject.years === 0) {
-            this.countdownObject = countdown(this.timeUntilHalving, new Date().getTime(), countdown.DAYS | countdown.HOURS);
-          }
-          if (this.countdownObject.hours === 0) {
-            this.countdownObject = countdown(this.timeUntilHalving, new Date().getTime(), countdown.MINUTES);
-          }
-        }
-
         const data = {
           base: `${da.progressPercent.toFixed(2)}%`,
           change: da.difficultyChange,
@@ -95,7 +82,7 @@ export class DifficultyMiningComponent implements OnInit {
           newDifficultyHeight: da.nextRetargetHeight,
           estimatedRetargetDate: da.estimatedRetargetDate,
           previousRetarget: da.previousRetarget,
-          blocksUntilHalving,
+          blocksUntilHalving: this.blocksUntilHalving,
           timeUntilHalving: this.timeUntilHalving,
           timeAvg: da.timeAvg,
         };

frontend/src/app/components/time/time.component.ts

@@ -10,7 +10,6 @@ import { dates } from '../../shared/i18n/dates';
 export class TimeComponent implements OnInit, OnChanges, OnDestroy {
   interval: number;
   text: string;
-  units: string[] = ['year', 'month', 'week', 'day', 'hour', 'minute', 'second'];
   precisionThresholds = {
     year: 100,
     month: 18,
@@ -29,6 +28,8 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy {
   @Input() fixedRender = false;
   @Input() relative = false;
   @Input() precision: number = 0;
+  @Input() numUnits: number = 1;
+  @Input() units: string[] = ['year', 'month', 'week', 'day', 'hour', 'minute', 'second'];
   @Input() minUnit: 'year' | 'month' | 'week' | 'day' | 'hour' | 'minute' | 'second' = 'second';
   @Input() fractionDigits: number = 0;
 
@@ -94,6 +95,8 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     let counter: number;
+    const result = [];
+    let usedUnits = 0;
     for (const [index, unit] of this.units.entries()) {
       let precisionUnit = this.units[Math.min(this.units.length - 1, index + this.precision)];
       counter = Math.floor(seconds / this.intervals[unit]);
@@ -105,16 +108,38 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy {
         counter = Math.max(1, counter);
       }
       if (counter > 0) {
-        let rounded = Math.round(seconds / this.intervals[precisionUnit]);
+        let rounded;
-        if (this.fractionDigits) {
+        const roundFactor = Math.pow(10,this.fractionDigits || 0);
-          const roundFactor = Math.pow(10,this.fractionDigits);
+        if (this.kind === 'until' && usedUnits < this.numUnits) {
+          rounded = Math.floor((seconds / this.intervals[precisionUnit]) * roundFactor) / roundFactor;
+        } else {
           rounded = Math.round((seconds / this.intervals[precisionUnit]) * roundFactor) / roundFactor;
         }
-        const dateStrings = dates(rounded);
+        if (this.kind !== 'until' || this.numUnits === 1) {
-        switch (this.kind) {
+          return this.formatTime(this.kind, precisionUnit, rounded);
+        } else {
+          if (!usedUnits) {
+            result.push(this.formatTime(this.kind, precisionUnit, rounded));
+          } else {
+            result.push(this.formatTime('', precisionUnit, rounded));
+          }
+          seconds -= (rounded * this.intervals[precisionUnit]);
+          usedUnits++;
+          if (usedUnits >= this.numUnits) {
+            return result.join(', ');
+          }
+        }
+      }
+    }
+    return result.join(', ');
+  }
+
+  private formatTime(kind, unit, number): string {
+    const dateStrings = dates(number);
+    switch (kind) {
       case 'since':
-            if (rounded === 1) {
+        if (number === 1) {
-              switch (precisionUnit) { // singular (1 day)
+          switch (unit) { // 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;
@@ -124,7 +149,7 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy {
             case 'second': return $localize`:@@time-since:${dateStrings.i18nSecond}:DATE: ago`; break;
           }
         } else {
-              switch (precisionUnit) { // plural (2 days)
+          switch (unit) { // 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;
@@ -136,8 +161,8 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy {
         }
         break;
       case 'until':
-            if (rounded === 1) {
+        if (number === 1) {
-              switch (precisionUnit) { // singular (In ~1 day)
+          switch (unit) { // 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;
@@ -147,7 +172,7 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy {
             case 'second': return $localize`:@@time-until:In ~${dateStrings.i18nSecond}:DATE:`;
           }
         } else {
-              switch (precisionUnit) { // plural (In ~2 days)
+          switch (unit) { // 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;
@@ -159,8 +184,8 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy {
         }
         break;
       case 'span':
-            if (rounded === 1) {
+        if (number === 1) {
-              switch (precisionUnit) { // singular (1 day)
+          switch (unit) { // 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;
@@ -170,7 +195,7 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy {
             case 'second': return $localize`:@@time-span:After ${dateStrings.i18nSecond}:DATE:`; break;
           }
         } else {
-              switch (precisionUnit) { // plural (2 days)
+          switch (unit) { // 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;
@@ -182,8 +207,8 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy {
         }
         break;
       default:
-            if (rounded === 1) {
+        if (number === 1) {
-              switch (precisionUnit) { // singular (1 day)
+          switch (unit) { // singular (1 day)
             case 'year': return dateStrings.i18nYear; break;
             case 'month': return dateStrings.i18nMonth; break;
             case 'week': return dateStrings.i18nWeek; break;
@@ -193,7 +218,7 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy {
             case 'second': return dateStrings.i18nSecond; break;
           }
         } else {
-              switch (precisionUnit) { // plural (2 days)
+          switch (unit) { // plural (2 days)
             case 'year': return dateStrings.i18nYears; break;
             case 'month': return dateStrings.i18nMonths; break;
             case 'week': return dateStrings.i18nWeeks; break;
@@ -205,7 +230,4 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy {
         }
     }
   }
-    }
-  }
-
 }