Merge branch '104-simplification-du-code-compatibilite-jalhyd' into 'master'

Resolve "Simplification du code (compatibilité jalhyd)"

Closes #104

See merge request !32

README.md

@@ -70,9 +70,9 @@ and then :
 
 				constructor(rL: number, rW: number, rA:number=undefined) {
 					super();
-					this._L = new ParamDefinition(ComputeNodeType.LechaptCalmon, 'L', ParamDomainValue.POS, rL);
-					this._W = new ParamDefinition(ComputeNodeType.LechaptCalmon, 'W', ParamDomainValue.POS, rW);
-					this._A = new ParamDefinition(ComputeNodeType.LechaptCalmon, 'A', ParamDomainValue.POS, rA);
+					this._L = new ParamDefinition(this, ComputeNodeType.LechaptCalmon, 'L', ParamDomainValue.POS, rL);
+					this._W = new ParamDefinition(this, ComputeNodeType.LechaptCalmon, 'W', ParamDomainValue.POS, rW);
+					this._A = new ParamDefinition(this, ComputeNodeType.LechaptCalmon, 'A', ParamDomainValue.POS, rA);
 
 					this.addParamDefinition(this._L);
 					this.addParamDefinition(this._W);

angular.json

@@ -115,7 +115,8 @@
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
             "protractorConfig": "./protractor.conf.js",
-            "devServerTarget": "ngHyd:serve"
+            "devServerTarget": "ngHyd:serve",
+            "port": 4201
           }
         },
         "lint": {

e2e/app.e2e-spec.ts

-import { AppPage } from './app.po';
+import { AppPage } from "./app.po";
+import { browser } from "protractor";
 
-describe('ngHyd App', () => {
+describe("ngHyd − start page", () => {
   let page: AppPage;
 
   beforeEach(() => {
     page = new AppPage();
   });
 
-  it('should display welcome message', () => {
-    page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Welcome to app!');
+  it("when app starts, user should be redirected to /list page", async () => {
+    await page.navigateTo();
+    const url = await browser.driver.getCurrentUrl(); // @TODO move brower related stuff to .po ?
+    expect(url).toContain("/list");
   });
+
+  /*it("when app starts, user should see the list of available compute nodes", () => {
+    page.navigateTo();
+    expect(page.getListLength()).toBeGreaterThan(8);
+  });*/
 });

e2e/app.po.ts

-import { browser, by, element } from 'protractor';
+import { browser } from "protractor";
 
 export class AppPage {
   navigateTo() {
-    return browser.get('/');
-  }
-
-  getParagraphText() {
-    return element(by.css('app-root h1')).getText();
+    return browser.get("/");
   }
 }

e2e/calculator.e2e-spec.ts

+import { CalculatorPage } from "./calculator.po";
+import { ListPage } from "./list.po";
+
+describe("ngHyd − calculator page", () => {
+  let page: CalculatorPage;
+  let listPage: ListPage;
+
+  beforeEach(() => {
+    page = new CalculatorPage();
+    listPage = new ListPage();
+  });
+
+  it("when a calculator name is clicked on list page, a calculator should be opened", async () => {
+    await listPage.navigateTo();
+    await listPage.clickRandomCalculatorMenuEntry();
+    const text = await page.getHeader1().getText();
+    expect(text.length).toBeGreaterThan(0);
+  });
+
+  it("when a calculator is open, no label should be empty", async () => {
+    const labels = page.getInputLabels();
+    await labels.each(async (l) => {
+      const label = await l.getText();
+      expect(label.length).toBeGreaterThan(0);
+    });
+  });
+});

e2e/calculator.po.ts

+import { browser, by, element } from "protractor";
+
+export class CalculatorPage {
+  navigateTo() {
+    // @TODO won't work
+    return browser.get("/#/calculator/0");
+  }
+
+  getInputLabels() {
+    return element.all(by.css("ngparam-input label"));
+  }
+
+  getHeader1() {
+    return element(by.css("h1"));
+  }
+}

e2e/list.e2e-spec.ts

+import { ListPage } from "./list.po";
+
+describe("ngHyd − list page", () => {
+  let page: ListPage;
+
+  beforeEach(() => {
+    page = new ListPage();
+  });
+
+  it("when list is open, user should see the list of available compute nodes", async () => {
+    await page.navigateTo();
+    expect(page.getCalculatorsMenuLength()).toBeGreaterThan(8);
+  });
+});

e2e/list.po.ts

+import { browser, by, element } from "protractor";
+
+export class ListPage {
+  navigateTo() {
+    return browser.get("/#/list");
+  }
+
+  getCalculatorsMenuEntries() {
+    return element.all(by.css("ul.list-group"));
+  }
+
+  getCalculatorsMenuLength() {
+    return this.getCalculatorsMenuEntries().count();
+  }
+
+  async clickRandomCalculatorMenuEntry() {
+    const menuEntries = this.getCalculatorsMenuEntries();
+    const l = await menuEntries.count();
+    const r = Math.min((Math.floor(Math.random() * l)), (l - 1));
+    return menuEntries.get(r).click();
+  }
+}

e2e/load-sesssion.e2e-spec.ts

+import { AppPage } from "./app.po";
+import { Navbar } from "./navbar.po";
+import { SideNav } from "./sidenav.po";
+
+describe("ngHyd − start page", () => {
+  let page: AppPage;
+  let navbar: Navbar;
+  let sidenav: SideNav;
+
+  beforeEach(() => {
+    page = new AppPage();
+    navbar = new Navbar();
+    sidenav = new SideNav();
+  });
+
+  it("when loading session-6-calc.test.json file from home page, 6 calculators should be loaded", async () => {
+    await page.navigateTo();
+    await navbar.clickMenuButton();
+    await sidenav.clickLoadSessionButton();
+    await sidenav.loadSessionFile("./session-6-calc.test.json");
+    expect(await navbar.getAllCalculatorTabs().count()).toBe(6);
+  });
+
+  /*it("when app starts, user should see the list of available compute nodes", () => {
+    page.navigateTo();
+    expect(page.getListLength()).toBeGreaterThan(8);
+  });*/
+});

e2e/navbar.po.ts

+import { by, element } from "protractor";
+
+export class Navbar {
+  getAllCalculatorTabs() {
+    return element.all(by.css("ul#navbar > li.calculator-tab"));
+  }
+
+  getNewCalculatorButton() {
+    return element(by.css("#new-calculator"));
+  }
+
+  getMenuButton() {
+    return element(by.css("#open-menu"));
+  }
+
+  async clickCalculatorTab(n: number) {
+    const tabs = this.getAllCalculatorTabs();
+    await tabs.get(n).click();
+  }
+
+  async clickRandomCalculatorTab(n: number) {
+    const tabs = this.getAllCalculatorTabs();
+    const l = await tabs.count();
+    const r = Math.min((Math.floor(Math.random() * l)), (l - 1));
+    await tabs.get(r).click();
+  }
+
+  async clickNewCalculatorButton() {
+    const ncb = this.getNewCalculatorButton();
+    await ncb.click();
+  }
+
+  async clickMenuButton() {
+    const ncb = this.getMenuButton();
+    await ncb.click();
+  }
+}

e2e/navigate-through-calculators.e2e-spec.ts

+import { ListPage } from "./list.po";
+import { Navbar } from "./navbar.po";
+import { CalculatorPage } from "./calculator.po";
+
+describe("ngHyd − create calculators and navigate among them", () => {
+  let listPage: ListPage;
+  let calculatorPage: CalculatorPage;
+  let navbar: Navbar;
+
+  beforeEach(() => {
+    listPage = new ListPage();
+    calculatorPage = new CalculatorPage();
+    navbar = new Navbar();
+  });
+
+  it("when many calculators are open, navigating among them should not fail (all labels should be visible)", async () => {
+    // open 8 calculators
+    for (let i = 0; i < 8; i++) {
+      await navbar.clickNewCalculatorButton();
+      await listPage.clickRandomCalculatorMenuEntry();
+    }
+    // navigate among them
+    for (let i = 0; i < 16; i++) {
+      await navbar.clickRandomCalculatorTab(i);
+      // test all form labels
+      const labels = calculatorPage.getInputLabels();
+      await labels.each(async (l) => {
+        const label = await l.getText();
+        expect(label.length).toBeGreaterThan(0);
+      });
+    }
+    // expect no error ?
+  });
+});

e2e/preferences.e2e-spec.ts

+import { PreferencesPage } from "./preferences.po";
+
+describe("ngHyd − preferences page", () => {
+  let page: PreferencesPage;
+
+  beforeEach(() => {
+    page = new PreferencesPage();
+  });
+
+  it("when preferences are open, user should see a heading title", async () => {
+    await page.navigateTo();
+    const text = await page.getHeader1().getText();
+    expect(text.length).toBeGreaterThan(0);
+  });
+
+  it("when preferences are open, no label should be empty", async () => {
+    // page.navigateTo();
+    const labels = page.getInputLabels();
+    await labels.each(async (l) => {
+      const label = await l.getText();
+      expect(label.length).toBeGreaterThan(0);
+    });
+  });
+});

e2e/preferences.po.ts

+import { browser, by, element } from "protractor";
+
+export class PreferencesPage {
+  navigateTo() {
+    return browser.get("/#/setup");
+  }
+
+  getHeader1() {
+    return element(by.css("h1"));
+  }
+
+  getInputLabels() {
+    return element.all(by.css("base-param-input label"));
+  }
+}

e2e/session-6-calc.test.json

+{"session":{"elements":[{"form":{"id":"Conduite distributrice (MTJmNH)","uid":"MTJmNH","props":{"calcType":0,"nodeType":0},"elements":[{"fieldset":{"id":"fs_hydraulique","props":{"calcType":0,"nodeType":0},"elements":[{"param":{"id":"Q","values":{"mode":"SINGLE","value":3}}},{"param":{"id":"D","values":{"mode":"SINGLE","value":1.2}}},{"param":{"id":"J","values":{"mode":"CALCUL"}}},{"param":{"id":"Lg","values":{"mode":"SINGLE","value":100}}},{"param":{"id":"Nu","values":{"mode":"SINGLE","value":0.000001}}}]}},{"fieldset":{"id":"fs_param_calc","props":{"calcType":0,"nodeType":0},"elements":[{"param":{"id":"Pr","values":{"mode":"SINGLE","value":0.0001}}}]}}]}},{"form":{"id":"Lechapt-Calmon (NHdtdT)","uid":"NHdtdT","props":{"calcType":1,"nodeType":0},"elements":[{"fieldset":{"id":"fs_materiau","props":{"calcType":1,"nodeType":0},"elements":[{"select":{"id":"select_material","selected_id":"select_material_1"}},{"param":{"id":"L","values":{"mode":"SINGLE","value":1.863}}},{"param":{"id":"M","values":{"mode":"SINGLE","value":2}}},{"param":{"id":"N","values":{"mode":"SINGLE","value":5.33}}}]}},{"fieldset":{"id":"fs_hydraulique","props":{"calcType":1,"nodeType":0},"elements":[{"param":{"id":"Q","values":{"mode":"SINGLE","value":3}}},{"param":{"id":"D","values":{"mode":"SINGLE","value":1.2}}},{"param":{"id":"J","values":{"mode":"CALCUL"}}},{"param":{"id":"Lg","values":{"mode":"SINGLE","value":100}}}]}},{"fieldset":{"id":"fs_param_calc","props":{"calcType":1,"nodeType":0},"elements":[{"param":{"id":"Pr","values":{"mode":"SINGLE","value":0.0001}}}]}}]}},{"form":{"id":"Section paramétrée (YjZxc2)","uid":"YjZxc2","props":{"calcType":2,"nodeType":2},"elements":[{"fieldset":{"id":"fs_section","props":{"calcType":2,"nodeType":2},"elements":[{"select":{"id":"select_section","selected_id":"select_section_rect"}},{"param":{"id":"LargeurBerge","values":{"mode":"SINGLE","value":2.5}}}]}},{"fieldset":{"id":"fs_bief","props":{"calcType":2,"nodeType":2},"elements":[{"param":{"id":"Ks","values":{"mode":"SINGLE","value":40}}},{"param":{"id":"If","values":{"mode":"SINGLE","value":0.001}}},{"param":{"id":"YB","values":{"mode":"SINGLE","value":1}}}]}},{"fieldset":{"id":"fs_hydraulique","props":{"calcType":2,"nodeType":2},"elements":[{"param":{"id":"Q","values":{"mode":"SINGLE","value":1.2}}},{"param":{"id":"Y","values":{"mode":"SINGLE","value":0.8}}}]}},{"fieldset":{"id":"fs_param_calc","props":{"calcType":2,"nodeType":2},"elements":[{"param":{"id":"Pr","values":{"mode":"SINGLE","value":0.0001}}}]}},{"fieldset":{"id":"fs_computed_var","props":{"calcType":2,"nodeType":2},"elements":[{"select":{"id":"select_target","selected_id":"select_target_Hs"}}]}}]}},{"form":{"id":"Régime uniforme (ZmEwcX)","uid":"ZmEwcX","props":{"calcType":3,"nodeType":2},"elements":[{"fieldset":{"id":"fs_section","props":{"calcType":3,"nodeType":2},"elements":[{"select":{"id":"select_section","selected_id":"select_section_rect"}},{"param":{"id":"LargeurBerge","values":{"mode":"SINGLE","value":2.5}}}]}},{"fieldset":{"id":"fs_bief","props":{"calcType":3,"nodeType":2},"elements":[{"param":{"id":"Ks","values":{"mode":"SINGLE","value":40}}},{"param":{"id":"If","values":{"mode":"SINGLE","value":0.001}}},{"param":{"id":"YB","values":{"mode":"SINGLE","value":1}}}]}},{"fieldset":{"id":"fs_hydraulique","props":{"calcType":3,"nodeType":2},"elements":[{"param":{"id":"Q","values":{"mode":"CALCUL"}}},{"param":{"id":"Y","values":{"mode":"SINGLE","value":0.8}}}]}},{"fieldset":{"id":"fs_param_calc","props":{"calcType":3,"nodeType":2},"elements":[{"param":{"id":"Pr","values":{"mode":"SINGLE","value":0.0001}}}]}}]}},{"form":{"id":"Courbes de remous (NHdmeG)","uid":"NHdmeG","props":{"calcType":4,"nodeType":2},"elements":[{"fieldset":{"id":"fs_section","props":{"calcType":4,"nodeType":2},"elements":[{"select":{"id":"select_section","selected_id":"select_section_rect"}},{"param":{"id":"LargeurBerge","values":{"mode":"SINGLE","value":2.5}}}]}},{"fieldset":{"id":"fs_bief","props":{"calcType":4,"nodeType":2},"elements":[{"param":{"id":"Ks","values":{"mode":"SINGLE","value":40}}},{"param":{"id":"Long","values":{"mode":"SINGLE","value":100}}},{"param":{"id":"If","values":{"mode":"SINGLE","value":0.001}}},{"param":{"id":"YB","values":{"mode":"SINGLE","value":1}}}]}},{"fieldset":{"id":"fs_condlim","props":{"calcType":4,"nodeType":2},"elements":[{"param":{"id":"Q","values":{"mode":"SINGLE","value":1.2}}},{"param":{"id":"Yaval","values":{"mode":"SINGLE","value":0.4}}},{"param":{"id":"Yamont","values":{"mode":"SINGLE","value":0.15}}}]}},{"fieldset":{"id":"fs_param_calc","props":{"calcType":4,"nodeType":2},"elements":[{"param":{"id":"Dx","values":{"mode":"SINGLE","value":5}}},{"param":{"id":"Pr","values":{"mode":"SINGLE","value":0.0001}}},{"select":{"id":"select_resolution","selected_id":"select_resolution_trap"}}]}},{"fieldset":{"id":"fs_target_data","props":{"calcType":4,"nodeType":2},"elements":[{"select":{"id":"select_target","selected_id":"select_target_none"}}]}}]}},{"form":{"id":"Lois d'ouvrages (Yzgxan)","uid":"Yzgxan","props":{"calcType":8,"nodeType":0},"elements":[{"fieldset":{"id":"fs_param_hydro","props":{"calcType":8,"nodeType":0},"elements":[{"param":{"id":"Q","values":{"mode":"CALCUL"}}},{"param":{"id":"Z1","values":{"mode":"SINGLE","value":102}}},{"param":{"id":"Z2","values":{"mode":"SINGLE","value":101.5}}}]}},{"fieldset_container":{"id":"struct_container","elements":[{"fieldset":{"id":"fs_ouvrage","props":{"calcType":7,"nodeType":5,"structureType":1,"loiDebit":1},"elements":[{"select":{"id":"select_ouvrage","selected_id":"select_ouvrage_vanne_rect"}},{"select":{"id":"select_loidebit1","selected_id":"select_loidebit1_cem88d"}},{"select":{"id":"select_loidebit2","selected_id":"select_loidebit2_cem88v"}},{"select":{"id":"select_loidebit3","selected_id":"select_loidebit3_seuiltriang"}},{"select":{"id":"select_loidebit4","selected_id":"select_loidebit4_seuiltriangtrunc"}},{"param":{"id":"ZDV","values":{"mode":"SINGLE","value":100}}},{"param":{"id":"L","values":{"mode":"SINGLE","value":2}}},{"param":{"id":"W","values":{"mode":"SINGLE","value":null}}},{"param":{"id":"Cd","values":{"mode":"SINGLE","value":0.4}}}]}}]}},{"fieldset":{"id":"fs_param_calc","props":{"calcType":8,"nodeType":0},"elements":[{"param":{"id":"Pr","values":{"mode":"SINGLE","value":0.0001}}}]}}]}}]}}
\ No newline at end of file

e2e/sidenav.po.ts

+import { by, element } from "protractor";
+import * as path from "path";
+
+export class SideNav {
+  getLoadSessionButton() {
+    return element(by.css("#side-nav-load-session"));
+  }
+
+  getFileInput() {
+    // tslint:disable-next-line:quotemark
+    return element(by.css('load-calc input[type="file"]'));
+  }
+
+  getFileLoadButton() {
+    return element(by.css("load-calc .modal-footer button.btn-success"));
+  }
+
+  async clickLoadSessionButton() {
+    const ncb = this.getLoadSessionButton();
+    await ncb.click();
+  }
+
+  async loadSessionFile(file: string) {
+    const absolutePath = path.resolve(__dirname, file);
+    const input = this.getFileInput();
+    await input.sendKeys(absolutePath);
+    await this.getFileLoadButton().click();
+  }
+}

e2e/tsconfig.e2e.json

@@ -4,7 +4,6 @@
     "outDir": "../out-tsc/e2e",
     "baseUrl": "./",
     "module": "commonjs",
-    "target": "es5",
     "downlevelIteration": true,
     "types": [
       "jasmine",

package.json

@@ -14,6 +14,7 @@
     "mathjax": "rsync -az --delete node_modules/mathjax src/assets;",
     "mkdocs": "python3 -m mkdocs build",
     "preprocess": "node preprocessors.js; npm run mathjax; npm run mkdocs;",
+    "viz": "tsviz -recursive src/ nghyd_class_diagram.png",
     "compodoc-patch": "sed -i '/Application.prototype.detectAngularJSProjects = function () {/a return false; // patch cracra, voir https://github.com/compodoc/compodoc/issues/667' node_modules/@compodoc/compodoc/dist/index-cli.js",
     "compodoc": "nodejs node_modules/@compodoc/compodoc/bin/index-cli.js -p src/tsconfig.app.json -s --language fr-FR -d compodoc-fr"
   },

protractor.conf.js

@@ -12,7 +12,7 @@ exports.config = {
     'browserName': 'chrome'
   },
   directConnect: true,
-  baseUrl: 'http://localhost:4200/',
+  baseUrl: 'http://localhost:4201/',
   framework: 'jasmine',
   jasmineNodeOpts: {
     showColors: true,

src/app/app.component.html

@@ -2,7 +2,7 @@
   <!--Navbar -->
   <nav class="navbar navbar-expand-sm navbar-dark indigo">
     <!-- Ouverture du sidenav -->
-    <span style="font-size:30px;cursor:pointer;color:white" (click)="openNav()">☰</span>
+    <span id="open-menu" style="font-size:30px;cursor:pointer;color:white" (click)="openNav()">☰</span>
 
     <!-- lien vide pour que le toggler des liens apparaisse à droite -->
     <a class="navbar-brand"></a>
@@ -16,12 +16,12 @@
 
     <!-- Collapsible content -->
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav mr-auto">
-        <li class="nav-item" *ngFor="let c of calculators">
+      <ul id="navbar" class="navbar-nav mr-auto">
+        <li class="nav-item calculator-tab" *ngFor="let c of calculators">
           <a class="nav-link waves-light {{getHighlightClass(c.uid)}}" mdbRippleRadius [routerLink]="['/calculator/',c.uid]">{{ c.title }}</a>
         </li>
-        <li class="nav-item">
-            <i class="fa fa-plus-square fa-2x fa-inverse" style='vertical-align: middle' (click)='newCalc()'></i>
+        <li class="nav-item" id="add-calculator-tab">
+            <i id="new-calculator" class="fa fa-plus-square fa-2x fa-inverse" style='vertical-align: middle' routerLink="/list" (click)='closeNav()'></i>
         </li>
       </ul>
     </div>
@@ -35,11 +35,11 @@
     <div class="row">
       <div id="mySidenav" class="sidenav">
         <!-- ATTENTION ! pas de href="#" sous peine de rechargement de la page et réinitialisation de l'appli -->
-        <a class="closebtn" (click)="closeNav()">×</a>
-        <a (click)="newCalc()">{{ uitextSidenavNewCalc }}</a>
-        <a (click)="loadSession()">{{ uitextSidenavLoadSession }}</a>
-        <a (click)="params()">{{ uitextSidenavParams }}</a>
-        <a target="_blank" href="assets/docs-fr/">Aide</a>
+        <a id="close-side-nav" class="closebtn" (click)="closeNav()">×</a>
+        <a id="side-nav-list" routerLink="/list" (click)="closeNav()">{{ uitextSidenavNewCalc }}</a>
+        <a id="side-nav-load-session" (click)="loadSession()">{{ uitextSidenavLoadSession }}</a>
+        <a id="side-nav-setup" routerLink="/setup" (click)="closeNav()">{{ uitextSidenavParams }}</a>
+        <a id="side-nav-help" target="_blank" href="assets/docs-fr/" (click)="closeNav()">{{ uitextSidenavHelp }}</a>
         <div class="hyd_fillvertical"></div>
         <div class="hyd_version">
           JaLHyd version: {{ getDateRevision()[0] }}<br/>
@@ -50,10 +50,10 @@
   </div>
 
   <!-- chargement des calculettes -->
-  <div loadCalcDialogAnchor></div>
+  <div appLoadCalcDialogAnchor></div>
 
   <!-- sauvegarde des calculettes -->
-  <div saveCalcDialogAnchor></div>
+  <div appSaveCalcDialogAnchor></div>
 
   <!-- règle gradée des colonnes Bootstrap -->
   <div *ngIf="ruler" class="container-fluid">

src/app/app.component.ts

 import { Component, ApplicationRef, OnInit, OnDestroy, HostListener, ViewChild, ComponentRef } from "@angular/core";
-// import { MdDialog } from '@angular/material';
 import { Router, ActivatedRoute } from "@angular/router";
 
 import { Observer, jalhydDateRev } from "jalhyd";
@@ -7,7 +6,6 @@ import { Observer, jalhydDateRev } from "jalhyd";
 import { environment } from "../environments/environment";
 import { InternationalisationService } from "./services/internationalisation/internationalisation.service";
 import { ErrorService } from "./services/error/error.service";
-// import { AlertDialog } from './components/alert-dialog/alert-dialog.component';
 import { FormulaireService } from "./services/formulaire/formulaire.service";
 import { FormulaireDefinition } from "./formulaire/definition/form-definition";
 import { ServiceFactory } from "./services/service-factory";
@@ -28,8 +26,6 @@ import { nghydDateRev } from "../date_revision";
   providers: [ErrorService]
 })
 export class AppComponent implements OnInit, OnDestroy, Observer {
-  private _displayErrorDialog = false;
-
   /**
    * liste des calculettes. Forme des objets :
    * "title": nom de la calculette
@@ -44,10 +40,10 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
   private _currentFormId: number;
 
   @ViewChild(LoadCalcDialogAnchorDirective)
-  private loadCalcDialogAnchor: LoadCalcDialogAnchorDirective;
+  private appLoadCalcDialogAnchor: LoadCalcDialogAnchorDirective;
 
   @ViewChild(SaveCalcDialogAnchorDirective)
-  private saveCalcDialogAnchor: SaveCalcDialogAnchorDirective;
+  private appSaveCalcDialogAnchor: SaveCalcDialogAnchorDirective;
 
   /**
    * composant actuellement affiché par l'élément <router-outlet>
@@ -61,7 +57,6 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
     private appRef: ApplicationRef,
     private errorService: ErrorService,
     private router: Router,
-    private route: ActivatedRoute,
     private formulaireService: FormulaireService,
     private httpService: HttpService
   ) {
@@ -99,7 +94,11 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
   }
 
   public get uitextSidenavLoadSession() {
-    return "Charger une session";
+    return this.intlService.localizeText("INFO_MENU_LOAD_SESSION_TITLE");
+  }
+
+  public get uitextSidenavHelp() {
+    return this.intlService.localizeText("INFO_MENU_HELP_TITLE");
   }
 
   public get calculators() {
@@ -188,9 +187,9 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
     }
   }
 
-  private getCalculatorIndexFromId(formId: number) {
+  private getCalculatorIndexFromId(formId: string) {
     const index = this._calculators.reduce((resultIndex, calc, currIndex) => {
-      if (resultIndex === -1 && +calc["uid"] === formId) {
+      if (resultIndex === -1 && calc["uid"] === formId) {
         resultIndex = currIndex;
       }
       return resultIndex;
@@ -210,12 +209,12 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
    */
   private saveForm(form: FormulaireDefinition) {
     // création du dialogue de sélection des formulaires à sauver
-    const compRef: ComponentRef<SaveCalculatorComponent> = this.saveCalcDialogAnchor.createDialog();
+    const compRef: ComponentRef<SaveCalculatorComponent> = this.appSaveCalcDialogAnchor.createDialog();
 
     // création de la liste des formulaires
     const list = [];
     for (const c of this._calculators) {
-      const uid = +c["uid"];
+      const uid = c["uid"];
       list.push({
         "selected": uid === form.uid,
         "title": c["title"],
@@ -253,7 +252,7 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
   }
 
   private closeCalculator(form: FormulaireDefinition) {
-    const formId: number = form.uid;
+    const formId: string = form.uid;
 
     // désabonnement en tant qu'observateur
 
@@ -269,27 +268,27 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
      * - ou celle avant celle supprimée si on supprime la dernière
      */
 
-    let newId = -1;
+    let newId = null;
     const l = this._calculators.length;
     if (l > 1) {
       if (closedIndex === l - 1) {
-        newId = +this._calculators[closedIndex - 1]["uid"];
+        newId = this._calculators[closedIndex - 1]["uid"];
       } else {
-        newId = +this._calculators[closedIndex + 1]["uid"];
+        newId = this._calculators[closedIndex + 1]["uid"];
       }
     }
 
     // suppression
 
     this._calculators = this._calculators.filter(calc => {
-      return formId !== +calc["uid"];
+      return formId !== calc["uid"];
     });
 
     // MAJ affichage
 
-    if (newId === -1) {
+    if (newId === null) {
       this.toList();
-      this._currentFormId = -1;
+      this._currentFormId = null;
     } else {
       this.toCalc(newId);
     }
@@ -331,16 +330,11 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
     document.getElementById("mySidenav").style.width = "0";
   }
 
-  public newCalc() {
-    this.closeNav();
-    this.toList();
-  }
-
   public loadSession() {
     this.closeNav();
 
     // création du dialogue de sélection des formulaires à sauver
-    const compRef: ComponentRef<LoadCalculatorComponent> = this.loadCalcDialogAnchor.createDialog();
+    const compRef: ComponentRef<LoadCalculatorComponent> = this.appLoadCalcDialogAnchor.createDialog();
 
     const prom: Promise<any[]> = compRef.instance.run();
     prom.then(list => {
@@ -349,11 +343,6 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
     }).catch(err => { });
   }
 
-  public params() {
-    this.closeNav();
-    this.router.navigate(["/setup"]);
-  }
-
   public getDateRevision(): string[] {
     const dr: string[] = [jalhydDateRev, nghydDateRev];
     return dr;