diff --git a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/parameter-summary/parameter-summary.component.html b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/parameter-summary/parameter-summary.component.html new file mode 100644 index 0000000000000000000000000000000000000000..c2f60bdc702771e8356b0c99f6274669402ac920 --- /dev/null +++ b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/parameter-summary/parameter-summary.component.html @@ -0,0 +1,54 @@ +<div class="grid-row parameter-summary"> + <div class="grid-col-12 tablet:grid-col-6 overflow-x-scroll"> + <mat-list class="parameter-list"> + @let depths = parameters()?.depths; + + <mat-list-item> + <span class="parameter"> + {{ depths?.depth_min?.label ?? 'Minimum Depth' }} </span + >: {{ formGroup.value.depthMin }} {{ depths?.depth_min.units }} + </mat-list-item> + + <mat-list-item> + <span class="parameter"> + {{ depths?.depth_inc?.label ?? 'Depth Increment' }} </span + >: {{ formGroup.value.depthInc }} {{ depths?.depth_inc.units }} + </mat-list-item> + + <mat-list-item> + <span class="parameter"> + {{ depths?.depth_max?.label ?? 'Maximum Depth' }} </span + >: {{ formGroup.value.depthMax }} {{ depths?.depth_max.units }} + </mat-list-item> + </mat-list> + </div> + + <div class="grid-col-12 tablet:grid-col-6 overflow-x-scroll"> + <mat-list class="parameter-list"> + <div mat-subheader class="list-header">Locations</div> + + @for (locationForm of locations; track locationForm; let index = $index) { + <mat-list-item> + <mat-icon matListItemIcon> </mat-icon> + @let latitude = locationForm.value.latitude; + @let longitude = locationForm.value.longitude; + + <span class="parameter">Location</span>: + {{ isNaN(latitude) ? '' : latitude }}°, + {{ isNaN(longitude) ? '' : longitude }}° + + @if (serviceResponse()) { + @let result = serviceResponse()?.response.results[index]; + + @if (result) { + <br /> + Water table depth: + {{ result?.location.water_table_depth.toFixed(4) }} + {{ serviceResponse().response.metadata.water_table_depth.units }} + } + } + </mat-list-item> + } + </mat-list> + </div> +</div> diff --git a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/parameter-summary/parameter-summary.component.scss b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/parameter-summary/parameter-summary.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/parameter-summary/parameter-summary.component.spec.ts b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/parameter-summary/parameter-summary.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..96a092db4de697c5cfbbfa8b251f4fb16f634ed2 --- /dev/null +++ b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/parameter-summary/parameter-summary.component.spec.ts @@ -0,0 +1,22 @@ +import {ComponentFixture, TestBed} from '@angular/core/testing'; + +import {ParameterSummaryComponent} from './parameter-summary.component'; + +describe('ParameterSummaryComponent', () => { + let component: ParameterSummaryComponent; + let fixture: ComponentFixture<ParameterSummaryComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ParameterSummaryComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(ParameterSummaryComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/parameter-summary/parameter-summary.component.ts b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/parameter-summary/parameter-summary.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..9b5379bf17815733dee08e9309bde07126192f9e --- /dev/null +++ b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/parameter-summary/parameter-summary.component.ts @@ -0,0 +1,22 @@ +import {Component, computed} from '@angular/core'; +import {MatListModule} from '@angular/material/list'; + +import {AppService} from '../../services/app.service'; + +@Component({ + imports: [MatListModule], + selector: 'app-parameter-summary', + standalone: true, + styleUrl: './parameter-summary.component.scss', + templateUrl: './parameter-summary.component.html', +}) +export class ParameterSummaryComponent { + formGroup = this.service.formGroup; + locations = this.formGroup.controls.locations.controls; + parameters = computed(() => this.service.usage()?.response.parameters); + serviceResponse = this.service.serviceResponse; + + isNaN = isNaN; + + constructor(private service: AppService) {} +}