feat(4as): exposure assessment data summary and additional feature in…

… UI (#354)

* remove 24hour lapse contour

* feat(4as): create base component for risk/exposure assessment feature (#341)

* update noah-playground-store to contain risk assessment state

* add risk assessment group component

* delete laguna solo component

* update service to accommodate risk assessment setters and getters

* add risk assessment solo component

* display risk assessment in studio

* add risk assessment modal component

* add content for risk assessment modal

* expand risk assessment component

* add service for risk assessment and rename modal service

* feat(4as-modal): popup modal when calculate risk button is clicked (#340)

* feat(4as): add data in modal risk assessment (#342)

* add risk assessment service

* display data in risk modal

* change table layout

* add x button to close modal

* update modal service

* feat(4as): display population affected in map and list of affected population in modal (#346)

* Cannot click button calculate risk if either rain or population is not selected

* button for hide modal

* hide modal and show the risk assessment button

* modal close button also remove risk assessment button hide button to show risk assessment button

* hide button risk assessment when uncheck the risk assessment sidebar

* added data for affected population

* add search for affected population

* add sort in risk assessment

* data summary modal ui

---------

Co-authored-by: kennethliporada <62271587+kennethliporada@users.noreply.github.com>

* change to list of province

* feat(4as): 4as modal, affected population display, legend and pagination (#347)

* putting comma for 4as data summaryt

* hide/show affected population and hide data summary button

* close modal and hide affected population as well

* added svg to close and minimize button

* adjust font text for modal header

* table header display when scrolling down

* example data for the 4as modal table

* affected population data with psgc

* added legend for rainforcast and exposure

* remove console log

* edited legend for rain forecast and exposure population

* exposure population legend

* added a value for affected population VAR 1

* displaying data from ngrok and pagination

* display number data in pagination

* all search for the data

* toggle legend for exposure population

* changing legend Risk to Population

* added rainforcast with function in checkbox toggle

* rain forecast legend text bigger

* population exposure legend title edited

* pagination for modal data summary 4as

* changing url for rain forecast

* Calculate risk font size bigger

* no data available in table font bigger

* for presentation: disclaimer not for prod, problem: mobile view UI

* no available affected data when there is no affected

* fix pagination button and size of the table

* inserted beta to the risk assessment sidebar

* remove Data summary button and replace it to the map component

* replace 4as data summary button to the map component

* remain checked when sidebar is toggle

* created a function to stay checked the checkbox population

* added a boolean shown to population checkbox

* fix bug about the checkbox population

* added a function for the calculate risk button

* fix bug for the checkboxes

* opacity for the rainforecast

* added a opacity to the population affected

* remove the word available and border on summary

* remove the word available and border on summary (#349)

* changing color blink on beta

* changed based url

* adjust text in ra summary dashboard

* fix(4as): Change UI/UX of 4As feature and summary dashboard (#350)

* sir mahar changes

* checkbox Rain = true to perform the enabled and disabled button

* change opacity

* disclaimer in the bottom

* fix expanded feature for exposure assessment

* exposure assessment sidebar expand and check at the same time (#351)

---------

Co-authored-by: Ken <62271587+kennethliporada@users.noreply.github.com>

* feat(4as): disclaimer IoT and 4as responsive, also the bug when search (#352)

* IoT logo in disclaimer resize in mobile view

* disclaimer for 4as

* bug when search location and then no data appear

* fixed bug when search not in the list and became no data

* fix(4as): change legend for rain forecast and population and adjust whitespace in mobile view (#353)

* legend for rain and population

* adjust white space in menu bottom mobile view

* Update CHANGELOG.md

* Update CHANGELOG.md

* Update CHANGELOG.md

* align logos and paraphrase the text content and insert disclaimer

* added a date text in 4as summary modal

* when no search display search and when no data display no forecast

* download archive data

* edited logos

* edited some dropdown and services

* fix alert text

* clean code for noah playground

* deleted some text issue

* edit class text

---------

Co-authored-by: bon-carpo <jccarpo@up.edu.ph>
Co-authored-by: bon-carpo <76890692+bon-carpo@users.noreply.github.com>
Co-authored-by: upri <upri@Bon-MacBook-Pro.local>

src/app/features/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.html

@@ -127,6 +127,9 @@
           In a large flood event, how many people might be affected and would
           need evacuation?
         </p>
+        <div class="italic lg:text-lg text-sm">
+          <span>As of {{ dateDataText }}</span>
+        </div>
       </div>
 
       <!-- ... Your existing header content ... -->
@@ -179,9 +182,11 @@
               dark:text-white
               dark:focus:ring-blue-500
               dark:focus:border-blue-500
+              disabled:cursor-not-allowed
             "
             placeholder="Search Location"
             (input)="loadData(1, searchValue)"
+            [disabled]="errorMsg"
           />
         </div>
       </div>
@@ -225,6 +230,39 @@
               </th>
             </tr>
           </thead>
+          <ng-container>
+            <div *ngIf="noResult; else dataNoResult">
+              <div
+                class="flex items-center absolute justify-center w-full py-6"
+              >
+                <div
+                  class="
+                    bg-white
+                    flex
+                    items-center
+                    justify-center
+                    mx-4
+                    md:w-2/3
+                  "
+                >
+                  <div class="flex flex-col items-center py-4">
+                    <p
+                      class="
+                        px-4
+                        pb-10
+                        text-base
+                        md:text-2xl
+                        leading-none
+                        text-center text-gray-600
+                      "
+                    >
+                      No result
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </ng-container>
           <ng-container>
             <div *ngIf="errorMsg; else dataAvailable">
               <div
@@ -259,7 +297,7 @@
               </div>
             </div>
           </ng-container>
-          <ng-template #dataAvailable>
+          <ng-template #dataAvailable && #dataNoResult>
             <tbody>
               <tr
                 *ngFor="
@@ -409,7 +447,7 @@
           </button>
         </div>
       </div>
-      <div class="bg-red-100 p-2 rounded-lg">
+      <div class="p-2 rounded-lg">
         <p
           class="
             lg:text-base
@@ -421,45 +459,67 @@
             text-ellipsis
           "
         >
-          <b>Disclaimer:</b> The streams and catchment boundaries presented are
-          indicative. They have been derived from elevation data obtained using
-          Interferometric Synthetic Aperture Radar (IfSAR) topography and
-          delineated using ArcGIS Hydrological Tools.
-
-          <span
-            role="button"
-            *ngIf="btnReadMore"
-            class="display text-blue-500"
-            (click)="mobileDisclaimerSeemore()"
-            >Read more...</span
-          >
-          <!-- <span class="hidden xl:inline">
-            The UP NOAH Center holds no responsibility or liability for any
-            inconsistencies, inaccuracies, or data omissions related to
-            predicted or depicted weather forecasts, whether reported, ongoing,
-            or occurred, for both parties and non-parties alike. The UP NOAH
-            Center does not provide any explicit or implied warranties,
-            guarantees, or assurances regarding the occurrence or confirmation
-            of weather information, as presented in forecasts, graphics, data,
-            or any information included on the site. However, suggestions for
-            improvement or error notifications are welcome. Please follow the
-            official sites of the government and use this site only for
-            supplementary information.
-          </span> -->
-          <span *ngIf="mobileDisclaimer">
-            The UP NOAH Center holds no responsibility or liability for any
-            inconsistencies, inaccuracies, or data omissions related to
-            predicted or depicted weather forecasts, whether reported, ongoing,
-            or occurred, for both parties and non-parties alike. The UP NOAH
-            Center does not provide any explicit or implied warranties,
-            guarantees, or assurances regarding the occurrence or confirmation
-            of weather information, as presented in forecasts, graphics, data,
-            or any information included on the site. However, suggestions for
-            improvement or error notifications are welcome. Please follow the
-            official sites of the government and use this site only for
-            supplementary information.
-          </span>
+          <b>Access Data Archive</b> : Click the link to download previous
+          forecast data.
         </p>
+        <div
+          class="
+            flex
+            items-center
+            relative
+            w-64
+            h-7
+            rounded
+            border border-blue-200
+          "
+        >
+          <select
+            (change)="onDateSelected($event)"
+            class="
+              px-2
+              tracking-normal
+              focus:outline-none
+              text-xs
+              font-semibold
+              leading-none
+              text-left
+              appearance-none
+              z-20
+              relative
+              bg-transparent
+              w-auto
+              normal-case
+            "
+          >
+            <option id="dropdown" value="" disabled selected>
+              Select Date
+            </option>
+            <option
+              value="select-date"
+              *ngFor="let item of dropdown"
+              [value]="item"
+            >
+              {{ item | date: 'fullDate' }} {{ item | date: 'shortTime' }}
+            </option>
+          </select>
+          <div class="mx-1 absolute right-0 z-10 pointer-event-none">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="icon icon-tabler icon-tabler-chevron-down"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="#4338CA"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" />
+              <polyline points="6 9 12 15 18 9" />
+            </svg>
+          </div>
+        </div>
       </div>
     </div>
   </div>

src/app/features/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, OnInit } from '@angular/core';
 import {
   AffectedData,
   RiskAssessmentService,
@@ -24,8 +24,14 @@ export class RiskAssessmentModalComponent implements OnInit {
   totalItems = 0;
   totalDataCount = 0;
   errorMsg: boolean = false;
+  noResult: boolean = false;
   mobileDisclaimer: boolean = false;
   btnReadMore: boolean = true;
+  dateDataText: string;
+
+  archieveDateTime: string;
+  archieveDownload: string;
+  dropdown: string[] = [];
 
   constructor(
     private riskAssessment: RiskAssessmentService,
@@ -68,20 +74,66 @@ export class RiskAssessmentModalComponent implements OnInit {
     this.modalServices.riskModal$.subscribe((riskModal) => {
       this.riskModal = riskModal;
     });
-
     this.loadData(this.currentPage);
+    this.loadDateText();
+    this.archiveData();
   }
 
+  async downloadData(selectedDate: string) {
+    const response: any = await this.riskAssessment
+      .archiveData()
+      .pipe(first())
+      .toPromise();
+    if (response && response.results) {
+      const selectedResult = response.results.find(
+        (result: any) => result.datetime === selectedDate
+      );
+
+      if (selectedResult && selectedResult.s3_link) {
+        window.open(selectedResult.s3_link, '_blank');
+      } else {
+        console.error('Selected date not found or missing s3_link');
+      }
+    }
+  }
+
+  onDateSelected(event: any) {
+    const selectedDate = event.target.value;
+    if (selectedDate !== 'select-date') {
+      this.downloadData(selectedDate);
+    }
+  }
+  async archiveData() {
+    const response: any = await this.riskAssessment
+      .archiveData()
+      .pipe(first())
+      .toPromise();
+    if (response && response.results) {
+      const datetimes = response.results.map((result: any) => result.datetime);
+      this.dropdown = datetimes;
+    }
+  }
+
+  loadDateText(): void {
+    this.riskAssessment.getDateText().subscribe((data: string) => {
+      this.dateDataText = data;
+    });
+  }
   async loadData(page: number, searchTerm?: string) {
     try {
       const response: any = await this.riskAssessment
         .getAffectedPopulations(page, searchTerm)
         .pipe(first())
         .toPromise();
 
-      if (response.results.length === 0) {
+      if (searchTerm && response.results.length === 0) {
+        this.affectedData = [];
+        this.errorMsg = false;
+        this.noResult = true;
+      } else if (response.results.length === 0) {
         this.affectedData = [];
         this.errorMsg = true;
+        this.noResult = false;
       } else {
         const raData = response.results.map((a) => {
           return {
@@ -98,11 +150,13 @@ export class RiskAssessmentModalComponent implements OnInit {
         this.affectedData = raData;
         this.totalDataCount = response.count;
         this.errorMsg = false;
+        this.noResult = false;
       }
     } catch (error) {
       console.error('An error occurred:', error);
       this.affectedData = [];
       this.errorMsg = true;
+      this.noResult = false;
     }
   }
 

src/app/features/noah-playground/services/risk-assessment.service.ts

@@ -21,6 +21,7 @@ export class RiskAssessmentService {
   private nextPageUrl: string | null = null;
   private previousPageUrl: string | null = null;
   private defaultUrl: string = `${this.API_BASE_URL}/affected_brgy/?affected=yes`;
+  private S3_BASE_URL = 'https://upri-noah.s3.ap-southeast-1.amazonaws.com';
 
   // Track the search term
   private currentSearchTerm: string | null = null;
@@ -51,4 +52,14 @@ export class RiskAssessmentService {
       })
     );
   }
+
+  getDateText(): Observable<string> {
+    return this.http.get(`${this.S3_BASE_URL}/rainfall/datetime.txt`, {
+      responseType: 'text',
+    });
+  }
+
+  archiveData(): Observable<any> {
+    return this.http.get(`${this.API_BASE_URL}/api/latest-results/`);
+  }
 }