Bouton et dialogue pour créer une passe à bassins depuis un module Cloisons

src/app/app.module.ts

@@ -77,6 +77,7 @@ import { DialogConfirmEmptySessionComponent } from "./components/dialog-confirm-
 import { DialogConfirmCloseCalcComponent } from "./components/dialog-confirm-close-calc/dialog-confirm-close-calc.component";
 import { DialogEditParamComputedComponent } from "./components/dialog-edit-param-computed/dialog-edit-param-computed.component";
 import { DialogEditParamValuesComponent } from "./components/dialog-edit-param-values/dialog-edit-param-values.component";
+import { DialogGeneratePABComponent } from "./components/dialog-generate-pab/dialog-generate-pab.component";
 import { DialogLoadSessionComponent } from "./components/dialog-load-session/dialog-load-session.component";
 import { DialogSaveSessionComponent } from "./components/dialog-save-session/dialog-save-session.component";
 
@@ -146,6 +147,7 @@ const appRoutes: Routes = [
     DialogConfirmEmptySessionComponent,
     DialogEditParamComputedComponent,
     DialogEditParamValuesComponent,
+    DialogGeneratePABComponent,
     DialogLoadSessionComponent,
     DialogSaveSessionComponent,
     FieldSetComponent,
@@ -181,6 +183,7 @@ const appRoutes: Routes = [
     DialogConfirmEmptySessionComponent,
     DialogEditParamComputedComponent,
     DialogEditParamValuesComponent,
+    DialogGeneratePABComponent,
     DialogSaveSessionComponent,
     DialogLoadSessionComponent
   ],

src/app/components/dialog-generate-pab/dialog-generate-pab.component.html

+<h1 mat-dialog-title [innerHTML]="uitextGeneratePAB"></h1>
+
+<form id="form-generate-pab">
+
+  <div mat-dialog-content>
+
+    <mat-form-field>
+      <input matInput required [placeholder]="uitextDebit" pattern="^([0-9]*\.)?([0-9]+[Ee]-?)?[0-9]+$"
+      [(ngModel)]="debit" name="debit" #inputDebit="ngModel">
+    </mat-form-field>
+    <mat-error *ngIf="inputDebit.invalid && (inputDebit.dirty || inputDebit.touched)">
+        <div *ngIf="inputDebit.errors.required || inputDebit.errors.pattern">
+            {{ uitextMustBePositive }}
+        </div>
+    </mat-error>
+
+    <mat-form-field>
+      <input matInput required [placeholder]="uitextCoteAmont" pattern="^-?([0-9]*\.)?([0-9]+[Ee]-?)?[0-9]+$"
+      [(ngModel)]="coteAmont" name="coteAmont" #inputCoteAmont="ngModel">
+    </mat-form-field>
+    <mat-error *ngIf="inputCoteAmont.invalid && (inputCoteAmont.dirty || inputCoteAmont.touched)">
+        <div *ngIf="inputCoteAmont.errors.required || inputCoteAmont.errors.pattern">
+            {{ uitextMustBeANumber }}
+        </div>
+    </mat-error>
+
+    <mat-form-field>
+      <input matInput required [placeholder]="uitextCoteAval" pattern="^-?([0-9]*\.)?([0-9]+[Ee]-?)?[0-9]+$"
+      [(ngModel)]="coteAval" name="coteAval" #inputCoteAval="ngModel">
+    </mat-form-field>
+    <mat-error *ngIf="inputCoteAval.invalid && (inputCoteAval.dirty || inputCoteAval.touched)">
+        <div *ngIf="inputCoteAval.errors.required || inputCoteAval.errors.pattern">
+            {{ uitextMustBeANumber }}
+        </div>
+    </mat-error>
+
+    <mat-form-field>
+      <input matInput required [placeholder]="uitextNBBassins" pattern="^[1-9][0-9]*$"
+      [(ngModel)]="nbBassins" name="nbBassins" #inputNbBassins="ngModel">
+    </mat-form-field>
+    <mat-error *ngIf="inputNbBassins.invalid && (inputNbBassins.dirty || inputNbBassins.touched)">
+        <div *ngIf="inputNbBassins.errors.required || inputNbBassins.errors.pattern">
+            {{ uitextMustBePositive }}
+        </div>
+    </mat-error>
+
+  </div>
+
+  <div mat-dialog-actions>
+    <button mat-raised-button color="primary" [mat-dialog-close]="false" cdkFocusInitial>
+      {{ uitextCancel }}
+    </button>
+    <button mat-raised-button type="submit" color="warn" (click)="generatePAB()"
+      [disabled]="(inputDebit.invalid || inputCoteAmont.invalid || inputCoteAval.invalid || inputNbBassins.invalid)">
+      {{ uitextGenerate }}
+    </button>
+  </div>
+
+</form>

src/app/components/dialog-generate-pab/dialog-generate-pab.component.scss

+#form-generate-pab {
+    max-width: 350px;
+}
+
+mat-form-field {
+    display: block;
+
+    .mat-input-element {
+        font-size: .9em;
+    }
+}
+
+mat-error {
+    font-weight: 500;
+    font-size: .8em;
+    margin-top: -1.2em;
+    margin-bottom: 1.2em;
+}

src/app/components/dialog-generate-pab/dialog-generate-pab.component.ts

+import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
+import { Inject, Component } from "@angular/core";
+
+import { I18nService } from "../../services/internationalisation/internationalisation.service";
+import { FormGroup, FormBuilder, Validators } from "@angular/forms";
+
+@Component({
+    selector: "dialog-generate-pab",
+    templateUrl: "dialog-generate-pab.component.html",
+    styleUrls: ["dialog-generate-pab.component.scss"]
+})
+export class DialogGeneratePABComponent {
+
+  public debit: number;
+
+  public coteAmont: number;
+
+  public coteAval: number;
+
+  public nbBassins: number;
+
+  constructor(
+    public dialogRef: MatDialogRef<DialogGeneratePABComponent>,
+    private intlService: I18nService,
+    private fb: FormBuilder,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) { }
+
+  public generatePAB() {
+    this.dialogRef.close({
+      generate: true,
+      debit: this.debit,
+      coteAmont: this.coteAmont,
+      coteAval: this.coteAval,
+      nbBassins: this.nbBassins
+    });
+  }
+
+  public get uitextDebit() {
+    return this.intlService.localizeText("INFO_DIALOG_PAB_Q");
+  }
+
+  public get uitextCoteAmont() {
+    return this.intlService.localizeText("INFO_DIALOG_PAB_Z1");
+  }
+
+  public get uitextCoteAval() {
+    return this.intlService.localizeText("INFO_DIALOG_PAB_Z2");
+  }
+
+  public get uitextNBBassins() {
+    return this.intlService.localizeText("INFO_DIALOG_PAB_NB");
+  }
+
+  public get uitextMustBeANumber() {
+    return this.intlService.localizeText("ERROR_PARAM_MUST_BE_A_NUMBER");
+  }
+
+  public get uitextMustBePositive() {
+    return this.intlService.localizeText("ERROR_PARAM_MUST_BE_POSITIVE");
+  }
+
+  public get uitextGeneratePAB() {
+      return this.intlService.localizeText("INFO_CALCULATOR_RESULTS_GENERATE_PAB");
+  }
+
+  public get uitextGenerate() {
+    return this.intlService.localizeText("INFO_OPTION_GENERATE");
+  }
+
+  public get uitextCancel() {
+    return this.intlService.localizeText("INFO_OPTION_CANCEL");
+  }
+}

src/app/components/generic-calculator/calculator.component.html

@@ -57,6 +57,10 @@
                         <mat-card-title>
                             <h1 [innerHTML]="uitextResultsTitle"></h1>
                         </mat-card-title>
+                        <div fxFlex></div>
+                        <button mat-raised-button color="accent" id="generate-pab" *ngIf="isPABCloisons" (click)="generatePAB()">
+                            {{ uitextGeneratePAB }}
+                        </button>
                     </mat-card-header>
                     <mat-card-content>
                         <calc-results id="resultsComp" (afterViewChecked)="onCalcResultsViewChecked()"></calc-results>

src/app/components/generic-calculator/calculator.component.scss

@@ -53,6 +53,10 @@ mat-card {
 
         mat-card-header {
             margin-bottom: 1em;
+
+            #generate-pab {
+                height: min-content;
+            }
         }
     }
 

src/app/components/generic-calculator/calculator.component.ts

 import { Component, OnInit, DoCheck, OnDestroy, ViewChild, ViewChildren,
-         QueryList, AfterViewChecked, ElementRef, Renderer2 } from "@angular/core";
+         QueryList, AfterViewChecked, ElementRef } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 
-import { Observer, Session, ParamValueMode } from "jalhyd";
+import { Observer, Session, ParamValueMode, CalculatorType } from "jalhyd";
 
 import { FormulaireService } from "../../services/formulaire/formulaire.service";
 import { I18nService } from "../../services/internationalisation/internationalisation.service";
@@ -19,6 +19,7 @@ import { FieldsetContainerComponent } from "../fieldset-container/fieldset-conta
 import { ServiceFactory } from "../../services/service-factory";
 import { MatDialog } from "@angular/material";
 import { DialogConfirmCloseCalcComponent } from "../dialog-confirm-close-calc/dialog-confirm-close-calc.component";
