AngularJS Timer Alarm Clock - javascript

I understand how to display the system time/date. I also have textboxes where user input the time that they want to input. I'll call it 1st alarm.
What I want to do is check if once the system time reaches the 1st alarm, it'll do something. I currently have a text label but that's not the important part.
In the html part i have here
<input type="text" placeholder="Enter Time Start Here" ng-model="firstAlert"/>{{firstAlert}}
<button type="button" ng-click="Check()">Submit</button>
In the JS part
$scope.Check=function(){
if(Date.now() == $scope.firstAlert)
{
$scope.info = "They're the same!";
}
}
What I would like to know is what would be the best approach in doing this. Obviously my first though is not the correct one. I've search for some examples but I mainly came across on how to do a timer and that's not what I'm focused on. I simply would like to have the user type in the date and time (mm/dd/yy hh:mm PM or AM). Or rather in the "short" date format.

You probably want to use angular's $interval or $timeout
Your logic in Check will probably have to be more granular, but this roughly what you'd want if you wanted to check every 1s:
$interval($scope.Check, 1000);

Assuming $scope.fisrtAlert is in the correct format, you might want to do this.
var timer = $interval(function(){
if($scope.firstAlert && Date.now()==$scope.firstAlert){
$scope.info = "Ring Ring";
}
}, 1000);
$scope.stopTimer = function(){
$interval.cancel(timer);
}

Related

Creating a custom command as an alternative to setValue() where I can control the type speed

Hope someone can help with this. I have come across an issue with the application im testing. The developers are using vue.js library and there are a couple of fields which reformat the entered test. So for example if you enter phone number, the field will automatically enter the spaces and hyphens where its needed. This is also the same with the date of birth field where it automatically enters the slashes if the user does not.
So the issue I have is that using both 'setValue()' or 'sendKeys()' are entering the text too fast and the cursor in the field sometimes cannot keep up and the text entered sometimes appears in the incorrect order. For example, if I try to enter '123456789'. Some times it ends up as '132456798' (or any other combination). This cannot be produced manually and sometimes the test does pass. But its flakey.
What I wanted to do was to write a custom command to do something where it enters the string but in a slower manner. For this I need to have control of how fast I want the text to be entered. So I was thinking of something like this where I can pass in a selector and the text and then it will enter one character at a time with a 200 millisecond pause in between each character. Something like this:
let i = 0;
const speed = 200; // type speed in milliseconds
exports.command = function customSetValue(selector, txt) {
console.log(selector);
console.log(txt);
if (i < txt.length) {
this.execute(function () {
document.getElementsByName(selector).innerHTML += txt.charAt(i);
i++;
setTimeout(customSetValue, speed);
}, [selector, txt]);
}
return this;
};
When running document.getElementsByName(selector) in browser console I get a match on the required element. But it is not entering any text. Also note that I added a console.log in there and I was actually expecting this to log out 14 times but it only logged once. So itss as if my if condition is false
I checked my if condition and it should be true. So not sure why its not reiterating the function. Any help is much appreciated.
Also if it helps. I am using the .execute() command to inject javascript which is referenced here: https://nightwatchjs.org/api/execute.html
And the idea on this type writer is based on this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_typewriter
We ended up taking a different approach much simpler. Wanted to post here in case anyone else ever needs something similar
exports.command = function customSetValue(selector, txt) {
txt.split('').forEach(char => {
this.setValue(selector, char);
this.pause(200); // type speed in milliseconds
});
return this;
};

Having trouble with stopping interval [JS]

Ok so this is starting to make me go a little crazy.
I've got a code for a timer tracker. You enter a time and it will calculate how long until the item will go on bid and when the bid phase will end. You can set an alarm as well.
My problem is that I am working with local variables. It all works fine until you delete the row. If the row is deleted, the interval will continue and the alarm will still go off. I've been thinking of a way to go around this. The only thing I can think of is checking if the row exists inside the insRow function but I'm not sure how to do that. If that's possible I could add it to this if statement:
if(noticeTime[1] === -6) {
clearInterval(interval);
}
http://jsfiddle.net/t7h9tbzf/
setInterval returns a numeric ID that you can store as a data- attribute in the inserted row, with something like
const interval = window.setInterval(alarm, 1000);
new_row.dataset.intervalID = interval;
Then, before deleting the row, clear the interval:
window.clearInterval(row.dataset.intervalID);

How to tell if current time is the exact same as timestamp right down to the millisecond?

