From 42ae6e85fa5ad21a6c30cd6106e9bb3123c3286c Mon Sep 17 00:00:00 2001 From: pfgoting Date: Tue, 5 Oct 2021 17:35:08 +0800 Subject: [PATCH 01/10] Added github actions workflow for aut deployment to .72 server. --- .github/workflows/deploy_staging.yml | 55 ++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 .github/workflows/deploy_staging.yml diff --git a/.github/workflows/deploy_staging.yml b/.github/workflows/deploy_staging.yml new file mode 100644 index 00000000..417c3dcb --- /dev/null +++ b/.github/workflows/deploy_staging.yml @@ -0,0 +1,55 @@ +name: Deploy to Server + +# Controls when the action will run. Triggers the workflow on push or pull request +# events but only for the master branch +on: + push: + branches: [master] + pull_request: + branches: [master] + +# A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + # This workflow contains a single job called "build" + build-and-deploy: + # The type of runner that the job will run on + runs-on: ubuntu-latest + # Here we are configuring build matrix that allows you to perform certain operations on your code + # with different software/Operating system configurations. + # In our case, we are only running it for Node v12.*. but you can multiple entries in that array. + strategy: + matrix: + node-version: [12.x] + + # Steps represent a sequence of tasks that will be executed as part of the job + steps: + # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it + # As you can see below we are using matrix.node-version => it means it will execute for all possible combinations + # provided matrix keys array(in our case only one kye => node-version) + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v2 + with: + node-version: ${{ matrix.node-version }} + + # Install the node modules + - name: NPM Install + run: npm install + + # Create production build + - name: Production Build + run: npm run build -- --prod # This is equivalent to 'ng build --prod' + + # Install SSH key for the server + - name: Install SSH Key + uses: shimataro/ssh-key-action@v2 + with: + key: ${{ secrets.SSH_PRIVATE_KEY }} + known_hosts: 'just-a-placeholder-so-we-dont-get-errors' + + - name: Add Known Hosts + run: ssh-keyscan -H ${{ secrets.SSH_HOST }} >> ~/.ssh/known_hosts + + # Deploy to Server + - name: Deploy to Server with rsync + run: rsync -avz ./dist/noah-frontend/* ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }}:/var/www/html/ --rsync-path="sudo rsync" From 112a89148c1b4688a0d17349152669317d581e63 Mon Sep 17 00:00:00 2001 From: pfgoting Date: Tue, 5 Oct 2021 22:07:14 +0800 Subject: [PATCH 02/10] Added github action for S3 deployment. --- .github/workflows/deploy_production.yml | 72 +++++++++++++++++++++++++ .github/workflows/deploy_staging.yml | 1 + 2 files changed, 73 insertions(+) create mode 100644 .github/workflows/deploy_production.yml diff --git a/.github/workflows/deploy_production.yml b/.github/workflows/deploy_production.yml new file mode 100644 index 00000000..462892f4 --- /dev/null +++ b/.github/workflows/deploy_production.yml @@ -0,0 +1,72 @@ +name: Deploy to Production Server + +# Controls when the action will run. Triggers the workflow on push or pull request +# events but only for the master branch +on: + push: + branches: [master] + pull_request: + branches: [master] + # types: [closed] + +# A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + # This workflow contains a single job called "build" + build-and-deploy: + # The type of runner that the job will run on + runs-on: ubuntu-latest + env: + AWS_S3_BUCKET_NAME: www.noah.ph + AWS_CF_DISTRIBUTION_ID: E1J3VDQ3CVKWG2 + # Here we are configuring build matrix that allows you to perform certain operations on your code + # with different software/Operating system configurations. + # In our case, we are only running it for Node v12.*. but you can multiple entries in that array. + strategy: + matrix: + node-version: [12.x] + + # Steps represent a sequence of tasks that will be executed as part of the job + steps: + # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it + # As you can see below we are using matrix.node-version => it means it will execute for all possible combinations + # provided matrix keys array(in our case only one kye => node-version) + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v2 + with: + node-version: ${{ matrix.node-version }} + + # Install the node modules + - name: NPM Install + run: npm install + + # Create production build + - name: Production Build + run: npm run build -- --prod # This is equivalent to 'ng build --prod' + + # Deploy to S3 + # This is a third party action used to sync our production build app with the AWS S3 bucket + # For security purpose, secrets are configured in project repo setting. + - name: Deploy to S3 + uses: jakejarvis/s3-sync-action@v0.5.1 + with: + # --acl public read => makes files publicly readable + # --delete => permanently deletes files in S3 bucket that are not present in latest build + args: --acl public-read --delete + env: + AWS_S3_BUCKET: ${{ env.AWS_S3_BUCKET_NAME }} # S3 bucket name + # note: use IAM role with limited role for below access-key-id and secret-access-key + AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} # Access Key ID + AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} # Access Secret Key + AWS_REGION: 'us-east-1' + SOURCE_DIR: 'dist/noah-frontend' # build folder + + # Invalidate CF Cache + - name: Create CloudFront Cache Invalidation + uses: chetan/invalidate-cloudfront-action@v2 + env: + DISTRIBUTION: ${{ env.AWS_CF_DISTRIBUTION_ID }} + PATHS: '/index.html' + AWS_REGION: 'us-east-1' + AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} + AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} diff --git a/.github/workflows/deploy_staging.yml b/.github/workflows/deploy_staging.yml index 417c3dcb..b5834713 100644 --- a/.github/workflows/deploy_staging.yml +++ b/.github/workflows/deploy_staging.yml @@ -7,6 +7,7 @@ on: branches: [master] pull_request: branches: [master] + types: [closed] # A workflow run is made up of one or more jobs that can run sequentially or in parallel jobs: From 42b9f3dcd6dd6d2cdb4aad264edb431576166f22 Mon Sep 17 00:00:00 2001 From: pfgoting Date: Tue, 5 Oct 2021 22:22:04 +0800 Subject: [PATCH 03/10] Changed to staging. Created branch for staging. --- .github/workflows/deploy_production.yml | 6 +++--- .github/workflows/deploy_staging.yml | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/.github/workflows/deploy_production.yml b/.github/workflows/deploy_production.yml index 462892f4..c3fbd240 100644 --- a/.github/workflows/deploy_production.yml +++ b/.github/workflows/deploy_production.yml @@ -4,10 +4,10 @@ name: Deploy to Production Server # events but only for the master branch on: push: - branches: [master] + branches: [main] pull_request: - branches: [master] - # types: [closed] + branches: [main] + types: [closed] # A workflow run is made up of one or more jobs that can run sequentially or in parallel jobs: diff --git a/.github/workflows/deploy_staging.yml b/.github/workflows/deploy_staging.yml index b5834713..d53f93b3 100644 --- a/.github/workflows/deploy_staging.yml +++ b/.github/workflows/deploy_staging.yml @@ -4,9 +4,9 @@ name: Deploy to Server # events but only for the master branch on: push: - branches: [master] + branches: [staging] pull_request: - branches: [master] + branches: [staging] types: [closed] # A workflow run is made up of one or more jobs that can run sequentially or in parallel From 382bbf99305cd60e1bcded97ab5fbf1c97a9a9ba Mon Sep 17 00:00:00 2001 From: pfgoting Date: Tue, 5 Oct 2021 22:30:34 +0800 Subject: [PATCH 04/10] Retrigger deployment workflow. --- .github/workflows/deploy_production.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/deploy_production.yml b/.github/workflows/deploy_production.yml index c3fbd240..9caa5363 100644 --- a/.github/workflows/deploy_production.yml +++ b/.github/workflows/deploy_production.yml @@ -1,7 +1,7 @@ name: Deploy to Production Server # Controls when the action will run. Triggers the workflow on push or pull request -# events but only for the master branch +# events but only for the master branch. on: push: branches: [main] From 0834651f0bfb6fbafdcd2b324afdca91e35803dd Mon Sep 17 00:00:00 2001 From: Jadurani Davalos Date: Tue, 5 Oct 2021 22:54:52 +0800 Subject: [PATCH 05/10] fix(studio): zoom in on ios (#192) # Summary - Fixes https://github.com/UPRI-NOAH/noah-frontend/issues/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) --- .../components/map-playground/map-playground.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 index 73a2759e..7a368a4d 100644 --- 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 @@ -102,8 +102,8 @@ export class MapPlaygroundComponent implements OnInit, OnDestroy { ngOnInit(): void { this.initMap(); - fromEvent(this.map, 'load') - .pipe(takeUntil(this._unsub)) + fromEvent(this.map, 'style.load') + .pipe(first(), takeUntil(this._unsub)) .subscribe(() => { this.addNavigationControls(); this.addGeolocationControls(); From 7822f231683d7546e6af40a0ad9b45dbe8f63fff Mon Sep 17 00:00:00 2001 From: Jadurani Davalos Date: Tue, 5 Oct 2021 23:04:33 +0800 Subject: [PATCH 06/10] ci(netlify): add _redirects file --- .netlify/_redirects | 1 + package.json | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 .netlify/_redirects diff --git a/.netlify/_redirects b/.netlify/_redirects new file mode 100644 index 00000000..43085054 --- /dev/null +++ b/.netlify/_redirects @@ -0,0 +1 @@ +/* /index.html 200 diff --git a/package.json b/package.json index 0aba280d..113afe6f 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", - "build:prod": "cross-env NODE_ENV=production ng build --prod", + "build:prod": "cross-env NODE_ENV=production ng build --prod && cp $(pwd)/.netlify/_redirects $(pwd)/dist/noah-frontend/_redirects", "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md" }, "private": true, From d20f604203f817d47d564942107e3603c4f38d3f Mon Sep 17 00:00:00 2001 From: pfgoting Date: Wed, 6 Oct 2021 13:18:20 +0800 Subject: [PATCH 07/10] 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) --- .github/workflows/deploy_production.yml | 3 ++- .github/workflows/deploy_staging.yml | 6 ++++-- .../home/pages/bibliography/bibliography.component.html | 2 +- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/.github/workflows/deploy_production.yml b/.github/workflows/deploy_production.yml index 9caa5363..9d234afa 100644 --- a/.github/workflows/deploy_production.yml +++ b/.github/workflows/deploy_production.yml @@ -13,6 +13,8 @@ on: jobs: # This workflow contains a single job called "build" build-and-deploy: + # Only run if PR is merged. + if: github.event.pull_request.merged == true # The type of runner that the job will run on runs-on: ubuntu-latest env: @@ -24,7 +26,6 @@ jobs: strategy: matrix: node-version: [12.x] - # Steps represent a sequence of tasks that will be executed as part of the job steps: # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it diff --git a/.github/workflows/deploy_staging.yml b/.github/workflows/deploy_staging.yml index d53f93b3..fe68b57f 100644 --- a/.github/workflows/deploy_staging.yml +++ b/.github/workflows/deploy_staging.yml @@ -4,15 +4,17 @@ name: Deploy to Server # events but only for the master branch on: push: - branches: [staging] + branches: [develop] pull_request: - branches: [staging] + branches: [develop] types: [closed] # A workflow run is made up of one or more jobs that can run sequentially or in parallel jobs: # This workflow contains a single job called "build" build-and-deploy: + # Only run if PR is merged. + if: github.event.pull_request.merged == true # The type of runner that the job will run on runs-on: ubuntu-latest # Here we are configuring build matrix that allows you to perform certain operations on your code diff --git a/src/app/features/home/pages/bibliography/bibliography.component.html b/src/app/features/home/pages/bibliography/bibliography.component.html index c9c7ceff..2a8c6143 100644 --- a/src/app/features/home/pages/bibliography/bibliography.component.html +++ b/src/app/features/home/pages/bibliography/bibliography.component.html @@ -244,7 +244,7 @@

