components/control-panel/control-panel.component.ts
Control panel with form fields to call dynamic hazard services.
OnInit
selector | app-control-panel |
imports |
MatFormField
MatLabel
MatSelect
MatOption
NshmpHazardModelFormComponent
NshmpHazardLocationFormComponent
NshmpMapSelectSiteComponent
NshmpHazardSiteClassFormComponent
NshmpHazardReturnPeriodFormComponent
NshmpHazardTruncationFormComponent
NshmpHazardMaxDirectionFormComponent
NshmpControlPanelButtonsComponent
NshmpSectionComponent
ReactiveFormsModule
|
templateUrl | ./control-panel.component.html |
styleUrl | ./control-panel.component.scss |
Properties |
Methods |
|
constructor(service: AppService, nshmpService: NshmpService, destroyRef: DestroyRef)
|
||||||||||||
Parameters :
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
Private onModelCompare | ||||||
onModelCompare(modelCompare: NshmId)
|
||||||
Parameters :
Returns :
void
|
onSubmit |
onSubmit()
|
On form submit.
Returns :
void
|
formGroup |
Default value : this.service.formGroup
|
Form field state |
imts |
Default value : computed(() => this.service.usage()?.response?.model?.imts)
|
List of available IMTs |
returnPeriodBounds |
Default value : RETURN_PERIOD_BOUNDS
|
Max and min bounds for return periods |
returnPeriods |
Default value : RETURN_PERIODS
|
List of return periods |
Public service |
Type : AppService
|
siteClasses |
Default value : computed(() => this.service.usage()?.response?.model.siteClasses)
|
List of site class |
siteClassPlaceHolder |
Default value : nshmpUtils.selectPlaceHolder()
|
Site class select menu holder |
import {Component, computed, DestroyRef, OnInit, Signal} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
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 {
NshmpHazardLocationFormComponent,
NshmpHazardMaxDirectionFormComponent,
NshmpHazardModelFormComponent,
NshmpHazardReturnPeriodFormComponent,
NshmpHazardSiteClassFormComponent,
NshmpHazardTruncationFormComponent,
} from '@ghsc/nshmp-lib-ng/hazard';
import {NshmpMapSelectSiteComponent, SelectSiteDialogData} from '@ghsc/nshmp-lib-ng/map';
import {
NshmpControlPanelButtonsComponent,
NshmpSectionComponent,
NshmpService,
nshmpUtils,
RETURN_PERIOD_BOUNDS,
RETURN_PERIODS,
} from '@ghsc/nshmp-lib-ng/nshmp';
import {NshmId} from '@ghsc/nshmp-utils-ts/libs/nshmp-lib/nshm';
import {environment} from 'projects/nshmp-apps/src/environments/environment';
import {combineLatest} from 'rxjs';
import {AppService} from '../../services/app.service';
/**
* Control panel with form fields to call dynamic hazard services.
*/
@Component({
imports: [
MatFormField,
MatLabel,
MatSelect,
MatOption,
NshmpHazardModelFormComponent,
NshmpHazardLocationFormComponent,
NshmpMapSelectSiteComponent,
NshmpHazardSiteClassFormComponent,
NshmpHazardReturnPeriodFormComponent,
NshmpHazardTruncationFormComponent,
NshmpHazardMaxDirectionFormComponent,
NshmpControlPanelButtonsComponent,
NshmpSectionComponent,
ReactiveFormsModule,
],
selector: 'app-control-panel',
styleUrl: './control-panel.component.scss',
templateUrl: './control-panel.component.html',
})
export class ControlPanelComponent implements OnInit {
/** 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;
/** List of available IMTs */
imts = computed(() => this.service.usage()?.response?.model?.imts);
/** 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 {
faultSectionsUrl: `${nshmService.url}${services.features}?featureType=FAULT&polygons=false&raw=true`,
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);
constructor(
public service: AppService,
private nshmpService: NshmpService,
private destroyRef: DestroyRef,
) {}
ngOnInit(): void {
const controls = this.formGroup.controls;
controls.model.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
this.service.onModelChange();
});
controls.modelCompare.valueChanges
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe(modelCompare => this.onModelCompare(modelCompare));
controls.imt.valueChanges
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe(() => this.service.createPlots());
controls.maxDirection.valueChanges.subscribe(() => this.service.createPlots());
controls.returnPeriod.valueChanges
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe(() => this.service.createPlots());
controls.truncate.valueChanges
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe(() => this.service.createPlots());
controls.vs30.valueChanges
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe(() => this.service.resetState());
combineLatest([controls.latitude.valueChanges, controls.longitude.valueChanges])
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe(() => {
this.service.resetState();
const values = this.formGroup.getRawValue();
if (values.latitude && values.longitude) {
this.selectSiteData().site = {
latitude: values.latitude,
longitude: values.longitude,
};
}
});
}
/**
* On form submit.
*/
onSubmit(): void {
this.service.callService();
this.nshmpService.selectPlotControl();
}
private onModelCompare(modelCompare: NshmId): void {
if (modelCompare === null) {
this.service.onModelChange();
} else {
const usages = [this.service.usageModelA(), this.service.usageModelB()];
this.service.updateState({
combinedUsage: this.service.combineUsages(usages),
});
}
}
}
<!-- Control Panel -->
<form class="height-full overflow-auto" [formGroup]="formGroup" (submit)="onSubmit()">
<!-- Model -->
<nshmp-hazard-model-form
[modelControl]="formGroup.controls.model"
[models]="service.availableModels()"
/>
<!-- Model Compare -->
<nshmp-hazard-model-form
[modelControl]="formGroup.controls.modelCompare"
[models]="service.comparableModels()"
label="Model Compare"
placeHolderText="--- Select a Different Model ---"
class="model-compare"
/>
<!-- Latitude -->
<nshmp-hazard-location-form
class="latitude-input"
[locationControl]="formGroup.controls.latitude"
[modelControl]="formGroup.controls.model"
label="Latitude"
[bounds]="service.usage()?.response.latitude"
/>
<!-- Longitude -->
<nshmp-hazard-location-form
class="longitude-input"
[locationControl]="formGroup.controls.longitude"
[modelControl]="formGroup.controls.model"
label="Longitude"
[bounds]="service.usage()?.response.longitude"
/>
<!-- Select site -->
<nshmp-map-select-site [data]="selectSiteData()" (siteSelect)="service.setLocation($event)" />
<!-- Imt -->
<mat-form-field class="grid-col-12">
<mat-label>
Intensity Measure Type
<span class="form-required">*</span>
</mat-label>
<mat-select [formControl]="formGroup.controls.imt">
@for (imt of imts(); track imt) {
<mat-option [value]="imt.value">
{{ imt.display }}
</mat-option>
}
</mat-select>
</mat-form-field>
<!-- Site Class -->
<div class="grid-row grid-gap-1">
<!-- Site classes -->
<nshmp-hazard-site-class-form
[siteClassControl]="formGroup.controls.siteClass"
[siteClasses]="siteClasses()"
[modelControl]="formGroup.controls.model"
[vs30Control]="formGroup.controls.vs30"
[vs30Bounds]="service.usage()?.response.vs30"
/>
</div>
<nshmp-section label="Plot Options">
<!-- Return Period Controls -->
<nshmp-hazard-return-period-form
[returnPeriodControl]="formGroup.controls.returnPeriod"
[commonReturnPeriodControl]="formGroup.controls.commonReturnPeriods"
/>
<!-- Truncation -->
<nshmp-hazard-truncation-form [truncationControl]="formGroup.controls.truncate" />
<!-- Max Direction -->
<nshmp-hazard-max-direction-form [maxDirectionControl]="formGroup.controls.maxDirection" />
</nshmp-section>
<nshmp-control-panel-buttons
[plotDisabled]="formGroup.invalid"
[serviceCallInfo]="service.serviceCallInfo()"
[resetDisabled]="formGroup.pristine"
(resetClick)="service.resetControlPanel()"
/>
</form>