From 9ec22ea052b6b41612d28f6f76e36198323ecb6f Mon Sep 17 00:00:00 2001
From: bon-carpo <76890692+bon-carpo@users.noreply.github.com>
Date: Mon, 4 Sep 2023 19:46:46 +0800
Subject: [PATCH] feat(4as): add data in modal risk assessment (#342)

* add risk assessment service

* display data in risk modal
---
 .../risk-assessment-modal.component.html      | 142 ++++++++++++++++--
 .../risk-assessment-modal.component.ts        |  12 +-
 .../services/risk-assessment.service.ts       |  23 +++
 .../components/summary/summary.component.html |   1 +
 4 files changed, 167 insertions(+), 11 deletions(-)
 create mode 100644 src/app/features/noah-playground/services/risk-assessment.service.ts

diff --git a/src/app/features/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.html b/src/app/features/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.html
index e708aef2..d3456d02 100644
--- a/src/app/features/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.html
+++ b/src/app/features/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.html
@@ -32,7 +32,7 @@
       "
     >
       <h5
-        class="text-xl font-medium leading-normal text-gray-800"
+        class="text-2xl font-medium leading-normal text-gray-800"
         id="exampleModalScrollableLabel"
       >
         In the event of a Flood 100-year return period, how many people might be
@@ -58,15 +58,137 @@
       ></button>
     </div>
     <div class="flex-auto overflow-y-auto relative p-4">
-      <p>
-        This is some placeholder content to show the scrolling behavior for
-        modals. We use repeated line breaks to demonstrate how content can
-        exceed minimum inner height, thereby showing inner scrolling. When
-        content becomes longer than the predefined max-height of modal, content
-        will be cropped and scrollable within the modal.
-      </p>
-      <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
-      <p>This content should appear at the bottom after you scroll.</p>
+      <!--  -->
+      <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+        <table
+          class="w-full text-lg text-left text-gray-500 dark:text-gray-400"
+        >
+          <thead
+            class="
+              font-bold
+              whitespace-nowrap
+              text-lg text-gray-700
+              uppercase
+              bg-blue-300
+              dark:bg-gray-700 dark:text-gray-400
+            "
+          >
+            <tr>
+              <th scope="col" class="px-6 py-3">
+                <div class="flex items-center">
+                  Province
+                  <a href="#"
+                    ><svg
+                      class="w-3 h-3 ml-1.5"
+                      aria-hidden="true"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z"
+                      /></svg
+                  ></a>
+                </div>
+              </th>
+              <th scope="col" class="px-6 py-3">
+                <div class="flex items-center">
+                  Total Population
+                  <a href="#"
+                    ><svg
+                      class="w-3 h-3 ml-1.5"
+                      aria-hidden="true"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z"
+                      /></svg
+                  ></a>
+                </div>
+              </th>
+              <th scope="col" class="px-6 py-3">
+                <div class="flex items-center">
+                  Exposed to Med-High
+                  <a href="#"
+                    ><svg
+                      class="w-3 h-3 ml-1.5"
+                      aria-hidden="true"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z"
+                      /></svg
+                  ></a>
+                </div>
+              </th>
+              <th scope="col" class="px-6 py-3">
+                <div class="flex items-center">
+                  Total Affected Population
+                  <a href="#"
+                    ><svg
+                      class="w-3 h-3 ml-1.5"
+                      aria-hidden="true"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z"
+                      /></svg
+                  ></a>
+                </div>
+              </th>
+              <th scope="col" class="px-6 py-3">
+                <div class="flex items-center">
+                  Percentage of Exposed to Med-High
+                  <a href="#"
+                    ><svg
+                      class="w-3 h-3 ml-1.5"
+                      aria-hidden="true"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z"
+                      /></svg
+                  ></a>
+                </div>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              *ngFor="let data of affectedData"
+              class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
+            >
+              <!-- <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                        Apple MacBook Pro 17"
+                    </th> -->
+              <td class="px-6 py-4">
+                {{ data.province }}
+              </td>
+              <td class="px-6 py-4">
+                {{ data.total_population }}
+              </td>
+              <td class="px-6 py-4">
+                {{ data.medium_high }}
+              </td>
+              <td class="px-6 py-4">
+                {{ data.total_affected_population }}
+              </td>
+              <td class="px-6 py-4">
+                {{ data.percentage_of_affected_medium_high }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <!--  -->
     </div>
     <div
       class="
diff --git a/src/app/features/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.ts b/src/app/features/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.ts
index fa55102d..394f1f91 100644
--- a/src/app/features/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.ts
+++ b/src/app/features/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { RiskAssessmentService } from '@features/noah-playground/services/risk-assessment.service';
 import { ModalService } from '@features/noah-playground/services/modal.service';
 
 @Component({
@@ -7,13 +8,22 @@ import { ModalService } from '@features/noah-playground/services/modal.service';
   styleUrls: ['./risk-assessment-modal.component.scss'],
 })
 export class RiskAssessmentModalComponent implements OnInit {
+  affectedData: Array<any> = [];
   riskModal = false;
-  constructor(private modalServices: ModalService) {}
+
+  constructor(
+    private riskAssessment: RiskAssessmentService,
+    private modalServices: ModalService
+  ) {}
 
   ngOnInit(): void {
     this.modalServices.riskModal$.subscribe((riskModal) => {
       this.riskModal = riskModal;
     });
+    this.riskAssessment.getAffectedPopulation().subscribe((response) => {
+      console.log(response);
+      this.affectedData = response;
+    });
   }
   closeModal() {
     this.modalServices.closeRiskModal();
diff --git a/src/app/features/noah-playground/services/risk-assessment.service.ts b/src/app/features/noah-playground/services/risk-assessment.service.ts
new file mode 100644
index 00000000..774ca401
--- /dev/null
+++ b/src/app/features/noah-playground/services/risk-assessment.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+// export type AffectedData = {
+//   province: string;
+//   total_population: string;
+//   total_affected: string;
+//   med_high: string;
+//   percentage_med_high: string;
+// };
+@Injectable({
+  providedIn: 'root',
+})
+export class RiskAssessmentService {
+  constructor(private http: HttpClient) {}
+
+  getAffectedPopulation(): Observable<any> {
+    return this.http.get(
+      'https://upri-noah.s3.ap-southeast-1.amazonaws.com/4As/prov_rankings.json'
+    );
+  }
+}
diff --git a/src/app/shared/components/summary/summary.component.html b/src/app/shared/components/summary/summary.component.html
index 0c87dc18..94d2a59f 100644
--- a/src/app/shared/components/summary/summary.component.html
+++ b/src/app/shared/components/summary/summary.component.html
@@ -15,6 +15,7 @@
       focus:outline-none
       mx-auto
       lg:mx-0
+      whitespace-nowrap
       tracking-widest
       hover:bg-green-700
       focus:ring-opacity-50