How to set timer in controller? - javascript

I am a new in angular js and in this moment I am developing a simple aplication to organize tasks that employees doing during the day.
First of all, the user set the customer, description and start the timer to count, when the task is finished, the employees click in finish and the task is closed, but I make a new function if the user close accidentally the tab, when reopen the tab, the user can get the old data (localstorage), but I dont know how to set the time when the user click to active the old time.
I am using this timer (http://siddii.github.io/angular-timer/examples.html#) to develop the counter in this app.
Anyone help me solve it?

According to the documentation, you can initialize the timer by setting the start-time attribute as the time in milliseconds. You can get this from any Date object with the getTime() function. What you need to do now is take this value, store it in localStorage, retrieve it later, and use it a the start-time attribute.

Related

Run Function in Laravel after a certain time and show this time as a countdown

So I have a function and I want this function to run after(like 10 min) user selects it. While timer(10 min) is counting down to run this function, I want timer to be shown to user in a spesific view. I have all functions and views set up for this aim just I dont know how to put timer and show it to user.
https://www.w3schools.com/howto/howto_js_countdown.asp
I checked this but I cant properly put PHP values into Javascript so I cant make it. I also thought about cron jobs but I am not sure how I can do it there.
1) I want a function to run after a spesific time.
2) Additionally I would really like to show this time as a countdown to user.
If you want function that will run after certain time at serverside - check laravel.com/docs/5.5/scheduling. It's really easy to setup.
You can create Laravel's with your function that will repeat every ten minutes or whatever you want. That job would get date from database and check if function should be executed - if so, mark database record with date as executed and call your function.
For timer, in my opinion best approach is to make AJAX call to some API which would return your date for timer, then all need to be done is assign it to a javascript's variable.
Another way is to render view template also with date, make it invisible with CSS display: none and then retrieve it from DOM for your JS timer.
You would need make some changes to timer at w3schools. Add some conditionals to check how much time left, and if it's =< 10 minutes, append timer to the DOM.

How to prevent countdown timer from resetting when the page refresh

Hello Guys I'm having a problem. The countdown of my Page resets when the user refreshes the page. Is there a way to prevent it from resetting? like whoever goes to that specific page the timer will be how it used be on how I left it? not whoever goes to that page but for everyone who goes to that specific page just like the countdown timer in this site
playrps.net/
here is the code:
http://myanimesekai.com/countdown.js
Example:
http://myanimesekai.com/time.html
I've found a lot of question that is similar to this but no one have answered them yet..
You'll have to save the start or end time for that user.
You can do that server-side if you are using php or the like but saving it to a session.
You can also do it client-side by saving it to a cookie or to localStorage.
It depends on what your counting down towards:
The page you mentioned uses an absolute time as the reference to calculate "count down":
var someTargetDate = '07/09/2014 12:00:00';
So every time someone loads the page, the counter value is calculated by something like:
var counterValue = Date.parse(someTargetDate) - Date.now();
However, if the target date is not known statically and can't be hardcoded in your HTML, for example, if you want to set the "targetDate" to be exactly a day from the first time a user goes to your webpage.
In this case, you need to set (and keep track of) targetDate in the users' sessions via either:
A backend server API which returns the targetDate OR
Browser-based stored (e.g. cookies)

What is an ideal time to update modified content field of table and show it to Users?

I am working in an application where I have to show application users that contents of this page was modified like :
1 min ago
5 min ago
2 days ago
something...
Then what should be ideal time interval to fire an ajax call to get last modified date for contents from db and to show to users?
JavaScript has setInterval() where we can set function (to fire ajax call and get last modified date) and time interval (based on which a function will be called to fire ajax call).
Why I am asking because firing ajax call within very few seconds can be considered as an overhead to application.
Please suggest me on this.
Thanks in advance.
Edit:
I am appreciating your comment and checked plugin. But whenever any changes are made to DB table there is one parent table which has modifiedDate field which is updated on every changes and that I have to show to users.
You don't want to waste calls to a DB to get an interval. No single interval would be correct and it would be just pointless updates.
Just use a simple JavaScript plugin like timeago.
It makes it easy by just printing the original date/time and the plugin does the rest auto updating your user as they view your page, so this date:
<abbr class="timeago" title="2008-07-17T09:24:17Z">July 17, 2008</abbr>
Turns into this for the user:
<abbr class="timeago" title="July 17, 2008">5 years ago</abbr>
No need to send ajax requests repeatedly. Just get the date / time with the main contents, and place it in a hidden field in HTML. Then using javascript/jquery, get that date / time and process it, and display it on the appropriate place(s).
unless you are familiar with websockets i would make the call every minute OR just refresh the page every minute so you can fetch the last modified date accurately.
setTimeout(function(){ location.reload() }, 60 * 1000);

Multiple counters in a same page to count the time of each user.

I am trying to create multiple counters but not get done...
I have 4 states for every user in my page and I want to count time invested by the user in a single state..All the states are changed by user ..when users change their state the counter(up)
...start and reset again and count up to the next status change....
kindly help me as soon as imposable...
I had try many code but nor get done because the user are many and the counter code is one and the variable is one for each counter....the no of user are ..dynamic...
Yes, if your trying the same in web application where multiple users are logging then surely it will get wanish .. for that you need to maintain the session for each counter (if possible).
or one suggestion will be at a time of click call callback(jquery/ ajax) which will start the counter and automatically it will get reset . but yes you need to maintain that as per session wise.
then there will be a one way to maintain that counter value in session for that user and on page load you can again start with the same count.
Here i would suggest you to do that using Cookies by maintaining the counter value at client side.
You can use $.cookie("key", value) to set the value, and $.cookie("key") to get the saved value.
Also refer the article on jquery cookies. http://www.electrictoolbox.com/jquery-cookies/

Syncing a store after two seconds if no record has changed in the meantime

I have to sync a store to the backend automatically. The grid is filled with checkboxcolumns, and I don't want to use the builtin autoSync because that starts a sync whenever a single checkbox is clicked. But I want to save automatically.
So, a user may click five or ten checkboxes and when he stops, I want to submit the data to the server.
So how can I defer the sync by let's say 2 seconds, and stop it (and start counting down the 2 seconds anew) when the user clicks a checkbox during that time?
Is there a builtin ExtJS function for that or will I have to createTimeout and clearTimeout by hand?
I suggest to have a look on Ext.Function (https://docs.sencha.com/extjs/6.0/6.0.1-classic/#!/api/Ext.Function), you have several method which are helpfull.
In your case, I'll consider looking at Ext.Function.createBuffered (https://docs.sencha.com/extjs/6.0/6.0.1-classic/#!/api/Ext.Function-method-createBuffered)
I think this is the most appropriate (it the same mechanism used in a ComboBox configured in queryMode="remote".
(Also have a look at Ext.Function.createDelayed, Ext.defer)

Categories