Lagmay, A.M. & Baldago, M. C. (2020) A timeline of Mindanao Disasters. - University of the Philippines Press. + University of the Philippines Press From 39b3ab7ca09c7235c45c4b5f5f374315a9bb0b0e Mon Sep 17 00:00:00 2001 From: pfgoting Date: Wed, 6 Oct 2021 14:35:55 +0800 Subject: [PATCH 08/10] 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. --- .github/workflows/deploy_production.yml | 7 +------ .github/workflows/deploy_staging.yml | 7 +------ .../home/pages/bibliography/bibliography.component.html | 2 +- 3 files changed, 3 insertions(+), 13 deletions(-) diff --git a/.github/workflows/deploy_production.yml b/.github/workflows/deploy_production.yml index 9d234afa..41738168 100644 --- a/.github/workflows/deploy_production.yml +++ b/.github/workflows/deploy_production.yml @@ -5,16 +5,11 @@ name: Deploy to Production Server on: push: branches: [main] - pull_request: - branches: [main] - types: [closed] # A workflow run is made up of one or more jobs that can run sequentially or in parallel jobs: # This workflow contains a single job called "build" build-and-deploy: - # Only run if PR is merged. - if: github.event.pull_request.merged == true # The type of runner that the job will run on runs-on: ubuntu-latest env: @@ -67,7 +62,7 @@ jobs: uses: chetan/invalidate-cloudfront-action@v2 env: DISTRIBUTION: ${{ env.AWS_CF_DISTRIBUTION_ID }} - PATHS: '/index.html' + PATHS: '/' AWS_REGION: 'us-east-1' AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} diff --git a/.github/workflows/deploy_staging.yml b/.github/workflows/deploy_staging.yml index fe68b57f..ce2e96ab 100644 --- a/.github/workflows/deploy_staging.yml +++ b/.github/workflows/deploy_staging.yml @@ -1,20 +1,15 @@ -name: Deploy to Server +name: Deploy to Staging Server # Controls when the action will run. Triggers the workflow on push or pull request # events but only for the master branch on: push: branches: [develop] - pull_request: - branches: [develop] - types: [closed] # A workflow run is made up of one or more jobs that can run sequentially or in parallel jobs: # This workflow contains a single job called "build" build-and-deploy: - # Only run if PR is merged. - if: github.event.pull_request.merged == true # The type of runner that the job will run on runs-on: ubuntu-latest # Here we are configuring build matrix that allows you to perform certain operations on your code diff --git a/src/app/features/home/pages/bibliography/bibliography.component.html b/src/app/features/home/pages/bibliography/bibliography.component.html index 2a8c6143..c9c7ceff 100644 --- a/src/app/features/home/pages/bibliography/bibliography.component.html +++ b/src/app/features/home/pages/bibliography/bibliography.component.html @@ -244,7 +244,7 @@

