From 0ac6477b8174585cb81eea0cf163ab3729ff97b9 Mon Sep 17 00:00:00 2001
From: Brandon Clayton <bclayton@usgs.gov>
Date: Wed, 17 Jul 2024 09:01:54 -0600
Subject: [PATCH] reactive form
---
.../parameter-summary.component.html | 162 +++++++++---------
.../parameter-summary.component.ts | 13 +-
2 files changed, 82 insertions(+), 93 deletions(-)
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 721416a25..7478650f2 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 218ec9395..1621d574c 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) {}
}
--
GitLab