components/site-parameters/site-parameters.component.ts
Control panel form fields for GMM site parameters.
OnInit
OnDestroy
| selector | app-site-parameters |
| imports |
NshmpLibNgGmmMultiSelectComponent
MatLabel
MatFormField
MatInput
MatError
AsyncPipe
ReactiveFormsModule
|
| templateUrl | ./site-parameters.component.html |
| styleUrl | ./site-parameters.component.scss |
Properties |
Methods |
constructor(service: AppService)
|
||||||
|
Parameters :
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| controls |
Default value : this.service.formGroup.controls
|
|
Form controls state |
| form |
Default value : this.service.formGroup
|
|
Control panel form field state |
| parameters |
Default value : computed(() => this.service.usage()?.response.parameters)
|
|
Usage parameters |
| Private valueSubscription |
Default value : new Subscription()
|
| vs30CommonValues |
Default value : VS30_COMMON_VALUES
|
|
Common vs30 values |
import {AsyncPipe} from '@angular/common';
import {Component, computed, OnDestroy, OnInit} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {MatError, MatFormField, MatLabel} from '@angular/material/form-field';
import {MatInput} from '@angular/material/input';
import {
GmmFormControlIds,
NshmpLibNgGmmMultiSelectComponent,
VS30_COMMON_VALUES,
} from '@ghsc/nshmp-lib-ng/gmm';
import {combineLatest, Subscription} from 'rxjs';
import {map} from 'rxjs/operators';
import {AppService} from '../../services/app.service';
/**
* Control panel form fields for GMM site parameters.
*/
@Component({
imports: [
NshmpLibNgGmmMultiSelectComponent,
MatLabel,
MatFormField,
MatInput,
MatError,
AsyncPipe,
ReactiveFormsModule,
],
selector: 'app-site-parameters',
styleUrl: './site-parameters.component.scss',
templateUrl: './site-parameters.component.html',
})
export class SiteParametersComponent implements OnInit, OnDestroy {
/** Common vs30 values */
vs30CommonValues = VS30_COMMON_VALUES;
/** Form controls state */
controls = this.service.formGroup.controls;
/** Control panel form field state */
form = this.service.formGroup;
/** Usage parameters */
parameters = computed(() => this.service.usage()?.response.parameters);
/** Whether Vs30 is multi-selectable */
vs30Multiple$ = this.controls.multiSelectableParam.valueChanges.pipe(
map(
multiSelectableParam =>
multiSelectableParam.toString() === GmmFormControlIds.VS30.toString(),
),
);
private valueSubscription = new Subscription();
constructor(private service: AppService) {}
ngOnInit(): void {
this.valueSubscription = combineLatest([
this.controls.vs30Multi.valueChanges,
this.controls.vs30.valueChanges,
this.controls.z1p0.valueChanges,
this.controls.z2p5.valueChanges,
this.controls.zSed.valueChanges,
]).subscribe(() => this.service.resetState());
}
ngOnDestroy(): void {
this.valueSubscription.unsubscribe();
}
}
<!-- Site & Basin-->
<div class="settings-subsection control-panel">
<mat-label class="settings-subsection--label">Site & Basin</mat-label>
<div class="settings-subsection--section grid-row grid-gap-sm">
<!-- Site & Basin: Vs30 input -->
<nshmp-lib-ng-gmm-multi-select
class="grid-col-12 vs30-input"
label="V<sub>s30</sub> (<sup>m</sup>/<sub>s</sub>)"
[multiple]="vs30Multiple$ | async"
[numberControl]="controls?.vs30"
[parameter]="parameters()?.vs30"
placeholder="Select values..."
[selectControl]="controls.vs30Multi"
[selectOptions]="vs30CommonValues"
/>
<!-- Site & Basin: Z 1.0 input -->
<mat-form-field class="grid-col-4 z1p0-input">
<mat-label>Z<sub>1.0</sub> (km)</mat-label>
<input
matInput
[max]="parameters()?.z1p0?.max"
[min]="parameters()?.z1p0?.min"
[formControl]="controls.z1p0"
step="1.0"
type="number"
/>
<mat-error>
[
{{ parameters()?.z1p0?.min }},
{{ parameters()?.z1p0?.max }}
]
</mat-error>
</mat-form-field>
<!-- Site & Basin: Z 2.5 input -->
<mat-form-field class="grid-col-4 z2p5-input">
<mat-label>Z<sub>2.5</sub> (km)</mat-label>
<input
matInput
[max]="parameters()?.z2p5?.max"
[min]="parameters()?.z2p5?.min"
[formControl]="controls?.z2p5"
step="1.0"
type="number"
/>
<mat-error>
[
{{ parameters()?.z2p5?.min }},
{{ parameters()?.z2p5?.max }}
]
</mat-error>
</mat-form-field>
<!-- Site & Basin: zSed input -->
<mat-form-field class="grid-col-4 zsed-input">
<mat-label>Z<sub>SED</sub> (km)</mat-label>
<input
matInput
[max]="parameters()?.zSed?.max"
[min]="parameters()?.zSed?.min"
[formControl]="controls.zSed"
step="1.0"
type="number"
/>
<mat-error>
[
{{ parameters()?.zSed?.min }},
{{ parameters()?.zSed?.max }}
]
</mat-error>
</mat-form-field>
</div>
</div>