Skip to content

Commit

Permalink
feat(4as): add data in modal risk assessment (#342)
Browse files Browse the repository at this point in the history 
* add risk assessment service

* display data in risk modal
  • Loading branch information
@bon-carpo
bon-carpo authored Sep 4, 2023
1 parent b4e5acc commit 9ec22ea
Show file tree
Hide file tree
Showing 4 changed files with 167 additions and 11 deletions.
142 changes: 132 additions & 10 deletions ...res/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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="
Expand Down
12 changes: 11 additions & 1 deletion ...tures/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.ts
View file
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -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();
Expand Down
23 changes: 23 additions & 0 deletions src/app/features/noah-playground/services/risk-assessment.service.ts
View file
Original file line number Diff line number Diff line change
@@ -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'
);
}
}
1 change: 1 addition & 0 deletions src/app/shared/components/summary/summary.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
focus:outline-none
mx-auto
lg:mx-0
whitespace-nowrap
tracking-widest
hover:bg-green-700
focus:ring-opacity-50
Expand Down

0 comments on commit 9ec22ea

Please sign in to comment.