lundi 23 septembre 2019

How to make timer component running while switching routes in angular?

I have a timer(counter) component and use it in my dashboard.html. The program is about to see how much time left until the client arrives. How can I make my timer keep running when I am switching routes instead of resetting it to defautlt?

dashboard.html

<div class="text-center">
  <h1 class="bc">Welcome !</h1>
  <div class="row" *ngIf="appUser && appUser?.loggedIn && appUser?.isDoctor">
    <div class="col">
      <counter #counter></counter>
      <div><a class="btn btn-success" routerLink="add-new-client">Add new client</a></div>
      <div><a class="btn btn-primary" routerLink="my-clients" >My Clients</a></div>
      <div><a class="btn btn-info" routerLink="all-clients">All Clients</a></div>
    </div>
  </div>
  <div class="row">
    <div class="col" ><a class="btn btn-warning" (click)="LogOut()">Logout</a></div>
  </div>
</div>

dashboard.ts

export class DashboardComponent implements OnInit, AfterViewInit {
  appUser: User;
  clients: Client[] = [];
  today: Date = new Date(2019, 10, 26, 12, 20);     // Defualt todays time;

  @ViewChild('counter', {read: CounterComponent, static: false})
  private counter: CounterComponent;

  constructor(private userS: UserService,
              private clientService: ClientService,
              private router: Router) {
                setInterval(() => {
                  this.today.getTime(); //= new Date(2019, 10, 26, 12, 20);
                }, 1);
              }

  counterState = 'counter is ticking';
  ngOnInit() {
    this.appUser = this.userS.currentUser;
    this.clients = this.clientService.getUserClients()
    .sort((a, b) => {
      return (new Date(a.registrationDate) as any) - (new Date(b.registrationDate) as any);
    });
  }

  ngAfterViewInit() {
    this.counter.startAt = this.timeRemaining();
    this.counter.counterState.subscribe((msg)=>{
      if(msg === 'COMPLETE') {
        this.counterState = 'counter has stopped';
        alert('You need to serve a client!');
      }
    });
    this.counter.start();

  }

  private timeRemaining() {
    let t1 = this.clientService.getFirstInRowClient().registrationDate;
    let dif =  (t1.getTime() - this.today.getTime()) / 1000;
    if (dif < 0) {
      return 0;
    }
    return dif;
  }
}


My routes in app.module.ts

RouterModule.forRoot(
      [ { path: '', component: LoginComponent},
        { path: 'dashboard', canActivate: [AuthguardGuard], component: DashboardComponent},
        { path: 'dashboard/add-new-client', component: ClientFormComponent, canActivate: [AuthguardGuard]},
        { path: 'dashboard/all-clients', component: AllClientsComponent, canActivate: [AuthguardGuard]},
        { path: 'dashboard/my-clients', component: MyClientsComponent, canActivate: [AuthguardGuard]}
      ])

It should be ticking also when I am not in my dashboard.html




Aucun commentaire:

Enregistrer un commentaire