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..4ceb80fdeb5e33629966be6a144537b6a0dfc36c --- /dev/null +++ b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/parameter-summary/parameter-summary.component.spec.ts @@ -0,0 +1,25 @@ +import {provideHttpClient} from '@angular/common/http'; +import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {provideNoopAnimations} from '@angular/platform-browser/animations'; + +import {ParameterSummaryComponent} from './parameter-summary.component'; + +describe('ParameterSummaryComponent', () => { + let component: ParameterSummaryComponent; + let fixture: ComponentFixture<ParameterSummaryComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ParameterSummaryComponent], + providers: [provideHttpClient(), provideNoopAnimations()], + }).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) {} +} diff --git a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/plots/plots.component.html b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/plots/plots.component.html index e88f420e90814b762607df5e6d77936c93b895d4..10f4d2e8f271e765240e10471d523fb0544e15c7 100644 --- a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/plots/plots.component.html +++ b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/plots/plots.component.html @@ -13,5 +13,15 @@ } </mat-expansion-panel> } + + <mat-expansion-panel expanded> + <mat-expansion-panel-header> + <mat-panel-title>Parameter Summary</mat-panel-title> + </mat-expansion-panel-header> + + <mat-divider /> + + <app-parameter-summary /> + </mat-expansion-panel> </mat-accordion> </nshmp-lib-ng-plots-container> diff --git a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/plots/plots.component.ts b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/plots/plots.component.ts index c2dd71924f75680c41a96d9faf97b50280a71c01..d47822b43843bf42e1d6cdfc06c5abbb609a2d47 100644 --- a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/plots/plots.component.ts +++ b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/plots/plots.component.ts @@ -1,7 +1,6 @@ import {Component, computed} from '@angular/core'; import {MatDivider} from '@angular/material/divider'; import {MatExpansionModule} from '@angular/material/expansion'; -import {NshmpLibNgAppMetadataComponent} from '@ghsc/nshmp-lib-ng/nshmp'; import { NshmpLibNgPlotComponent, NshmpLibNgPlotsContainerComponent, @@ -9,14 +8,15 @@ import { } from '@ghsc/nshmp-lib-ng/plot'; import {AppService} from '../../services/app.service'; +import {ParameterSummaryComponent} from '../parameter-summary/parameter-summary.component'; @Component({ imports: [ NshmpLibNgPlotsContainerComponent, NshmpLibNgPlotComponent, - NshmpLibNgAppMetadataComponent, MatExpansionModule, MatDivider, + ParameterSummaryComponent, ], selector: 'app-plots', standalone: true, diff --git a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/services/app.service.ts b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/services/app.service.ts index fea29ed8f9b9ab963221f2b0b430c208eb9b3029..bfa97ed2d21fd170311d5ea05a0981adbad6805b 100644 --- a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/services/app.service.ts +++ b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/services/app.service.ts @@ -75,6 +75,13 @@ export class AppService return computed(() => this.state().serviceCallInfo); } + /** + * Returns the service response. + */ + get serviceResponse(): Signal<GeophysicalResponse> { + return computed(() => this.state().serviceResponse); + } + /** * Returns the usage response. */ diff --git a/projects/nshmp-apps/src/styles/_parameter-summary.scss b/projects/nshmp-apps/src/styles/_parameter-summary.scss index cfff071d2cdbb16218a6a0a962ef9c9b8666f7e4..cbf815ad00131a55b6d5279b99db01da19035d28 100644 --- a/projects/nshmp-apps/src/styles/_parameter-summary.scss +++ b/projects/nshmp-apps/src/styles/_parameter-summary.scss @@ -6,10 +6,6 @@ $list-typography: mat.m2-define-typography-config( $font-size: 14px, $line-height: 18px, ), - $subtitle-1: - mat.m2-define-typography-level( - $font-size: 12px, - ), ); .parameter-summary {