components/control-panel/control-panel.component.ts
Control panel with form fields to call hazard service.
OnInit
OnDestroy
selector | app-control-panel |
imports |
NshmpLibNgHazardModelFormComponent
NshmpLibNgHazardLocationFormComponent
NshmpLibNgMapSelectSiteComponent
NshmpLibNgHazardSiteClassFormComponent
NshmpLibNgHazardReturnPeriodFormComponent
NshmpLibNgHazardTruncationFormComponent
NshmpLibNgHazardMaxDirectionFormComponent
NshmpLibNgControlPanelButtonsComponent
MatFormField
MatLabel
MatSelect
MatOption
ReactiveFormsModule
|
templateUrl | ./control-panel.component.html |
styleUrl | ./control-panel.component.scss |
Properties |
Methods |
|
constructor(service: AppService, nshmpService: NshmpService)
|
|||||||||
Parameters :
|
ngOnDestroy |
ngOnDestroy()
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
Private onModelChange |
onModelChange()
|
Returns :
void
|
onSubmit |
onSubmit()
|
On form submit.
Returns :
void
|
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 |
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 |
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>