File
Description
Summary of parameters entered, form field values to call service.
|
disaggData
|
Default value : this.service.disaggData
|
|
|
Disaggregation response data stat
|
|
DisaggTarget
|
Default value : DisaggTarget
|
|
|
Disaggregation target enum
|
|
imts
|
Default value : computed(() => this.service.usage()?.response.model.imts ?? [])
|
|
|
|
|
|
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)
|
|
|
|
siteClasses
|
Default value : computed(() => {
const usage = this.service.usage();
if (!usage) {
return [];
}
return hazardUtils.siteClassesToParameters(usage.response.model.siteClasses);
})
|
|
|
The site classes as Parameters
|
|
toDisplay
|
Default value : nshmpUtils.parameterToDisplay
|
|
|
Function to get display from a Parameter
|
|
values$
|
Default value : this.service.formGroup.valueChanges
|
|
|
import {AsyncPipe} from '@angular/common';
import {ChangeDetectionStrategy, Component, computed, inject} from '@angular/core';
import {MatDivider} from '@angular/material/divider';
import {MatList, MatListItem} from '@angular/material/list';
import {DisaggTarget, 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({
changeDetection: ChangeDetectionStrategy.OnPush,
host: {id: 'hazard-disagg-parameter-summary'},
imports: [AsyncPipe, MatDivider, MatList, MatListItem],
selector: 'app-parameter-summary',
styleUrl: './parameter-summary.component.scss',
templateUrl: './parameter-summary.component.html',
})
export class ParameterSummaryComponent {
service = inject(AppService);
/** Disaggregation target enum */
DisaggTarget = DisaggTarget;
Number = Number;
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;
/** Disaggregation response data stat */
disaggData = this.service.disaggData;
values$ = this.service.formGroup.valueChanges;
/** Usage IMTs */
imts = computed(() => this.service.usage()?.response.model.imts ?? []);
/** The site classes as `Parameter`s */
siteClasses = computed(() => {
const usage = this.service.usage();
if (!usage) {
return [];
}
return hazardUtils.siteClassesToParameters(usage.response.model.siteClasses);
});
}
<mat-divider />
<div class="grid-row parameter-summary">
@let values = values$ | async;
<div class="grid-col-12 tablet:grid-col-6 print-flex-basis-half">
<mat-list class="parameter-list">
<mat-list-item>
<span class="parameter">Model</span>:
@let model = values?.model;
@if (model) {
{{ toDisplay(model, service.availableModels()) }}
}
</mat-list-item>
<mat-list-item>
<span class="parameter">Latitude</span>:
@if (!isNaN(values?.latitude)) {
{{ values?.latitude }}
}
°
</mat-list-item>
<mat-list-item>
<span class="parameter">Longitude</span>:
@if (!isNaN(values?.longitude)) {
{{ values?.longitude }}
}
°
</mat-list-item>
<mat-list-item>
@if (values?.siteClass !== selectPlaceHolder.value) {
<span class="parameter">Site Class</span>:
@let siteClass = values?.siteClass;
@if (siteClass) {
{{ toDisplay(siteClass, siteClasses()) }}
}
} @else {
<span class="parameter">Vs30</span>: {{ values?.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">Intensity Measure Type</span>:
@let imt = values?.imt;
@if (imt) {
{{ toDisplay(imt, imts()) }}
}
</mat-list-item>
@if (values?.disaggTarget === DisaggTarget.RETURN_PERIOD) {
<mat-list-item>
<span class="parameter">Return Period</span>:
@let returnPeriod = values?.returnPeriod;
@if (
values?.commonReturnPeriods !== Number.parseInt(selectPlaceHolder.value) && returnPeriod
) {
{{ returnPeriodName[returnPeriod] }}
} @else {
{{ returnPeriod }} yr
}
</mat-list-item>
} @else {
<mat-list-item>
<span class="parameter">Intensity Measure Level</span>: {{ values?.iml }} g
</mat-list-item>
<mat-list-item>
<span class="parameter">Max Direction</span>:
{{ values?.maxDirection === true ? 'On' : 'Off' }}
</mat-list-item>
}
<mat-list-item>
<span class="parameter">Component</span>:
{{ values?.disaggComponent }}
</mat-list-item>
</mat-list>
</div>
</div>
Legend
Html element with directive