File

components/control-panel/control-panel.component.ts

Description

Control panel with form fields to call hazard service.

Implements

OnInit OnDestroy

Metadata

Index

Properties
Methods

Constructor

constructor(service: AppService, nshmpService: NshmpService)
Parameters :
Name Type Optional
service AppService No
nshmpService NshmpService No

Methods

ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
Private onModelChange
onModelChange()
Returns : void
onSubmit
onSubmit()

On form submit.

Returns : void

Properties

formGroup
Default value : this.service.formGroup

Form field state

returnPeriodBounds
Default value : RETURN_PERIOD_BOUNDS

Max and min bounds for return periods

returnPeriods
Default value : RETURN_PERIODS

List of return periods

selectSiteData
Type : Signal<SelectSiteDialogData>
Default value : computed(() => { const usage = this.service.usage(); const nshmService = this.service.nshmService(); if (usage === null || nshmService === undefined) { return; } const services = environment.webServices.nshmpHazWs.services.curveServices; return { mapUrl: `${nshmService.url}${services.map}?raw=true`, sitesUrl: `${nshmService.url}${services.sites}?raw=true`, }; })

Data for select site component

Public service
Type : AppService
siteClasses
Default value : computed( () => this.service.usage()?.response?.model.siteClasses, )

List of site class Parameters

siteClassPlaceHolder
Default value : nshmpUtils.selectPlaceHolder()

Site class select menu holder

sourceTypes
Default value : computed(() => { const serviceResponse = this.service.serviceResponse(); if (serviceResponse === null || serviceResponse === undefined) { return [sourceTypeToCapitalCase(SourceType.TOTAL)]; } return serviceResponse.response.hazardCurves[0].data.map( data => data.component, ); })

Get available source types

Private subs
Type : Subscription[]
Default value : []
import {Component, computed, OnDestroy, OnInit, Signal} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {MatOption} from '@angular/material/core';
import {MatFormField, MatLabel} from '@angular/material/form-field';
import {MatSelect} from '@angular/material/select';
import {
  NshmpLibNgHazardLocationFormComponent,
  NshmpLibNgHazardMaxDirectionFormComponent,
  NshmpLibNgHazardModelFormComponent,
  NshmpLibNgHazardReturnPeriodFormComponent,
  NshmpLibNgHazardSiteClassFormComponent,
  NshmpLibNgHazardTruncationFormComponent,
} from '@ghsc/nshmp-lib-ng/hazard';
import {
  NshmpLibNgMapSelectSiteComponent,
  SelectSiteDialogData,
} from '@ghsc/nshmp-lib-ng/map';
import {
  NshmpLibNgControlPanelButtonsComponent,
  NshmpService,
  nshmpUtils,
  RETURN_PERIOD_BOUNDS,
  RETURN_PERIODS,
} from '@ghsc/nshmp-lib-ng/nshmp';
import {
  SourceType,
  sourceTypeToCapitalCase,
} from '@ghsc/nshmp-utils-ts/libs/nshmp-lib/model';
import {combineLatest, Subscription} from 'rxjs';

import {environment} from '../../../../../environments/environment';
import {AppService} from '../../services/app.service';

/**
 * Control panel with form fields to call hazard service.
 */
@Component({
  imports: [
    NshmpLibNgHazardModelFormComponent,
    NshmpLibNgHazardLocationFormComponent,
    NshmpLibNgMapSelectSiteComponent,
    NshmpLibNgHazardSiteClassFormComponent,
    NshmpLibNgHazardReturnPeriodFormComponent,
    NshmpLibNgHazardTruncationFormComponent,
    NshmpLibNgHazardMaxDirectionFormComponent,
    NshmpLibNgControlPanelButtonsComponent,
    MatFormField,
    MatLabel,
    MatSelect,
    MatOption,
    ReactiveFormsModule,
  ],
  selector: 'app-control-panel',
  styleUrl: './control-panel.component.scss',
  templateUrl: './control-panel.component.html',
})
export class ControlPanelComponent implements OnInit, OnDestroy {
  /** Max and min bounds for return periods */
  returnPeriodBounds = RETURN_PERIOD_BOUNDS;
  /** List of return periods */
  returnPeriods = RETURN_PERIODS;
  /** Site class select menu holder */
  siteClassPlaceHolder = nshmpUtils.selectPlaceHolder();
  /** Form field state */
  formGroup = this.service.formGroup;

  /** Data for select site component */
  selectSiteData: Signal<SelectSiteDialogData> = computed(() => {
    const usage = this.service.usage();
    const nshmService = this.service.nshmService();

    if (usage === null || nshmService === undefined) {
      return;
    }

    const services = environment.webServices.nshmpHazWs.services.curveServices;

    return {
      mapUrl: `${nshmService.url}${services.map}?raw=true`,
      sitesUrl: `${nshmService.url}${services.sites}?raw=true`,
    };
  });

