GM vs. Distance 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

selector app-parameter-summary
imports MatList MatListItem
templateUrl ./parameter-summary.component.html
styleUrl ./parameter-summary.component.scss

Index

Properties

Constructor

constructor(service: AppService)
Defined in components/parameter-summary/parameter-summary.component.ts:27
Parameters :
Name Type Optional
service AppService No

Properties

form
Default value : this.service.formGroup
Defined in components/parameter-summary/parameter-summary.component.ts:24

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

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

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

Parameters

 
import {Component, computed} 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({
  imports: [MatList, MatListItem],
  selector: 'app-parameter-summary',
  styleUrl: './parameter-summary.component.scss',
  templateUrl: './parameter-summary.component.html',
})
export class ParameterSummaryComponent {
  /** Parameters */
  Params = MultiSelectableParam;

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

  /** Control form field state */
  form = this.service.formGroup;

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

  constructor(private service: AppService) {}
}

<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>
      }
    </mat-list>
  </div>

  <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 === Params.MW) {
        <mat-list-item>
          <span class="parameter">Magnitude</span>:
        </mat-list-item>
        @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">Magnitude</span>:
          {{ form?.value?.Mw }}
        </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">Dip</span>: {{ form?.value?.dip }}°
      </mat-list-item>

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

  <div class="grid-col-12 tablet-lg:grid-col-3">
    <mat-list class="parameter-list">
      @if (form.value.multiSelectableParam === Params.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>&nbsp;m</sup>/<sub>s</sub>
          </mat-list-item>
        }
      } @else {
        <mat-list-item>
          <span class="parameter">Vs30</span>: {{ form?.value?.vs30 }}
          <sup>&nbsp;m</sup>/<sub>s</sub>
        </mat-list-item>
      }

      <mat-list-item>
        <span class="parameter"> Z<sub>1.0</sub> </span>:
        {{ form?.value?.z1p0 }}
        @if (form?.value?.z1p0) {
          <span>&nbsp;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>&nbsp;km</span>
        }
      </mat-list-item>

      <mat-list-item>
        <span class="parameter"> Z<sub>SED</sub> </span>:
        {{ form?.value?.zSed }}
        @if (form?.value?.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 ""