CODEWITHSUNDEEP
angulartypescript
Paul sk
Paul sk

Reputation: 293

Prevent clicks on another button until it is stopped

I have two buttons that allow me to start / pause a time count.

I'm having two issues that I can't solve :( When I click a button, time starts counting, is there a way to "lock" (without making the other button disappear) the other button until the one that started counting is stopped? That is, when I click a button, I can only start the other when the first is stopped.

The other problem is that when you stop the timer of the first button and start the second button, it is visible on that line the time of the previous one and then the 0 and the countdown starts, is there a way that the previous count can disappear?

Example ---> stackblitz

HTML

 <div *ngFor="let data of datas">
    <div>
        <div class="row" style="margin-top: 7px;">
            <button type="button" data-toggle="dropdown" class="btn ClassPlay">
                <img style="width: 35px;" *ngIf="taskService.currentState=='pause' && data.key.atrasada == 0" src="https://img.icons8.com/flat_round/64/000000/play--v1.png">
                <img style="width: 35px;" *ngIf="taskService.currentState=='pause' && data.key.atrasada == 1" src="https://img.icons8.com/cotton/64/000000/circled-play.png">
                <div *ngIf="taskService.currentState=='start'">
                    <img style="width: 38px;" *ngIf="taskService.currentRowIndex === data.rowIndex && data.key.atrasada == 0" src="https://img.icons8.com/carbon-copy/100/000000/youtube-play.png">
                    <img style="width: 38px;" *ngIf="taskService.currentRowIndex === data.rowIndex && data.key.atrasada == 1" src="https://img.icons8.com/doodle/48/000000/youtube-play.png">
                    <img style="width: 38px;" *ngIf="taskService.currentRowIndex != data.rowIndex" src="https://img.icons8.com/ios-glyphs/30/000000/circled-play.png">
                </div>
            </button>
            <div>
                <a class="dropdown-item" *ngIf="taskService.currentState == 'pause' ||taskService.currentRowIndex !== data.rowIndex " routerLinkActive="active" (click)="taskService.currentState='start'; startTimer(data)">Start</a>
                <a class="dropdown-item" *ngIf="taskService.currentState == 'start' && taskService.currentRowIndex === data.rowIndex" routerLinkActive="active" (click)="taskService.currentState='pause'; pauseTimer(data)">Stop</a>
            </div>
            <div class="timer" *ngIf="taskService.currentRowIndex === data.rowIndex">
                <span>{{(taskService.fetchDisplay() * 1000) | date:'HH:mm:ss':'UTC'}}</span>
            </div>
        </div>
    </div>
</div>

Component.ts

  startTimer(data) {
    this.taskService.currentRowIndex = data.rowIndex;

    this.taskService.startTimer();
    this.currentState = this.taskService.getCurrentState();
  }

  pauseTimer(data) {
    this.taskService.currentRowIndex = data.rowIndex;
    this.taskService.pauseTimer();
    this.currentState = this.taskService.getCurrentState();
  }

Upvotes: 0

Views: 65

Answers (2)

Adrita Sharma
Adrita Sharma

Reputation: 22203

Try like this:

.ts

  isStart:boolean = false

  startTimer(data) {
    this.isStart = true
    ...
  }

  pauseTimer(data) {
    this.isStart = false
    ...
  }

.html

<a  [class.disabled]="isStart" *ngIf="taskService.currentState == 'pause' ||taskService.currentRowIndex !== data.rowIndex " routerLinkActive="active"  (click)="taskService.currentState='start'; startTimer(data)">Start</a>

.css

.disabled {
    pointer-events: none;
    opacity: 0.6;
}

Working Demo

Upvotes: 1

Oded BD
Oded BD

Reputation: 3286

To prevent click action you can use [disabled] on button

<button class="dropdown-item" *ngIf="taskService.currentState == 'pause' ||taskService.currentRowIndex !== data.rowIndex " routerLinkActive="active" 
       [disabled]="taskService.currentState == 'start'"
        (click)="taskService.currentState='start'; startTimer(data)">Start</button>

And to avoid the display of old values on the new timer you can set the display to 0 where you set the timer.

   pauseTimer() {
    this.currentState = "pause";
    clearInterval(this.interval);
    this.time = 0;
    this.display = 0;
  }

you can see working example here https://angular-xn5gvl-rvvdk1.stackblitz.io

Upvotes: 2

Related Questions