I am sending a timestamp from the server and I want the browser to know when that exact time is.
I am using Moment but feel there are a few ways to achieve this.
I have looked at using isSame() in a setInterval() but it doesn't seem to be working.
var interval = setInterval(function(){
if(moment().isSame(moment(data.server_time_stamp))){
console.log('MATCHES!!!')
clearInterval(interval)
}
}, 1)
Where data.server_time_stamp is a moment object passed from the server (Calculated as current time + 10 seconds). I have set this to utc() in order to standardize the timezones on server and client.
I have also tried setting it to unix() and in my setInterval() loop, using === operator to see if they are the same. Like so:
var interval = setInterval(function(){
if(cur_time === data.screenshot_time){
console.log('MATCHES!!!')
clearInterval(interval)
}
}, 1)
all though with this method, it doesn't seem to be acurate enough.
What is the most accurate way to messure this?
You should compare the seconds not the milliseconds like #some said.
It could work like that:
moment.utc().isSame(moment(data.server_time_stamp), 'second');
The method I ended up using (but am yet to thoroughly test) was using timesync to sync all clocks and then match the current time in a setInterval()
var ts = timesync.create({
server: SERVER + '/timesync'
});
var interval = setInterval(function(){
if(moment(ts.now()).utc().unix() === data.screenshot_time){
console.log('SNAPPED!!!')
take_photo()
clearInterval(interval)
}
}, 1)

Check if Minimum interval between time is 2 hours with jQuery

Im using the car rental plugin and need to modify it in a way that if the rental time chosen by customer is less than 2 hours, to give him a message, pop up or any kind of message, that he needs to choose time minimum 2 hours for rental.
You can see the example here: http://envato.bestsoftinc.net/wp-car/
I need to make sure that there is at least 2 hour difference between pick up date field and drop off date field, if not, I need to show him message and not let him click on the Search Button. Any ideas how I can achieve that with jQuery or Regular Javascript please?
Thank you
this is the basic logic for it, try implement this with your site.
i found moment.js is really helpful with js time date obj you can give it a try
if($('#checkInDate').value() === $('#checkOutDate').value) [
if both date is the same date, than
var checkInTime = $('#checkInTime').value();
var checkOutTime = $('#checkInTime').valeu();
get time value
if(checkOutTime > checkInTime) {
checkOutTime must be later than checkInTime when it's the same date
if(checkOutTime - checkInTime > 2) {
if duration is more than 2 than this value is ok
alert('ok');
this fail 3rd if statement
} else { alert('error must less than 2 '); }
this fail 2nd if statement
} else {alert('error checkout must bigger than checkin'); }
end 1st if statement that check for same date
}

Implementing jQuery Timer

I'm getting a list of notes from the database and displaying them to the view, if the note is less than 15 minutes old then I am displaying a edit button allowing users to inline edit the note and save the new information. I have this part working fully. I'm now trying to attach a timer to the notes that are less than 15 minutes old and hide the button when the timer is up. N.B. The user can edit multiple notes as long as they're < 15 minutes old.
How would I go about doing this, as I'm not too familiar with jQuery and Javascript?
Thanks for any replies, as I'm quite new to this forum stuff I wan't sure if you needed code or not to answer the question. So if anyone wants to look at it I'll put it up.
I would add an .editable class to notes that are still editable and remove it when no longer.
You could retain the time for the note in a data-time="1359999066" attribute (assuming it's unix timestamp). Let me know if you need further help with the code I implied.
(function checkTimer() {
$('.note.editable').each(function() {
//check for timestamp, remove .editable and hide button
});
if ( $('.note.editable').length ) setTimeout(checkTimer, 5000);
})();
// this will check every 5 seconds
Usage
var timer = $.timer(function() {
alert('This message was sent by a timer.');
});
timer.set({ time : 5000, autostart : true });
timer.set(options);
timer.play(reset); // Boolean. Defaults to false.
timer.pause();
timer.stop(); // Pause and resets
timer.toggle(reset); // Boolean. Defaults to false.
timer.once(time); // Number. Defaults to 0.
timer.isActive // Returns true if timer is running
timer.remaining // Remaining time when paused
http://code.google.com/p/jquery-timer/
It might solve your problem..see full article and demo on link
On the server side you can attach an data attribute to each note containing the time of creation:
<div class="note" data-creation="1360000265027">
<!-- milliseconds from 01.01.1970 (UTC) -->
<p>My content</p>
<button>edit</button>
</div>
Now you can check whether this is older than 15min:
(function checkTimer() {
$('.note').each(function(){
var creation = $(this).data('creation'),
// time in milliseconds from 01.01.1970 (UTC) minus 15min (900000milsec)
fifteenAgo = (new Date).getTime() - 9e5;
if (creation <= fifteenAgo) {
$(this).find('button').remove();
}
});
if ( $('.note button').length ) setTimeout(checkTimer, 5000);
})();

Categories