From 1d45b5bf98ed83720db65af548aae4cd134db3d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois?= <francois.grand@irstea.fr> Date: Thu, 25 Jan 2018 06:50:54 +0100 Subject: [PATCH 1/6] =?UTF-8?q?classe=20GenericInputComponent=20:=20factor?= =?UTF-8?q?isation=20de=20code=20(m=C3=A9thode=20updateAndValidateUI)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../generic-input/generic-input.component.ts | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/app/components/generic-input/generic-input.component.ts b/src/app/components/generic-input/generic-input.component.ts index 2077a6bbb..70a31ad94 100644 --- a/src/app/components/generic-input/generic-input.component.ts +++ b/src/app/components/generic-input/generic-input.component.ts @@ -148,14 +148,19 @@ export abstract class GenericInputComponent extends BaseComponent { this.validateModel(); } - public set model(v: any) { - this.setAndValidateModel(v); - - // MAJ UI + /** + * MAJ et validation de l'UI + */ + protected updateAndValidateUI() { this._uiValue = this.modelToUI(this.getModelValue()); this.validateUI(); } + public set model(v: any) { + this.setAndValidateModel(v); + this.updateAndValidateUI(); + } + private get uiValue() { return this._uiValue; } @@ -175,8 +180,8 @@ export abstract class GenericInputComponent extends BaseComponent { * @see BaseComponent */ protected afterFirstViewChecked() { - this._uiValue = this.modelToUI(this.getModelValue()); - this.validate(); + this.updateAndValidateUI(); + this.validateModel(); } /** -- GitLab From 8374563c455ba292a165a9f3567b3ef47d8423f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois?= <francois.grand@irstea.fr> Date: Thu, 25 Jan 2018 06:54:20 +0100 Subject: [PATCH 2/6] ticket #51 : ajout du composant CalculatorNameComponent de saisie du nom de la calculette --- src/app/app.module.ts | 3 +- .../generic-calculator/calc-name.component.ts | 86 +++++++++++++++++++ 2 files changed, 88 insertions(+), 1 deletion(-) create mode 100644 src/app/components/generic-calculator/calc-name.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8b33c6b09..5b51e56b9 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -30,6 +30,7 @@ import { CalculatorResultsComponent } from './components/calculator-results/calc import { FixedVarResultsComponent } from './components/fixedvar-results/fixedvar-results.component'; import { SectionResultsComponent } from './components/section-results/section-results.component'; import { GenericCalculatorComponent } from './components/generic-calculator/calculator.component'; +import { CalculatorNameComponent } from './components/generic-calculator/calc-name.component'; import { CalcCanvasComponent } from './components/canvas/canvas.component'; import { SectionCanvasComponent } from './components/section-canvas/section-canvas.component'; import { RemousResultsComponent } from './components/remous-results/remous-results.component'; @@ -74,7 +75,7 @@ const appRoutes: Routes = [ CalculatorListComponent, ApplicationSetupComponent, BaseParamInputComponent, - GenericCalculatorComponent, + GenericCalculatorComponent, CalculatorNameComponent, // AlertDialog, CalculatorResultsComponent, FixedVarResultsComponent, SectionResultsComponent, RemousResultsComponent, ResultsGraphComponent, GraphTypeSelectComponent, diff --git a/src/app/components/generic-calculator/calc-name.component.ts b/src/app/components/generic-calculator/calc-name.component.ts new file mode 100644 index 000000000..ba100ae75 --- /dev/null +++ b/src/app/components/generic-calculator/calc-name.component.ts @@ -0,0 +1,86 @@ +import { Component, Input } from "@angular/core"; +import { GenericInputComponent } from "../generic-input/generic-input.component"; +import { FormulaireDefinition } from "../../formulaire/formulaire-definition"; + +@Component({ + selector: 'calc-name', + templateUrl: "../generic-input/generic-input.component.html", +}) +export class CalculatorNameComponent extends GenericInputComponent { + /** + * formulaire géré + */ + private _form: FormulaireDefinition; + + public set formulaire(f: FormulaireDefinition) { + this._form = f; + this.updateAndValidateUI(); + } + + /** + * retourne la valeur du modèle + */ + protected getModelValue(): any { + if (this._form == undefined) + return undefined; + return this._form.calculatorName; + } + + /** + * affecte la valeur du modèle + */ + protected setModelValue(v: any) { + this._form.calculatorName = v; + this.updateAndValidateUI(); + } + + /** + * valide une valeur de modèle : est ce une valeur acceptable ? (par ex, nombre dans un intervalle, valeur dans une liste, ...) + * @param v valide la valeur du modèle + * @returns isValid : true si la valeur est valide, false sinon + * @returns message : message d'erreur + */ + protected validateModelValue(v: any): { isValid: boolean, message: string } { + let msg = undefined; + let valid = false; + + if (!(typeof (v) == "string") || v.length < 1) + msg = "Veuillez entrer un nom"; + else + valid = true; + + return { isValid: valid, message: msg }; + } + + /** + * convertit le modèle en valeur affichable par l'UI + */ + protected modelToUI(v: any): string { + return v; + } + + /** + * valide une valeur saisie dans l'UI (forme de la saisie : est ce bien une date, un nombre, ...) + * @param ui valide la valeur saisie + * @returns isValid : true si la valeur est valide, false sinon + * @returns message : message d'erreur + */ + protected validateUIValue(ui: string): { isValid: boolean, message: string } { + let valid: boolean = false; + let msg: string = undefined; + + if (ui == undefined || ui.length < 1) + msg = "Veuillez entrer un nom"; + else + valid = true; + + return { isValid: valid, message: msg }; + } + + /** + * convertit une valeur saisie dans l'UI en valeur affectable au modèle + */ + protected uiToModel(ui: string): any { + return ui; + } +} -- GitLab From b6d7fd43bed4d6da24c30f0fe3f339f8ef43024e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois?= <francois.grand@irstea.fr> Date: Thu, 25 Jan 2018 07:02:57 +0100 Subject: [PATCH 3/6] =?UTF-8?q?ticket=20#51=20:=20int=C3=A9gration=20du=20?= =?UTF-8?q?composant=20CalculatorNameComponent=20aux=20calculettes=20-=20l?= =?UTF-8?q?e=20nom=20de=20calculette=20affich=C3=A9=20dans=20la=20liste=20?= =?UTF-8?q?de=20calculettes=20est=20mis=20=C3=A0=20jour=20quand=20on=20mod?= =?UTF-8?q?ifie=20son=20nom?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.component.ts | 41 +++++++++++++++---- .../calculator.component.html | 7 ++++ .../calculator.component.ts | 9 +++- src/app/formulaire/formulaire-definition.ts | 18 ++++++++ .../services/formulaire/formulaire.service.ts | 2 +- 5 files changed, 68 insertions(+), 9 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index a9a6a7a51..2c3ab0eee 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -102,10 +102,13 @@ export class AppComponent implements OnInit, OnDestroy, Observer { const f: FormulaireDefinition = data["form"]; this._calculators.push( { - "title": CalculatorType[f.calculatorType] + String(f.uid), + "title": f.calculatorName, "uid": String(f.uid) } ); + + // abonnement en tant qu'observateur du nouveau formulaire + f.addObserver(this); break; case "invalidFormId": @@ -113,25 +116,49 @@ export class AppComponent implements OnInit, OnDestroy, Observer { break; case "closeForm": - const uid: number = data["formId"]; - this.closeCalculator(uid); + const form: FormulaireDefinition = data["form"]; + this.closeCalculator(form); break; } } else if (sender instanceof InternationalisationService) { this.updateLocale(); } + else if (sender instanceof FormulaireDefinition) { + switch (data["action"]) { + case "nameChanged": + this.updateCalculatorTitle(sender, data["name"]); + break; + } + } } - private closeCalculator(formId: number) { - // recherche de la calculette correspondante à formId - - const closedIndex = this._calculators.reduce((resultIndex, calc, currIndex) => { + private getCalculatorIndexFromId(formId: number) { + const index = this._calculators.reduce((resultIndex, calc, currIndex) => { if (resultIndex == -1 && calc["uid"] == formId) resultIndex = currIndex; return resultIndex; }, -1); + return index; + } + + private updateCalculatorTitle(f: FormulaireDefinition, title: string) { + const formIndex = this.getCalculatorIndexFromId(f.uid); + this._calculators[formIndex]["title"] = title; + } + + private closeCalculator(form: FormulaireDefinition) { + const formId: number = form.uid; + + // désabonnement en tant qu'observateur + + form.removeObserver(this); + + // recherche de la calculette correspondante à formId + + const closedIndex = this.getCalculatorIndexFromId(formId); + /* * détermination de la nouvelle calculette à afficher : * - celle après celle supprimée diff --git a/src/app/components/generic-calculator/calculator.component.html b/src/app/components/generic-calculator/calculator.component.html index 4621678b1..8c7d3b1c4 100644 --- a/src/app/components/generic-calculator/calculator.component.html +++ b/src/app/components/generic-calculator/calculator.component.html @@ -11,6 +11,13 @@ </div> </div> +<!-- nom de la calculette --> +<div class="row"> + <div class="col-6"> + <calc-name title="Nom de la calculette"></calc-name> + </div> +</div> + <div class="row"> <div [ngClass]="(hasResults) ? 'col-12 col-lg-6' : 'col-12'"> <div class="container-fluid"> diff --git a/src/app/components/generic-calculator/calculator.component.ts b/src/app/components/generic-calculator/calculator.component.ts index f5aba20e3..ef06577ed 100644 --- a/src/app/components/generic-calculator/calculator.component.ts +++ b/src/app/components/generic-calculator/calculator.component.ts @@ -11,7 +11,7 @@ import { Observer } from "../../services/observer"; import { Subscription } from "rxjs/Subscription"; import { FieldSetComponent } from "../field-set/field-set.component"; import { BaseComponent } from "../base/base.component"; - +import { CalculatorNameComponent } from "./calc-name.component"; @Component({ selector: 'hydrocalc', @@ -47,6 +47,12 @@ export class GenericCalculatorComponent extends BaseComponent implements OnInit, @ViewChild(CalculatorResultsComponent) private resultsComponent: CalculatorResultsComponent; + /** + * composant "nom de la calculette" + */ + @ViewChild(CalculatorNameComponent) + private _calculatorNameComponent: CalculatorNameComponent; + /** * formulaire affiché */ @@ -243,6 +249,7 @@ export class GenericCalculatorComponent extends BaseComponent implements OnInit, const uid: number = +data["formId"]; this.setForm(this.formulaireService.getFormulaireFromId(uid)); this.resultsComponent.formulaire = this._formulaire; + this._calculatorNameComponent.formulaire = this._formulaire; if (this._formulaire != undefined) this._formulaire.updateNodeType(); break; diff --git a/src/app/formulaire/formulaire-definition.ts b/src/app/formulaire/formulaire-definition.ts index 30b7f7323..05780b2e1 100644 --- a/src/app/formulaire/formulaire-definition.ts +++ b/src/app/formulaire/formulaire-definition.ts @@ -78,6 +78,11 @@ export class FormulaireDefinition extends Observable { */ private _remousResults: RemousResults; + /** + * nom de de la calculette + */ + private _calculatorName: string; + constructor( private _calcType: CalculatorType, private paramService: ParamService, @@ -89,6 +94,7 @@ export class FormulaireDefinition extends Observable { this._fixVarResults = new FixedVarResults(); this._sectionResults = new SectionResults(); this._remousResults = new RemousResults(); + this._calculatorName = CalculatorType[this._calcType] + " (" + this.uid + ")"; } public get calculatorType(): CalculatorType { @@ -1230,4 +1236,16 @@ export class FormulaireDefinition extends Observable { res = res && fs.isValid; return res; } + + public get calculatorName() { + return this._calculatorName; + } + + public set calculatorName(n: string) { + this._calculatorName = n; + this.notifyObservers({ + "action": "nameChanged", + "name": n + }); + } } diff --git a/src/app/services/formulaire/formulaire.service.ts b/src/app/services/formulaire/formulaire.service.ts index 6bc3746c9..c454f5f44 100644 --- a/src/app/services/formulaire/formulaire.service.ts +++ b/src/app/services/formulaire/formulaire.service.ts @@ -192,7 +192,7 @@ export class FormulaireService extends Observable { this.notifyObservers({ "action": "closeForm", - "formId": uid + "form": form }); } } -- GitLab From bdb8034b788ca09e50c0ed8df4e384131059bb5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois?= <francois.grand@irstea.fr> Date: Thu, 25 Jan 2018 07:17:24 +0100 Subject: [PATCH 4/6] =?UTF-8?q?ticket=20#51=20:=20d=C3=A9placement=20de=20?= =?UTF-8?q?la=20conversion=20CalculatorType=20->=20titre=20calculette=20da?= =?UTF-8?q?ns=20FormulaireService=20(m=C3=A9thode=20getLocalisedTitleFromC?= =?UTF-8?q?alculatorType)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../calculator.component.ts | 26 +---------------- .../services/formulaire/formulaire.service.ts | 28 +++++++++++++++++++ 2 files changed, 29 insertions(+), 25 deletions(-) diff --git a/src/app/components/generic-calculator/calculator.component.ts b/src/app/components/generic-calculator/calculator.component.ts index ef06577ed..db6d7b5bb 100644 --- a/src/app/components/generic-calculator/calculator.component.ts +++ b/src/app/components/generic-calculator/calculator.component.ts @@ -102,31 +102,7 @@ export class GenericCalculatorComponent extends BaseComponent implements OnInit, private get uitextTitre() { if (this.hasForm) - switch (this._formulaire.calculatorType) { - case CalculatorType.ConduiteDistributrice: - return this.intlService.localizeText("INFO_CONDDISTRI_TITRE"); - - case CalculatorType.LechaptCalmon: - return this.intlService.localizeText("INFO_LECHAPT_TITRE"); - - case CalculatorType.RegimeUniforme: - return this.intlService.localizeText("INFO_REGUNI_TITRE"); - - case CalculatorType.SectionParametree: - return this.intlService.localizeText("INFO_SECTPARAM_TITRE"); - - case CalculatorType.CourbeRemous: - return this.intlService.localizeText("INFO_REMOUS_TITRE") - - case CalculatorType.PabDimensions: - return this.intlService.localizeText("INFO_PABDIM_TITRE") - - case CalculatorType.PabPuissance: - return this.intlService.localizeText("INFO_PABPUISS_TITRE") - - default: - return "Invalid calculator type " + this._formulaire.calculatorType; - } + return this.formulaireService.getLocalisedTitleFromCalculatorType(this._formulaire.calculatorType); return undefined; } diff --git a/src/app/services/formulaire/formulaire.service.ts b/src/app/services/formulaire/formulaire.service.ts index c454f5f44..00c783d6d 100644 --- a/src/app/services/formulaire/formulaire.service.ts +++ b/src/app/services/formulaire/formulaire.service.ts @@ -81,6 +81,34 @@ export class FormulaireService extends Observable { } } + public getLocalisedTitleFromCalculatorType(type: CalculatorType) { + switch (type) { + case CalculatorType.ConduiteDistributrice: + return this.intlService.localizeText("INFO_CONDDISTRI_TITRE"); + + case CalculatorType.LechaptCalmon: + return this.intlService.localizeText("INFO_LECHAPT_TITRE"); + + case CalculatorType.RegimeUniforme: + return this.intlService.localizeText("INFO_REGUNI_TITRE"); + + case CalculatorType.SectionParametree: + return this.intlService.localizeText("INFO_SECTPARAM_TITRE"); + + case CalculatorType.CourbeRemous: + return this.intlService.localizeText("INFO_REMOUS_TITRE") + + case CalculatorType.PabDimensions: + return this.intlService.localizeText("INFO_PABDIM_TITRE") + + case CalculatorType.PabPuissance: + return this.intlService.localizeText("INFO_PABPUISS_TITRE") + + default: + return "Invalid calculator type " + type; + } + } + private loadConfig(form: FormulaireDefinition, ct: CalculatorType): Promise<Response> { let processData = function (s: string) { form.parseConfig(JSON.parse(s)); -- GitLab From cb7f9874f3fe3865392a4a4db4809e4eab47b8c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois?= <francois.grand@irstea.fr> Date: Thu, 25 Jan 2018 07:28:06 +0100 Subject: [PATCH 5/6] ticket #51 : utilisation de FormulaireService.getLocalisedTitleFromCalculatorType() dans CalculatorListComponent --- .../calculator-list.component.ts | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/src/app/components/calculator-list/calculator-list.component.ts b/src/app/components/calculator-list/calculator-list.component.ts index 509b10a1c..39993acec 100644 --- a/src/app/components/calculator-list/calculator-list.component.ts +++ b/src/app/components/calculator-list/calculator-list.component.ts @@ -1,13 +1,17 @@ -import { Component } from "@angular/core"; +import { Component, OnInit } from "@angular/core"; import { Router } from '@angular/router'; import { CalculatorType, FormulaireDefinition } from "../../formulaire/formulaire-definition"; import { FormulaireService } from "../../services/formulaire/formulaire.service"; import { InternationalisationService } from '../../services/internationalisation/internationalisation.service'; -import { OnInit } from "@angular/core/src/metadata/lifecycle_hooks"; +import { EnumEx } from "../../util"; class ListElement { - constructor(private _label: string, private _type: CalculatorType) { } + private _label: string; + + constructor(private _type: CalculatorType, formulaireService: FormulaireService) { + this._label = formulaireService.getLocalisedTitleFromCalculatorType(_type); + } public get label() { return this._label } public get type() { return this._type } @@ -31,13 +35,8 @@ export class CalculatorListComponent implements OnInit { private updateLocale() { this._items = []; - this._items.push(new ListElement(this.intlService.localizeText("INFO_CONDDISTRI_TITRE"), CalculatorType.ConduiteDistributrice)); - this._items.push(new ListElement(this.intlService.localizeText("INFO_LECHAPT_TITRE"), CalculatorType.LechaptCalmon)); - this._items.push(new ListElement(this.intlService.localizeText("INFO_REGUNI_TITRE"), CalculatorType.RegimeUniforme)); - this._items.push(new ListElement(this.intlService.localizeText("INFO_SECTPARAM_TITRE"), CalculatorType.SectionParametree)); - this._items.push(new ListElement(this.intlService.localizeText("INFO_REMOUS_TITRE"), CalculatorType.CourbeRemous)); - this._items.push(new ListElement(this.intlService.localizeText("INFO_PABDIM_TITRE"), CalculatorType.PabDimensions)); - this._items.push(new ListElement(this.intlService.localizeText("INFO_PABPUISS_TITRE"), CalculatorType.PabPuissance)); + for (let t of EnumEx.getValues(CalculatorType)) + this._items.push(new ListElement(t, this.formulaireService)); } private create(t: CalculatorType) { -- GitLab From dbb801357e133e696be6a94e302db2f3bfa32569 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois?= <francois.grand@irstea.fr> Date: Thu, 25 Jan 2018 07:32:05 +0100 Subject: [PATCH 6/6] =?UTF-8?q?ticket=20#51=20:=20internationalisation=20d?= =?UTF-8?q?u=20nom=20de=20calculette=20par=20d=C3=A9faut?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/formulaire/formulaire-definition.ts | 1 - src/app/services/formulaire/formulaire.service.ts | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/formulaire/formulaire-definition.ts b/src/app/formulaire/formulaire-definition.ts index 05780b2e1..4f1ebfc4c 100644 --- a/src/app/formulaire/formulaire-definition.ts +++ b/src/app/formulaire/formulaire-definition.ts @@ -94,7 +94,6 @@ export class FormulaireDefinition extends Observable { this._fixVarResults = new FixedVarResults(); this._sectionResults = new SectionResults(); this._remousResults = new RemousResults(); - this._calculatorName = CalculatorType[this._calcType] + " (" + this.uid + ")"; } public get calculatorType(): CalculatorType { diff --git a/src/app/services/formulaire/formulaire.service.ts b/src/app/services/formulaire/formulaire.service.ts index 00c783d6d..54323a114 100644 --- a/src/app/services/formulaire/formulaire.service.ts +++ b/src/app/services/formulaire/formulaire.service.ts @@ -123,6 +123,7 @@ export class FormulaireService extends Observable { throw "FormulaireService.createFormulaire() : invalid undefined CalculatorType" let f = new FormulaireDefinition(ct, this.paramService, this.intlService, this.appSetupService); + f.calculatorName = this.getLocalisedTitleFromCalculatorType(ct) + " (" + f.uid + ")"; this._formulaires.push(f); let prom: Promise<Response> = this.loadConfig(f, ct); return prom.then(_ => { -- GitLab