Skip to content
Snippets Groups Projects
Commit c267dbd5 authored by mathias.chouet's avatar mathias.chouet
Browse files

Matérialification des résultats fixes et variables

parent c5be9b6e
No related branches found
No related tags found
1 merge request!29Resolve "Remplacer mdbootstrap par angular-material"
Showing
with 286 additions and 294 deletions
......@@ -16,6 +16,7 @@ import {
MatInputModule,
MatListModule,
MatCardModule,
MatTableModule,
ErrorStateMatcher,
MatButtonToggleModule
} from "@angular/material";
......@@ -65,9 +66,6 @@ import { ApplicationSetupComponent } from "./components/app-setup/app-setup.comp
import { BaseParamInputComponent } from "./components/base-param-input/base-param-input.component";
import { FixedResultsComponent } from "./components/fixedvar-results/fixed-results.component";
import { VarResultsComponent } from "./components/fixedvar-results/var-results.component";
import { ResultElementBaseComponent } from "./components/result-element/result-element-base.component";
import { HorizontalResultElementComponent } from "./components/result-element/horizontal-result-element.component";
import { VerticalResultElementComponent } from "./components/result-element/vertical-result-element.component";
import { LogEntryComponent } from "./components/log-entry/log-entry.component";
import { ParamLinkComponent } from "./components/param-link/param-link.component";
......@@ -112,6 +110,7 @@ const appRoutes: Routes = [
MatMenuModule,
MatSelectModule,
MatSidenavModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
NgxMdModule.forRoot(),
......@@ -147,7 +146,6 @@ const appRoutes: Routes = [
FlexXxsShowHideDirective,
GenericCalculatorComponent,
GraphTypeSelectComponent,
HorizontalResultElementComponent,
JalhydAsyncModelValidationDirective,
JalhydModelValidationDirective,
LogComponent,
......@@ -158,13 +156,11 @@ const appRoutes: Routes = [
ParamLinkComponent,
ParamValuesComponent,
RemousResultsComponent,
ResultElementBaseComponent,
ResultsGraphComponent,
SectionCanvasComponent,
SectionResultsComponent,
SelectFieldLineComponent,
VarResultsComponent,
VerticalResultElementComponent
VarResultsComponent
],
entryComponents: [
DialogConfirmCloseCalcComponent,
......
<div class="container-fluid">
<fixedvar-results> </fixedvar-results>
<fixedvar-results></fixedvar-results>
<section-results></section-results>
<remous-results></remous-results>
</div>
......@@ -4,7 +4,7 @@ import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { I18nService } from "../../services/internationalisation/internationalisation.service";
import { NgParameter } from "../../formulaire/ngparam";
import { ParamValueMode } from "jalhyd";
import { sprintf } from 'sprintf-js';
import { sprintf } from "sprintf-js";
@Component({
selector: "dialog-edit-param-values",
......@@ -34,11 +34,6 @@ export class DialogEditParamValuesComponent implements OnInit {
@Inject(MAT_DIALOG_DATA) public data: any
) {
this.param = data.param;
if (this.isMinMax) {
console.log("PARAM MIN VALUE", this.param.minValue);
console.log("PARAM MAX VALUE", this.param.maxValue);
console.log("PARAM STEP VALUE", this.param.stepValue);
}
if (this.isListe) {
console.log("PARAM LIST VALUE", this.param.valueList);
}
......@@ -157,7 +152,6 @@ export class DialogEditParamValuesComponent implements OnInit {
public onFileSelected(event: any) {
if (event.target.files && event.target.files.length) {
console.log("FICHIERS", event.target.files);
const fr = new FileReader();
fr.onload = () => {
console.log("CHARJAY", fr.result);
......
<div class="container-fluid">
<div class="fixed-results-container" *ngIf="hasFixedParameters">
<!-- [style.display]="hasResults"> -->
<!-- table des résultats fixés -->
<table mat-table [dataSource]="dataSet">
<div *ngIf="hasFixedParameters" class="row">
<!-- table des résultats fixés -->
<div class="col mx-auto">
<table class="table" style="border: 1px solid rgb(230,230,230);">
<tr>
<th class="result_center">
{{ uitextParamFixes }}
</th>
<th class="result_center">
{{ uitextValeurs }}
</th>
</tr>
<tr *ngFor="let r of fixedParams; let i=index">
<td class="result_right {{getFixedParamClass(i)}}">
{{ formattedLabel(r) }}
</td>
<td class="result_center {{getFixedParamClass(i)}}">
{{ formattedValue(r) }}
</td>
</tr>
<tr *ngIf="hasParameterResult" vertical-result-element [result-element]=resultElement [_label]=resultLabel>
</tr>
</table>
</div>
</div>
</div>
\ No newline at end of file
<ng-container matColumnDef="parametre">
<th mat-header-cell *matHeaderCellDef>{{ uitextParamFixes }}</th>
<td mat-cell *matCellDef="let element" [ngClass]="{'highlightedResult': element.isCalcResult}">{{ element.label }}</td>
</ng-container>
<ng-container matColumnDef="valeur">
<th mat-header-cell *matHeaderCellDef>{{ uitextValeurs }}</th>
<td mat-cell *matCellDef="let element" [ngClass]="{'highlightedResult': element.isCalcResult}">{{ element.value }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="tableColumns"></tr>
<tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
<!-- <tr *ngIf="hasParameterResult" vertical-result-element [result-element]=resultElement [_label]=resultLabel> -->
</table>
</div>
:host {
display: block;
}
.fixed-results-container {
margin-top: 1em;
border: solid #ccc 1px;
}
table.mat-table {
.mat-header-row {
height: 40px;
}
.mat-row {
height: 32px;
&:nth-child(odd) {
background-color: #f4f4f4;
}
}
::ng-deep .mat-header-cell {
font-size: 1em;
color: black;
}
}
.highlightedResult {
font-weight: bold;
}
import { Component } from "@angular/core";
import { Component, ViewChild } from "@angular/core";
import { FixedResults } from "../../results/fixed-results";
import { NgParameter } from "../../formulaire/ngparam";
import { CalculatorResults } from "../../results/calculator-results";
import { I18nService } from "../../services/internationalisation/internationalisation.service";
import { ApplicationSetupService } from "../../services/app-setup/app-setup.service";
import { FixedVarResultsComponent } from "./fixedvar-results.component";
import { ResultElement } from "jalhyd";
import { MatTable } from "@angular/material";
@Component({
selector: "fixed-results",
templateUrl: "./fixed-results.component.html",
styles: [`
.result_right {
text-align: right;
}
.result_center {
text-align: center;
}
.result_id_0 {
background-color: #f0f0f0;
}
.result_id_1 {
background-color: #ffffff;
}
.result_id_2 {
font-weight: bolder;
background-color: #00d0ff;
}`]
styleUrls: [
"./fixed-results.component.scss"
]
})
export class FixedResultsComponent {
/**
* résultats non mis en forme
*/
/** résultats non mis en forme */
private _fixedResults: FixedResults;
@ViewChild(MatTable) table: MatTable<any>;
public tableColumns = [ "parametre", "valeur" ];
constructor(
private intlService: I18nService,
private appSetupService: ApplicationSetupService,
......@@ -48,14 +35,6 @@ export class FixedResultsComponent {
return this._fixedResults && this._fixedResults.hasResults;
}
private get resultElement(): ResultElement {
return this._fixedResults && this._fixedResults.result && this._fixedResults.result.resultElement;
}
private get resultLabel(): string {
return this._fixedResults && this._fixedResults.calculatedParameter && this._fixedResults.calculatedParameterHeader;
}
private get uitextParamFixes() {
return this.intlService.localizeText("INFO_CALCULATOR_PARAMFIXES");
}
......@@ -64,13 +43,6 @@ export class FixedResultsComponent {
return this.intlService.localizeText("INFO_CALCULATOR_VALEURS");
}
private getFixedParamClass(i: number) {
// if (this._results.isFixed && i === this._results.fixedResults.length - 1)
// return "font-weight-bold";
// tslint:disable-next-line:no-bitwise
return "result_id_" + String(i & 1);
}
private get fixedParams() {
return this._fixedResults && this._fixedResults.fixedParameters;
}
......@@ -88,7 +60,45 @@ export class FixedResultsComponent {
return p.getValue().toFixed(nDigits);
}
private get hasResults(): boolean {
return this._fixedResults && this._fixedResults.hasResults;
/**
* Returns a combination of and results and extraResults for mat-table
*/
public get dataSet() {
const data = [];
// 1. fixed parameters
for (const fp of this.fixedParams) {
data.push({
label: this.formattedLabel(fp),
value: this.formattedValue(fp),
isCalcResult: false // for CSS
});
}
// 2. calculation results
if (
this._fixedResults.result
&& this._fixedResults.result.resultElement
&& this._fixedResults.result.resultElement.extraResults
) {
const extraResults = this._fixedResults.result.resultElement.extraResults;
console.log("extra machin", extraResults);
for (const k in extraResults) {
if (extraResults.hasOwnProperty(k)) {
const er: number = extraResults[k];
data.push({
label: this.intlService.getExtraResLabel(k),
value: this.intlService.formatResult(k, er),
isCalcResult: true // for CSS
});
}
}
}
return data;
}
}
// this._fixedResults.result.resultElement
// this._fixedResults.calculatedParameterHeader
/* let i = 0;
*/
<div class="container-fluid">
<div class="container">
<!-- journal -->
<log></log>
<results-graph *ngIf="showVarResults"></results-graph>
<!--
classe conditionnelle :
[ngClass]="(condition) ? 'classe-si-vrai' : 'classe-si-faux'"
-->
<div class="row">
<div>
<!-- table des résultats fixés -->
<!-- <div class="col mx-auto" *ngIf="showFixedResults"> -->
<div class="col mx-auto">
<fixed-results [results]=fixedResults></fixed-results>
</div>
<fixed-results [results]=fixedResults></fixed-results>
<!-- table des résultats variés -->
<div class="col" *ngIf="showVarResults">
<div *ngIf="showVarResults">
<var-results [results]=varResults></var-results>
</div>
</div>
......
<div class="container-fluid" [style.display]="hasResults">
<div class="row">
<!-- table des résultats variés -->
<div class="col">
<table class="table table-striped" style="border: 1px solid rgb(230,230,230);">
<tr>
<th *ngFor="let h of headers">{{ h }}</th>
</tr>
<tr *ngFor="let r of rawResults; let i=index">
<!-- paramètre varié -->
<td class="result_center">
{{ r.param }}
</td>
<!-- résultat -->
<td horizontal-result-element [result-element]=r.result [headerKeys]=extraResultKeys>
</td>
</tr>
</table>
</div>
<div class="var-results-container">
<!-- scrollable -->
<div class="var-results-inner-container">
<table mat-table [dataSource]="dataSet">
<ng-container *ngFor="let h of headers; let i = index" [matColumnDef]="h">
<th mat-header-cell *matHeaderCellDef>{{ h }}</th>
<td mat-cell *matCellDef="let element">{{ element[i] }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="headers"></tr>
<tr mat-row *matRowDef="let row; columns: headers;"></tr>
</table>
</div>
</div>
\ No newline at end of file
</div>
:host {
display: block;
}
.var-results-container {
overflow-x: scroll;
margin-top: 2em;
border: solid #ccc 1px;
}
table.mat-table {
.mat-header-row {
height: 40px;
}
.mat-row {
height: 32px;
&:nth-child(odd) {
background-color: #f4f4f4;
}
}
::ng-deep .mat-cell {
padding: 5px;
}
::ng-deep .mat-header-cell {
font-size: 1em;
color: black;
padding: 5px;
}
}
import { Component, Input } from "@angular/core";
import { I18nService } from "../../services/internationalisation/internationalisation.service";
import { Component, ViewChild } from "@angular/core";
import { MatTable } from "@angular/material";
import { VarResults } from "../../results/var-results";
import { ApplicationSetupService } from "../../services/app-setup/app-setup.service";
import { ResultElement } from "jalhyd";
import { I18nService } from "../../services/internationalisation/internationalisation.service";
import { nbind } from 'q';
@Component({
selector: "var-results",
templateUrl: "./var-results.component.html"
templateUrl: "./var-results.component.html",
styleUrls: [
"./var-results.component.scss"
]
})
export class VarResultsComponent {
/**
* résultats non mis en forme
*/
/** résultats non mis en forme */
private _varResults: VarResults;
/**
* résultats mis en forme
*/
/** résultats mis en forme */
private _results: any[];
/**
* entêtes des colonnes (param à varier, à calculer + extraResults)
*/
/** entêtes des colonnes (param à varier, à calculer + extraResults) */
private _headers: string[];
@ViewChild(MatTable) table: MatTable<any>;
constructor(
private intlService: I18nService,
private appSetupService: ApplicationSetupService,
private intlService: I18nService
) { }
public set results(r: VarResults) {
......@@ -55,15 +56,43 @@ export class VarResultsComponent {
return this._varResults && this._varResults.hasResults;
}
private get extraResultKeys() {
return this._varResults && this._varResults.extraResultKeys;
}
public get headers() {
return this._headers;
}
public get rawResults() {
return this._results;
/**
* Returns a combination of and results and extraResults for mat-table
*/
public get dataSet() {
const data = [];
const nDigits = this.appSetupService.displayDigits;
if (this._results) {
for (let i = 0; i < this._results.length; i++) {
const r = this._results[i];
const re: ResultElement = this._varResults.resultElements[i];
// for each computation step, build ordered list of : variable param value; result; extra results
// 1. variable param value
const list = [ r.param ];
// 2. result
// list.push(re.vCalc.toFixed(nDigits));
list.push(re.vCalc.toFixed(nDigits));
// 3. extra results
for (const erk of this._varResults.extraResultKeys) {
const er = re.getExtraResult(erk);
if (er !== undefined) {
list.push(this.intlService.formatResult(erk, er));
} else {
list.push(er); // keep list ordered
}
}
data.push(list);
}
}
return data;
}
}
......@@ -48,7 +48,7 @@
<mat-card id="calc-card-results" fxFlex.gt-xs="1 0 400px" fxFlex.lt-sm="1 0 300px">
<mat-card-header>
<mat-card-title>
{{ uitextResultsTitle }}
<h1 [innerHTML]="uitextResultsTitle"></h1>
</mat-card-title>
</mat-card-header>
<mat-card-content>
......
......@@ -5,6 +5,7 @@ import { MatDialog } from "@angular/material";
import { ParamValueMode } from "jalhyd";
import { I18nService } from "../../services/internationalisation/internationalisation.service";
import { sprintf } from "sprintf-js";
import { ApplicationSetupService } from "../../services/app-setup/app-setup.service";
@Component({
selector: "param-values",
......@@ -24,7 +25,8 @@ export class ParamValuesComponent implements AfterViewInit {
constructor(
private editValuesDialog: MatDialog,
private intlService: I18nService
private intlService: I18nService,
private appSetupService: ApplicationSetupService
) { }
public get isMinMax() {
......@@ -38,8 +40,21 @@ export class ParamValuesComponent implements AfterViewInit {
public get infoText() {
let text: string;
if (this.isMinMax) {
const nDigits = this.appSetupService.displayDigits;
let min: any = this.param.minValue;
let max: any = this.param.maxValue;
let step: any = this.param.stepValue;
if (min) {
min = min.toFixed(nDigits);
}
if (min) {
max = max.toFixed(nDigits);
}
if (step) {
step = step.toFixed(nDigits);
}
text = this.intlService.localizeText("INFO_PARAMFIELD_PARAMVARIER_MINMAXSTEP");
text = sprintf(text, this.param.minValue, this.param.maxValue, this.param.stepValue);
text = sprintf(text, min, max, step);
} else if (this.isListe) {
text = this.intlService.localizeText("INFO_PARAMFIELD_PARAMVARIER_VALUES");
const vals = this.param.valueList || [];
......@@ -49,8 +64,7 @@ export class ParamValuesComponent implements AfterViewInit {
}
public openDialog() {
// modification de la valeur initiale, sans avoir à remettre le mode de
// paramètre sur "fixé"
// modification des valeurs variables
this.editValuesDialog.open(
DialogEditParamValuesComponent,
{
......
......@@ -34,4 +34,19 @@
<td>
{{ v }}
</td>
</ng-template>
\ No newline at end of file
</ng-template>
<!-- ngOnChanges() {
super.ngOnChanges();
this.vcRef.clear();
if (this._headerKeys && this._resultElement) {
for (const h of this._headerKeys) {
let v = this._resultElement.extraResults[h];
if (typeof (v) === "number") {
v = this.intlService.formatResult(h, v);
}
this.vcRef.createEmbeddedView(this.tdTemplate, { extraResultValue: v });
}
}
} -->
import { Component, Input, ViewChild, TemplateRef, ViewContainerRef } from "@angular/core";
import { OnChanges } from "@angular/core/src/metadata/lifecycle_hooks";
import { ResultElementBaseComponent } from "./result-element-base.component";
@Component({
selector: "[horizontal-result-element]",
templateUrl: "./horizontal-result-element.component.html"
})
export class HorizontalResultElementComponent extends ResultElementBaseComponent implements OnChanges {
// template des td pour les extraResult
@ViewChild("extraResultTd") tdTemplate: TemplateRef<any>;
/**
* clés des résultats complémentaires à afficher (la cellule est vide s'il n'existe pas dans le ResultElement)
*/
private _headerKeys: string[];
@Input()
public set headerKeys(h: string[]) {
this._headerKeys = h;
}
constructor(private vcRef: ViewContainerRef) {
super();
}
ngOnChanges() {
super.ngOnChanges();
this.vcRef.clear();
if (this._headerKeys && this._resultElement) {
for (const h of this._headerKeys) {
let v = this._resultElement.extraResults[h];
if (typeof (v) === "number") {
v = this.intlService.formatResult(h, v);
}
this.vcRef.createEmbeddedView(this.tdTemplate, { extraResultValue: v });
}
}
}
}
......@@ -11,10 +11,10 @@ import { ServiceFactory } from "../../services/service-factory";
* classe de base pour l'affichage d'un ResultElement
* étendue par HorizontalResultElementComponent et VerticalResultElementComponent
*/
@Component({
/* @Component({
selector: "[result-element-base]",
template: `<div></div>`
})
}) */
export class ResultElementBaseComponent implements OnChanges {
/**
* ResultElement à afficher
......
......@@ -29,4 +29,25 @@
{{ r.value }}
</td>
</tr>
</ng-template>
\ No newline at end of file
</ng-template>
<!-- ngOnChanges() {
super.ngOnChanges();
this.vcRef.clear();
if (this._resultElement) {
let i = 0;
for (const k in this._resultElement.extraResults) {
if (this._resultElement.extraResults.hasOwnProperty(k)) {
const er: number = this._resultElement.extraResults[k];
const lblClass = (i % 2) === 0 ? "label1" : "label2";
const valueClass = (i % 2) === 0 ? "value1" : "value2";
this.vcRef.createEmbeddedView(this.trTemplate, {
extraRes: { "label": this.intlService.getExtraResLabel(k), "value": this.intlService.formatResult(k, er) },
classes: { "label_class": lblClass, "value_class": valueClass }
});
i++;
}
}
}
} -->
import { Component, Input, ViewChild, TemplateRef, ViewContainerRef } from "@angular/core";
import { OnChanges } from "@angular/core/src/metadata/lifecycle_hooks";
import { ResultElementBaseComponent } from "./result-element-base.component";
@Component({
selector: "tr[vertical-result-element]",
templateUrl: "./vertical-result-element.component.html",
styles: [
`.label1 {
text-align: right; background-color: #f0f0f0; font-weight: bold
}`,
`.value1 {
text-align: center; background-color: #f0f0f0; font-weight: bold
}`,
`.label2 {
text-align: right; background-color: #ffffff; font-weight: bold
}`,
`.value2 {
text-align: center; background-color: #ffffff; font-weight: bold
}`
]
})
export class VerticalResultElementComponent extends ResultElementBaseComponent implements OnChanges {
/**
* nom de la variable
*/
@Input()
private _label: string;
// template des tr pour les extraResult
@ViewChild("extraResultTr") trTemplate: TemplateRef<any>;
constructor(private vcRef: ViewContainerRef) {
super();
}
private get resultLabel() {
return this._label;
}
ngOnChanges() {
super.ngOnChanges();
this.vcRef.clear();
if (this._resultElement) {
let i = 0;
for (const k in this._resultElement.extraResults) {
if (this._resultElement.extraResults.hasOwnProperty(k)) {
const er: number = this._resultElement.extraResults[k];
const lblClass = (i % 2) === 0 ? "label1" : "label2";
const valueClass = (i % 2) === 0 ? "value1" : "value2";
this.vcRef.createEmbeddedView(this.trTemplate, {
extraRes: { "label": this.intlService.getExtraResLabel(k), "value": this.intlService.formatResult(k, er) },
classes: { "label_class": lblClass, "value_class": valueClass }
});
i++;
}
}
}
}
}
/*
exemple de composant générant plusieurs tr d'une table
@Component({
selector: 'tr[my-row]',
template: `
<td>{{ firstWord }}</td>
<td>{{ secondWord }}</td>
<ng-template #secondRow>
<tr>
<td>fooooooooooooooo</td>
<td>bar</td>
</tr>
</ng-template>
`
})
export class MyRowComponent {
@Input() firstWord = 'first';
@Input() secondWord = 'second';
@Input() secondRow = false;
@ViewChild('secondRow') template: TemplateRef<any>;
constructor(private vcRef: ViewContainerRef) {}
ngOnInit() {
if(this.secondRow) {
this.vcRef.createEmbeddedView(this.template);
}
}
}
parent.html
<table class="table">
<tr>
<td>column 1</td>
<td>column 2</td>
</tr>
<tr my-row firstWord="hello world" secondWord="good bye">
<tr my-row secondRow="true">
<tr my-row>
</table>
*/
:host {
display: block;
margin-top: 5px;
text-align: center;
}
mat-select {
::ng-deep .mat-select-value {
> span {
> span {
line-height: 1.3em;
}
}
}
}
......@@ -5,7 +5,10 @@ import { I18nService } from "../../services/internationalisation/internationalis
@Component({
selector: "graph-type",
templateUrl: "../generic-select/generic-select.component.html"
templateUrl: "../generic-select/generic-select.component.html",
styleUrls: [
"./graph-type.component.scss"
]
})
export class GraphTypeSelectComponent implements IObservable {
private _entries: GraphType[] = [GraphType.Histogram, GraphType.Scatter];
......
......@@ -147,7 +147,7 @@
"INFO_PARAMFIELD_PARAMVARIER": "varier",
"INFO_PARAMFIELD_PASVARIATION": "Avec un pas de",
"INFO_PARAMFIELD_PARAMVARIER_IMPORT_FICHIER": "Importer un fichier",
"INFO_PARAMFIELD_PARAMVARIER_MINMAXSTEP": "min&nbsp: %s, max&nbsp: %s, pas&nbsp: %s",
"INFO_PARAMFIELD_PARAMVARIER_MINMAXSTEP": "min : %s, max : %s, pas : %s",
"INFO_PARAMFIELD_PARAMVARIER_SEPARATEUR_DECIMAL": "Séparateur décimal",
"INFO_PARAMFIELD_PARAMVARIER_SEPARATEUR_POINT": ". (point)",
"INFO_PARAMFIELD_PARAMVARIER_SEPARATEUR_VIRGULE": ", (virgule)",
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment