add parameter summary component

projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/parameter-summary/parameter-summary.component.html

+<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>

projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/parameter-summary/parameter-summary.component.spec.ts

+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();
+  });
+});

projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/parameter-summary/parameter-summary.component.ts

+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) {}
+}