diff --git a/projects/nshmp-apps/src/app/dev/gmm/hanging-wall-effects/components/parameter-summary/parameter-summary.component.html b/projects/nshmp-apps/src/app/dev/gmm/hanging-wall-effects/components/parameter-summary/parameter-summary.component.html index 721416a257b65769b7b0bf16d694b7a5b9ec4242..7478650f282308cce72a66a5436821122a657d90 100644 --- a/projects/nshmp-apps/src/app/dev/gmm/hanging-wall-effects/components/parameter-summary/parameter-summary.component.html +++ b/projects/nshmp-apps/src/app/dev/gmm/hanging-wall-effects/components/parameter-summary/parameter-summary.component.html @@ -1,104 +1,102 @@ -@if (form$ | async; as form) { - <div class="grid-row parameter-summary"> - <div class="grid-col-12 tablet-lg:grid-col-6"> - <mat-list class="parameter-list"> - <mat-list-item> - <span class="parameter">Ground Motion Models</span>: +<div class="grid-row parameter-summary"> + <div class="grid-col-12 tablet-lg:grid-col-6"> + <mat-list class="parameter-list"> + <mat-list-item> + <span class="parameter">Ground Motion Models</span>: + </mat-list-item> + @for (gmmSource of form?.value?.gmmSource; track gmmSource) { + <mat-list-item class="indent-list font-small"> + {{ gmmSource.gmm.display }} </mat-list-item> - @for (gmmSource of unbox(form?.value?.gmmSource); track gmmSource) { - <mat-list-item class="indent-list font-small"> - {{ gmmSource.gmm.display }} - </mat-list-item> - } - </mat-list> - </div> + } + </mat-list> + </div> - <div class="grid-col-12 tablet-lg:grid-col-3"> - <mat-list class="parameter-list"> + <div class="grid-col-12 tablet-lg:grid-col-3"> + <mat-list class="parameter-list"> + <mat-list-item> + <span class="parameter">IMT</span>: + {{ imtIdToDisplay(form?.value?.imt) }} + </mat-list-item> + + @if (form.value.multiSelectableParam === GmmFormControlIds.MW) { <mat-list-item> - <span class="parameter">IMT</span>: - {{ imtIdToDisplay(form?.value?.imt) }} + <span class="parameter">Magnitude</span>: </mat-list-item> - @if (form.value.multiSelectableParam === GmmFormControlIds.MW) { - <mat-list-item> - <span class="parameter">Magnitude</span>: - </mat-list-item> - - @for (Mw of unbox(form?.value?.MwMulti); track Mw) { - <mat-list-item class="indent-list"> - {{ Mw }} - </mat-list-item> - } - } @else { - <mat-list-item> - <span class="parameter">Magnitude</span>: - {{ form?.value?.Mw }} + @for (Mw of form?.value?.MwMulti; track Mw) { + <mat-list-item class="indent-list"> + {{ Mw }} </mat-list-item> } - + } @else { <mat-list-item> - <span class="parameter"> Z<sub>TOR</sub> </span>: - {{ form?.value?.zTor }} km + <span class="parameter">Magnitude</span>: + {{ form?.value?.Mw }} </mat-list-item> + } - <mat-list-item> - <span class="parameter">Dip</span>: {{ form?.value?.dip }}° - </mat-list-item> + <mat-list-item> + <span class="parameter"> Z<sub>TOR</sub> </span>: + {{ form?.value?.zTor }} km + </mat-list-item> - <mat-list-item> - <span class="parameter">Width</span>: {{ form?.value?.width }} km - </mat-list-item> - </mat-list> - </div> + <mat-list-item> + <span class="parameter">Dip</span>: {{ form?.value?.dip }}° + </mat-list-item> - <div class="grid-col-12 tablet-lg:grid-col-3"> - <mat-list class="parameter-list"> - @if (form.value.multiSelectableParam === GmmFormControlIds.VS30) { - <mat-list-item> <span class="parameter">Vs30</span>: </mat-list-item> + <mat-list-item> + <span class="parameter">Width</span>: {{ form?.value?.width }} km + </mat-list-item> + </mat-list> + </div> - @for (vs30 of unbox(form?.value?.vs30Multi); track vs30) { - <mat-list-item class="indent-list"> - {{ vs30 }} - <sup> m</sup>/<sub>s</sub> - </mat-list-item> - } - } @else { - <mat-list-item> - <span class="parameter">Vs30</span>: {{ form?.value?.vs30 }} + <div class="grid-col-12 tablet-lg:grid-col-3"> + <mat-list class="parameter-list"> + @if (form.value.multiSelectableParam === GmmFormControlIds.VS30) { + <mat-list-item> <span class="parameter">Vs30</span>: </mat-list-item> + + @for (vs30 of form?.value?.vs30Multi; track vs30) { + <mat-list-item class="indent-list"> + {{ vs30 }} <sup> m</sup>/<sub>s</sub> </mat-list-item> } - + } @else { <mat-list-item> - <span class="parameter"> Z<sub>1.0</sub> </span>: - {{ form?.value?.z1p0 }} - @if (form?.value?.z1p0) { - <span> km</span> - } + <span class="parameter">Vs30</span>: {{ form?.value?.vs30 }} + <sup> m</sup>/<sub>s</sub> </mat-list-item> + } - <mat-list-item> - <span class="parameter"> Z<sub>2.5</sub> </span>: - {{ form?.value?.z2p5 }} - @if (form?.value?.z2p5) { - <span> km</span> - } - </mat-list-item> + <mat-list-item> + <span class="parameter"> Z<sub>1.0</sub> </span>: + {{ form?.value?.z1p0 }} + @if (form?.value?.z1p0) { + <span> km</span> + } + </mat-list-item> - <mat-list-item> - <span class="parameter"> Z<sub>SED</sub> </span>: - {{ form?.value?.zSed }} - @if (form?.value?.zSed) { - <span> km</span> - } - </mat-list-item> + <mat-list-item> + <span class="parameter"> Z<sub>2.5</sub> </span>: + {{ form?.value?.z2p5 }} + @if (form?.value?.z2p5) { + <span> km</span> + } + </mat-list-item> - <mat-list-item> - <span class="parameters">Epistemic Uncertainty</span>: - {{ form?.value?.showEpistemicUncertainty ? 'On' : 'Off' }} - </mat-list-item> - </mat-list> - </div> + <mat-list-item> + <span class="parameter"> Z<sub>SED</sub> </span>: + {{ form?.value?.zSed }} + @if (form?.value?.zSed) { + <span> km</span> + } + </mat-list-item> + + <mat-list-item> + <span class="parameters">Epistemic Uncertainty</span>: + {{ form?.value?.showEpistemicUncertainty ? 'On' : 'Off' }} + </mat-list-item> + </mat-list> </div> -} +</div> diff --git a/projects/nshmp-apps/src/app/dev/gmm/hanging-wall-effects/components/parameter-summary/parameter-summary.component.ts b/projects/nshmp-apps/src/app/dev/gmm/hanging-wall-effects/components/parameter-summary/parameter-summary.component.ts index 218ec9395eacf70e30a456f05ca8e5e706153feb..1621d574cd49d42c091bf8dcb1d883e93b947cfd 100644 --- a/projects/nshmp-apps/src/app/dev/gmm/hanging-wall-effects/components/parameter-summary/parameter-summary.component.ts +++ b/projects/nshmp-apps/src/app/dev/gmm/hanging-wall-effects/components/parameter-summary/parameter-summary.component.ts @@ -1,9 +1,7 @@ import {AsyncPipe} from '@angular/common'; import {Component} from '@angular/core'; import {MatList, MatListItem} from '@angular/material/list'; -import {GmmFormControlIds, gmmUtils} from '@ghsc/nshmp-lib-ng/gmm'; -import {unbox} from 'ngrx-forms'; -import {map} from 'rxjs'; +import {GmmFormControlIds, gmmUtils} from '@ghsc/nshmp-lib-no-ngrx/gmm'; import {AppFacade} from '../../state/app.facade'; @@ -23,16 +21,9 @@ export class ParameterSummaryComponent { /** Function to convert IMT id to display */ imtIdToDisplay = gmmUtils.imtIdToDisplay; - /** ngrx-forms unbox function */ - unbox = unbox; /** Control form field state */ - form$ = this.facade.controlPanelForm$; - - /** List of GMMs */ - gmms$ = this.facade.usage$.pipe( - map(usage => usage?.response?.parameters?.gmm.values) - ); + form = this.facade.controlPanelForm; constructor(private facade: AppFacade) {} }