Added max density to UI

jirkapok · Aug 8, 2024 · 55d1c6b · 55d1c6b
1 parent 8eac42d
commit 55d1c6b
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 4 deletions.
diff --git a/projects/planner/src/app/app-settings/app-settings.component.html b/projects/planner/src/app/app-settings/app-settings.component.html
@@ -8,6 +8,15 @@
                 </div>
                 <div class="card-body">
                     <p>Options for application limits: Gas density, CNS/OTU percents, Primary tank minimum reserve pressure</p>
+
+                    <div class="mb-4 col col-12 col-md-6 col-lg-12 col-xl-6">
+                        <label for="maxDensity" class="form-label" mdbLabel>Max gas density [{{units.density}}]:
+                        </label>
+                        <input class="form-control" type="number" id="maxDensity"
+                               formControlName="maxDensity" required [min]="ranges.maxDensity[0]"
+                               [max]="ranges.maxDensity[1]" step="0.1" [class.is-invalid]="maxDensityInvalid" />
+                        <div class="invalid-feedback position-absolute">Needs to be number {{ranges.maxDensityLabel}}</div>
+                    </div>
                 </div>
             </div>
         </div>

diff --git a/projects/planner/src/app/app-settings/app-settings.component.ts b/projects/planner/src/app/app-settings/app-settings.component.ts
@@ -5,12 +5,12 @@ import {
 import { Location } from '@angular/common';
 import { faFlag } from '@fortawesome/free-regular-svg-icons';
 import { faUserCog } from '@fortawesome/free-solid-svg-icons';
-import { OptionsService } from '../shared/options.service';
 import { SettingsNormalizationService } from '../shared/settings-normalization.service';
-import { UnitConversion } from '../shared/UnitConversion';
+import { RangeConstants, UnitConversion } from '../shared/UnitConversion';
 import { SubViewStorage } from '../shared/subViewStorage';
 import { DiveSchedules } from '../shared/dive.schedules';
 import { ApplicationSettingsService } from '../shared/ApplicationSettings';
+import { InputControls } from '../shared/inputcontrols';
 
 @Component({
     selector: 'app-app-settings',
@@ -23,6 +23,7 @@ export class AppSettingsComponent implements OnInit {
 
     public settingsForm!: FormGroup<{
         imperialUnits: FormControl<boolean>;
+        maxDensity: FormControl<number>;
     }>;
 
     constructor(
@@ -33,12 +34,23 @@ export class AppSettingsComponent implements OnInit {
         public appSettings: ApplicationSettingsService,
         private formBuilder: NonNullableFormBuilder,
         private cd: ChangeDetectorRef,
+        private inputs: InputControls,
         public location: Location) {
     }
 
+    public get ranges(): RangeConstants {
+        return this.units.ranges;
+    }
+
+    public get maxDensityInvalid(): boolean {
+        const densityControl = this.settingsForm.controls.maxDensity;
+        return this.inputs.controlInValid(densityControl);
+    }
+
     public ngOnInit(): void {
         this.settingsForm = this.formBuilder.group({
-            imperialUnits: [this.units.imperialUnits, [Validators.required]]
+            imperialUnits: [this.units.imperialUnits, [Validators.required]],
+            maxDensity: [this.appSettings.maxGasDensity, [Validators.required]]
         });
     }
 

diff --git a/projects/planner/src/app/app.module.ts b/projects/planner/src/app/app.module.ts
@@ -103,6 +103,7 @@ import { GasesComparisonService } from './shared/diff/gases-comparison.service';
 import { ResultsComparison } from './shared/diff/results-comparison.service';
 import { SelectedDiffWaypoint } from './shared/diff/selected-diff-waypoint.service';
 import { ResamplingService } from './shared/ResamplingService';
+import { ApplicationSettingsService } from './shared/ApplicationSettings';
 
 const ANGULAR_MODULES = [
     AppRoutingModule,
@@ -211,7 +212,8 @@ const SERVICES = [
     ProfileComparatorService,
     GasesComparisonService,
     ResultsComparison,
-    ResamplingService
+    ResamplingService,
+    ApplicationSettingsService
 ];
 
 @NgModule({

diff --git a/projects/planner/src/app/shared/UnitConversion.ts b/projects/planner/src/app/shared/UnitConversion.ts
@@ -170,6 +170,8 @@ export interface RangeConstants {
     rmvRounding: number;
     depth: [number, number];
     depthLabel: string;
+    maxDensity: [number, number];
+    maxDensityLabel: string;
     narcoticDepth: [number, number];
     narcoticDepthLabel: string;
     lastStopDepth: [number, number];
@@ -201,6 +203,8 @@ class MetricRanges implements RangeConstants {
     public readonly diverRmvLabel: string = toLabel(this.diverRmv, this.units.volumeShortcut + perMinute);
     public readonly duration: [number, number] = [1, 1440];
     public readonly durationLabel: string = toLabel(this.duration, 'min');
+    public readonly maxDensity: [number, number] = [1, 10];
+    public readonly maxDensityLabel: string = toLabel(this.maxDensity, this.units.densityShortcut);
     public readonly narcoticDepth: [number, number] = [1, 100];
     public readonly narcoticDepthLabel: string = toLabel(this.narcoticDepth, this.units.lengthShortcut);
     public readonly nitroxOxygen: [number, number] = [21, 100];
@@ -237,6 +241,8 @@ class ImperialRanges implements RangeConstants {
     public readonly diverRmvLabel: string = toLabel(this.diverRmv, this.units.volumeShortcut + perMinute);
     public readonly duration: [number, number] = [1, 1440];
     public readonly durationLabel: string = toLabel(this.duration, 'min');
+    public readonly maxDensity: [number, number] = [1, 10]; // TODO define range for maxDensity in imperial
+    public readonly maxDensityLabel: string = toLabel(this.maxDensity, this.units.densityShortcut);
     public readonly narcoticDepth: [number, number] = [1, 300];
     public readonly narcoticDepthLabel: string = toLabel(this.narcoticDepth, this.units.lengthShortcut);
     public readonly nitroxOxygen: [number, number] = [21, 100];