Lagmay, A.M. & Baldago, M. C. (2020) A timeline of Mindanao Disasters. - University of the Philippines Press + University of the Philippines Press. From 35d3ccf664b871155fc67e8e7b5fab50569691e4 Mon Sep 17 00:00:00 2001 From: pfgoting Date: Wed, 6 Oct 2021 16:53:53 +0800 Subject: [PATCH 09/10] Cascade dev changes on workflow to prod (#202) * Added AWS deployment workflow --- .github/workflows/deploy_production.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/deploy_production.yml b/.github/workflows/deploy_production.yml index 41738168..2e9bb188 100644 --- a/.github/workflows/deploy_production.yml +++ b/.github/workflows/deploy_production.yml @@ -62,7 +62,7 @@ jobs: uses: chetan/invalidate-cloudfront-action@v2 env: DISTRIBUTION: ${{ env.AWS_CF_DISTRIBUTION_ID }} - PATHS: '/' + PATHS: '/*' AWS_REGION: 'us-east-1' AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} From b995ae76c3530cf3ea2b681167e34018815591db Mon Sep 17 00:00:00 2001 From: kennethbeoliporada Date: Tue, 21 Dec 2021 15:43:02 +0800 Subject: [PATCH 10/10] draft: feat(studio): diplay wind --- package-lock.json | 6 +- .../map-playground.component.ts | 20 ++++- .../windy-playground.component.html | 77 +++++++++++++++++++ .../windy-playground.component.scss | 0 .../windy-playground.component.spec.ts | 24 ++++++ .../windy-playground.component.ts | 28 +++++++ .../components/windy/windy.component.html | 7 ++ .../components/windy/windy.component.scss | 0 .../components/windy/windy.component.spec.ts | 24 ++++++ .../components/windy/windy.component.ts | 16 ++++ .../noah-playground/noah-playground.module.ts | 4 + .../noah-playground.component.html | 1 + .../services/noah-playground.service.ts | 35 +++++++++ .../store/noah-playground.store.ts | 13 ++++ src/index.html | 7 ++ 15 files changed, 258 insertions(+), 4 deletions(-) create mode 100644 src/app/features/noah-playground/components/windy-playground/windy-playground.component.html create mode 100644 src/app/features/noah-playground/components/windy-playground/windy-playground.component.scss create mode 100644 src/app/features/noah-playground/components/windy-playground/windy-playground.component.spec.ts create mode 100644 src/app/features/noah-playground/components/windy-playground/windy-playground.component.ts create mode 100644 src/app/features/noah-playground/components/windy/windy.component.html create mode 100644 src/app/features/noah-playground/components/windy/windy.component.scss create mode 100644 src/app/features/noah-playground/components/windy/windy.component.spec.ts create mode 100644 src/app/features/noah-playground/components/windy/windy.component.ts diff --git a/package-lock.json b/package-lock.json index 14a0c84b..55ea0638 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13292,7 +13292,8 @@ "dependencies": { "ansi-regex": { "version": "5.0.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz", + "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==", "dev": true }, "strip-ansi": { @@ -13457,7 +13458,8 @@ "dependencies": { "ansi-regex": { "version": "5.0.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz", + "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==", "dev": true }, "ansi-styles": { 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 index 4a1cda83..0f52c2a2 100644 --- 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 @@ -41,7 +41,6 @@ import { import { SENSOR_COLORS } from '@shared/mocks/noah-colors'; import * as Highcharts from 'highcharts'; import { SensorChartService } from '@features/noah-playground/services/sensor-chart.service'; - import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'; import { @@ -56,6 +55,9 @@ import { WEATHER_SATELLITE_ARR, } from '@features/noah-playground/store/noah-playground.store'; import { NOAH_COLORS } from '@shared/mocks/noah-colors'; +import { type } from 'os'; +import { P } from '@angular/cdk/keycodes'; +import { url } from 'inspector'; type MapStyle = 'terrain' | 'satellite'; @@ -88,7 +90,6 @@ type LH2Subtype = 'af' | 'df'; // hazardOpacity$: Observable; // hazardShown$: Observable; - @Component({ selector: 'noah-map-playground', templateUrl: './map-playground.component.html', @@ -134,6 +135,7 @@ export class MapPlaygroundComponent implements OnInit, OnDestroy { this.initSensors(); this.initWeatherSatelliteLayers(); this.showContourMaps(); + this.initWindy(); }); } @@ -501,6 +503,20 @@ export class MapPlaygroundComponent implements OnInit, OnDestroy { }); } + initWindy() { + // let windy; + // let timeout; + // this.map.addLayer({ + // id: windy, + // type: 'fill', + // source: { + // type: 'geojson', + // data: 'https://upri-noah.s3.ap-southeast-1.amazonaws.com/wind_map/wind_map.json', + // } + // }) + // this.map.doubleClickZoom.disable(); + } + initWeatherSatelliteLayers() { const weatherSatelliteImages = { himawari: { diff --git a/src/app/features/noah-playground/components/windy-playground/windy-playground.component.html b/src/app/features/noah-playground/components/windy-playground/windy-playground.component.html new file mode 100644 index 00000000..2250e03e --- /dev/null +++ b/src/app/features/noah-playground/components/windy-playground/windy-playground.component.html @@ -0,0 +1,77 @@ +
+
+
+ +
+
Windy
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
diff --git a/src/app/features/noah-playground/components/windy-playground/windy-playground.component.scss b/src/app/features/noah-playground/components/windy-playground/windy-playground.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/features/noah-playground/components/windy-playground/windy-playground.component.spec.ts b/src/app/features/noah-playground/components/windy-playground/windy-playground.component.spec.ts new file mode 100644 index 00000000..4a43307a --- /dev/null +++ b/src/app/features/noah-playground/components/windy-playground/windy-playground.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { WindyPlaygroundComponent } from './windy-playground.component'; + +describe('WindyPlaygroundComponent', () => { + let component: WindyPlaygroundComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [WindyPlaygroundComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(WindyPlaygroundComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/noah-playground/components/windy-playground/windy-playground.component.ts b/src/app/features/noah-playground/components/windy-playground/windy-playground.component.ts new file mode 100644 index 00000000..a4441a96 --- /dev/null +++ b/src/app/features/noah-playground/components/windy-playground/windy-playground.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit } from '@angular/core'; +import { NoahPlaygroundService } from '@features/noah-playground/services/noah-playground.service'; +import { Observable } from 'rxjs'; +@Component({ + selector: 'noah-windy-playground', + templateUrl: './windy-playground.component.html', + styleUrls: ['./windy-playground.component.scss'], +}) +export class WindyPlaygroundComponent implements OnInit { + expanded$: Observable; + shown$: Observable; + + constructor(private pgService: NoahPlaygroundService) {} + + ngOnInit(): void { + this.expanded$ = this.pgService.windyExpanded$; + this.shown$ = this.pgService.windyShown$; + } + + toggleShown(event: Event) { + event.stopPropagation(); + event.stopImmediatePropagation(); + this.pgService.toggleWindyVisibility(); + } + toggleExpanded() { + this.pgService.toggleWindyExpansion(); + } +} diff --git a/src/app/features/noah-playground/components/windy/windy.component.html b/src/app/features/noah-playground/components/windy/windy.component.html new file mode 100644 index 00000000..6b456a84 --- /dev/null +++ b/src/app/features/noah-playground/components/windy/windy.component.html @@ -0,0 +1,7 @@ +
+
+
+ Windy Noah +
+
+
diff --git a/src/app/features/noah-playground/components/windy/windy.component.scss b/src/app/features/noah-playground/components/windy/windy.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/features/noah-playground/components/windy/windy.component.spec.ts b/src/app/features/noah-playground/components/windy/windy.component.spec.ts new file mode 100644 index 00000000..f9b91b11 --- /dev/null +++ b/src/app/features/noah-playground/components/windy/windy.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { WindyComponent } from './windy.component'; + +describe('WindyComponent', () => { + let component: WindyComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [WindyComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(WindyComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/noah-playground/components/windy/windy.component.ts b/src/app/features/noah-playground/components/windy/windy.component.ts new file mode 100644 index 00000000..4139f201 --- /dev/null +++ b/src/app/features/noah-playground/components/windy/windy.component.ts @@ -0,0 +1,16 @@ +import { Component, OnInit } from '@angular/core'; +import { NoahPlaygroundService } from '@features/noah-playground/services/noah-playground.service'; +import { Observable } from 'rxjs'; +@Component({ + selector: 'noah-windy', + templateUrl: './windy.component.html', + styleUrls: ['./windy.component.scss'], +}) +export class WindyComponent implements OnInit { + expanded$: Observable; + shown$: Observable; + + constructor(private pgService: NoahPlaygroundService) {} + + ngOnInit(): void {} +} diff --git a/src/app/features/noah-playground/noah-playground.module.ts b/src/app/features/noah-playground/noah-playground.module.ts index 3ae004e1..3f99f4db 100644 --- a/src/app/features/noah-playground/noah-playground.module.ts +++ b/src/app/features/noah-playground/noah-playground.module.ts @@ -20,6 +20,8 @@ import { SensorSoloComponent } from './components/sensor-solo/sensor-solo.compon import { WeatherComponent } from './components/weather/weather.component'; import { ContourMapsComponent } from './components/contour-maps/contour-maps.component'; import { WeatherSatellitePlaygroundComponent } from './components/weather-satellite-playground/weather-satellite-playground.component'; +import { WindyComponent } from './components/windy/windy.component'; +import { WindyPlaygroundComponent } from './components/windy-playground/windy-playground.component'; @NgModule({ declarations: [ @@ -37,6 +39,8 @@ import { WeatherSatellitePlaygroundComponent } from './components/weather-satell WeatherComponent, ContourMapsComponent, WeatherSatellitePlaygroundComponent, + WindyComponent, + WindyPlaygroundComponent, ], imports: [ CommonModule, 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 index 2a694599..29a79d88 100644 --- 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 @@ -309,6 +309,7 @@ > + diff --git a/src/app/features/noah-playground/services/noah-playground.service.ts b/src/app/features/noah-playground/services/noah-playground.service.ts index 52612f5c..48aa33b1 100644 --- a/src/app/features/noah-playground/services/noah-playground.service.ts +++ b/src/app/features/noah-playground/services/noah-playground.service.ts @@ -71,6 +71,14 @@ export class NoahPlaygroundService { ); } + get windyShown$(): Observable { + return this.store.state$.pipe(map((state) => state.windy.shown)); + } + + get windyExpanded$(): Observable { + return this.store.state$.pipe(map((state) => state.windy.expanded)); + } + get selectedWeatherSatellite$(): Observable { return this.store.state$.pipe( map((state) => state.weatherSatellite.selectedType) @@ -100,6 +108,15 @@ export class NoahPlaygroundService { .toPromise(); } + getWindyData(): Promise<{ url: string; sourceLayer: string[] }[]> { + return this.http + .get<{ url: string; sourceLayer: string[] }[]>( + 'https://upri-noah.s3.ap-southeast-1.amazonaws.com/wind_map/wind_map.json' + ) + .pipe(first()) + .toPromise(); + } + getCriticalFacilities(): CriticalFacilitiesState { return this.store.state.criticalFacilities; } @@ -403,6 +420,24 @@ export class NoahPlaygroundService { ); } + toggleWindyVisibility(): void { + const windy = { + ...this.store.state.windy, + }; + + windy.shown = !windy.shown; + this.store.patch({ windy }, `toggle windy noah visibility`); + } + + toggleWindyExpansion(): void { + const windy = { + ...this.store.state.windy, + }; + + windy.expanded = !windy.expanded; + this.store.patch({ windy }, `toggle windy noah expansion`); + } + setSensorTypeFetched(sensorType: SensorType, fetched = true): void { const sensors = { ...this.store.state.sensors, diff --git a/src/app/features/noah-playground/store/noah-playground.store.ts b/src/app/features/noah-playground/store/noah-playground.store.ts index 5522aa1e..6511596b 100644 --- a/src/app/features/noah-playground/store/noah-playground.store.ts +++ b/src/app/features/noah-playground/store/noah-playground.store.ts @@ -112,6 +112,14 @@ export type WeatherSatelliteTypesState = { 'himawari-GSMAP': WeatherSatelliteTypeState; }; +export type WindyNoah = { + shown: boolean; + expanded: boolean; +}; +export type WindyNoahTypeState = { + opacity: number; +}; + export type SensorTypeState = { fetched: boolean; shown: boolean; @@ -130,6 +138,7 @@ type NoahPlaygroundState = { 'storm-surge': StormSurgeState; criticalFacilities: CriticalFacilitiesState; weatherSatellite: WeatherSatelliteState; + windy: WindyNoah; center: { lng: number; lat: number }; currentLocation: string; sensors: SensorsState; @@ -256,6 +265,10 @@ const createInitialValue = (): NoahPlaygroundState => ({ }, center: null, currentLocation: '-----', + windy: { + shown: false, + expanded: false, + }, sensors: { shown: false, expanded: false, diff --git a/src/index.html b/src/index.html index 9779fa73..774214a1 100644 --- a/src/index.html +++ b/src/index.html @@ -26,6 +26,13 @@ href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.css" type="text/css" /> + + + +