components/source-parameters/source-parameters.component.ts
Control panel form fields for GMM source parameters.
OnInit
| selector | app-source-parameters |
| imports |
MatLabel
MatFormField
MatInput
MatError
ReactiveFormsModule
NshmpSectionComponent
|
| templateUrl | ./source-parameters.component.html |
| styleUrl | ./source-parameters.component.scss |
Properties |
|
Methods |
constructor(service: AppService, destroyRef: DestroyRef)
|
|||||||||
|
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| Private controls |
Default value : this.form.controls
|
| form |
Default value : this.service.formGroup
|
|
Control panel form field state |
| parameters |
Default value : computed(() => this.service.usage()?.response?.parameters)
|
|
Usage parameters |
import {Component, computed, DestroyRef, OnInit} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {ReactiveFormsModule} from '@angular/forms';
import {MatError, MatFormField, MatLabel} from '@angular/material/form-field';
import {MatInput} from '@angular/material/input';
import {NshmpSectionComponent} from '@ghsc/nshmp-lib-ng/nshmp';
import {combineLatest} from 'rxjs';
import {AppService} from '../../services/app.service';
/**
* Control panel form fields for GMM source parameters.
*/
@Component({
imports: [MatLabel, MatFormField, MatInput, MatError, ReactiveFormsModule, NshmpSectionComponent],
selector: 'app-source-parameters',
styleUrl: './source-parameters.component.scss',
templateUrl: './source-parameters.component.html',
})
export class SourceParametersComponent implements OnInit {
/** Control panel form field state */
form = this.service.formGroup;
/** Usage parameters */
parameters = computed(() => this.service.usage()?.response?.parameters);
private controls = this.form.controls;
constructor(
private service: AppService,
private destroyRef: DestroyRef,
) {}
ngOnInit(): void {
combineLatest([
this.controls.dip.valueChanges,
this.controls.width.valueChanges,
this.controls.zTor.valueChanges,
])
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe(() => {
this.service.resetState();
this.service.calcHypocenterDepth(this.form);
});
}
}
<!-- Source Parameters -->
<nshmp-section label="Source Geometry">
<div class="grid-row grid-gap-05">
<!-- Source Parameters: zTor input -->
<mat-form-field class="grid-col-4 ztor-input">
<mat-label>
Z<sub>TOR</sub> (km)
<span class="form-required">*</span>
</mat-label>
<input
matInput
[max]="parameters()?.zTor?.max"
[min]="parameters()?.zTor?.min"
[formControl]="form.controls.zTor"
step="0.5"
type="number"
/>
<mat-error>
[
{{ parameters()?.zTor?.min }},
{{ parameters()?.zTor?.max }}
]
</mat-error>
</mat-form-field>
<!-- Source Parameters: Dip input -->
<mat-form-field class="grid-col-4 dip-input">
<mat-label>
Dip (°)
<span class="form-required">*</span>
</mat-label>
<input
matInput
[max]="parameters()?.dip?.max"
[min]="parameters()?.dip?.min"
[formControl]="form.controls.dip"
step="5"
type="number"
/>
<mat-error>
[
{{ parameters()?.dip?.min }},
{{ parameters()?.dip?.max }}
]
</mat-error>
</mat-form-field>
<!-- Source Parameters: Width input -->
<mat-form-field class="grid-col-4 width-input">
<mat-label>
Width (km)
<span class="form-required">*</span>
</mat-label>
<input
matInput
[max]="parameters()?.width?.max"
[min]="parameters()?.width?.min"
[formControl]="form.controls.width"
step="1"
type="number"
/>
<mat-error>
[
{{ parameters()?.width?.min }},
{{ parameters()?.width?.max }}
]
</mat-error>
</mat-form-field>
</div>
</nshmp-section>