draft: wip(studio): display windy

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<number>;
 // hazardShown$: Observable<boolean>;
-
 @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: {

src/app/features/noah-playground/components/windy-playground/windy-playground.component.html

@@ -0,0 +1,77 @@
+<div
+  class="
+    flex flex-col
+    p-5
+    w-full
+    bg-sidebar
+    shadow-md
+    hover:shodow-lg
+    rounded-lg
+    mt-6
+  "
+>
+  <div
+    (click)="toggleExpanded()"
+    class="select-none flex items-center justify-between cursor-pointer"
+  >
+    <div class="flex items-center">
+      <label class="inline-flex items-center checkbox">
+        <input
+          type="checkbox"
+          class="checkbox h-5 w-5 text-blue-600"
+          [checked]="shown$ | async"
+          (click)="toggleShown($event)"
+        />
+      </label>
+      <div class="flex flex-col ml-3">
+        <div class="text-xl leading-none font-bold">Windy</div>
+      </div>
+    </div>
+    <div class="cursor-pointer">
+      <button
+        class="
+          w-6
+          h-6
+          focus:outline-none
+          flex
+          items-center
+          justify-center
+          rounded-full
+        "
+      >
+        <svg
+          [ngClass]="(expanded$ | async) ? ' hidden ' : ' '"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 1000 1000"
+          width="18"
+          height="12"
+        >
+          <path
+            d="M283.7 10l-58.4 58.4L656 500 225.3 931.6l58.4 58.4 491-490-491-490z"
+          />
+        </svg>
+        <svg
+          [ngClass]="(expanded$ | async) ? ' ' : ' hidden '"
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 18 12"
+          fill="none"
+        >
+          <path
+            d="M9.00002 4.73399L2.40001 11.334L0.514683 9.44865L9.00002 0.963319L17.4854 9.44865L15.6 11.334L9.00002 4.73399Z"
+            fill="#4A5568"
+          ></path>
+        </svg>
+      </button>
+    </div>
+  </div>
+  <div [ngClass]="(expanded$ | async) ? ' pt-5 ' : ' hidden '">
+    <hr class="pb-4" />
+    <div class="pl-6">
+      <div class="items-center">
+        <noah-windy></noah-windy>
+      </div>
+    </div>
+  </div>
+</div>

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<WindyPlaygroundComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [WindyPlaygroundComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WindyPlaygroundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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<boolean>;
+  shown$: Observable<boolean>;
+
+  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();
+  }
+}

src/app/features/noah-playground/components/windy/windy.component.html

@@ -0,0 +1,7 @@
+<div class="pl-6">
+  <div class="flex items-center">
+    <div class="inline-flex items-center radio">
+      <span class="pl-2"> Windy Noah </span>
+    </div>
+  </div>
+</div>

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<WindyComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [WindyComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WindyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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<boolean>;
+  shown$: Observable<boolean>;
+
+  constructor(private pgService: NoahPlaygroundService) {}
+
+  ngOnInit(): void {}
+}

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,

src/app/features/noah-playground/pages/noah-playground/noah-playground.component.html

@@ -309,6 +309,7 @@
       ></noah-weather-satellite-playground>
       <noah-contour-maps></noah-contour-maps>
       <noah-sensors-group></noah-sensors-group>
+      <noah-windy-playground></noah-windy-playground>
     </div>
   </nav>
   <!-- //Customizing Mapbox attribution -->

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

@@ -71,6 +71,14 @@ export class NoahPlaygroundService {
     );
   }
 
+  get windyShown$(): Observable<boolean> {
+    return this.store.state$.pipe(map((state) => state.windy.shown));
+  }
+
+  get windyExpanded$(): Observable<boolean> {
+    return this.store.state$.pipe(map((state) => state.windy.expanded));
+  }
+
   get selectedWeatherSatellite$(): Observable<WeatherSatelliteType> {
     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,

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,

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"
     />
+    <!-- Windy Script -->
+    <script src="https://upri-noah.s3.ap-southeast-1.amazonaws.com/wind_map/windy.js"></script>
+    <script src="https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.js"></script>
+    <link
+      href="https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css"
+      rel="stylesheet"
+    />
   </head>
 
   <body>