timers3000
Version:
Provides a graphical interface in your browser to create and manage incremental timers for your daily tasks.
266 lines (238 loc) • 11.7 kB
JavaScript
/**
* Is needed to implement own drag-drop behavior
* @param {Object} ev The event object
*/
function allowDrop(ev){
ev.preventDefault();
}
/**
* Gets called when a timer is dragged.
* Reduces the timer's opacity and show borders around the elements
* where the timer can be dropped.
* @param {Object} ev The event object
*/
function handleDragStart(ev) {
ev.target.style.opacity = 0.4;
ev.dataTransfer.setData("Text",ev.target.getAttribute('timer'));
var lists = document.getElementsByClassName("timerslist");
for (var i = lists.length - 1; i >= 0; i--) {
lists[i].style.border = "4px dashed darkgreen";
};
}
/**
* Gets called when the dragged element is dropped.
* Move the dragged timer to the targeted group's timerlist
* and notify the server.
* @param {Object} ev The event object
*/
function handleDrop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
var list = ev.target;
for (var i = 0; i < 100; i++) {
if(list.className == "container timerslist"){
break;
}
if(list.parentNode)
list = list.parentNode;
};
var targetGroup = list.parentNode.parentNode.id
var sourceTimer = document.getElementById(data+"_row")
var timerid = sourceTimer.getAttribute("timer");
showSpinner()
socket.emit("changeGroup",timerid,targetGroup,function(){
list.insertBefore(sourceTimer,list.lastChild);
hideSpinner();
})
}
/**
* Gets called when the dragging-operation stopped.
* Remove the border of all listelements.
* @param {Object} e The event object
*/
function handleDragEnd(e) {
e.target.style.opacity = 1;
var lists = document.getElementsByClassName("timerslist");
for (var i = lists.length - 1; i >= 0; i--) {
lists[i].style.border = "none";
};
}
/**
* Enables the spinner element - Set full color and start to spin
*/
function showSpinner(){
var spinner = document.getElementById("statusSpinner");
spinner.className = "btn btn-warning pull-right timer-ui-btn";
spinner.firstChild.className = "fa fa-refresh fa-xs fa-spin"
}
/**
* Disables the spinner element - gray out, and stop to spin
*/
function hideSpinner(){
var spinner = document.getElementById("statusSpinner");
spinner.className = "btn btn-warning pull-right timer-ui-btn disabled btn-disabled ";
spinner.firstChild.className = "fa fa-refresh fa-xs"
}
/**
* Creates a timerelement
* @param {String} id The timer's id
* @return {Object} The timer element
*/
function timerTemplate(id){
var html = "<div class='col-lg-4 col-md-4 col-xs-4' style=\"margin-top:5px;\"> \
<div class='onoffswitch'><input type='checkbox' name='" + id + "' class='onoffswitch-checkbox', id='" + id + "', onClick='toggleSwitch(\"" + id + "\")'> \
<label class='onoffswitch-label', for='" + id + "', id='" + id + "_label'> \
<div class='onoffswitch-inner'></div>\
<div class='onoffswitch-switch'></div> \
</div> \
</div> \
<input value='Timer' class='col-lg-3 col-md-3 col-xs-3 ui-input-text timertext' id='"+id+"_name' onBlur='renameTimer(\"" + id + "\",this)' onKeyPress=\"if(event.keyCode==13)this.blur();\"> \
<div class='col-lg-2 col-md-2 col-xs-2 timertext' id='" + id + "_timer'> \
00:00:00 \
</div> \
<div class='col-lg-2 col-md-2 col-xs-2 pull-right'> \
<a class='btn pull-right timer-ui-btn' \
onClick='deleteTimer(\"" + id + "\",this)' style='color:#d9534f;'> \
<i class='fa fa-trash-o fa-xs'></i>\
</a>\
<a class='btn pull-right timer-ui-btn' \
href=\"/statistics/timer/" + id + "\" style='color:#428bca;'> \
<i class='fa fa-bar-chart-o fa-xs'></i>\
</a>\
</div>\
</div>";
var timerrow = document.createElement('div');
timerrow.className='row timerrow';
timerrow.setAttribute('id',(id+"_row"));
timerrow.setAttribute('timer',id);
timerrow.addEventListener('dragstart',handleDragStart,false);
timerrow.addEventListener('dragend',handleDragEnd,false);
timerrow.draggable = 'True';
timerrow.innerHTML = html;
return timerrow;
}
/**
* Creates a groupelement
* @param {String} id The group's id
* @return {Object} The group element
*/
function groupTemplate(id){
var container = document.createElement('div')
container.className = "jumbotron groupcontainer";
container.innerHTML = "<div id=\""+id+"\" style=\"background-color:#87BB68\" class=\"container innergroupcontainer\"> \
<div class=\"infocontainer col-lg-2 col-md-2 col-xs-2\"> \
<div class=\"container\"> \
<div class=\"row groupheader\"> \
<input class='col-lg-12 col-md-12 col-xs-12 ui-input-text timertext' id="+id+"_name value='Group' onBlur=\"renameGroup('"+id+"',this)\" onKeyPress=\"if(event.keyCode==13)this.blur();\"> \
</div> \
<div class=\"row\" style=\"margin-top:10px;\"></div> \
<div class=\"groupoptions\"> \
<div class=\"row\"> \
<span class='grouptime'> 00:00:00 </span> \
</div> \
<div class=\"row\"> \
<a><i onclick=\"toggleAllInGroup('"+id+"',this)\" class=\"fa fa-play\"> \
<span style=\"margin-left:15px;\"> Toggle All </span> \
</i></a> \
</div> \
<div class=\"row\"> \
<a><i onclick=\"deleteGroup('"+id+"')\" class=\"fa fa-trash-o\"> \
<span style=\"margin-left:15px;\"> Delete Group </span> \
</i></a> \
</div> \
<div class=\"row\"> \
<a><i onclick=\"randomGroupColor('"+id+"')\" class=\"fa fa-random\"> \
<span style=\"margin-left:15px;\"> Change Color </span> \
</i></a> \
</div> \
<div class=\"row\"> \
<a><i onclick=\"randomGroupColor('"+id+"')\" class=\"fa fa-bar-chart-o\"> \
<span style=\"margin-left:15px;\"> Statistics </span> \
</i></a> \
</div> \
</div> \
</div> \
</div> \
<div class=\"col-lg-10 col-md-10 col-xs-10 timerscontainer\" ondrop='handleDrop(event)', ondragover='allowDrop(event)'> \
<div id=\""+id+"_timersList\" class=\"container timerslist\"> \
<div class=\"row\"> \
<a onclick=\"newTimer('"+id+"')\" class=\"btn btn-white\"> \
<i class=\"fa fa-clock-o fa-lg\"></i> \
Add Timer \
</a> \
</div> \
</div> \
</div> \
</div>";
return container;
}
/**
* Creates a confirmation box with a text and two buttons - Ok and Cancel.
*
* @param {String} text The text to display before the buttons
* @param {Function} ok_callback The function to bind to the ok-button
* @param {Function} cancel_callback The function to bind to the cancel-button
* @param {Object} caller The object that called the function
* @return {Object} The confirmation box
*/
function confirmBox(text,ok_callback,cancel_callback,caller){
//Text
var txt = document.createElement("span");
txt.innerHTML = text;
txt.className=" timertext";
var text_node = document.createElement('span');
text_node.appendChild(txt);
//Ok Button
var ok_innerIcon = document.createElement("i");
ok_innerIcon.className="fa fa-check fa-xs";
var ok_btn = document.createElement("a");
ok_btn.className="btn btn-success";
ok_btn.id = "ok_btn";
ok_btn.style.margin = "0px 0px 0px 5px";
ok_btn.onclick = ok_callback;
ok_btn.appendChild(ok_innerIcon);
//Cancel Button
var cncl_innerIcon = document.createElement("i");
cncl_innerIcon.className="fa fa-times fa-xs";
var cncl_btn = document.createElement("a");
cncl_btn.className="btn btn-danger";
cncl_btn.style.margin = "0px 0px 0px 5px";
cncl_btn.id = "cncl_btn";
cncl_btn.onclick = cancel_callback;
cncl_btn.appendChild(cncl_innerIcon);
//Outerdiv
var outerdiv = document.createElement("div")
outerdiv.className = "col-lg-5 col-md-5 col-xs-5";
outerdiv.appendChild(text_node);
outerdiv.appendChild(ok_btn);
outerdiv.appendChild(cncl_btn);
return outerdiv;
}
/**
* Shows a flashmessage in the flashcontainer of the page
* @param {String || textnode} text the message to display
*/
function flashMessage(text, _type, _append){
var append = (_append == undefined) ? true : _append;
var type = _type || "danger";
var container = document.getElementById("flashcontainer");
var tnode = (typeof text == "string") ? document.createTextNode(text) : text;
var message = document.createElement('span');
message.className = "alert";
message.appendChild(tnode);
var icon = document.createElement('i');
icon.className="fa fa-plus-circle btn pull-right rot45";
icon.style.margin = "-3px 0px 0px 0px";
icon.onclick = function(){container.removeChild(warning)};
var warning = document.createElement('div');
warning.className = "alert alert-" + type + " fade in";
warning.appendChild(message);
warning.appendChild(icon);
if(append)container.appendChild(warning);
else {
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
container.appendChild(warning);
}
}