CODEWITHSUNDEEP
angulartypescript
Mike Landers
Mike Landers

Reputation: 450

Do not run time count simultaneously

I have a button that allows me to start / stop the timing of a user.

At this time, it is possible to start several counts on several users simultaneously.

Is there a way to only start one at a time? If I already have a count started, when trying to start a different row count, I want the previous row to be paused and the new row to start (the time from zero).

How can I apply this?

html

<button id="button-basic" dropdownToggle aria-controls="dropdown-basic">
        <img *ngIf="taskService.timerForUsers[data.key.ID]?.currentState === 'pause' || taskService.timerForUsers[data.key.ID] == undefined" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcW6cJlI-KlS721hkuHDTMydZ_snrkhL9sm9wYHWRhd3FlvF1b&s" width="50" height="50">
        <img *ngIf="taskService.timerForUsers[data.key.ID]?.currentState ==='start'"
        src="https://png.pngtree.com/png-clipart/20190516/original/pngtree-pause-vector-icon-png-image_3791321.jpg" width="50" height="50">
        <img *ngIf="!taskService.timerForUsers[data.key.ID]?.currentState ==='start'"
        src="https://png.pngtree.com/png-clipart/20190516/original/pngtree-pause-vector-icon-png-image_3791321.jpg" width="50" height="50">
      </button>
            <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-basic">
                <li role="menuitem"><a class="dropdown-item"
                        *ngIf="!taskService.timerForUsers[data.key.ID] || taskService.timerForUsers[data.key.ID].currentState === 'pause'"
                        routerLinkActive="active" (click)="startTimer(data)">Start</a></li>
                <li role="menuitem"><a class="dropdown-item"
                        *ngIf="taskService.timerForUsers[data.key.ID]?.currentState === 'start'"
                        routerLinkActive="active" (click)="pauseTimer(data)">Stop</a></li>
            </ul>

Upvotes: 1

Views: 38

Answers (2)

Plochie
Plochie

Reputation: 4117

Modify your start timer function as follows,

this will check before starting any timer if existing time is running, if so it will stop it and start the requested timer.

Demo

 startTimer(data) {

    // get remaining ids
    const pauseIds = [];
    this.data.forEach(d => {
      if (d.ID !== data.key.ID
        && this.taskService.timerForUsers[d.ID] !== undefined
        && this.taskService.timerForUsers[d.ID].currentState === 'start')
          pauseIds.push(d.ID);
    });

    // pause other timers
    pauseIds.forEach(id => {
      this.taskService.pauseTimer(id);
    });

    this.taskService.startTimer(data.key.ID);
  }

Upvotes: 2

Alann
Alann

Reputation: 657

If you just want to have one timer at a time for a specific user just do it like this :

  startTimer(data) {
    if(this.currentTimer){
      this.taskService.pauseTimer(this.currentTimer.key.ID);
    }
   this.currentTimer = data;
   this.taskService.startTimer(data.key.ID);
  }

  pauseTimer(data) {
    this.currentTimer = undefined;
    this.currentTimer = this.taskService.pauseTimer(data.key.ID);
  }

working sample : https://stackblitz.com/edit/angular-sdlgqn

as Liam said in comment, if you want to have only ONE timer across request, you have to implement it on the server side

Upvotes: 1

Related Questions