+import { DialogGeneratePABComponent } from "../dialog-generate-pab/dialog-generate-pab.component";
 
 @Component({
     selector: "hydrocalc",
@@ -100,8 +101,8 @@ export class GenericCalculatorComponent extends BaseComponent implements OnInit,
         private route: ActivatedRoute,
         private router: Router,
         private confirmCloseCalcDialog: MatDialog,
-        private _elementRef: ElementRef,
-        private renderer: Renderer2
+        private generatePABDialog: MatDialog,
+        private _elementRef: ElementRef
     ) {
         super();
         this.intlService = ServiceFactory.instance.i18nService;
@@ -158,6 +159,10 @@ export class GenericCalculatorComponent extends BaseComponent implements OnInit,
         return this.intlService.localizeText("INFO_CALCULATOR_RESULTS_TITLE");
     }
 
+    public get uitextGeneratePAB() {
+        return this.intlService.localizeText("INFO_CALCULATOR_RESULTS_GENERATE_PAB");
+    }
+
     /**
      * Triggered at calculator instanciation
      */
@@ -419,6 +424,30 @@ export class GenericCalculatorComponent extends BaseComponent implements OnInit,
         return false;
     }
 
+    public get isPABCloisons() {
+        return (
+            this._formulaire
+            && this._formulaire.currentNub
+            && this._formulaire.currentNub.calcType === CalculatorType.Cloisons
+        );
+    }
+
+    public generatePAB() {
+        // création du dialogue de génération d'une passe à bassin
+        const dialogRef = this.generatePABDialog.open(
+          DialogGeneratePABComponent,
+          { disableClose: true }
+        );
+        dialogRef.afterClosed().subscribe(result => {
+          if (result) {
+            if (result.generate) {
+              console.log("ON GÉNÈRE !!", result);
+              // this.doEmptySession();
+            }
+          }
+        });
+    }
+
     public saveCalculator() {
         this.formulaireService.saveForm(this._formulaire);
     }

src/locale/messages.en.json

@@ -15,6 +15,7 @@
     "ERROR_NEWTON_DERIVEE_NULLE": "Null function derivative in Newton computation",
     "ERROR_PARAM_NULL": "Parameter value must not be NULL",
     "ERROR_PARAM_MUST_BE_A_NUMBER": "Please type a numeric value",
+    "ERROR_PARAM_MUST_BE_POSITIVE": "Please type a positive numeric value",
     "ERROR_PARAMDEF_CALC_UNDEFINED": "calculability of '%symbol%' parameter is undefined",
     "ERROR_PARAMDEF_VALUE_FIXED": "value of '%symbol%' parameter cannot be changed",
     "ERROR_PARAMDEF_VALUE_INTERVAL": "parameter '%symbol%': value %value% is out of [%minValue%, %maxValue%] interval",

src/locale/messages.fr.json

@@ -15,6 +15,7 @@
     "ERROR_NEWTON_DERIVEE_NULLE": "Dérivée nulle dans un calcul par la méthode de Newton",
     "ERROR_PARAM_NULL": "La valeur du paramètre ne peut pas être NULL",
     "ERROR_PARAM_MUST_BE_A_NUMBER": "Veuillez entrer une valeur numérique",
+    "ERROR_PARAM_MUST_BE_POSITIVE": "Veuillez entrer une valeur numérique positive",
     "ERROR_PARAMDEF_CALC_UNDEFINED": "La calculabilité du paramètre %symbol% n'est pas définie",
     "ERROR_PARAMDEF_VALUE_FIXED": "La valeur du paramètre %symbol% ne peut pas être changée",
     "ERROR_PARAMDEF_VALUE_INTERVAL": "Paramètre '%symbol%' : la valeur %value% est en dehors de l'intervalle [%minValue%, %maxValue%]",
@@ -38,7 +39,7 @@
     "INFO_CALCULATOR_CALC_NAME": "Nom du module de calcul",
     "INFO_CALCULATOR_CALCULER": "Calculer",
     "INFO_CALCULATOR_PARAMFIXES": "Paramètres fixés",
-    "INFO_CALCULATOR_RESULTS_GENERATE_PAB": "Générer une passe à bassin",
+    "INFO_CALCULATOR_RESULTS_GENERATE_PAB": "Générer une passe à bassins",
     "INFO_CALCULATOR_RESULTS_TITLE": "Résultats",
     "INFO_CALCULATOR_VALEURS": "Valeurs",
     "INFO_CLOISONS_TITRE": "Passe à bassin : Cloisons",