fix(noah): displaying hospital icon and label; fix display summary da…

…ta; movable pin in map (#384) * 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 * fix error from console about opacity of risk assessment group undefined * fix crit facility hospital show icon and label * refactor value for flood * center loading for IoT * noah studio draggable pin * volatile not sure if it is working * changing location in search bar when the marker put down in map * add lat long details when pin dragged * remove text center in latest data in summary dashboard --------- 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 · Jul 29, 2024 · 037b867 · 037b867
1 parent 7b02842
commit 037b867
Show file tree

Hide file tree

Showing 9 changed files with 140 additions and 75 deletions.
diff --git a/src/app/features/know-your-hazards/components/map-kyh/map-kyh.component.html b/src/app/features/know-your-hazards/components/map-kyh/map-kyh.component.html
@@ -1,10 +1,11 @@
 <div class="absolute top-0 left-0 w-full h-full" id="map-kyh"></div>
 
 <noah-change-style-button
-  class="absolute top-36 right-0 p-2"
+  class="absolute map-icon right-0 p-2"
   [selectedStyle]="mapStyle"
   (selectedStyleChange)="switchMapStyle($event)"
 ></noah-change-style-button>
+<pre id="coordinates" class="coords"></pre>
 
 <button
   class="

diff --git a/src/app/features/know-your-hazards/components/map-kyh/map-kyh.component.scss b/src/app/features/know-your-hazards/components/map-kyh/map-kyh.component.scss
@@ -0,0 +1,17 @@
+.map-icon {
+  top: 136px;
+}
+
+.coords {
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  position: absolute;
+  top: 188px;
+  right: 10px;
+  padding: 5px 10px;
+  margin: 0;
+  font-size: 11px;
+  line-height: 18px;
+  border-radius: 3px;
+  display: none;
+}
diff --git a/src/app/features/know-your-hazards/components/map-kyh/map-kyh.component.ts b/src/app/features/know-your-hazards/components/map-kyh/map-kyh.component.ts
@@ -245,7 +245,10 @@ export class MapKyhComponent implements OnInit {
   }
 
   async initMarkers() {
-    this.centerMarker = new mapboxgl.Marker({ color: '#333', draggable: true })
+    this.centerMarker = new mapboxgl.Marker({
+      color: '#FF0000',
+      draggable: true,
+    })
       .setLngLat(this.kyhService.currentCoords)
       .addTo(this.map);
 
@@ -257,7 +260,10 @@ export class MapKyhComponent implements OnInit {
 
     //start draggable marker
     this.centerMarker.on('dragend', async () => {
+      const coords = document.getElementById('coordinates');
       const lngLat = this.centerMarker.getLngLat();
+      coords.style.display = 'block';
+      coords.innerHTML = `Longitude: ${lngLat.lng}<br />Latitude: ${lngLat.lat}`;
       await this.mapService.dragReverseGeocode(lngLat.lat, lngLat.lng);
       // Fly to the new center with a smooth animation
       this.map.flyTo({

diff --git a/src/app/features/noah-playground/components/map-playground/map-playground.component.html b/src/app/features/noah-playground/components/map-playground/map-playground.component.html
@@ -2,6 +2,7 @@
 
 <div id="distance" class="distance-container"></div>
 <div id="area" class="area-container"></div>
+<pre id="coordinates" class="coords"></pre>
 
 <div
   id="graph-dom"
@@ -16,7 +17,7 @@
   "
 ></div>
 
-<div class="top-60 absolute z-10 right-0 pl-2 h-16 w-16 flex flex-row py-1.5">
+<div class="map-icon absolute z-10 right-0 pl-2 h-16 w-16 flex flex-row py-1.5">
   <div class="p-2">
     <div class="dropdown inline-block relative">
       <button

diff --git a/src/app/features/noah-playground/components/map-playground/map-playground.component.scss b/src/app/features/noah-playground/components/map-playground/map-playground.component.scss
@@ -47,3 +47,21 @@
   padding: 5px 10px;
   border-radius: 3px;
 }
+
+.map-icon {
+  top: 228px;
+}
+
+.coords {
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  position: absolute;
+  top: 284px;
+  right: 10px;
+  padding: 5px 10px;
+  margin: 0;
+  font-size: 11px;
+  line-height: 18px;
+  border-radius: 3px;
+  display: none;
+}
diff --git a/src/app/features/noah-playground/components/map-playground/map-playground.component.ts b/src/app/features/noah-playground/components/map-playground/map-playground.component.ts
@@ -252,17 +252,36 @@ export class MapPlaygroundComponent implements OnInit, OnDestroy {
       .subscribe((center) => {
         this.map.flyTo({
           center,
-          zoom: 16,
+          zoom: 17,
           essential: true,
         });
 
         if (!this.centerMarker) {
-          this.centerMarker = new mapboxgl.Marker({ color: '#333' })
+          this.centerMarker = new mapboxgl.Marker({
+            color: '#FF0000',
+            draggable: true,
+          })
             .setLngLat(center)
-            .addTo(this.map);
+            .addTo(this.map)
+            .on('dragend', (e) => {
+              // Update the center position when the marker is dragged
+              const coords = document.getElementById('coordinates');
+              const LngLat = this.centerMarker.getLngLat();
+              coords.style.display = 'block';
+              coords.innerHTML = `Longitude: ${LngLat.lng}<br />Latitude: ${LngLat.lat}`;
+              this.mapService.dragReverseGeocode(LngLat.lat, LngLat.lng);
+              this.map.flyTo({
+                center: LngLat,
+                zoom: 17,
+                speed: 1.2,
+                curve: 1,
+                easing: (t) => t,
+                essential: true,
+              });
+            });
+        } else {
+          this.centerMarker.setLngLat(center);
         }
-
-        this.centerMarker.setLngLat(center);
       });
   }
 
@@ -750,7 +769,7 @@ export class MapPlaygroundComponent implements OnInit, OnDestroy {
             filter: ['==', 'CF Type', 'Barangay'],
           });
           this.map.addLayer({
-            id: 'hospital',
+            id: 'qc_hospitals',
             type: 'fill',
             source: {
               type: 'geojson',
@@ -932,7 +951,7 @@ export class MapPlaygroundComponent implements OnInit, OnDestroy {
                 +(groupShown && soloShown)
               );
               this.map.setPaintProperty(
-                'hospital',
+                'qc_hospitals',
                 'fill-opacity',
                 +(groupShown && soloShown)
               );
@@ -1662,7 +1681,8 @@ export class MapPlaygroundComponent implements OnInit, OnDestroy {
     this.map.addSource('mapbox-dem', {
       type: 'raster-dem',
       url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
-    });
+      volatile: true,
+    } as any);
 
     // Watch exaggeration level
     this.pgService.exagerration$

diff --git a/...tures/noah-playground/components/risk-assessment-group/risk-assessment-group.component.ts b/...tures/noah-playground/components/risk-assessment-group/risk-assessment-group.component.ts
@@ -65,9 +65,20 @@ export class RiskAssessmentGroupComponent implements OnInit {
     this.pgService
       .getRainRiskAssessment$(this.rainForecast)
       .pipe(first())
-      .subscribe(({ opacity }) => {
-        this.initialRainOpacityValue = opacity;
-      });
+      .subscribe(
+        (result) => {
+          if (result && result.opacity !== undefined) {
+            this.initialRainOpacityValue = result.opacity;
+          } else {
+            // Handle the case where result or opacity is undefined
+            this.initialRainOpacityValue = 80; // or some default value
+          }
+        },
+        (error) => {
+          // Handle the error case
+          console.error('Error fetching rain risk assessment:', error);
+        }
+      );
 
     this.pgService
       .getPopulationExposure$(this.populationAffected)