feat(iot): modal for safari display and noah logo (#344)

* Added github actions workflow for aut deployment to .72 server. * Added github action for S3 deployment. * Changed to staging. Created branch for staging. * Retrigger deployment workflow. * fix(studio): zoom in on ios (#192) # Summary - Fixes #186 - The `load` event isn't firing on NOAH Studio. As such, the `centerListener()` method isn't called which is responsible for the zooming in to the selected place. However, `style.load` do get called. The fix implemented here is to also use the event `style.load` to call the methods that were previously called by upon the firing of the `load` event but only listen to `style.load` once. - We need to further investigate **why** `load` doesn't work on Studio in iOS but works in KYH - Confirming that only the NOAH Studio is affected by this issue. # Demo ![Kapture 2021-10-05 at 22 49 45](https://user-images.githubusercontent.com/11599005/136047077-d0da7a85-9157-4d01-bae9-07a6039fd9c1.gif) * ci(netlify): add _redirects file * S3 Deployment Validation (#198) * Added if condition to run workflow only on successful PR merge. (#195) * Checking proper automation workflow. Will revert this small change upon validation. (#196) * Change deployment trigger. Revert small biblio change. (#199) * Checking proper automation workflow. Will revert this small change upon validation. * Changed trigger for deployment workflow. Revert small change to bibliography. * Cascade dev changes on workflow to prod (#202) * Added AWS deployment workflow * Rain level value iot summary data * remove modal from qc sensor group file and display it on map playground html file * arrangement of the summary modal and move to noah playground map also disabled button for the View Data summary just like 4as * added a logic for logged in user and disclaimer popup * remove disclaimer when laguna logged in * text wrap table header * change noah logo into png * change logo up and upri * add noah text png * fix noah logo in loading * loading noah logo in summary --------- Co-authored-by: pfgoting <pfgoting@gmail.com> Co-authored-by: Jadurani Davalos <jadurani.davalos@gmail.com> Co-authored-by: kennethbeoliporada <kennethbeoliporada@gmail.com> Co-authored-by: bon-carpo <jccarpo@up.edu.ph>
UPRI-NOAH · Sep 13, 2023 · 315289e · 315289e
1 parent 0f9dd3e
commit 315289e
Show file tree

Hide file tree

Showing 17 changed files with 316 additions and 146 deletions.
diff --git a/src/app/features/home/components/footer/footer.component.html b/src/app/features/home/components/footer/footer.component.html
@@ -80,15 +80,15 @@
           <li>
             <div class="relative flex md:px-10 md:py-3 px-4 py-1">
               <a href="https://up.edu.ph/" target="_blank"
-                ><img src="assets/icons/up.png"
+                ><img src="assets/icons/up.png" class="w-10"
               /></a>
 
               <a
                 href="https://www.facebook.com/UPResilienceInstitute/"
                 target="_blank"
                 class="px-4"
               >
-                <img src="assets/icons/upri.png" class="pl-2"
+                <img src="assets/icons/upri.png" class="h-10 pl-2"
               /></a>
             </div>
           </li>

diff --git a/src/app/features/home/components/navigation/navigation.component.html b/src/app/features/home/components/navigation/navigation.component.html
@@ -28,10 +28,8 @@
             routerLink="/"
           >
             <div class="flex max-w-xs p-2 items-center">
-              <img src="assets/icons/logo-noah.svg" class="z-50 w-20" />
-              <div class="text-xs font-bold uppercase tracking-wider p-2 z-50">
-                Nationwide Operational Assessment of Hazards
-              </div>
+              <img src="assets/icons/noah_logo.png" class="z-50 w-20" />
+              <img src="assets/icons/noah_text.png" class="z-50 h-10 pl-2" />
             </div>
           </a>
         </div>
@@ -193,21 +191,7 @@
             routerLink="/"
           >
             <div class="flex max-w-xs p-2 items-center">
-              <img src="assets/icons/logo-noah.svg" class="z-50 w-20" />
-              <div
-                class="
-                  text-xs
-                  font-bold
-                  uppercase
-                  tracking-wider
-                  p-2
-                  z-50
-                  hidden
-                  sm:block
-                "
-              >
-                Nationwide Operational Assessment of Hazards
-              </div>
+              <img src="assets/icons/noah_logo.png" class="z-50 w-20" />
             </div>
           </a>
         </div>
@@ -315,7 +299,7 @@
                       >
                         <div class="flex max-w-xs p-2 items-center">
                           <img
-                            src="assets/icons/logo-noah.svg"
+                            src="assets/icons/noah_logo.png"
                             class="z-50 w-32"
                           />
                         </div>

diff --git a/src/app/features/know-your-hazards/pages/base/base.component.html b/src/app/features/know-your-hazards/pages/base/base.component.html
@@ -11,21 +11,8 @@
     routerLink="/"
   >
     <div class="flex max-w-xs items-center">
-      <img src="assets/icons/logo-noah.svg" class="z-50 w-16 lg:w-20" />
-      <div
-        class="
-          text-xs
-          font-bold
-          uppercase
-          tracking-wider
-          p-2
-          z-50
-          hidden
-          lg:block
-        "
-      >
-        Nationwide Operational Assessment of Hazards
-      </div>
+      <img src="assets/icons/noah_logo.png" class="z-50 w-16 lg:w-20" />
+      <img src="assets/icons/noah_text.png" class="z-50 h-10 pl-2" />
     </div>
   </a>
 </div>

diff --git a/src/app/features/noah-playground/components/qc-sensors-group/qc-sensors-group.component.html b/src/app/features/noah-playground/components/qc-sensors-group/qc-sensors-group.component.html
@@ -115,10 +115,39 @@ <h6 class="text-xl leading-none font-bold">IoT (Internet of Things)</h6>
         [qcCriticalFacilities]="qcCriticalFacilities"
       >
       </noah-qc-critical-facilities>
-      <noah-summary
-        [ngClass]="(shown$ | async) ? ' pt-5 ' : ' hidden '"
-      ></noah-summary>
+
+      <div class="px-6 justify-center items-center">
+        <button
+          class="
+            text-xs
+            font-bold
+            bg-green-600
+            rounded-full
+            px-10
+            py-2
+            my-4
+            inline-flex
+            items-center
+            justify-center
+            text-white
+            focus:outline-none
+            mx-auto
+            lg:mx-0
+            tracking-widest
+            hover:bg-green-700
+            focus:ring-opacity-50
+            border-2
+            disabled:opacity-25
+            disabled:cursor-not-allowed
+            disabled:hover:bg-green-600
+            whitespace-nowrap
+          "
+          (click)="iotModalOpen()"
+          [disabled]="!(shown$ | async)"
+        >
+          View Data Summary
+        </button>
+      </div>
     </div>
   </div>
 </div>
-<noah-disclaimer *ngIf="disclaimerModal"></noah-disclaimer>
diff --git a/src/app/features/noah-playground/components/qc-sensors-group/qc-sensors-group.component.ts b/src/app/features/noah-playground/components/qc-sensors-group/qc-sensors-group.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { ModalServicesService } from '@features/noah-playground/services/modal-services.service';
 import { NoahPlaygroundService } from '@features/noah-playground/services/noah-playground.service';
 import { QCSENSORS } from '@features/noah-playground/services/qc-sensor.service';
 import {
@@ -10,7 +11,9 @@ import {
   QuezonCityMunicipalBoundaryState,
   QuezonCitySensorType,
 } from '@features/noah-playground/store/noah-playground.store';
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
+
+import { BehaviorSubject } from 'rxjs';
 @Component({
   selector: 'noah-qc-sensors-group',
   templateUrl: './qc-sensors-group.component.html',
@@ -34,8 +37,12 @@ export class QcSensorsGroupComponent implements OnInit {
   qcbShown: QuezonCityMunicipalBoundaryState;
   brgyShown: BarangayBoundaryState;
   disclaimerModal = false;
+  isChecked: boolean = false;
 
-  constructor(private pgService: NoahPlaygroundService) {}
+  constructor(
+    private pgService: NoahPlaygroundService,
+    private modalService: ModalServicesService
+  ) {}
 
   ngOnInit(): void {
     this.expanded$ = this.pgService.qcSensorsGroupExpanded$;
@@ -46,6 +53,7 @@ export class QcSensorsGroupComponent implements OnInit {
     this.qcbexpanded$ = this.pgService.qcMunicipalBoundaryExpanded$;
     this.brgyShown$ = this.pgService.barangayBoundaryShown$;
     this.brgyExpanded$ = this.pgService.barangayExpanded$;
+    this.disclaimerLoginModal();
   }
 
   toggleExpansion() {
@@ -57,12 +65,29 @@ export class QcSensorsGroupComponent implements OnInit {
     event.stopImmediatePropagation();
     this.pgService.toggleQuezonCityIOTGroupShown();
 
-    const discStatus = localStorage.getItem('disclaimerStatus');
-    if (discStatus == 'true') {
-      this.disclaimerModal = true;
+    if (event.target instanceof HTMLInputElement) {
+      const checked = event.target.checked;
+      if (checked) {
+        this.modalService.disclaimerModalOpen();
+      } else {
+        this.modalService.disclaimerModalClose();
+      }
+    }
+  }
+
+  iotModalOpen() {
+    this.modalService.iotSummaryModalOpen();
+  }
+
+  disclaimerLoginModal() {
+    const adminLogin = localStorage.getItem('loginStatus');
+    if (adminLogin == '1') {
+      this.modalService.disclaimerModalOpen();
     }
-    if (discStatus == 'false') {
-      this.disclaimerModal = false;
+    if (adminLogin == '2') {
+      localStorage.setItem('disclaimerStatus', 'false');
+    } else {
+      this.modalService.disclaimerModalClose();
     }
   }
 }
diff --git a/src/app/features/noah-playground/pages/noah-playground/noah-playground.component.html b/src/app/features/noah-playground/pages/noah-playground/noah-playground.component.html
@@ -213,15 +213,15 @@
     <div class="relative flex items-center justify-between mb-2">
       <div class="w-full">
         <img
-          src="assets/icons/logo-noah.svg"
+          src="assets/icons/noah_logo.png"
           routerLink="/"
           role="button"
           class="z-50 w-20"
         />
       </div>
       <!-- QC IOT ACCOUNT LOCAL   -->
       <img
-        class="w-auto h-10 rounded-full mx-auto"
+        class="w-auto h-10 mx-auto"
         src="assets/icons/qclogo.png"
         alt=""
         width="100%"
@@ -230,7 +230,7 @@
       />
 
       <img
-        class="w-auto h-10 rounded-full mx-auto"
+        class="w-auto h-10 mx-auto"
         src="assets/icons/laguna_logo.png"
         alt=""
         width="100%"
@@ -445,12 +445,8 @@
     <noah-map-playground></noah-map-playground>
   </main>
 </div>
-<div *ngIf="DisclaimerStatus$ | async as DisclaimerStatus">
-  <noah-disclaimer
-    *ngIf="DisclaimerStatus || disclaimerModal"
-  ></noah-disclaimer>
-</div>
 <noah-alert *ngIf="showAlert"></noah-alert>
+<noah-summary *ngIf="iotModalOpen"></noah-summary>
 <noah-qc-login *ngIf="modalAlert"></noah-qc-login>
 
 <!-- LOGOUT ALERT -->
@@ -766,3 +762,4 @@
     </div>
   </div>
 </div>
+<noah-disclaimer *ngIf="disclaimerModalOpen"></noah-disclaimer>
diff --git a/src/app/features/noah-playground/pages/noah-playground/noah-playground.component.ts b/src/app/features/noah-playground/pages/noah-playground/noah-playground.component.ts
@@ -25,10 +25,12 @@ export class NoahPlaygroundComponent implements OnInit {
   UserName$: Observable<string>;
   showAlert: boolean;
   modalAlert: boolean;
-  DisclaimerStatus$: Observable<boolean>;
   qcAdmin: boolean;
   lagunaAdmin: boolean;
   isWarningAlert = false;
+  disclaimerModalOpen = false;
+  iotModalOpen = false;
+
   constructor(
     private pgService: NoahPlaygroundService,
     private title: Title,
@@ -41,12 +43,19 @@ export class NoahPlaygroundComponent implements OnInit {
     this.title.setTitle('NOAH Studio');
     this.LoginStatus$ = this.qcLoginService.isLoggesIn;
     this.UserName$ = this.qcLoginService.currentUserName;
-    this.DisclaimerStatus$ = this.qcLoginService.isDisclaimerStatus;
 
     this.modalService.accountWarning$.subscribe((isWarningAlert) => {
       this.isWarningAlert = isWarningAlert;
     });
 
+    this.modalService.disclaimerModal$.subscribe((disclaimerModal) => {
+      this.disclaimerModalOpen = disclaimerModal;
+    });
+
+    this.modalService.iotSummaryModal$.subscribe((iotModalOpen) => {
+      this.iotModalOpen = iotModalOpen;
+    });
+
     const disableAlert = localStorage.getItem('loginStatus');
     if (disableAlert == '1') {
       this.showAlert = false;

diff --git a/src/app/features/noah-playground/services/modal-services.service.ts b/src/app/features/noah-playground/services/modal-services.service.ts
@@ -20,8 +20,30 @@ export class ModalServicesService {
   private lagunaLogin = new Subject<boolean>();
   lagunaLogin$ = this.lagunaLogin.asObservable();
 
+  private disclaimerModal = new Subject<boolean>();
+  disclaimerModal$ = this.disclaimerModal.asObservable();
+
+  private iotSummaryModal = new Subject<boolean>();
+  iotSummaryModal$ = this.iotSummaryModal.asObservable();
+
   constructor() {}
 
+  disclaimerModalOpen() {
+    this.disclaimerModal.next(true);
+  }
+
+  disclaimerModalClose() {
+    this.disclaimerModal.next(false);
+  }
+
+  iotSummaryModalOpen() {
+    this.iotSummaryModal.next(true);
+  }
+
+  iotSummaryModalClose() {
+    this.iotSummaryModal.next(false);
+  }
+
   lagunaLoginPopup() {
     this.lagunaLogin.next(true);
   }

diff --git a/src/app/shared/components/disclaimer/disclaimer.component.html b/src/app/shared/components/disclaimer/disclaimer.component.html
@@ -107,7 +107,7 @@
                     "
                   >
                     <img
-                      class="h-10 w-10 sm:h-16 sm:w-16 rounded-full"
+                      class="h-10 w-10 sm:h-16 sm:w-auto"
                       src="assets/icons/up.png"
                       alt="up logo"
                     />
@@ -124,7 +124,7 @@
                     "
                   >
                     <img
-                      class="h-10 w-10 sm:h-16 sm:w-16 rounded-full"
+                      class="h-10 w-10 sm:h-16 sm:w-auto"
                       src="assets/icons/upri.png"
                       alt="upri logo"
                     />
@@ -140,8 +140,8 @@
                     "
                   >
                     <img
-                      class="h-16 w-16 sm:h-28 sm:w-28"
-                      src="assets/icons/logo-noah.svg"
+                      class="h-16 sm:h-16 sm:w-auto"
+                      src="assets/icons/noah_logo.png"
                       alt="noah logo"
                     />
                   </button>