An error occurred while loading the file. Please try again.
-
Guillaume Perréal authored5db631cb
import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
import { Inject, Component, OnInit } from "@angular/core";
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 { ApplicationSetupService } from "../../services/app-setup/app-setup.service";
@Component({
selector: "dialog-edit-param-values",
templateUrl: "dialog-edit-param-values.component.html",
styleUrls: ["dialog-edit-param-values.component.scss"]
})
export class DialogEditParamValuesComponent implements OnInit {
/** the related parameter to change the "variable" value of */
public param: NgParameter;
/** available value modes (min / max, list) */
public valueModes: { value: ParamValueMode; label: string; }[];
/** available decimal separators */
public decimalSeparators: { label: string; value: string; }[];
/** current decimal separator */
public decimalSeparator: string;
public valuesListForm: FormGroup;
/** when true, shows the values chart instead of the edit form */
public viewChart = false;
// chart config
public chartData = {};
public chartOptions;
constructor(
public dialogRef: MatDialogRef<DialogEditParamValuesComponent>,
private intlService: I18nService,
private appSetupService: ApplicationSetupService,
private fb: FormBuilder,
@Inject(MAT_DIALOG_DATA) public data: any
) {
this.param = data.param;
// an explicit ReactiveForm is required for file input component
const initialValue = (this.param.valueMode === ParamValueMode.LISTE ? this.valuesList : "");
this.valuesListForm = this.fb.group({
file: [""],
valuesList: [ initialValue,
[
Validators.required
// Validators.pattern(new RegExp(this.valuesListPattern)) // behaves weirdly
]
]
});
// available options for select controls
this.valueModes = [
{
value: ParamValueMode.MINMAX,
label: this.intlService.localizeText("INFO_PARAMMODE_MINMAX")
},
{
value: ParamValueMode.LISTE,
label: this.intlService.localizeText("INFO_PARAMMODE_LIST")
}
];
this.decimalSeparators = [
{
label: this.intlService.localizeText("INFO_PARAMFIELD_PARAMVARIER_SEPARATEUR_POINT"),
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
value: "."
},
{
label: this.intlService.localizeText("INFO_PARAMFIELD_PARAMVARIER_SEPARATEUR_VIRGULE"),
value: ","
}
];
this.decimalSeparator = this.decimalSeparators[0].value;
// chart configuration
const nDigits = this.appSetupService.displayDigits;
this.chartOptions = {
responsive: true,
maintainAspectRatio: true,
animation: {
duration: 0
},
legend: {
display: false
},
scales: {
xAxes: [{
type: "linear",
position: "bottom",
ticks: {
precision: nDigits
}
}],
yAxes: [{
type: "linear",
position: "left",
ticks: {
precision: nDigits
}
}]
},
tooltips: {
callbacks: {
label: function(tooltipItem) {
return Number(tooltipItem.yLabel).toFixed(nDigits);
}
}
}
};
}
// proxy to model values
public get minValue() {
return this.param.minValue;
}
public set minValue(v) {
this.param.setMinValue(this, v);
}
public get maxValue() {
return this.param.maxValue;
}
public set maxValue(v) {
this.param.setMaxValue(this, v);
}
public get stepValue() {
return this.param.stepValue;
}
public set stepValue(v) {
this.param.setStepValue(this, v);
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
}
/**
* regular expression pattern for values list validation (depends on decimal separator)
*/
public get valuesListPattern() {
// standard pattern for decimal separator "." : ^-?([0-9]*\.)?([0-9]+[Ee]-?)?[0-9]+$
const escapedDecimalSeparator = (this.decimalSeparator === "." ? "\\." : this.decimalSeparator);
const numberSubPattern = `-?([0-9]*${escapedDecimalSeparator})?([0-9]+[Ee]-?)?[0-9]+`;
const re = `^${numberSubPattern}(${this.separatorPattern}${numberSubPattern})*$`;
return re;
}
/**
* accepted separator: everything but [numbers, E, +, -, decimal separator], any length
*/
public get separatorPattern() {
return "[^0-9-+Ee" + this.decimalSeparator + "]+";
}
public get selectedValueMode() {
return this.param.valueMode;
}
public set selectedValueMode(v) {
this.param.valueMode = v;
}
public get isMinMax() {
return this.param.valueMode === ParamValueMode.MINMAX;
}
public get isListe() {
return this.param.valueMode === ParamValueMode.LISTE;
}
/**
* renders model's numbers list as text values list (semicolon separated)
*/
public get valuesList() {
return (this.param.valueList || []).join(";");
}
/**
* injects text values list into model's numbers list
*/
public set valuesList(list: string) {
const vals = [];
const separatorRE = new RegExp(this.separatorPattern);
const parts = list.trim().split(separatorRE);
parts.forEach((e) => {
if (e.length > 0) {
// ensure decimal separator is "." for Number()
if (this.decimalSeparator !== ".") {
const re = new RegExp(this.decimalSeparator, "g"); // @TODO remove "g" ?
e = e.replace(re, ".");
}
vals.push(Number(e));
}
});
this.param.setValueList(this, vals);
}
public toggleViewChart() {
// validate list values before switching views ?
if (! this.viewChart && this.param.valueMode === ParamValueMode.LISTE) {
if (this.onValidate(false)) {
// toggle
this.viewChart = ! this.viewChart;
}