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

ajout d'un timer lors de l'action de mise à jour pour les pages account, paramètres et hours

Browse Source
This commit is contained in:
Vincent BENOIT
2022-12-02 10:22:02 +01:00
parent 9af2b49b7a
commit bf7d1fcbb8
6 changed files with 74 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/home/workspace/account/account.component.html
View File

@@ -22,6 +22,6 @@
<mat-error class="myError" *ngIf="passwdFG.controls['confirmation'].hasError('pattern')">Le mot de passe doit avoir minimum {{minPw}} caractères et maximum {{maxPw}} avec 1 caratère minuscule, 1 majuscule et 1 chiffre</mat-error>
<mat-error class="myError" *ngIf="passwdFG.controls['confirmation'].hasError('mismatch')">La confirmation doit correspondre au mot de passe</mat-error>
</mat-form-field>
<button mat-raised-button color="primary" (click)="onUpdate()">Mise à jour</button>
<button mat-raised-button color="primary" [disabled]="isDisabled" (click)="onUpdate()">{{buttonText}}</button>
</form>
</div>

22
src/app/components/home/workspace/account/account.component.ts
View File

@@ -17,6 +17,10 @@ export class AccountComponent implements OnInit {
maxPw:number = 24;
hash_new:string = '';
hash_old:string = '';
isDisabled = false;
timeLeft:number = 0;
buttonText:string = "Mise à jour";
interval:any;
constructor(private fb:FormBuilder,
private bs:BackendService,
@@ -38,14 +42,30 @@ export class AccountComponent implements OnInit {
});
}
setTimeoutDisabledButton(timeout:number): void {
this.timeLeft = timeout;
this.isDisabled = true;
this.buttonText = "Mise à jour" + " ... (" + this.timeLeft + ")";
this.interval = setInterval(() => {
if(this.timeLeft > 0) {
this.timeLeft--;
this.buttonText = "Mise à jour" + " ... (" + this.timeLeft + ")";
} else {
this.isDisabled = false;
this.buttonText = "mise à jour";
clearInterval(this.interval);
}
},1000)
}
onUpdate(): void {
if(this.passwdFG.invalid) {
console.log("Form invalid !!");
return;
}
this.hash_new = shajs('sha256').update(this.passwdFG.get('new_passwd').value).digest('hex');
this.hash_old = shajs('sha256').update(this.passwdFG.get('old_passwd').value).digest('hex');
const data = {'old':this.hash_old, 'new':this.hash_new};
this.setTimeoutDisabledButton(3);
this.bs.updatePasswd(data).subscribe(
data => {
this.toast.success("Mise à jour réussie");

2
src/app/components/home/workspace/hours/hours.component.html
View File

@@ -28,5 +28,5 @@
</tr>
</table>
<button mat-raised-button color="primary" (click)="onUpdate()">Mise à jour</button>
<button mat-raised-button color="primary" [disabled]="isDisabled" (click)="onUpdate()">{{buttonText}}</button>
</div>

30
src/app/components/home/workspace/hours/hours.component.ts
View File

@@ -15,15 +15,19 @@ import { catchError, map, startWith } from 'rxjs/operators';
export class HoursComponent implements OnInit {
schedule:Day[];
isProcessing:boolean = true;
isDisabled:boolean = true;
schedCols:number = 0;
schedRows:number = 0;
colorFlag:string = 'red';
defaultOp:string = 'Manuel ON';
operations:string[] = ['Manuel ON', 'Manuel OFF', 'Horaires'];
timeLeft:number = 0;
buttonText:string = "Mise à jour";
interval:any;
constructor( private bs:BackendService,
private router:Router,
private toast:ToastrService ) { }
private router:Router,
private toast:ToastrService ) { }
ngOnInit(): void {
this.bs.retreiveScheduler().subscribe(
@@ -33,6 +37,7 @@ export class HoursComponent implements OnInit {
this.schedCols = Object.keys(datas.days).length;
this.schedRows = Object.keys(datas.days[0].horaires).length;
this.isProcessing = false;
this.isDisabled = false;
}, err => {
if(err.status == 401) {
this.router.navigateByUrl("/login");
@@ -44,11 +49,32 @@ export class HoursComponent implements OnInit {
);
}
setTimeoutDisabledButton(timeout:number): void {
this.timeLeft = timeout;
this.isDisabled = true;
this.buttonText = "Mise à jour" + " ... (" + this.timeLeft + ")";
this.interval = setInterval(() => {
if(this.timeLeft > 0) {
this.timeLeft--;
this.buttonText = "Mise à jour" + " ... (" + this.timeLeft + ")";
} else {
this.isDisabled = false;
this.buttonText = "mise à jour";
clearInterval(this.interval);
}
},1000)
}
onUpdate(): void {
let sched:Scheduler = {
mode:this.defaultOp,
days:this.schedule
};
if(this.defaultOp == "Manuel ON") {
this.setTimeoutDisabledButton(30);
} else {
this.setTimeoutDisabledButton(15);
}
this.bs.updateScheduler(sched).subscribe(
data => {
this.toast.success("Mise à jour des horaires réussie");

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

@@ -36,6 +36,6 @@
<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>
<button mat-raised-button color="primary" [disabled]="isDisabled" (click)="onUpdate()">{{buttonText}}</button>
</form>
</div>

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

@@ -18,6 +18,10 @@ export class ParametresComponent implements OnInit {
pinChecked:boolean=false;
pinNumber:string="0000";
isProcessing:boolean = true;
isDisabled:boolean = true;
timeLeft:number = 0;
buttonText:string = "Mise à jour";
interval:any;
constructor(private fb:FormBuilder,
private bs:BackendService,
@@ -54,6 +58,7 @@ export class ParametresComponent implements OnInit {
this.pinChecked = data.pin_actif;
this.pinNumber = data.code_pin;
this.isProcessing = false;
this.isDisabled = false;
}, err => {
if(err.status == 401) {
this.router.navigateByUrl("/login");
@@ -78,6 +83,22 @@ export class ParametresComponent implements OnInit {
this.pinNumber = code;
}
setTimeoutDisabledButton(timeout:number): void {
this.timeLeft = timeout;
this.isDisabled = true;
this.buttonText = "Mise à jour" + " ... (" + this.timeLeft + ")";
this.interval = setInterval(() => {
if(this.timeLeft > 0) {
this.timeLeft--;
this.buttonText = "Mise à jour" + " ... (" + this.timeLeft + ")";
} else {
this.isDisabled = false;
this.buttonText = "Mise à jour";
clearInterval(this.interval);
}
},1000)
}
onUpdate(): void {
if(this.paramsFG.invalid) {
console.log("Form invalid !!");
@@ -101,6 +122,7 @@ export class ParametresComponent implements OnInit {
params.tone_duration = this.paramsFG.get('num_tone').value;
params.dtmf_code = this.paramsFG.get('dtmf_code').value;
params.dtmf_duration = this.paramsFG.get('dtmf_duration').value;
this.setTimeoutDisabledButton(5);
this.bs.updateParams(params).subscribe(
data => {
this.toast.success("Mise à jour des paramètres réussie");