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

src/app/components/home/workspace/account/account.component.html

@@ -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>

src/app/components/home/workspace/account/account.component.ts

@@ -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");

src/app/components/home/workspace/hours/hours.component.html

@@ -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>

src/app/components/home/workspace/hours/hours.component.ts

@@ -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 router:Router,
-			 private toast:ToastrService ) { }
+				 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");

src/app/components/home/workspace/parametres/parametres.component.html

@@ -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>

src/app/components/home/workspace/parametres/parametres.component.ts

@@ -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");