vincent/Kine-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

mise à jour de la page de paramétrage

Browse Source
This commit is contained in:
Vincent BENOIT
2022-10-10 17:35:07 +02:00
parent e1de9cfa5a
commit 93bfe8aadf
6 changed files with 84 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
angular.json
View File

@@ -27,7 +27,7 @@
"src/assets"
],
"styles": [
"node_modules/@angular/material/prebuilt-themes/purple-green.css",
"node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"node_modules/ngx-toastr/toastr.css",
"src/styles.css"
],

9
src/app/components/home/workspace/parametres/parametres.component.css
View File

@@ -1,11 +1,16 @@
.container {
/* display: flex; */
/*background-color: #b8b8b8;*/
margin: 10px;
margin-bottom: 100px;
overflow-x: hidden;
overflow-y: auto;
}
/*::-webkit-scrollbar { display: none; }*/
form {
width: 50%;
width: 70%;
min-width: 50%;
margin: 0.5rem;
}

28
src/app/components/home/workspace/parametres/parametres.component.html
View File

@@ -1,18 +1,36 @@
<div class="container"
fxLayout="column"
fxLayoutAlign="space-around start">
fxLayoutAlign="space-around center">
<!-- Params Form -->
<form [formGroup]="paramsFG"
fxLayout="column">
<mat-slide-toggle (change)="onSlideChanged($event)" style="margin: 10px;">Activer code PIN</mat-slide-toggle>
<code-input [isCodeHidden]="false" [codeLength]="4" [disabled]="!pinChecked" (codeChanged)="onCodeChanged($event)" (codeCompleted)="onCodeCompleted($event)"></code-input>
<mat-form-field style="margin: 10px;">
<mat-slide-toggle [checked]="slideDisable" (change)="onSlideChanged($event)" style="margin: 10px; font-size: smaller;">Activer code PIN</mat-slide-toggle>
<code-input [isCodeHidden]="false" [codeLength]="4" [disabled]="!pinChecked" [code]="pinNumber" (codeChanged)="onCodeChanged($event)" (codeCompleted)="onCodeCompleted($event)"></code-input>
<mat-form-field style="margin: 5px 10px 5px 10px;">
<mat-label>Téléphone accepté</mat-label>
<span matPrefix style="font-size: smaller;">+33 &nbsp;</span>
<input matInput type="text" formControlName="num_accepted" class="form-control" name="num_accepted" placeholder="Numéro accepté" [ngClass]="{'is-invalid':submitted && paramsFG.controls['num_accepted'].errors}">
<mat-error class="myError" *ngIf="paramsFG.controls['num_accepted'].hasError('required')">Le numéro est requis !</mat-error>
<mat-error class="myError" *ngIf="paramsFG.controls['num_accepted'].hasError('pattern')">Le numéro est composé de {{Pw}} chiffres</mat-error>
<mat-error class="myError" *ngIf="paramsFG.controls['num_accepted'].hasError('pattern')">Le numéro est composé de 9 chiffres</mat-error>
</mat-form-field>
<mat-form-field style="margin: 2.5px 10px 2.5px 10px;">
<mat-label>Nombre de sonneries avant décrochage</mat-label>
<input matInput type="text" formControlName="num_tone" class="form-control" name="num_tone" placeholder="Nombre de sonneries" [ngClass]="{'is-invalid':submitted && paramsFG.controls['num_tone'].errors}">
<mat-error class="myError" *ngIf="paramsFG.controls['num_tone'].hasError('required')">Le nombre de sonneries est requis !</mat-error>
<mat-error class="myError" *ngIf="paramsFG.controls['num_tone'].hasError('pattern')">Le nombre est composé de 1 chiffre (entre 1 et 5)</mat-error>
</mat-form-field>
<mat-form-field style="margin: 2.5px 10px 2.5px 10px;">
<mat-label>Code DTMF à émettre</mat-label>
<input matInput type="text" formControlName="dtmf_code" class="form-control" name="dtmf_code" placeholder="Cpde DTMF (0-9, A-D, #, *)" [ngClass]="{'is-invalid':submitted && paramsFG.controls['dtmf_code'].errors}">
<mat-error class="myError" *ngIf="paramsFG.controls['dtmf_code'].hasError('required')">Le code DTMF est requis !</mat-error>
<mat-error class="myError" *ngIf="paramsFG.controls['dtmf_code'].hasError('pattern')">Le code DTMF est composé de 1 caractère alphanumérique ou numérique (0-9, A-D, #, *)</mat-error>
</mat-form-field>
<mat-form-field style="margin: 2.5px 10px 2.5px 10px;">
<mat-label>Durée d'émission du code DTMF</mat-label>
<input matInput type="text" formControlName="dtmf_duration" class="form-control" name="dtmf_duration" placeholder="Durée d'émission du code DTMF" [ngClass]="{'is-invalid':submitted && paramsFG.controls['dtmf_duration'].errors}">
<mat-error class="myError" *ngIf="paramsFG.controls['dtmf_duration'].hasError('required')">Le temps d'émission du code DTMF est requis !</mat-error>
<mat-error class="myError" *ngIf="paramsFG.controls['dtmf_duration'].hasError('pattern')">Le temps d'émission du code DTMF est compris entre 1 et 255 (1/10 secondes)</mat-error>
</mat-form-field>
<button mat-raised-button color="primary" (click)="onUpdate()">Mise à jour</button>
</form>

40
src/app/components/home/workspace/parametres/parametres.component.ts
View File

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, ValidatorFn, ValidationErrors, AbstractControl } from '@angular/forms';
import { Router } from '@angular/router';
import { BackendService } from '../../../../services/backend/backend.service';
import { Parameters } from '../../../../models/parameters.model';
import { ToastrService } from 'ngx-toastr';
@Component({
@@ -12,10 +13,9 @@ import { ToastrService } from 'ngx-toastr';
export class ParametresComponent implements OnInit {
paramsFG:FormGroup;
submitted:boolean=false;
PwPin:number = 4;
Pw:number = 9;
slideDisable:boolean=false;
pinChecked:boolean=false;
pinNumber:string="0000";
constructor(private fb:FormBuilder,
private bs:BackendService,
@@ -26,13 +26,35 @@ export class ParametresComponent implements OnInit {
this.paramsFG=this.fb.group({
num_accepted:["", [
Validators.required,
Validators.pattern('(?=[0-9]{9}).{' + this.Pw + '}'),
Validators.pattern('^[0-9]{9}$'),
]],
num_tone:["", [
Validators.required,
Validators.pattern('^[1-5]{1}$'),
]],
dtmf_code:["", [
Validators.required,
Validators.pattern('^[0-9A-D#*]{1}$'),
]],
dtmf_duration:["", [
Validators.required,
Validators.pattern('^[1-9]|[1-9][0-9]|1[0-9][0-9]|2[0-5][0-5]$'),
]],
});
}
onUpdate(): void {
this.bs.retreiveParams().subscribe(
(data:Parameters) => {
this.paramsFG.get('num_accepted').setValue(data.num_autorized);
this.paramsFG.get('num_tone').setValue(data.tone_duration);
this.paramsFG.get('dtmf_code').setValue(data.dtmf_code);
this.paramsFG.get('dtmf_duration').setValue(data.dtmf_duration);
this.slideDisable = data.pin_actif;
this.pinChecked = data.pin_actif;
this.pinNumber = data.code_pin;
}, err => {
this.toast.error("Erreur de récupération des paramètres");
}
);
}
onSlideChanged(event: any): void {
@@ -42,11 +64,15 @@ export class ParametresComponent implements OnInit {
onCodeChanged(code: string): void {
// this called every time when user changed the code
}
onCodeCompleted(code: string): void {
// this called only if user entered full code
this.pinNumber = code;
}
onUpdate(): void {
}
}

8
src/app/models/parameters.model.ts Normal file
View File

@@ -0,0 +1,8 @@
export interface Parameters {
pin_actif:boolean;
code_pin:string;
num_autorized:string;
tone_duration:number;
dtmf_code:string;
dtmf_duration:number;
}

12
src/app/services/backend/backend.service.ts
View File

@@ -3,6 +3,7 @@ import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from '../../../environments/environment';
import { Utilisateur } from '../../models/utilisateur.model';
import { Parameters } from '../../models/parameters.model';
@Injectable({
providedIn: 'root'
@@ -67,4 +68,15 @@ export class BackendService {
return this.http.post<any>(host+"/api/configurateur/update_passwd", val, options);
}
retreiveParams():Observable<Parameters> {
let host=environment.host;
const options = {
headers: new HttpHeaders({
'Content-Type' : 'application/json',
}),
withCredentials: true
};
return this.http.get<Parameters>(host+"/api/configurateur/params", options);
}
}