components/source-parameters/source-parameters.component.ts
Control panel form fields for GMM source parameters.
OnInit
OnDestroy
| selector | app-source-parameters |
| imports |
MatLabel
MatFormField
MatInput
MatError
ReactiveFormsModule
|
| templateUrl | ./source-parameters.component.html |
| styleUrl | ./source-parameters.component.scss |
Properties |
|
Methods |
constructor(service: AppService)
|
||||||
|
Parameters :
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| 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 |
| Private valueSubscription |
Default value : new Subscription()
|
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 {combineLatest, Subscription} from 'rxjs';
import {AppService} from '../../services/app.service';
/**
* Control panel form fields for GMM source parameters.
*/
@Component({
imports: [MatLabel, MatFormField, MatInput, MatError, ReactiveFormsModule],
selector: 'app-source-parameters',
styleUrl: './source-parameters.component.scss',
templateUrl: './source-parameters.component.html',
})
export class SourceParametersComponent implements OnInit, OnDestroy {
/** Control panel form field state */
form = this.service.formGroup;
/** Usage parameters */
parameters = computed(() => this.service.usage()?.response?.parameters);
private controls = this.form.controls;
private valueSubscription = new Subscription();
constructor(private service: AppService) {}
ngOnInit(): void {
combineLatest([
this.controls.dip.valueChanges,
this.controls.width.valueChanges,
this.controls.zTor.valueChanges,
]).subscribe(() => {
this.service.resetState();
this.service.calcHypocenterDepth(this.form);
});
}
ngOnDestroy(): void {
this.valueSubscription.unsubscribe();
}
}
<!-- Source Parameters -->
<div class="settings-subsection control-panel">
<mat-label class="settings-subsection--label">Source Geometry</mat-label>
<div class="settings-subsection--section grid-row grid-gap-sm">
<!-- Source Parameters: zTor input -->
<mat-form-field class="grid-col-4 ztor-input">
<mat-label>Z<sub>TOR</sub> (km)</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 (°)</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)</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>
</div>