GM vs. Magnitude Application
  1. Components
  2. ParameterSummaryComponent

File

components/parameter-summary/parameter-summary.component.ts

Description

Summary of parameters entered, form field values to call service.

Metadata

changeDetection ChangeDetectionStrategy.OnPush
host {
}
selector app-parameter-summary
imports MatList MatListItem AsyncPipe
templateUrl ./parameter-summary.component.html
styleUrl ./parameter-summary.component.scss

Index

Properties

Properties

gmms
Default value : computed(() => this.service.usage()?.response?.parameters.gmm.values)
Defined in components/parameter-summary/parameter-summary.component.ts:31

List of GMMs
imtIdToDisplay
Default value : gmmUtils.imtIdToDisplay
Defined in components/parameter-summary/parameter-summary.component.ts:26

Function to convert IMT id to display
Params
Default value : MultiSelectableParam
Defined in components/parameter-summary/parameter-summary.component.ts:23

Parameters
Private service
Default value : inject(AppService)
Defined in components/parameter-summary/parameter-summary.component.ts:20
values$
Default value : this.service.formGroup.valueChanges
Defined in components/parameter-summary/parameter-summary.component.ts:28
 
import {AsyncPipe} from '@angular/common';
import {ChangeDetectionStrategy, Component, computed, inject} from '@angular/core';
import {MatList, MatListItem} from '@angular/material/list';
import {gmmUtils, MultiSelectableParam} from '@ghsc/nshmp-lib-ng/gmm';

import {AppService} from '../../services/app.service';

/**
 * Summary of parameters entered, form field values to call service.
 */
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {id: 'gmm-magnitude-parameter-summary'},
  imports: [MatList, MatListItem, AsyncPipe],
  selector: 'app-parameter-summary',
  styleUrl: './parameter-summary.component.scss',
  templateUrl: './parameter-summary.component.html',
})
export class ParameterSummaryComponent {
  private service = inject(AppService);

  /** Parameters */
  Params = MultiSelectableParam;

  /** Function to convert IMT id to display */
  imtIdToDisplay = gmmUtils.imtIdToDisplay;

  values$ = this.service.formGroup.valueChanges;

  /** List of GMMs */
  gmms = computed(() => this.service.usage()?.response?.parameters.gmm.values);
}

<div class="grid-row parameter-summary">
  @let values = values$ | async;

  <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 values?.gmmSource; track gmmSource) {
        <mat-list-item class="indent-list font-small">
          {{ gmmSource.gmm.display }}
        </mat-list-item>
      }
    </mat-list>
  </div>

  <div class="grid-col-12 tablet-lg:grid-col-4">
    <mat-list class="parameter-list">
      <mat-list-item>
        <span class="parameter">IMT</span>:
        @if (values?.imt) {
          {{ imtIdToDisplay(values?.imt) }}
        }
      </mat-list-item>

      <mat-list-item>
        <span class="parameter">Mw Range</span>: [{{ values?.mMin }}, {{ values?.mMax }}]
      </mat-list-item>

      <mat-list-item>
        <span class="parameter">Mw Step</span>:
        {{ values?.step }}
      </mat-list-item>

      <mat-list-item>
        <span class="parameter"> Z<sub>TOR</sub> </span>: {{ values?.zTor }} km
      </mat-list-item>

      <mat-list-item> <span class="parameter">Dip</span>: {{ values?.dip }}° </mat-list-item>

      <mat-list-item> <span class="parameter">Width</span>: {{ values?.width }} km </mat-list-item>
    </mat-list>
  </div>

  <div class="grid-col-12 tablet-lg:grid-col-2">
    <mat-list class="parameter-list">
      <mat-list-item>
        <span class="parameter"> Distance</span>: {{ values?.distance }} km
      </mat-list-item>

      @if (values?.multiSelectableParam === Params.VS30) {
        <mat-list-item> <span class="parameter">Vs30</span>: </mat-list-item>
        @for (vs30 of values?.vs30Multi; track vs30) {
          <mat-list-item class="indent-list">
            {{ vs30 }}
            <sup>&nbsp;m</sup>/<sub>s</sub>
          </mat-list-item>
        }
      } @else {
        <mat-list-item>
          <span class="parameter">Vs30</span>: {{ values?.vs30 }} <sup>&nbsp;m</sup>/<sub>s</sub>
        </mat-list-item>
      }

      <mat-list-item>
        <span class="parameter"> Z<sub>1.0</sub> </span>:
        {{ values?.z1p0 }}
        @if (values?.z1p0) {
          <span>&nbsp;km</span>
        }
      </mat-list-item>

      <mat-list-item>
        <span class="parameter"> Z<sub>2.5</sub> </span>:
        {{ values?.z2p5 }}
        @if (values?.z2p5) {
          <span>&nbsp;km</span>
        }
      </mat-list-item>

      <mat-list-item>
        <span class="parameter"> Z<sub>SED</sub> </span>:
        {{ values?.zSed }}
        @if (values?.zSed) {
          <span>&nbsp;km</span>
        }
      </mat-list-item>
    </mat-list>
  </div>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""