  /** List of site class `Parameter`s */
  siteClasses = computed(
    () => this.service.usage()?.response?.model.siteClasses,
  );

  /** Get available source types */
  sourceTypes = computed(() => {
    const serviceResponse = this.service.serviceResponse();

    if (serviceResponse === null || serviceResponse === undefined) {
      return [sourceTypeToCapitalCase(SourceType.TOTAL)];
    }
    return serviceResponse.response.hazardCurves[0].data.map(
      data => data.component,
    );
  });

  private subs: Subscription[] = [];

  constructor(
    public service: AppService,
    private nshmpService: NshmpService,
  ) {}

  ngOnInit(): void {
    const controls = this.formGroup.controls;

    this.subs.push(
      controls.model.valueChanges.subscribe(() => this.onModelChange()),
    );

    this.subs.push(
      combineLatest([
        controls.latitude.valueChanges,
        controls.longitude.valueChanges,
        controls.vs30.valueChanges,
      ]).subscribe(() => this.service.resetState()),
    );

    this.subs.push(
      combineLatest([
        controls.returnPeriod.valueChanges,
        controls.sourceType.valueChanges,
        controls.maxDirection.valueChanges,
        controls.truncate.valueChanges,
      ]).subscribe(() => this.service.createPlots()),
    );
  }

  ngOnDestroy(): void {
    this.subs.forEach(sub => sub.unsubscribe());
  }

  /**
   * On form submit.
   */
  onSubmit(): void {
    this.service.callService();
    this.nshmpService.selectPlotControl();
  }

  private onModelChange(): void {
    const {latitude, longitude} = this.formGroup.getRawValue();
    const latitudeBounds = this.service.usage().response.latitude;
    const longitudeBounds = this.service.usage().response.longitude;

    if (
      !(
        latitude >= latitudeBounds.min &&
        latitude <= latitudeBounds.max &&
        longitude >= longitudeBounds.min &&
        longitude <= longitudeBounds.max
      )
    ) {
      this.formGroup.patchValue({
        latitude: NaN,
        longitude: NaN,
      });
    }

    this.formGroup.controls.latitude.markAsPristine();
    this.formGroup.controls.longitude.markAsPristine();
    this.service.resetState();
  }
}
<!-- Control Panel -->
<form
  class="height-full overflow-auto"
  [formGroup]="formGroup"
  (submit)="onSubmit()"
>
  <!-- Model -->
  <nshmp-lib-ng-hazard-model-form
    [modelControl]="formGroup.controls.model"
    [models]="service.availableModels()"
  />

  @if (service.usage()) {
    <!-- Latitude -->
    <nshmp-lib-ng-hazard-location-form
      class="latitude-input"
      [locationControl]="formGroup.controls.latitude"
      label="Latitude"
      [bounds]="service.usage()?.response?.latitude"
    />

    <!-- Longitude -->
    <nshmp-lib-ng-hazard-location-form
      class="longitude-input"
      [locationControl]="formGroup.controls.longitude"
      label="Longitude"
      [bounds]="service.usage()?.response?.longitude"
    />
  }

  <!-- Select site -->
  <nshmp-lib-ng-map-select-site
    [data]="selectSiteData()"
    (siteSelect)="service.setLocation($event)"
  />

  <!-- Site Class -->
  <div class="grid-row grid-gap-sm">
    <!-- Site classes -->
    @if (siteClasses()) {
      <nshmp-lib-ng-hazard-site-class-form
        [siteClassControl]="formGroup.controls.siteClass"
        [siteClasses]="siteClasses()"
        [modelControl]="formGroup.controls.model"
        [vs30Control]="formGroup.controls.vs30"
        [vs30Bounds]="service.usage()?.response.vs30"
      />
    }
  </div>

  <!-- Return Period Controls -->
  <nshmp-lib-ng-hazard-return-period-form
    [returnPeriodControl]="formGroup.controls.returnPeriod"
    [commonReturnPeriodControl]="formGroup.controls.commonReturnPeriods"
  />

  <!-- Source Type Control -->
  <mat-form-field class="grid-col-12 source-type-select">
    <mat-label>Source Type</mat-label>
    <mat-select [formControl]="formGroup.controls.sourceType">
      @for (sourceType of sourceTypes(); track sourceType) {
        <mat-option [value]="sourceType">
          {{ sourceType }}
        </mat-option>
      }
    </mat-select>
  </mat-form-field>

  <!-- Truncation -->
  <nshmp-lib-ng-hazard-truncation-form
    [truncationControl]="formGroup.controls.truncate"
  />

  <!-- Max Direction -->
  <nshmp-lib-ng-hazard-max-direction-form
    [maxDirectionControl]="formGroup.controls.maxDirection"
  />

  <nshmp-lib-ng-control-panel-buttons
    [plotDisabled]="formGroup.invalid"
    [serviceCallInfo]="service.serviceCallInfo()"
    [resetDisabled]="formGroup.pristine"
    (resetClick)="service.resetControlPanel()"
  />
</form>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""