countdown timer

src/app/view/home/home-worksapce.component.ts

@@ -4,6 +4,8 @@ import { Utils } from 'src/app/shared/utils';
 import { Router } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
+import { environment } from 'src/environments/environment';
+import { ChartService } from 'src/app/shared/services/chart.service';
 
 @Component({
   selector: 'epic-explorer-home-worksapce',
@@ -11,11 +13,22 @@ import { ActivatedRoute } from '@angular/router';
   <div class="body_bg py-4">
       <div class="chart_section mt-4">
         <div class="container">
-        <div class="block_details mb-5">
-      <div class="container">
+        <div class="block_details mb-3">
+      
         <app-block-detail-list></app-block-detail-list>
+      
+    </div>
+
+    
+<div class="row">
+<div class="col-md-12">
+    <div class="text-center detail_div">
+      <p class="count mb-0">
+      <span class="">Countdown to Halving</span> {{countDownDate}} <span class="">Blocks to go</span> {{demo}}</p>
     </div>
   </div>
+  </div>
+
           <div class="explore_charts pt-3">
             <epic-explorer-graph-list
               [viewchart]="viewchartvar"
@@ -47,8 +60,10 @@ import { ActivatedRoute } from '@angular/router';
 export class HomeWorksapceComponent extends Utils
   implements OnInit, AfterViewInit {
   viewchartvar: boolean;
+  countDownDate: any;
+  demo: any;
   constructor(@Inject(DOCUMENT) public document: Document,
-  private router: Router,private route: ActivatedRoute,private titleService: Title) {
+  private router: Router,private route: ActivatedRoute,private titleService: Title, private chartService: ChartService) {
     super(document);
     if (this.router.url == '/all') {
       this.viewchartvar = false;
@@ -60,7 +75,42 @@ export class HomeWorksapceComponent extends Utils
   ngOnInit() {
     this.titleService.setTitle(
       this.route.snapshot.data.title,
-    );}
+    );
+    
+new Promise((resolve, reject) => {
+  this.chartService
+    .apiGetRequest("", "/blockchain_block/latesblockdetails")
+    .subscribe(
+      res => {
+        if (res["status"] == 200) {
+          this.countDownDate = environment.TARGETBLOCK - res.response.block_height;
+          resolve();
+        }
+      },
+      error => {}
+    );
+});
+
+    var d1 = new Date ();
+    
+      let x = setInterval(() => {
+      var d2 = new Date ( d1 );
+      d2.setMinutes ( d1.getMinutes() + this.countDownDate );
+      let now = new Date().getTime();
+      let distance = d2.getTime() - now;
+      let days = Math.floor(distance / (1000 * 60 * 60 * 24));
+      let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+      let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+      let seconds = Math.floor((distance % (1000 * 60)) / 1000);
+  
+      this.demo = days + ' days ' + hours + ' hours ' + minutes + ' mins ' + seconds + ' sec';
+  
+      if (distance < 0) {
+        clearInterval(x);
+        this.demo = 'Expired...';
+      }
+    }, 1000);
+  }
 
   viewchartenable() {
     this.viewchartvar = false;

src/environments/environment.ts

@@ -4,9 +4,10 @@
 
 export const environment = {
   production: false,
- domain: 'https://explorer.epic.tech/',
-  apiUrl: 'https://explorer.epic.tech/epic_explorer/v1',
-  EMAIL : 'contact@epic.tech'
+  domain: 'https://explorer3.epic.tech/',
+  apiUrl: 'https://explorer3.epic.tech/epic_explorer/v1',
+  EMAIL : 'contact@epic.tech',
+  TARGETBLOCK: 480960
 };
 
 /*