timers3000/public/js/groups.js

Provides a graphical interface in your browser to create and manage incremental timers for your daily tasks.

var colorChangeInProgress = false;

/**
 * Gets called when the 'New Group'-Button is pressed.
 * Creates a new group element and appends it to the present list of groups.
 * Sends a notification of the new group to the server.
 */
function newGroup(){
    showSpinner();
    socket.emit("newGroup","Group",function(id){
        document.getElementById('groupwrapper').appendChild(groupTemplate(id));
        hideSpinner();
    });
}

/**
 * Gets called when the 'delete'-button of a group is pressed.
 * Creates a confirmation dialog (OK/Cancel) in the groups timerlist.
 * If OK is pressed, the groupelement and all its timerelements are deleted.
 * If cancel is pressed, the dialog disappears.
 * @param  {String} id Unique String identifying the group
 */
function deleteGroup(id){
    //Confirmation box
    var box = confirmBox("Delete Group and all its Timers?");
    var row = document.createElement('div')
        row.className = "row";
        row.style.margin = "10px 0px 10px 0px";
        row.appendChild(box)
    
    var timerslist = document.getElementById(id + "_timersList");
    box.querySelector("#ok_btn").onclick = function(){
        socket.emit("deleteGroup", id, function(){
            var groupcontainer = document.getElementById(id)
            groupcontainer.parentNode.removeChild(groupcontainer)
            hideSpinner();
        });
    }
    box.querySelector("#cncl_btn").onclick = function(){
        timerslist.removeChild(row)
    }
    timerslist.insertBefore(row, timerslist.firstChild);
}


/**
 * Gets called when the random icon of a group is pressed.
 * Requests a random color from the server and assigns it to the groups background.
 * @param  {String} id Unique String identifying the group
 */
function randomGroupColor(id){
    showSpinner();
    if(!colorChangeInProgress){
        socket.emit("changeGroupColor", id, function(color) {
            colorChangeInProgress = true;
            easeColorIn(document.getElementById(id), color);
        });
    }
}


function easeColorIn(element, _color){
    var targetColor = element.style.backgroundColor.toString();
    var changed = false;
    var colPat = /rgb\(([0-9]*), ([0-9]*), ([0-9]*)\)/;
    colPat.exec(targetColor);    
    targetColor = [RegExp.$1, RegExp.$2, RegExp.$3];
    
    var color = hexToRgb(_color);
    color = [color["r"], color["g"], color["b"]]
    for (var i = color.length - 1; i >= 0; i--) {
        targetColor[i] = parseInt(targetColor[i]);
        if(targetColor[i] !== color[i]){
            targetColor[i] = (targetColor[i] < color[i]) ? targetColor[i]+1 : targetColor[i]-1;     
            changed = true;
        }
    };
    element.style.backgroundColor = "rgb("+targetColor[0]+","+targetColor[1]+","+targetColor[2]+")";
    if(changed) setTimeout(function() {easeColorIn(element, _color);}, 1);
    else{
        hideSpinner();
        colorChangeInProgress = false;
    }
}

/**
 * Gets called when the textfield of a groupname 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 identifying the group
 * @param  {Object} textfield The group's name-textfield
 */
function renameGroup(id,textfield){
    if(textfield.value){
        showSpinner();
        socket.emit("renameGroup",id,textfield.value,function(){
            hideSpinner();
        });
    }
}