diff --git a/src/app/app.component.html b/src/app/app.component.html
index 59b44ad6d14f0f8e9f70336894f412db2ad1ecba..033258eac87ab2742e0deaaffd66c70f1570abf8 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,8 +1,6 @@
-<!--The content below is only a placeholder and can be replaced.-->
-
<header>
<!--Navbar-->
- <mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo">
+ <mdb-navbar SideClass="navbar navbar-expand-sm navbar-dark indigo">
<!-- Navbar brand -->
<logo>
@@ -76,4 +74,4 @@
<br>
<a href="http://www.irstea.fr/">Institut national de recherche en sciences et technologies pour l'environnement et l'agriculture</a>
</div> -->
-</footer>
\ No newline at end of file
+</footer>
diff --git a/src/app/calculators/cond_distri/conddistri.component.html b/src/app/calculators/cond_distri/conddistri.component.html
index 5d69e17108aee0fd5e54d296a423f61a94602c6c..e2528b4fcb9908239ec42a5f517fb91de273f131 100644
--- a/src/app/calculators/cond_distri/conddistri.component.html
+++ b/src/app/calculators/cond_distri/conddistri.component.html
@@ -1,2 +1,8 @@
-<h1>{{uitextTitre}}</h1>
+<div class="container-fluid">
+ <div class="row">
+ <div class="col">
+ <h1>{{uitextTitre}}</h1>
+ </div>
+ </div>
+</div>
<hydrocalc type="ConduiteDistributrice"></hydrocalc>
\ No newline at end of file
diff --git a/src/app/calculators/generic/calculator.component.html b/src/app/calculators/generic/calculator.component.html
index eb1c36d1d39d61be352a38afe64d914bc33989da..16d5e13c214d30f4705dbd7327a2d59d1dee73c9 100644
--- a/src/app/calculators/generic/calculator.component.html
+++ b/src/app/calculators/generic/calculator.component.html
@@ -1,11 +1,27 @@
-<table>
- <field-set [style.display]="getFieldsetStyleDisplay(fs.id)" *ngFor="let fs of fieldSets" [id]=fs.id [fieldSet]=fs (onRadio)=onRadioClick($event)
- (onSelectChange)=onSelectChanged($event)></field-set>
-</table>
+<field-set *ngFor="let fs of fieldSets" [style.display]="getFieldsetStyleDisplay(fs.id)" [id]=fs.id [fieldSet]=fs (onRadio)=onRadioClick($event)
+ (onSelectChange)=onSelectChanged($event)></field-set>
-<div style="text-align:center;">
- <button type="button" class="button_compute" name="Calculer" (click)="doCompute()">{{uitextCalculer}}</button>
+<div class="container-fluid">
+ <div class="row ">
+ <div class="col text-center">
+ <p></p>
+ </div>
+ </div>
+
+ <div class="row ">
+ <div class="col text-center">
+ <button type="button" class="button_compute" name="Calculer" (click)="doCompute()">{{uitextCalculer}}</button>
+ </div>
+ </div>
+
+ <div class="row ">
+ <div class="col text-center">
+ <p></p>
+ </div>
+ </div>
</div>
<calc-results [style.display]="getResultsStyleDisplay()"></calc-results>
+<!--
<section-results [style.display]="getSectionResultsStyleDisplay()"></section-results>
-<remous-results [style.display]="getRemousResultsStyleDisplay()"></remous-results>
\ No newline at end of file
+<remous-results [style.display]="getRemousResultsStyleDisplay()"></remous-results>
+ -->
\ No newline at end of file
diff --git a/src/app/components/calculator-results/calculator-results.component.html b/src/app/components/calculator-results/calculator-results.component.html
index 92b0803bd391865cec7b15f9742b0d306d3edfff..8dc76fc6e4ecec71fda2dbfdd19858770ac5940b 100644
--- a/src/app/components/calculator-results/calculator-results.component.html
+++ b/src/app/components/calculator-results/calculator-results.component.html
@@ -1,27 +1,54 @@
-<chart *ngIf="showVarResults" style="float: left" [type]="graph_type" [data]="graph_data" [options]="graph_options">
-</chart>
+<div class="container-fluid">
+ <div class="row resultchart">
+ <div class="col-8 mx-auto">
+ <chart *ngIf="showVarResults" [type]="graph_type" [data]="graph_data" [options]="graph_options">
+ </chart>
+ </div>
+ </div>
+</div>
-<div style="text-align:center;">
- <!-- table des résultats fixées -->
- <table style="float: left">
- <tr>
- <th>{{uitextParamFixes}}</th>
- <th>{{uitextValeurs}}</th>
- </tr>
- <tr *ngFor="let r of _fixedResults; let i=index" [class]="getFixedResultClass(i)">
- <td class="result_label">{{r.label}}</td>
- <td class="result_value">{{r.value}}</td>
- </tr>
- </table>
- <!-- table des résultats variés -->
- <table *ngIf="showVarResults" style="float: left">
- <tr>
- <th>{{_variableParamHeader}}</th>
- <th>{{_variableResultHeader}}</th>
- </tr>
- <tr *ngFor="let r of _varResults; let i=index" [class]="getVarResultClass(i)">
- <td class="result_label">{{r.param}}</td>
- <td class="result_value">{{r.result}}</td>
- </tr>
- </table>
+<div class="container-fluid">
+ <div class="row">
+
+ <!-- table des résultats fixés -->
+ <div class="col-4 mx-auto">
+ <div class="container">
+ <div class="row">
+ <div class="col-12">
+ <table class="table">
+ <tr>
+ <th>{{uitextParamFixes}}</th>
+ <th>{{uitextValeurs}}</th>
+ </tr>
+ <!-- <tr *ngFor="let r of _fixedResults; let i=index" [class]="getFixedResultClass(i)"> -->
+ <tr *ngFor="let r of _fixedResults; let i=index">
+ <td class="result_label {{getFixedResultClass(i)}}">{{r.label}}</td>
+ <td class="result_value {{getFixedResultClass(i)}}">{{r.value}}</td>
+ </tr>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- table des résultats variés -->
+ <div class="col-5 mx-auto" *ngIf="showVarResults">
+ <div class="container">
+ <div class="row">
+ <div class="col-12">
+ <table class="table table-striped">
+ <tr>
+ <th>{{_variableParamHeader}}</th>
+ <th>{{_variableResultHeader}}</th>
+ </tr>
+ <tr *ngFor="let r of _varResults; let i=index">
+ <td class="result_label">{{r.param}}</td>
+ <td class="result_value">{{r.result}}</td>
+ </tr>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
\ No newline at end of file
diff --git a/src/app/components/calculator-results/calculator-results.component.ts b/src/app/components/calculator-results/calculator-results.component.ts
index b36bf46630f0c03af1515d68a0a89b6571b4b4e7..3a22525f8a6a6ff7bd622a924f1e089187f72dde 100644
--- a/src/app/components/calculator-results/calculator-results.component.ts
+++ b/src/app/components/calculator-results/calculator-results.component.ts
@@ -9,20 +9,19 @@ import { InternationalisationService } from '../../services/internationalisation
styles: [`
.result_label {
text-align: right;
- padding-top:10px;
- padding-bottom:10px;
- padding-right:10px;
}
.result_value {
text-align: center;
- padding-left:30px;
- padding-right:30px;
}
.result_id_0 {
background-color: #f0f0f0;
}
+ .result_id_1 {
+ background-color: #ffffff;
+ }
.result_id_2 {
- font-weight: bold;
+ font-weight: bolder;
+ background-color: #00d0ff;
}
`
]
@@ -63,7 +62,7 @@ export class CalculatorResultsComponent {
private graph_data = {};
private graph_options = {
responsive: true,
- maintainAspectRatio: false,
+ maintainAspectRatio: true,
animation: {
duration: 0
},
@@ -162,11 +161,7 @@ export class CalculatorResultsComponent {
private getFixedResultClass(i: number) {
if (this._isFixed && i == this._fixedResults.length - 1)
- return "result_id_2"
- return "result_id_" + String(i & 1);
- }
-
- private getVarResultClass(i: number) {
+ return "font-weight-bold";
return "result_id_" + String(i & 1);
}
}
diff --git a/src/app/components/field-set/field-set.html b/src/app/components/field-set/field-set.html
index b7bc1e7d33fc6b7962c7b32dc60c2dd98d0c31c5..e748d6d465dbad8da7f7a37d7efcdf1d87d72057 100644
--- a/src/app/components/field-set/field-set.html
+++ b/src/app/components/field-set/field-set.html
@@ -1,4 +1,4 @@
-<tr>
+<!-- <tr>
<td colspan="5">
<div class="fieldset_title">{{_fieldSet.label}}</div>
</td>
@@ -9,4 +9,27 @@
<select-field-line *ngIf="p.isSelect" [id]=p.id (onSelectChange)=onSelectChanged($event)></select-field-line>
<check-field-line *ngIf="p.isCheck" [id]=p.id></check-field-line>
</td>
-</tr>
\ No newline at end of file
+</tr> -->
+
+<div class="container-fluid">
+ <div class="row">
+ <div class="col-12 fieldset_title">
+ {{_fieldSet.label}}
+ </div>
+ </div>
+</div>
+
+<!--
+ <tag *ngFor="let var of array" *ngIf="...utilisation de var..." >
+ </tag>
+ peut être transformé en
+ <ng-template ngFor let-var [ngForOf]="array">
+ <tag *ngIf="...utilisation de var..." >
+ </tag>
+ </ng-template>
+-->
+
+<ng-template ngFor let-p [ngForOf]="_fieldSet.fields">
+ <param-field-line *ngIf="p.isInput" [computeNodeType]=_fieldSet.computeNodeType [symbol]=p.symbol (onRadio)=onRadioClick($event)>
+ </param-field-line>
+</ng-template>
\ No newline at end of file
diff --git a/src/app/components/param-field-line/param-field-line.html b/src/app/components/param-field-line/param-field-line.html
index 0e15bfd64307a98c2039c0a322b8e5893825c677..661d79523508a132e286443a9cc31f2b82531c30 100644
--- a/src/app/components/param-field-line/param-field-line.html
+++ b/src/app/components/param-field-line/param-field-line.html
@@ -1,86 +1,69 @@
-<tr>
- <td align="right" class="param_title">{{title}}</td>
+<div class="container-fluid">
+ <div class="row">
+ <!-- titre -->
+ <div class="col-3 param_title">
+ {{title}}
+ </div>
- <td>
- <param-input [inputDisabled]="isInputDisabled" [computeNodeType]="nodeType" [symbol]="symbol"></param-input>
- </td>
- <td align="center" class="radio_param">
- <input *ngIf="hasRadioFix()" type="radio" name="radio_param_{{symbol}}" value="fix" (click)="onRadioClick(symbol, 'fix')"
- [checked]=radioFixCheck [disabled]=isDisabled id="radio_fix" />
- <label *ngIf="hasRadioFix()" for="radio_fix">{{uitextParamFixe}}</label>
- </td>
+ <!-- input de saisie de la valeur -->
+ <div class="col-3 col-sm-2">
+ <param-input [inputDisabled]="isInputDisabled" [computeNodeType]="nodeType" [symbol]="symbol"></param-input>
+ </div>
- <td align="center" class="radio_param">
- <input *ngIf="hasRadioVar()" type="radio" name="radio_param_{{symbol}}" value="var" (click)="onRadioClick(symbol,
+ <!-- radio "fixé" -->
+ <div class="col-sm-2 col-md-2 col-lg-1">
+ <input *ngIf="hasRadioFix()" type="radio" name="radio_param_{{symbol}}" value="fix" (click)="onRadioClick(symbol, 'fix')"
+ [checked]=radioFixCheck [disabled]=isDisabled id="radio_fix" />
+ <label *ngIf="hasRadioFix()" for="radio_fix">{{uitextParamFixe}}</label>
+ </div>
+
+ <!-- radio "varier" -->
+ <div class="col-sm-2 col-md-2 col-lg-1">
+ <input *ngIf="hasRadioVar()" type="radio" name="radio_param_{{symbol}}" value="var" (click)="onRadioClick(symbol,
'var')" [checked]=radioVarCheck [disabled]=isDisabled id="radio_var" />
- <label *ngIf="hasRadioVar()" for="radio_var">{{uitextParamVarier}}</label>
- </td>
+ <label *ngIf="hasRadioVar()" for="radio_var">{{uitextParamVarier}}</label>
+ </div>
- <td align="center" class="radio_param">
- <input *ngIf="hasRadioCal()" type="radio" name="radio_param_{{symbol}}" value="cal" (click)="onRadioClick(symbol,
- 'cal')" [checked]=radioCalCheck [disabled]=isDisabled id="radio_cal" />
- <label *ngIf="hasRadioCal()" for="radio_cal">{{uitextParamCalculer}}</label>
- </td>
-</tr>
-<!--
-<tr [style.display]="isVarRadio">
- <td></td>
- <td></td>
- <td>
- De la valeur minimum
- </td>
- <td>
- <input [(ngModel)]="_param.minValue">
- </td>
-</tr>
-<tr [style.display]="isVarRadio">
- <td></td>
- <td></td>
- <td>
- Ã la valeur maximum
- </td>
- <td>
- <input [(ngModel)]="_param.maxValue">
- </td>
-</tr>
-<tr [style.display]="isVarRadio">
- <td></td>
- <td></td>
- <td>
- avec un pas de :
- </td>
- <td>
- <input [(ngModel)]="_param.stepValue">
- </td>
-</tr>
--->
-<!--
-<tr [style.display]="isVarRadio">
- <div align="center">
- De la valeur minimum
- <input [(ngModel)]="_param.minValue">
- </div>
- <div align="center">
- Ã la valeur maximum
- <input [(ngModel)]="_param.maxValue">
- </div>
- <div align="center">
- avec un pas de :
- <input [(ngModel)]="_param.stepValue">
+ <!-- radio "calculer" -->
+ <div class="col-sm-3 col-md-2 col-lg-2">
+ <input *ngIf="hasRadioCal()" type="radio" name="radio_param_{{symbol}}" value="cal" (click)="onRadioClick(symbol,
+ 'cal')" [checked]=radioCalCheck [disabled]=isDisabled id="radio_cal" />
+ <label *ngIf="hasRadioCal()" for="radio_cal">{{uitextParamCalculer}}</label>
+ </div>
</div>
-</tr>
--->
-<tr [style.display]="isVarRadio">
- <div align="center">
- {{uitextValeurMini}}
- <input [(ngModel)]="_param.minValue">
+</div>
+
+<div class="container-fluid" [style.display]="isVarRadio">
+ <div class="row">
+ <div class="col-sm-1 col-md-5"></div>
+ <div class="col-sm-4 col-md-3 col-lg-2">
+ {{uitextValeurMini}}
+ </div>
+ <div class="col-2">
+ <!-- <input [(ngModel)]="_param.minValue"> -->
+ <input type="text" class="input-alternate" name="inputmin" placeholder="min" [(ngModel)]="_param.minValue" />
+ </div>
</div>
- <div align="center">
- {{uitextValeurMaxi}}
- <input [(ngModel)]="_param.maxValue">
+
+ <div class="row">
+ <div class="col-sm-1 col-md-5"></div>
+ <div class="col-sm-4 col-md-3 col-lg-2">
+ {{uitextValeurMaxi}}
+ </div>
+ <div class="col-2">
+ <!-- <input [(ngModel)]="_param.maxValue"> -->
+ <input type="text" class="input-alternate" name="inputmax" placeholder="max" [(ngModel)]="_param.maxValue" />
+ </div>
</div>
- <div align="center">
- {{uitextPasVariation}}
- <input [(ngModel)]="_param.stepValue">
+
+ <div class="row">
+ <div class="col-sm-1 col-md-5"></div>
+ <div class="col-sm-4 col-md-3 col-lg-2">
+ {{uitextPasVariation}}
+ </div>
+ <div class="col-2">
+ <!-- <input [(ngModel)]="_param.stepValue"> -->
+ <input type="text" class="input-alternate" name="inputstep" placeholder="step" [(ngModel)]="_param.stepValue" />
+ </div>
</div>
-</tr>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/app/components/param-input/param-input.component.html b/src/app/components/param-input/param-input.component.html
index 31c21314021b2fc2bd3e805b3a5fc06202135191..5626abaa839deb0260dbd2496dbdb967fec1cc94 100644
--- a/src/app/components/param-input/param-input.component.html
+++ b/src/app/components/param-input/param-input.component.html
@@ -1,12 +1,27 @@
-<p *ngIf="displayTitle">{{uitextParamInput}}</p>
-<input [disabled]="_inputDisabled" placeholder="{{_paramDef.symbol}}" [ngModel]="_uiValue.uncheckedValueString" (ngModelChange)="setValue($event)"
-/>
-<br/> {{_message}}
-<!--
-<p *ngIf="displayTitle" i18n="@@titre_saisie_param">Saisie de paramètre</p>
-<md-input-container>
- <input mdInput placeholder="{{_paramDef.symbol}}" [ngModel]="_uiValue.uncheckedValueString" (ngModelChange)="setValue($event)"
- />
- <md-hint>{{_message}}</md-hint>
-</md-input-container>
--->
\ No newline at end of file
+<div class="container">
+ <div class="row" *ngIf="displayTitle">
+ <div class="col-12">
+ {{uitextParamInput}}
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-12">
+ <form>
+ <div class="md-form">
+ <!-- <input mdbActive type="text" class="form-control" id="form1" name="email" mdbInputValidate> -->
+ <input type="text" class="input-alternate" id="form1" name="form1" [disabled]="_inputDisabled" placeholder="{{_paramDef.symbol}}"
+ [ngModel]="_uiValue.uncheckedValueString" (ngModelChange)="setValue($event)" />
+ <label class="active" for="form1" *ngIf="displayTitle">{{uitextParamInput}}</label>
+ <small class="text-danger">{{_message}}</small>
+ </div>
+ </form>
+ </div>
+ </div>
+
+ <div class="row" *ngIf="displayTitle">
+ <div class="col-12">
+ {{_message}}
+ </div>
+ </div>
+</div>