From b39465e69bec94001a51f2b59c5c617ea6912783 Mon Sep 17 00:00:00 2001
From: Yamaguchi <h_yamaguchi@chaintope.com>
Date: Tue, 26 Mar 2024 01:51:22 +0900
Subject: [PATCH] Display amount of the issued coins on colors page

---
 frontend/src/app/colors/colors.page.html | 24 ++++++++++++++++--------
 frontend/src/app/colors/colors.page.ts   |  3 ++-
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/colors/colors.page.html b/frontend/src/app/colors/colors.page.html
index 6f71b7f..84a9faf 100644
--- a/frontend/src/app/colors/colors.page.html
+++ b/frontend/src/app/colors/colors.page.html
@@ -7,24 +7,32 @@ <h3 id="color-header-text">Colors</h3>
         </ion-col>
       </ion-row>
       <ion-row class="table-header">
-        <ion-col size="8" class="pt-10">COLOR ID</ion-col>
-        <ion-col size="4" class="pt-10">LATEST USED BLOCK</ion-col>
+        <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">ISSUED</ion-col>
       </ion-row>
       <ion-row
         class="text-color table-border-bottom"
         *ngFor="let color of colors"
       >
         <ion-col
-          size="8"
-          (click)="goToColorPage(color[0])"
+          size="6"
+          (click)="goToColorPage(color['color_id'])"
           class="link-color cursor-pointer ellipsis"
-          >{{ color[0] }}</ion-col
+          >{{ color['color_id'] }}</ion-col
         >
         <ion-col
-          size="4"
-          (click)="goToBlock(color[1])"
+          size="3"
+          (click)="goToBlock(color['height'])"
           class="link-color cursor-pointer ellipsis"
-          >{{ color[1] }}</ion-col
+          >{{ 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>
diff --git a/frontend/src/app/colors/colors.page.ts b/frontend/src/app/colors/colors.page.ts
index be3ffe8..c3606cd 100644
--- a/frontend/src/app/colors/colors.page.ts
+++ b/frontend/src/app/colors/colors.page.ts
@@ -38,7 +38,8 @@ export class ColorsPage implements OnInit {
     this.backendService.getColors(this.lastSeenColorId).subscribe(
       data => {
         this.colors = this.colors.concat(data['colors']);
-        this.lastSeenColorId = data['colors'][data['colors'].length - 1][0];
+        this.lastSeenColorId =
+          data['colors'][data['colors'].length - 1]['color_id'];
       },
       err => {
         console.log(err);