web-ui: Allow to display raw block

Author: AlexITC

web-ui/src/app/app-routing.module.ts

@@ -4,13 +4,13 @@ import { Routes, RouterModule } from '@angular/router';
 import { HomeComponent } from './components/home/home.component';
 import { TransactionComponent } from './components/transaction/transaction.component';
 import { AddressDetailsComponent } from './components/address-details/address-details.component';
-import { BlockDetailsComponent } from './components/block-details/block-details.component';
+import { BlockComponent } from './components/block/block.component';
 import { MasternodeDetailsComponent } from './components/masternode-details/masternode-details.component';
 
 const routes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'addresses/:address', component: AddressDetailsComponent },
-  { path: 'blocks/:blockhash', component: BlockDetailsComponent },
+  { path: 'blocks/:query', component: BlockComponent },
   { path: 'transactions/:txid', component: TransactionComponent },
   { path: 'masternodes/:ip', component: MasternodeDetailsComponent },
   { path: '**', redirectTo: '' }

web-ui/src/app/app.module.ts

@@ -42,6 +42,8 @@ import { MasternodesComponent } from './components/masternodes/masternodes.compo
 import { MasternodeDetailsComponent } from './components/masternode-details/masternode-details.component';
 import { TransactionRawComponent } from './components/transaction-raw/transaction-raw.component';
 import { TransactionComponent } from './components/transaction/transaction.component';
+import { BlockComponent } from './components/block/block.component';
+import { BlockRawComponent } from './components/block-raw/block-raw.component';
 
 @NgModule({
   declarations: [
@@ -59,7 +61,9 @@ import { TransactionComponent } from './components/transaction/transaction.compo
     MasternodesComponent,
     MasternodeDetailsComponent,
     TransactionRawComponent,
-    TransactionComponent
+    TransactionComponent,
+    BlockComponent,
+    BlockRawComponent
   ],
   imports: [
     AppRoutingModule,

web-ui/src/app/components/block-details/block-details.component.ts

@@ -26,7 +26,7 @@ export class BlockDetailsComponent implements OnInit {
     private errorService: ErrorService) { }
 
   ngOnInit() {
-    this.route.params.forEach(params => this.onBlockhash(params['blockhash']));
+    this.route.params.forEach(params => this.onBlockhash(params['query']));
   }
 
   private onBlockhash(blockhash: string) {

web-ui/src/app/components/block-raw/block-raw.component.css

@@ -0,0 +1,8 @@
+<div>
+  <div [hidden]="block != null">
+    <alert>{{'message.blockNotFound' | translate}}</alert>
+  </div>
+  <div *ngIf="block != null">
+    <pre>{{block | json}}</pre>
+  </div>
+</div>

web-ui/src/app/components/block-raw/block-raw.component.html

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BlockRawComponent } from './block-raw.component';
+
+describe('BlockRawComponent', () => {
+  let component: BlockRawComponent;
+  let fixture: ComponentFixture<BlockRawComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BlockRawComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BlockRawComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

web-ui/src/app/components/block-raw/block-raw.component.spec.ts

@@ -0,0 +1,46 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { TranslateService } from '@ngx-translate/core';
+
+import { Transaction } from '../../models/transaction';
+
+import { ErrorService } from '../../services/error.service';
+import { NavigatorService } from '../../services/navigator.service';
+import { BlocksService } from '../../services/blocks.service';
+
+@Component({
+  selector: 'app-block-raw',
+  templateUrl: './block-raw.component.html',
+  styleUrls: ['./block-raw.component.css']
+})
+export class BlockRawComponent implements OnInit {
+
+  block: any;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private navigatorService: NavigatorService,
+    private blocksService: BlocksService,
+    private errorService: ErrorService) { }
+
+  ngOnInit() {
+    this.route.params.forEach(params => this.onBlockQuery(params['query']));
+  }
+
+  private onBlockQuery(query: string) {
+    this.blocksService.getRaw(query).subscribe(
+      response => this.onBlockRetrieved(response),
+      response => this.onError(response)
+    );
+  }
+
+  private onBlockRetrieved(response: any) {
+    this.block = response;
+  }
+
+  private onError(response: any) {
+    this.errorService.renderServerErrors(null, response);
+  }
+}

web-ui/src/app/components/block-raw/block-raw.component.ts

@@ -0,0 +1,10 @@
+<div>
+  <tabset class="col-xs-12 col-sm-12 col-md-12 col-xs-12">
+    <tab heading="{{'label.details' | translate}}" (select)="selectView('details')">
+      <app-block-details *ngIf="isSelected('details')"></app-block-details>
+    </tab>
+    <tab heading="{{'label.raw' | translate}}" (select)="selectView('raw')">
+      <app-block-raw *ngIf="isSelected('raw')"></app-block-raw>
+    </tab>
+  </tabset>
+</div>

web-ui/src/app/components/block/block.component.css

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BlockComponent } from './block.component';
+
+describe('BlockComponent', () => {
+  let component: BlockComponent;
+  let fixture: ComponentFixture<BlockComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BlockComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BlockComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

web-ui/src/app/components/block/block.component.html

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-block',
+  templateUrl: './block.component.html',
+  styleUrls: ['./block.component.css']
+})
+export class BlockComponent implements OnInit {
+
+  currentView = 'details';
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  selectView(view: string) {
+    this.currentView = view;
+  }
+
+  isSelected(view: string): boolean {
+    return this.currentView === view;
+  }
+}

web-ui/src/app/components/block/block.component.spec.ts

@@ -22,6 +22,11 @@ export class BlocksService {
     return this.http.get<BlockDetails>(url);
   }
 
+  getRaw(query: string): Observable<any> {
+    const url = `${this.baseUrl}/${query}/raw`;
+    return this.http.get<any>(url);
+  }
+
   getLatest(): Observable<Block[]> {
     return this.http.get<Block[]>(this.baseUrl);
   }