Implement color list page

backend/actions/color_list.js

@@ -0,0 +1,25 @@
+const app = require('../app.js');
+const rest = require('../libs/rest');
+const logger = require('../libs/logger');
+
+app.use((req, res, next) => {
+  res.header('Access-Control-Allow-Origin', '*');
+  res.header(
+    'Access-Control-Allow-Headers',
+    'Origin, X-Requested-With, Content-Type, Accept'
+  );
+  next();
+});
+
+app.get('/api/colors', async (req, res) => {
+  const lastSeenColorId = req.query.lastSeenColorId;
+
+  try {
+    const colors = await rest.color.list(lastSeenColorId);
+    console.log(colors);
+    res.json({ colors: colors });
+  } catch (err) {
+    logger.error(`Error retrieving colors. Error Message - ${err.message}`);
+    res.status(500).send(`Error Retrieving Blocks`);
+  }
+});

backend/libs/rest.js

@@ -148,6 +148,20 @@ const block = {
 };
 
 const color = {
+  list: async lastSeenColorId => {
+    let url;
+    if (lastSeenColorId) {
+      url = `${baseUrl}/colors/${lastSeenColorId}`;
+    } else {
+      url = `${baseUrl}/colors`;
+    }
+    const response = await fetch(url, { agent: agentSelector });
+    if (response.ok) {
+      return response.json();
+    } else {
+      throw new Error(`failed to fetch API ${url}`);
+    }
+  },
   get: async colorId => {
     const url = `${baseUrl}/color/${colorId}`;
     const response = await fetch(url, { agent: agentSelector });

backend/server.js

@@ -2,6 +2,7 @@ const app = require('./app.js');
 require('./actions/block_detail.js');
 require('./actions/block_list.js');
 require('./actions/color_detail.js');
+require('./actions/color_list.js');
 require('./actions/transaction_detail.js');
 require('./actions/transaction_list.js');
 require('./actions/address_detail.js');

frontend/src/app/app-routing.module.ts

@@ -30,6 +30,11 @@ const routes: Routes = [
         m => m.BlockRawdataPageModule
       )
   },
+  {
+    path: 'colors',
+    loadChildren: () =>
+      import('./colors/colors.module').then(m => m.ColorsPageModule)
+  },
   {
     path: 'color/:colorId',
     loadChildren: () =>

frontend/src/app/app.component.spec.ts

@@ -51,25 +51,29 @@ describe('AppComponent', () => {
     await fixture.detectChanges();
     const app = fixture.nativeElement;
     const menuItems = app.querySelectorAll('ion-label');
-    expect(menuItems.length).toEqual(3);
+    expect(menuItems.length).toEqual(4);
     expect(menuItems[0].textContent).toContain('Blocks');
     expect(menuItems[1].textContent).toContain('Txns');
-    expect(menuItems[2].textContent).toContain('Tracking Validation');
+    expect(menuItems[2].textContent).toContain('Colors');
+    expect(menuItems[3].textContent).toContain('Tracking Validation');
   });
 
   it('should have urls', async () => {
     const fixture = await TestBed.createComponent(AppComponent);
     await fixture.detectChanges();
     const app = fixture.nativeElement;
     const menuItems = app.querySelectorAll('ion-item');
-    expect(menuItems.length).toEqual(3);
+    expect(menuItems.length).toEqual(4);
     expect(menuItems[0].getAttribute('ng-reflect-router-link')).toEqual(
       '/blocks'
     );
     expect(menuItems[1].getAttribute('ng-reflect-router-link')).toEqual(
       '/tx/recent'
     );
     expect(menuItems[2].getAttribute('ng-reflect-router-link')).toEqual(
+      '/colors'
+    );
+    expect(menuItems[3].getAttribute('ng-reflect-router-link')).toEqual(
       '/material_tracking_validation'
     );
   });

frontend/src/app/app.component.ts

@@ -21,6 +21,10 @@ export class AppComponent implements OnInit {
       title: 'Txns',
       url: '/tx/recent'
     },
+    {
+      title: 'Colors',
+      url: '/colors'
+    },
     {
       title: 'Tracking Validation',
       url: '/material_tracking_validation'

frontend/src/app/backend.service.ts

@@ -80,6 +80,16 @@ export class BackendService {
     return this.http.get(`${this.backendUrl}/api/tx/${query}/get`);
   }
 
+  getColors(lastSeenColorId?: string): Observable<any> {
+    return this.http.get(`${this.backendUrl}/api/colors`, {
+      params: new HttpParams({
+        fromObject: {
+          lastSeenColorId: (lastSeenColorId || '').toString()
+        }
+      })
+    });
+  }
+
   getColor(colorId: string, lastSeenTxid?: string): Observable<any> {
     return this.http.get(`${this.backendUrl}/api/color/${colorId}`, {
       params: new HttpParams({

frontend/src/app/colors/colors-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ColorsPage } from './colors.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ColorsPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ColorsPageRoutingModule {}

frontend/src/app/colors/colors.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ColorsPageRoutingModule } from './colors-routing.module';
+
+import { ColorsPage } from './colors.page';
+import { SharedPipeModule } from '../modules/sharePipe.module';
+import { NgxPaginationModule } from 'ngx-pagination';
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ColorsPageRoutingModule,
+    NgxPaginationModule,
+    SharedPipeModule
+  ],
+  declarations: [ColorsPage]
+})
+export class ColorsPageModule {}

frontend/src/app/colors/colors.page.html

@@ -0,0 +1,62 @@
+<ion-content class="pb-footer">
+  <div class="ion-padding" *ngIf="!hasError">
+    <div class="bg-white ion-padding ion-margin-top">
+      <ion-row>
+        <ion-col size="12">
+          <h3 id="color-header-text">Colors</h3>
+        </ion-col>
+      </ion-row>
+      <ion-row class="table-header">
+        <ion-col size="6" class="pt-10">COLOR ID</ion-col>
+        <ion-col size="3" class="pt-10">LATEST USED BLOCK</ion-col>
+        <ion-col size="3" class="pt-10">TOTAL SUPPLY</ion-col>
+      </ion-row>
+      <ion-row
+        class="text-color table-border-bottom"
+        *ngFor="let color of colors"
+      >
+        <ion-col
+          size="6"
+          (click)="goToColorPage(color['color_id'])"
+          class="link-color cursor-pointer ellipsis"
+          >{{ color['color_id'] }}</ion-col
+        >
+        <ion-col
+          size="3"
+          (click)="goToBlock(color['height'])"
+          class="link-color cursor-pointer ellipsis"
+          >{{ color['height'] }}</ion-col
+        >
+        <ion-col
+          size="3"
+          (click)="goToColorPage(color['color_id'])"
+          class="link-color cursor-pointer ellipsis"
+          >{{ color['chain_stats']['issued_sum'] +
+          color['mempool_stats']['issued_sum'] }}</ion-col
+        >
+      </ion-row>
+    </div>
+  </div>
+  <ion-grid *ngIf="!hasError">
+    <ion-row>
+      <ion-col class="ion-text-center">
+        <ion-button
+          color="primary"
+          id="next"
+          class="cursor-pointer"
+          (click)="onNextPage()"
+          >Load More</ion-button
+        >
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+  <div class="ion-padding" *ngIf="hasError">
+    <h1 class="error text-primary">
+      <div class="code">{{ statusCode }}</div>
+      <div class="message">{{ statusMsg }}</div>
+    </h1>
+    <div>
+      <p class="detail">{{ detailMsg }}</p>
+    </div>
+  </div>
+</ion-content>

frontend/src/app/colors/colors.page.scss

@@ -0,0 +1,37 @@
+ion-content {
+  --background: var(
+    --ion-item-background,
+    var(--ion-background-color, #e5e5e5)
+  ) !important;
+}
+
+#color-header-text {
+  @media (max-width: 539px) {
+    font-size: 16px;
+    margin: 17px 10px 10px;
+  }
+
+  @media (min-width: 540px) {
+    font-size: 36px;
+    margin: 0px 10px 20px;
+  }
+
+  font-weight: 500;
+}
+
+.table-header {
+  background-color: #f6f6f6;
+  font-size: 14px;
+  color: #aaaaaa;
+}
+
+.table-border-bottom {
+  border-bottom: 1px solid #f6f6f6;
+  padding: 10px 10px;
+}
+
+.ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}

frontend/src/app/colors/colors.page.spec.ts

@@ -0,0 +1,30 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ColorsPage } from './colors.page';
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+
+describe('ColorsPage', () => {
+  let component: ColorsPage;
+  let fixture: ComponentFixture<ColorsPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ColorsPage],
+      imports: [
+        IonicModule.forRoot(),
+        RouterTestingModule,
+        HttpClientTestingModule
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ColorsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/colors/colors.page.ts

@@ -0,0 +1,72 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { HttpClient } from '@angular/common/http';
+import { ModalController, NavController } from '@ionic/angular';
+import { BackendService } from '../backend.service';
+import { AppConst } from '../app.const';
+
+@Component({
+  selector: 'app-color',
+  templateUrl: './colors.page.html',
+  styleUrls: ['./colors.page.scss'],
+  providers: [BackendService]
+})
+export class ColorsPage implements OnInit {
+  lastSeenColorId?: string;
+  colors = [];
+  hasError: boolean;
+  statusCode: string;
+  statusMsg: string;
+  detailMsg: string;
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private httpClient: HttpClient,
+    private modalCtrl: ModalController,
+    private navCtrl: NavController,
+    private backendService: BackendService
+  ) {}
+
+  ngOnInit() {
+    this.lastSeenColorId =
+      this.activatedRoute.snapshot.paramMap.get('lastSeenColorId') || '';
+    this.getColorsInfo();
+  }
+
+  getColorsInfo() {
+    this.resetError();
+    this.backendService.getColors(this.lastSeenColorId).subscribe(
+      data => {
+        this.colors = this.colors.concat(data['colors']);
+        this.lastSeenColorId =
+          data['colors'][data['colors'].length - 1]['color_id'];
+      },
+      err => {
+        console.log(err);
+        this.hasError = true;
+        this.statusCode = err.status;
+        this.statusMsg = err.statusText;
+        this.detailMsg = err.error;
+      }
+    );
+  }
+
+  goToColorPage(colorId) {
+    this.navCtrl.navigateForward(`/color/${colorId}`);
+  }
+
+  goToBlock(block_height) {
+    this.navCtrl.navigateForward(`/block/height/${block_height}`);
+  }
+
+  onNextPage() {
+    this.getColorsInfo();
+  }
+
+  resetError() {
+    this.hasError = false;
+    this.statusCode = null;
+    this.statusMsg = null;
+    this.detailMsg = null;
+  }
+}