components/parameter-summary/parameter-summary.component.ts
Summary of parameters entered, form field values to call service.
| selector | app-parameter-summary |
| imports |
MatList
MatListItem
|
| templateUrl | ./parameter-summary.component.html |
| styleUrl | ./parameter-summary.component.scss |
Properties |
| formGroup |
Default value : this.service.formGroup
|
|
Form field state |
| isNaN |
Default value : Number.isNaN
|
| Number |
Default value : Number
|
| returnPeriodName |
Default value : returnPeriodAltName
|
|
Return period value to name map |
| selectPlaceHolder |
Default value : nshmpUtils.selectPlaceHolder()
|
|
Place holder for select menus |
| service |
Default value : inject(AppService)
|
| toDisplay |
Default value : nshmpUtils.parameterToDisplay
|
|
Function to get display from a |
import {Component, computed, inject} from '@angular/core';
import {MatList, MatListItem} from '@angular/material/list';
import {hazardUtils} from '@ghsc/nshmp-lib-ng/hazard';
import {nshmpUtils, returnPeriodAltName} from '@ghsc/nshmp-lib-ng/nshmp';
import {AppService} from '../../services/app.service';
/**
* Summary of parameters entered, form field values to call service.
*/
@Component({
imports: [MatList, MatListItem],
selector: 'app-parameter-summary',
styleUrl: './parameter-summary.component.scss',
templateUrl: './parameter-summary.component.html',
})
export class ParameterSummaryComponent {
service = inject(AppService);
isNaN = Number.isNaN;
/** Return period value to name map */
returnPeriodName = returnPeriodAltName;
/** Place holder for select menus */
selectPlaceHolder = nshmpUtils.selectPlaceHolder();
/** Function to get display from a `Parameter` */
toDisplay = nshmpUtils.parameterToDisplay;
/** Form field state */
formGroup = this.service.formGroup;
/** Site classes from usage as `Parameter`s */
siteClasses = computed(() => {
const usage = this.service.usage();
if (usage === undefined || usage === null) {
return [];
}
return hazardUtils.siteClassesToParameters(usage.response.model.siteClasses);
});
Number = Number;
}
<div class="grid-row parameter-summary">
<div class="grid-col-12 tablet:grid-col-6">
<mat-list class="parameter-list">
<mat-list-item>
<span class="parameter">Model</span>:
{{ toDisplay(formGroup.value.model, service.availableModels()) }}
</mat-list-item>
<mat-list-item>
<span class="parameter">Latitude</span>:
@if (!isNaN(formGroup.value.latitude)) {
{{ formGroup.value.latitude }}
}
°
</mat-list-item>
<mat-list-item>
<span class="parameter">Longitude</span>:
@if (!isNaN(formGroup.value.longitude)) {
{{ formGroup.value.longitude }}
}
°
</mat-list-item>
<mat-list-item>
@if (formGroup.value.siteClass !== selectPlaceHolder.value) {
<span class="parameter">Site Class</span>:
{{ toDisplay(formGroup.value.siteClass, siteClasses()) }}
} @else {
<span class="parameter">Vs30</span>: {{ formGroup.value.vs30 }} m/s
}
</mat-list-item>
</mat-list>
</div>
<div class="grid-col-12 tablet:grid-col-6 print-flex-basis-half">
<mat-list class="parameter-list">
<mat-list-item>
<span class="parameter">Return Period</span>:
@if (formGroup.value.commonReturnPeriods !== Number.parseInt(selectPlaceHolder.value)) {
{{ returnPeriodName[formGroup.value.returnPeriod] }}
} @else {
{{ formGroup.value.returnPeriod }} yr
}
</mat-list-item>
<mat-list-item>
<span class="parameter">Source Type</span>:
{{ formGroup.value.sourceType }}
</mat-list-item>
<mat-list-item>
<span class="parameter">Truncate</span>:
{{ formGroup.value.truncate === true ? 'On' : 'Off' }}
</mat-list-item>
<mat-list-item>
<span class="parameter">Max Direction</span>:
{{ formGroup.value.maxDirection === true ? 'On' : 'Off' }}
</mat-list-item>
</mat-list>
</div>
</div>