Content Page Visual Count Down Timer

Wappler General Need Help
1

I know, this topic has been covered, and I can get the examples working in previous posts. In my case however, I'm not comparing times from a DB query. My use case is strictly front-end, working with datetime variables and showing a simple 10 second countdown on the page until dmx-scheduler redirects the page. The solution eludes me...

<dmx-scheduler id="scheduler1" dmx-on:tick="browserfanmain.goto(query1.data.crd)" delay="10"></dmx-scheduler>
      <div class="row text-danger justify-content-center">
              <dmx-datetime id="varDateTimeNow"></dmx-datetime>
              <dmx-value id="varNowPlusTenSec" dmx-bind:value="varDateTimeNow.datetime.addSeconds(10).formatDate('HH:mm:ss')"></dmx-value>
              {{varNowPlusTenSec.value}}
              You will be redirected in: {{varDateTimeNow.datetime.secondsUntil(varNowPlusTenSec.value)}} seconds.
      </div>

In my code, "{{varNowPlusTenSec.value}}" counts up every second. Not what I want but I show it on the page just to make sure it's a valid datetime. I'll remove it after the desired behavior is achieved.

The issue is with "{{varDateTimeNow.datetime.secondsUntil(varNowPlusTenSec.value)}}". It only shows "10 seconds". It does not count down. Counting down from 10 is the desired behavior.

Please help. :slight_smile:

2

Use this formula You will be redirected in: {{(((100 - scheduler1.percent) / 100)*10).round(0)}} seconds.

2 Likes
3

about the counterdown timer, if you directly bind a datetime value to a variable it will always be updated to the current datetime value and... it will not be "frozen".

You just need to have a second value that will be set/frozen to the current datetime and calculate the difference beteween the current datetime and the setfrozen one.

You can do that by adding another variable and on an event eg page.ready or add a page flow and in there set the value of the second/frozen variable to datetime.datetime

I might have confused you, see the example:

<div class="row text-danger justify-content-center">
   <dmx-datetime id="varDateTimeNow"></dmx-datetime>
    <dmx-value id="varNowPlusTenSec" dmx-bind:value="var1.value.addSeconds(10)"></dmx-value>
    You will be redirected in: {{varDateTimeNow.datetime.secondsUntil(varNowPlusTenSec.value)&gt;=0?varDateTimeNow.datetime.secondsUntil(varNowPlusTenSec.value):0}} seconds.
</div>
<!-- second/frozen variable -->
<dmx-value id="var1"></dmx-value>

And the page flow that sets the frozen variable to the current datetime:

<script is="dmx-flow" id="setCurrentTime" type="text/dmx-flow" autorun="true">{
  run: {
    action: "{{var1.setValue(varDateTimeNow.datetime)}}",
    outputType: "text"
  }
}</script>
4

Thank you!

5

Thank you for the explanation and example. It did make a lot of sense to have a frozen datetime and one that represented a time in the future and use secondsUntil(). As Notum pointed out in the example, using the percent calculation that the scheduler provides and converting it back to a number was a great approach and the one I decided to use.