How to keep the timer value after page refresh

[ruvan83]

Hello, I'm using this module and it's working very well for my purpose, one Issue I would like to find a solution for is when the timer is started and user refresh the page the timer get reset and user can't track it. I use leftTime: timeData in my config

[cipchk]

You can solve it with localStorage, for example:

<countdown #cd [config]="{ leftTime: 1000, notify: [0] }" (event)="handleEvent($event)"></countdown>

Use notify event to save data in real time.

handleEvent(ev: CountdownEvent) {
    if (ev.type === 'notify') {
        // Save current value
    }
}

Finally, get cache value in ngOnInit event to leftTime.

[ruvan83]

Hello, I tried this approach, I have the problem still:

1. notify of value 0 is not allowing, getting an error it must be positive integer. Here's my config <countdown #cd [config]="{ leftTime: 6000, notify: [0] , demand: true, format: 'mm:ss'}" (event)="handleEvent($event)"></countdown>
2. How this is going to save the value continuously suppose the timer is on 02:45 and user refreshed the page , notify 0 or 1 is only saving when 1 second is reached. I would like ideally to continue the time when refresh is done.

Can you elaborate it with an code snippet or a stackblitz :)

Thanks!

[cipchk]

A demo: https://stackblitz.com/edit/ngx-countdown-setup-8v3m14?file=src%2Fapp%2Fapp.component.ts

[ruvan83]

Hello, Thanks for the stackblitz , I have my timer on demand so I control visibility via a Boolean and on OnInIt if the there's a value in session storage It means timer was started so I display the timer and it gets correct value from the storage , however I can't get it to resume, so calling begin(); it throws errors of being undefined! Here's a fork of the original stackblitz

https://stackblitz.com/edit/ngx-countdown-setup-pntexf?file=src%2Fapp%2Fapp.component.ts

[cipchk]

You can wrap a setTimeOut in this.countdown.begin();, or triger in button of click event.

[ruvan83]

Wrapped it in setTimeout(), still the timer doesn't get the timer to continue, strangely enough if I wrap it in function triggered by click it works, however when page is refresh I want the timer to start resuming without click event.

[cipchk]

So, why do need demand? you can trying:

import { Component, OnInit } from '@angular/core';
import { CountdownConfig, CountdownEvent } from 'ngx-countdown';

const KEY = 'time'
const DEFAULT = 10

@Component({
  selector: 'my-app',
  template: `
  <countdown *ngIf="config" [config]="config" (event)="handleEvent($event)"></countdown>
  `
})
export class AppComponent implements OnInit {
  config: CountdownConfig | null = null;
  ngOnInit(): void {
    let value = +localStorage.getItem(KEY) ?? DEFAULT;
    if (value <= 0) value = DEFAULT
    this.config = {...this.config, leftTime: value, notify: 0 }
  }

  handleEvent(ev: CountdownEvent) {
    console.log(ev)
    if (ev.action === 'notify') {
      // Save current value
      localStorage.setItem(KEY, `${ev.left / 1000}`);
    }
  }

}

[ruvan83]

Because i want the users to start the timer on demand, also i have added the options to incremrent and decrement the minutes (60 seconds) before starting countdown, as well as the restart option, also i use websocket to broadcast such events for e.g. if admin starts the timer all connected users will see the timer, the issue is when the admin refresh the page the timer gets resetted on thier side obviosuly it's thier client side (broswer) ,while other users still the timer counting hence the reason why i opened this issue .

[MahmoudSr]

When the countdown is done a text appears, but when i refresh it restarts, how do i prevent that and make the text stay

[cipchk]

@MahmoudSr Should not pass the same leftTime value when finish, I think this is a business logic problem.

[MahmoudSr]

can you help me with it ?

[MahmoudSr]

I got it worked out, thanks anyway

[ruvan83]

@MahmoudSr can you share the solution kindly, I want also to solve this issue.