timers3000
Version:
Provides a graphical interface in your browser to create and manage incremental timers for your daily tasks.
197 lines (175 loc) • 6.68 kB
JavaScript
var timerContainer = []
var socket = io.connect(window.location.hostname);
socket.on("sleepTime",function(diff){
flashMessage("(Beta) The app paused for ~" + convertSeconds(Math.round(diff/1000)) + " while a timer was ticking (Maybe your system went to sleep mode?). You might want to keep that in mind when finishing the current session.");
});
/**
* Asks the server if there is a newer version on npm available.
* If yes, notify the user with a flashmessage
*/
function updateNeeded(){
socket.emit("updateNeeded", function(err, need, latest){
if(need){
var message = document.createElement('span');
var head = document.createElement('span')
head.innerHTML = "You are running an old version of Timers3000 - You can update to version " + latest + " by executing ";
var code = document.createElement('code')
code.innerHTML = "npm update -g timers3000";
var tail = document.createElement('span')
tail.innerHTML = " on your commandline." ;
message.appendChild(head);
message.appendChild(code);
message.appendChild(tail);
flashMessage(message, "info");
}
});
}
/*------------------------------------------------------------------------
* ------------------------Timer Classdefintion ------------------------
------------------------------------------------------------------------*/
/**
* Timerconstructor
* @param {String} id unique string that identifies the timer
*/
function Timer(id){
this.running = false;
this.id = id;
this.totalSeconds = 0;
this.sessionTime = 0;
this.timerUI = document.getElementById(id + "_timer");
this.start();
}
/**
* Starts the timer:
* Schedules the timers tick function for every 1000ms
* @return {void}
*/
Timer.prototype.start = function() {
var self = this;
if(!self.running){
showSpinner();
socket.emit("startTimer", self.id, function(seconds, sess){
self.running = true;
self.totalSeconds = seconds;
self.sessionTime = sess || 0;
self.interval = setInterval(function(){ self.tick(); }, 1000);
//toggle the timerswitch
document.getElementById(self.id).checked = true;
self.timerUI.style.color = "green";
self.timerUI.style.fontWeight = "bold";
self.timerUI.innerHTML = convertSeconds(self.sessionTime);
hideSpinner();
});
}
};
/**
* Stops the timer:
* Sets the running field on false and unschedules the tick method
* @return {void}
*/
Timer.prototype.stop = function() {
var self = this;
if(self.running){
showSpinner();
socket.emit("stopTimer", self.id, function(){
self.running = false;
self.sessionTime = 0;
clearInterval(self.interval);
//toggle the timerswitch
document.getElementById(self.id).checked = false;
self.timerUI.style.color = "black";
self.timerUI.style.fontWeight = "";
self.timerUI.innerHTML = convertSeconds(self.totalSeconds);
hideSpinner();
});
}
};
/**
* Gets called every second if the timer is running
* @return {void}
*/
Timer.prototype.tick = function() {
var self = this;
if (self.running){
self.sessionTime += 1;
self.totalSeconds += 1;
self.timerUI.innerHTML = convertSeconds(self.sessionTime);
}
};
/*------------------------------------------------------------------------
* ------------------------Timer UI-Interaction ------------------------
------------------------------------------------------------------------*/
/**
* Gets called when a timer-switch is clicked
* Iterates over the timerContainer and starts or stops the timer with the given
* id. If there is no timer with the given id in the timerContainer yet, a new
* Timer instance is created and pushed into the timerContainer.
* The timer starts automatically on creation.
* @param {string} id unique string that identifies the timer to start/stop
* @return {void}
*/
function toggleSwitch(id){
for (var i = timerContainer.length - 1; i >= 0; i--) {
var timer = timerContainer[i];
if(timer.id === id){
if(timer.running) timer.stop();
else timer.start();
return;
}
};
//The timer is not yet existent, create it. Will start automatically
timerContainer.push(new Timer(id));
}
/**
* Gets called when the 'Add Timer'-Button was pressed
* @param {String} groupId unique String that identifies the group the timer will be created for
* @return {void}
*/
function newTimer(groupId){
showSpinner();
socket.emit('newTimer', {"name": "Timer", "group": groupId}, function(id){
var list = document.getElementById(groupId + "_timersList");
list.insertBefore(timerTemplate(id),list.lastElementChild);
hideSpinner();
});
}
/**
* Gets called when the textfield of the timername is left (onBlur) or the Enter-key was pressed
* while the textfield was focussed.
* Sends the new name to the server if it is valid (not blank)
* @param {String} id Unique String that identifies the timer
* @param {Object} textfield The textfield for the timername
*/
function renameTimer(id, textfield){
if(textfield.value){
showSpinner();
socket.emit("renameTimer", id, textfield.value, function(){
hideSpinner();
});
}
}
/**
* Gets called when the 'Delete'-Button of a timer was pressed.
* Shows a confirmation dialog with 2 Buttons: OK and Cancel.
* If ok is pressed, the timer is removed from view and database.
* If cancel is pressed, the dialog disappears.
* @param {String} id Unique String that identifies the timer
* @param {Object} button Button that called the function
*/
function deleteTimer(id, button){
var box = confirmBox("Delete Timer?");
box.querySelector("#ok_btn").onclick = function(){
showSpinner();
socket.emit("deleteTimer",id,function(){
box.parentNode.parentNode.removeChild(box.parentNode);
hideSpinner();
});
}
box.querySelector("#cncl_btn").onclick = function(){
box.parentNode.replaceChild(button.parentNode,box);
}
box.className = "col-lg-3 col-md-3 col-xs-3 pull-right";
box.style.margin = "5px 0px 0px 0px";
box.style.textAlign = "right";
button.parentNode.parentNode.replaceChild(box,button.parentNode);
}