components/event-parameters/event-parameters.component.ts
Control panel form fields for GMM event parameters.
OnInit
OnDestroy
| selector | app-event-parameters |
| imports |
MatLabel
MatFormField
MatInput
MatError
ReactiveFormsModule
|
| templateUrl | ./event-parameters.component.html |
| styleUrl | ./event-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()
|
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 event parameters.
*/
@Component({
imports: [MatLabel, MatFormField, MatInput, MatError, ReactiveFormsModule],
selector: 'app-event-parameters',
styleUrl: './event-parameters.component.scss',
templateUrl: './event-parameters.component.html',
})
export class EventParametersComponent implements OnInit, OnDestroy {
/** 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);
private valueSubscription = new Subscription();
constructor(private service: AppService) {}
ngOnInit(): void {
this.valueSubscription = combineLatest([
this.controls.mMax.valueChanges,
this.controls.mMin.valueChanges,
this.controls.step.valueChanges,
]).subscribe(() => this.service.resetState());
}
ngOnDestroy(): void {
this.valueSubscription.unsubscribe();
}
}
<!-- Event parameters -->
<div class="settings-subsection control-panel">
<mat-label class="settings-subsection--label">Event Parameters</mat-label>
<div class="settings-subsection--section grid-row grid-gap-sm">
<!-- Event parameters: mMin input -->
<mat-form-field class="grid-col-4 mmin-input">
<mat-label>Minimum Mw</mat-label>
<input
matInput
[max]="parameters()?.mMin?.max"
[min]="parameters()?.mMin?.min"
[formControl]="controls.mMin"
step="0.1"
type="number"
/>
<mat-error>
[
{{ parameters()?.mMin?.min }},
{{ parameters()?.mMin?.max }}
]
</mat-error>
</mat-form-field>
<!-- Event parameters: mMax input -->
<mat-form-field class="grid-col-4 mmax-input">
<mat-label>Maximum Mw</mat-label>
<input
matInput
[max]="parameters()?.mMax?.max"
[min]="parameters()?.mMax?.min"
[formControl]="controls.mMax"
step="0.1"
type="number"
/>
<mat-error>
[
{{ parameters()?.mMax?.min }},
{{ parameters()?.mMax?.max }}
]
</mat-error>
</mat-form-field>
<!-- Event parameters: Step input -->
<mat-form-field class="grid-col-4 mstep-input">
<mat-label>Mw Step</mat-label>
<input
matInput
[max]="parameters()?.step?.max"
[min]="parameters()?.step?.min"
[formControl]="controls.step"
step="0.1"
type="number"
/>
<mat-error>
[
{{ parameters()?.step?.min }},
{{ parameters()?.step?.max }}
]
</mat-error>
</mat-form-field>
</div>
</div>