I am struggling to get multiple countdown timers displayed in a meteor app.
AuctionExpireIn is a date in the format - 2015-03-23T17:17:52.412Z.
Have a auctionItems collection , displaying 3 rows of auction items in auctionItem template.
While the target date is different for each of the auction items, what I am seeing is all the three rows have the same countdown timer . Apparently the session is not tied to each of the records and the same session value is being displayed for all the three rows.
How do I get different rows to display countdown timer based on the target data that each auction item document has?
Appreciate all the help.
Template.auctionItem.helpers({
AuctionExpireIn : function() {
var target_date = new Date(this.AuctionExpireIn).getTime();
//alert (target_date);
// variables for time units
var days, hours, minutes, seconds;
// update the tag with id "countdown" every 1 second
setInterval(function( ) {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
var countdown ='';
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
// format countdown string + set tag value
countdown= days + "d, " + hours + "h, " + minutes + "m, " + seconds + "s";
Session.set ('countdown', countdown);
}, 1000);
return Session.get('countdown');
}
});
You can tie each countdown timer to an instance of your auctionItem template. The below works as a proof-of-concept; each template will pick a random number from 1 to 10 and count down to 0. To apply it to your case, just replace the random number with the moment.js difference between this.AuctionExpireIn and new Date() (which I did not look up because I don't know it offhand).
Template.auctionItem.created = function(){
var self = this;
var num = Math.floor(Math.random() * 10);
this.remaining = new ReactiveVar(num);
this.interval = Meteor.setInterval(function(){
var remaining = self.remaining.get();
self.remaining.set(--remaining);
if (remaining === 0){
Meteor.clearInterval(self.interval);
}
}, 1000);
}
Template.auctionItem.helpers({
remaining: function(){
return Template.instance().remaining.get();
}
});
One point I noticed from the efforts above is you don't want to try to set the counters from a helper; just get the counters from a helper.
You can do this in a spacebars helper using ReactiveVar or Session. This example outputs the current time every second.
Template.registerHelper('Timer', (options)->
now = new Date()
reactive = new ReactiveVar(now.getTime())
Meteor.setInterval(()->
now = new Date()
reactive.set now.getTime()
,1000)
return reactive.get()
)
I'm not sure if the above is all of your current logic for your application, but based on what you have provided, the issue seems to be that you are using a single Session variable to keep track of the remaining time for three different auction items. If you need to use Session in order to keep track of your remaining times for the three different auction items, you should use three separate Session variables to do so, for example:
Session.set('auctionItemOne');
Session.set('auctionItemTwo');
Session.set('auctionItemThree');
But honestly, this is not the best way to go about solving this problem. Instead, I would recommend creating a simple template helper that takes in the end date/time for an auction item and outputs the appropriate string to describe the amount of time remaining. This can be easily accomplished with a library such as Moment.js. In order to implement this solution, do something like the following:
// Template
<template name="auctionItem">
{{timeRemaining}}
</template>
// Template Helper
Template.auctionItem.helpers({
timeRemaining: function() {
// Call appropriate Moment.js methods
// Return the string returned by Moment.js
}
});
I hope that this helps point you in a better direction for how to handle your situation. Please let me know if you need any further explanation or assistance.
Related
I'm trying to create a countdowntimer in Javascript. There are a lof of examples on the internet. I'm trying to adjust these to my own needs. I want a countdown timer that, when started, countsdown to the whole hour. For example, if I run the code at 13:15 it wil count down to 14:00.
The problem I have is getting the time to countdown to.
var cd = new Date("Jan 5, 2021 15:37:25").getTime();
In the above example you have a defined date. I'm trying to change this to a time to the first upcoming hour. Below is what I have:
var countdowndate = newDate("cd.getMonth, cd.getYear (cd.getHour + 1):00:00").getTime();
This isn't working. What am I doing wrong here? Any help is appreciated.
Here's a very expressive way of solving this:
Get the current time stamp, floored to the last full minute.
Get how many full minutes remain until the next hour, transform to milliseconds.
Sum up the results of 1 and 2.
function getBeginningOfNextHour() {
const msPerMinute = 60 * 1000;
const currentDate = new Date();
const currentDateTimestampRoundedToMinute = Math.floor(+currentDate / msPerMinute) * msPerMinute;
const msUntilNextHour = (60 - currentDate.getMinutes()) * msPerMinute;
return new Date(currentDateTimestampRoundedToMinute + msUntilNextHour);
}
console.log(getBeginningOfNextHour());
I've been given a task to display multiple timers on a page in a table. The start values for these timers are stored in a database and loaded into the view when the page loads.
I initially designed this as a single timer. In that version, using the clearInterval() method to stop the timer from counting down past 0:00 works. With the multiple timers, it does not.
There's no way for me to anticipate how many records are going to display in the table.
The single counter variable was how I implemented this when there was only one timer. That seems to still work to start the countdown process, but doesn't stop it as expected when the clearInterval(counter) is called.
var counter;
// NOTE: Does not support days at this time
// Ex: StartTimer(5, 'm', 'timer') for Five Minutes
// Ex: StartTimer(5, 'h', 'timer') for Five Hours
function StartCountdownTimer(timeDistance, timeMeasurement, timerCallback) {
// Add timeDistance in specified measurement to current time
var countDownDate = moment().add(timeDistance, timeMeasurement).toDate();
var timeRemaining;
counter = setInterval(function () {
// Get Current Time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
let duration = moment.duration(distance * 1000, "milliseconds");
let hours = duration.hours();
let minutes = duration.minutes();
let seconds = duration.seconds();
if (minutes < 10 && hours && hours > 0) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
// If the count down is finished clear the counter interval.
if (distance < 0) {
clearInterval(counter);
}
else {
timerCallback(hours, minutes, seconds);
}
}, 1000);
}
I would guess that the clearInterval() is not working because there are multiple timers on the page, but I'm not sure of the best way to load multiple variables and assign them to their own setInterval() function to then leverage when doing the clearInterval() later.
This is a separate JS file that is called by the HTML in the $(document).ready() function.
Any ideas on how to get this clearInterval() to work with multiple timers on a page?
Put the various intervals in an object, with a counter variable that increments every time you assign an interval. Then use the counter as the key and assign its value to the interval.
I'm working on a project on Node.js. I want to execute some conditional code portion after waiting for five minutes since the last code does. I only need it to run once that way (not everyday or ...). The rest of the code will take over but when it ticks five minute, that will execute. Can I accomplish this?
EDIT: The code from Abdennour TOUMI partially works. But his way of denoting the minute by the variable didn't work for me. So I made the following edit according to the example from the module's page.
var schedule = require('node-schedule');
var AFTER_5_MIN=new Date(new Date(new Date().getTime() + 5*60000))
var date = new Date(AFTER_5_MIN);
var j = schedule.scheduleJob(date, function() {
if(condition1){
// Runned once --> Thus, you need to cancel it
// code here, than code to run once
j.cancel();
}else{
//it will be repeated
}
});
Your mistake is use 5 fields & the right is 6 fields .
* 0 * * * * --> For each hour at the 0 minute of that hour.
To start after 5 minutes , you could calculate the minute of hour after 5 minutes :
var schedule = require('node-schedule');
var AFTER_5_MIN=new Date(new Date(new Date().getTime() + 5*60000)).getMinutes();
var j = schedule.scheduleJob(`* ${AFTER_5_MIN} * * * *`, function() {
if(condition1){
// Runned once --> Thus, you need to cancel it
// code here, than code to run once
j.cancel();
}else{
//it will be repeated
}
});
Is there any reason you can't use setTimeout()?
const WAIT_TIME = (60 * 5) * 1000; //5 Minutes
var timer = setTimeout(function(){
console.log('Cron job works!')
}, WAIT_TIME);
/*
* If conditions change in this five minutes and you need to cancel executing
* the callback above, you can clear the timer
* clearTimeout(timer);
*/
having a slightly weird issue that I cant figure out. Ive set up a javascript timer, all it does is repeats an interval every second that checks the difference between 2 dates and displays the results. All seems fine, however when leaving the browser open for several minutes (not touching it.. literally walking away for a while), it seems to "time out" and stop functioning. No console error messages or anything, the code just stops executing.. Was wondering if anyone had any idea what could be causing this? Is my code the issue or is this a built in browser function to stop js functions if there is no input from the user on a page for a certain time?
edit sorry should mention this timer is set to run for around 40 days at the moment so it will never realistically meet the clearinterval statement in a user session. The future date variable im adding to the function is a dynamic unix timestamp from PHP for a date which is roughly 40 days in future. Currently set to 1444761301.88
function MModeTimer(futureDate) {
zIntervalActive = true;
var currentTime = new Date().getTime() / 1000;
var timeRemaining = futureDate - currentTime;
var minute = 60;
var hour = 60 * 60;
var day = 60 * 60 * 24;
var zDays = Math.floor(timeRemaining / day);
var zHours = Math.floor((timeRemaining - zDays * day) / hour);
var zMinutes = Math.floor((timeRemaining - zDays * day - zHours * hour) / minute);
var zSeconds = Math.floor((timeRemaining - zDays * day - zHours * hour - zMinutes * minute));
if (zSeconds <= 0 && zMinutes <= 0) {
console.log("timer in negative");
// timer at zero
clearInterval(zTimeInterval);
} else {
if (futureDate > currentTime) {
console.log("timer interval running");
// changes html as part of function
}
}
}
zTimeInterval = setInterval(function() {
MModeTimer(zNewTime)
}, 1000);
This line:
clearInterval(zTimeInterval);
Is clearing the interval when the condition:
if (zSeconds <= 0 && zMinutes <= 0) {
Is met.
And as per the log you've wrote inside, that would be wrong. You are checking that zSeconds and zMinues are less or equal to 0. So when both are 0, the interval will be cleared.
Edit
As per your edits and explanations, may I suggest adding a console log that i'ts not inside any condition?:
function MModeTimer(futureDate) {
console.log('running');
//... rest of your code
That way you can make sure if the interval is running, maybe your conditions are not being TRUE after a while and you won't see any log, but the interval would be still running.
Im trying to make a text formatting Directive in Angular.
In my current application i have many places where i have to present time in HH:MM:SS format, the time in the DB is saved in seconds. So i was thinking that maybe a directive would be the right thing here.
For example: everywhere i want to present time in HH:MM:SS i just add the directive "showAsTime" to the element containing the time in seconds.
Q1 What would be the best approach here?
Only part of the code, shown:
<table>
<tr data-ng-repeat="time in timeList">
<td data-show-as-time>{{ time.rowTime }}</td> //time in seconds
<tr>
</table>
The problem is that i dont get the value, the directive is executed first, if i "hardcode" a value say: 900 in place of {{ time.rowTime }} i get the correct presentation "00:15:00".
Q2 In one part of the application i have a model bound to a counter as shown below.
Is it possible to make the same Directive work even here?
Only part of the code, shown:
<h1 data-ng-model="timeCounter" data-show-as-time>{{timeCounter}}</h1>
//timeCounter adds 1 to timeCounter every second (with a $interval in the controller).
Time calculations is done as follows,
time.js
app.factory('time',function(){
var timeFactory = {};
timeFactory.timeFromSeconds = function(seconds){
var timeFromSeconds
var minutes = Math.floor(seconds/60);
var hours = Math.floor(seconds/3600);
if(hours > 0) minutes = minutes - hours * 60;
seconds = seconds - hours * 3600 - minutes * 60;
if(hours < 10) hours = "0" + hours;
if(minutes < 10) minutes = "0" + minutes;
if(seconds < 10) seconds = "0" + seconds;
timeFromSeconds = hours +":"+minutes+":" + seconds;
return timeFromSeconds;
}
return timeFactory;
}
There is already a date filter in Angular that can do this for you.
Check the link out here: https://docs.angularjs.org/api/ng/filter/date
Besides the date filter stated in the other answer (https://docs.angularjs.org/api/ng/filter/date), you could also implement a custom filter to further format your model data:
angular.filter('doSomething', function() {
return function(input) {
//do something on your input and return it
}
})
In your html, then, you can call your filter as
{{model|doSomething}}
This is probably the best way to obtain the behavior you want, rather than using a directive.