Skip to content
Snippets Groups Projects
Commit bf014309 authored by francois.grand's avatar francois.grand
Browse files

réorganisation des lignes gérant les paramètres 

- ParamFieldLineComponent : modif de la config des colonnes Bootstrap
- ParamInputComponent : simplification du composant, utilisation des input MDBootstrap
parent 98f2f652
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/app/components/param-field-line/param-field-line.component.html
+ 41
− 32
View file @ bf014309
<div class="row">
<!-- titre -->
<div class="col-sm-4 text-xs-left text-sm-right">
{{title}}
</div>
<!-- input de saisie de la valeur -->
<div class="col-sm-2">
<param-input [inputDisabled]="isInputDisabled" [param]="_param"></param-input>
<div class="col-12 col-sm-6 pt-3">
<param-input [inputDisabled]="isInputDisabled" [param]="_param" [title]="title"></param-input>
</div>
<!-- radio "fixé" -->
<div class="col-sm-2 col-lg-1">
<div class="col-4 col-sm-2">
<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-lg-1">
<div class="col-4 col-sm-2">
<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>
</div>
<!-- radio "calculer" -->
<div class="col-sm-2 col-lg-2">
<div class="col-4 col-sm-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 class="btn-group" role="group"> -->
<!-- <label class="btn {{radioFixClass}} btn-sm h-50" aria-pressed="false" [(ngModel)]="radioModel" mdbRadio="Left" mdbRippleRadius
name="radio_param_{{symbol}}" value="fix" (click)="onRadioClick(symbol, 'fix')" [checked]=radioFixCheck [disabled]=isDisabled
id="radio_fix">
{{uitextParamFixe}}
</label>
<label class="btn {{radioVarClass}} btn-sm h-50" [(ngModel)]="radioModel" mdbRadio="Middle" mdbRippleRadius name="radio_param_{{symbol}}"
value="var" (click)="onRadioClick(symbol, 'var')" [checked]=radioVarCheck [disabled]=isDisabled id="radio_var">
{{uitextParamVarier}}
</label>
<label class="btn {{radioCalClass}} btn-sm h-50" [(ngModel)]="radioModel" mdbRadio="Right" mdbRippleRadius name="radio_param_{{symbol}}"
value="cal" (click)="onRadioClick(symbol, 'cal')" [checked]=radioCalCheck [disabled]=isDisabled id="radio_cal">
{{uitextParamCalculer}}
</label> -->
<!-- </div> -->
</div>
<div class="container-fluid" [style.display]="isVarRadio">
<div class="row">
<div class="offset-sm-2 offset-md-4 offset-lg-6 col-sm-4 col-md-3">
{{uitextValeurMini}}
</div>
<div class="col-sm-3 col-md-2">
<input type="text" class="input-alternate" name="inputmin" placeholder="min" [(ngModel)]="_param.minValue" />
</div>
<div *ngIf="isRadioVarChecked" class="row">
<div class="col-6 col-sm-8 text-xs-left text-sm-right">
{{uitextValeurMini}}
</div>
<div class="col-6 col-sm-4 pr-5">
<input type="text" class="input-alternate" name="inputmin" placeholder="min" [(ngModel)]="_param.minValue" />
</div>
</div>
<div class="row">
<div class="offset-sm-2 offset-md-4 offset-lg-6 col-sm-4 col-md-3">
{{uitextValeurMaxi}}
</div>
<div class="col-sm-3 col-md-2">
<input type="text" class="input-alternate" name="inputmax" placeholder="max" [(ngModel)]="_param.maxValue" />
</div>
<div *ngIf="isRadioVarChecked" class="row">
<div class="col-6 col-sm-8 text-xs-left text-sm-right">
{{uitextValeurMaxi}}
</div>
<div class="col-6 col-sm-4 pr-5">
<input type="text" class="input-alternate" name="inputmax" placeholder="max" [(ngModel)]="_param.maxValue" />
</div>
</div>
<div class="row">
<div class="offset-sm-2 offset-md-4 offset-lg-6 col-sm-4 col-md-3">
{{uitextPasVariation}}
</div>
<div class="col-sm-3 col-md-2">
<input type="text" class="input-alternate" name="inputstep" placeholder="step" [(ngModel)]="_param.stepValue" />
</div>
<div *ngIf="isRadioVarChecked" class="row">
<div class="col-6 col-sm-8 text-xs-left text-sm-right">
{{uitextPasVariation}}
</div>
<div class="col-6 col-sm-4 pr-5">
<input type="text" class="input-alternate" name="inputstep" placeholder="step" [(ngModel)]="_param.stepValue" />
</div>
</div>
\ No newline at end of file
src/app/components/param-field-line/param-field-line.component.ts
+ 21
− 4
View file @ bf014309
......@@ -134,10 +134,6 @@ export class ParamFieldLineComponent {
return this._param.radioState == ParamRadioConfig.VAR;
}
private get isVarRadio(): string {
return this.isRadioVarChecked ? "block" : "none";
}
/*
* gestion des événements clic sur les radios :
* envoi d'un message au composant parent
......@@ -174,4 +170,25 @@ export class ParamFieldLineComponent {
private get isInputDisabled(): boolean {
return this._param.radioState != ParamRadioConfig.FIX;
}
// /**
// * classe du radio "fixé"
// */
// private get radioFixClass(): string {
// return this.radioFixCheck == undefined ? "btn-primary" : "btn-outline-primary";
// }
// /**
// * classe du radio "varier"
// */
// private get radioVarClass(): string {
// return this.radioVarCheck == undefined ? "btn-primary" : "btn-outline-primary";
// }
// /**
// * classe du radio "calculer"
// */
// private get radioCalClass(): string {
// return this.radioCalCheck == undefined ? "btn-primary" : "btn-outline-primary";
// }
}
src/app/components/param-input/param-input.component.html
+ 4
− 24
View file @ bf014309
<div class="row" *ngIf="displayTitle">
<div class="col-12">
{{uitextParamInput}}
</div>
</div>
<div class="row">
<div class="col-10">
<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 class="md-form form-sm">
<input mdbActive type="text" id="form1" class="form-control" [ngModel]="_uiValue.uncheckedValueString" (ngModelChange)="setValue($event)">
<label for="form1">{{_title}}</label>
<small class="text-danger">{{_message}}</small>
</div>
\ No newline at end of file
src/app/components/param-input/param-input.component.ts
+ 3
− 4
View file @ bf014309
......@@ -37,6 +37,9 @@ export class ParamInputComponent implements ControlValueAccessor, DoCheck {
@Input('param')
private _paramDef: NgParameter;
@Input('title')
private _title: string;
private _message: string;
/**
......@@ -59,10 +62,6 @@ export class ParamInputComponent implements ControlValueAccessor, DoCheck {
this._uiValue = new NumericalString();
}
hasError(): boolean {
return this._message != undefined;
}
private getSfromUI(): string {
return this._fromUI ? " fromUI " : " fromMODEL";
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment