File

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

Description

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

Metadata

Index

Properties

Constructor

constructor(service: AppService)
Parameters :
Name Type Optional
service AppService No

Properties

formGroup
Default value : this.service.formGroup

Form field state

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

Public service
Type : AppService
siteClasses
Default value : computed(() => { const usage = this.service.usage(); if (usage === undefined || usage === null) { return []; } return hazardUtils.siteClassesToParameters( usage.response.models.siteClasses, ); })

Site classes from usage as Parameters

toDisplay
Default value : nshmpUtils.parameterToDisplay

Function to get display from a Parameter

import {Component, computed} from '@angular/core';
import {MatList, MatListItem} from '@angular/material/list';
import {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({
  imports: [MatList, MatListItem],
  selector: 'app-parameter-summary',
  styleUrl: './parameter-summary.component.scss',
  templateUrl: './parameter-summary.component.html',
})
export class ParameterSummaryComponent {
  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;

  /** Form field state */
  formGroup = this.service.formGroup;

  /** Site classes from usage as `Parameter`s */
  siteClasses = computed(() => {
    const usage = this.service.usage();

    if (usage === undefined || usage === null) {
      return [];
    }

    return hazardUtils.siteClassesToParameters(
      usage.response.models.siteClasses,
    );
  });

  Number = Number;

  constructor(public service: AppService) {}
}
<div class="grid-row parameter-summary">
  <div class="grid-col-12 tablet:grid-col-6">
    <mat-list class="parameter-list">
      <mat-list-item>
        <span class="parameter">Model</span>:
        {{ toDisplay(formGroup.value.model, service.availableModels()) }}
      </mat-list-item>

      <mat-list-item>
        <span class="parameter">Latitude</span>:
        @if (!isNaN(formGroup.value.latitude)) {
          {{ formGroup.value.latitude }}
        }
        °
      </mat-list-item>

      <mat-list-item>
        <span class="parameter">Longitude</span>:
        @if (!isNaN(formGroup.value.longitude)) {
          {{ formGroup.value.longitude }}
        }
        °
      </mat-list-item>

      <mat-list-item>
        @if (formGroup.value.siteClass !== selectPlaceHolder.value) {
          <span class="parameter">Site Class</span>:
          {{ toDisplay(formGroup.value.siteClass, siteClasses()) }}
        }
      </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">Return Period</span>:
        @if (
          formGroup.value.commonReturnPeriods !==
          Number.parseInt(selectPlaceHolder.value)
        ) {
          {{ returnPeriodName[formGroup.value.returnPeriod] }}
        } @else {
          {{ formGroup.value.returnPeriod }} yr
        }
      </mat-list-item>

      <mat-list-item>
        <span class="parameter">Truncate</span>:
        {{ formGroup.value.truncate === true ? 'On' : 'Off' }}
      </mat-list-item>

      <mat-list-item>
        <span class="parameter">Max Direction</span>:
        {{ formGroup.value.maxDirection === true ? 'On' : 'Off' }}
      </mat-list-item>
    </mat-list>
  </div>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""