sicambria/skilltree

View on GitHub
new design/draft_offers_modal_design/user/chartandtree.js

Summary

Maintainability
F
2 mos
Test Coverage
var data = undefined;
var change = false;
initData();

// creates the pixi app
var app = new PIXI.Application({
        view: pixiCanvas,
        width: window.innerWidth,
        height: window.innerHeight - 60,
        //backgroundColor: 0x000000,
        transparent: true,
        antialias: true,
        autoStart: false,
        autoResize: true
});

var tokenPayload = parseJwt(localStorage.getItem("loginToken"));
var selectedTreeName;
var tree = undefined;

app.stage = new PIXI.display.Stage();
app.stage.group.enableSort = true;

document.getElementById("openchart").onclick = showChart;
var chartContainer = new PIXI.Container();

/*function toggleSkillDetailsPage() {
    var modal = document.getElementById('skillpage');

    modal.style.display = "block";

}*/

// searches skills by provided name
function searchUserSkillsByName(element){
    var skillToSearch = {value: element.value};
    var skillSearchResult = document.getElementById('skillSearchResult');
    request('POST', '/protected/searchUserSkillsByName', skillToSearch, function () {
        if (this.readyState == 4 && this.status == 200) {
            skillSearchResult.innerText = "";
            for (var i = 0; i < this.response.length; i++) {
                var mya = document.createElement('option');
                mya.value = this.response[i].name;
                skillSearchResult.appendChild(mya);
            }
        }
    });
}

// adds a public tree to the user
function addTreeToUser(treeToAdd){
  request('POST', '/protected/addTreeToUser', treeToAdd, function() {
      if (this.readyState == 4 && this.status == 200) {
        if (this.response.success){
          var forest = document.getElementById("treeList");
          var nt = document.createElement('div');
          nt.innerText = this.response.name;
          nt.className = "listedTree";
          forest.appendChild(nt);
          alert("Selected tree successfully added.");
          initData();
          loadAddedTrees();
        } else if (this.response.message == "existing") alert("Selected tree is already added.");
        else if (this.response.message == "notfound") alert("The tree is not found.");
      }
  });
}

function closeModal(modal){
  window.onclick = function(event) {
      if (event.target == modal) {
          modal.style.display = "none";
      }
  }
}

// confirm the changes made to skill levels.
function submit() {
    var submitData = [];
    for (var i = 0; i < data.skills.length; ++i) {
        var temp = {
            name: data.skills[i].name,
            achievedPoint: data.skills[i].achievedPoint
        };

        submitData.push(temp);
    }

    request('POST', '/protected/submitall', submitData, function() {
        if(this.readyState == 4 && this.status == 200) {
          initCard();
        }
    });
}

window.setInterval(function () {
    if (change) {
        submit();
        change = false;
        document.getElementById('submitBtn').innerText = "Saved";
        document.getElementById('submitBtn').removeAttribute('href');
    }
}, 10000);

// logout.
function logout(){
    localStorage.setItem("loginToken", "");
    window.open("/", "_self");
}

window.onresize = function () {
    app.renderer.resize(window.innerWidth, window.innerHeight - 60);

    if (chartContainer != undefined) {
        var ratio = chartContainer.width / chartContainer.height;
        if (window.innerWidth < window.innerHeight - 90) {
            chartContainer.width = window.innerWidth - 40;
            chartContainer.height = (window.innerWidth - 40) / ratio;
        } else {
            chartContainer.width = (window.innerHeight - 90) * ratio;
            chartContainer.height = window.innerHeight - 90;
        }

        chartContainer.position.set((window.innerWidth) / 2, (window.innerHeight - 64) / 2);
    }

    if (tree != undefined) {
        tree.treeContainer.position.set(app.renderer.width / 2 + tree.treeContainer.width / 2, app.renderer.height / 2);
    }

    app.renderer.render(app.stage);
};

// TREE

// app.localLoader is a loader for skillicons (when a tree is opened, we load only that tree's skillicons)
// PIXI.loader is global, it loads the back button, skillborder, tree,...

function addTraining () {
    document.getElementById('addTrainingForm').reset();

    var modal = document.getElementById("addTrainingModal");
    modal.style.display = "block";

    var span = document.getElementById("closeTrainingModal");

    span.onclick = function() {
        modal.style.display = "none";
    }

    closeModal(modal);

    var save = document.getElementById("saveTrainingsBtn");
    save.onclick = function () {
        var trainingsTable = document.getElementById('addTrainingsTable');
        var trainings = [];
        for (i = 1; i < trainingsTable.rows.length; ++i) {
            trainings.push({
                name: trainingsTable.rows[i].cells[0].children[0].value,
                level: trainingsTable.rows[i].cells[1].children[0].value,
                shortDescription: trainingsTable.rows[i].cells[2].children[0].value,
                URL: trainingsTable.rows[i].cells[3].children[0].value,
                goal: trainingsTable.rows[i].cells[4].children[0].value,
                length: trainingsTable.rows[i].cells[5].children[0].value,
                language: trainingsTable.rows[i].cells[6].children[0].value
            });
        }

        var trainingData = {
            skillName: document.getElementById('trainingSkillName').value,
            trainings: trainings
        };

        request('POST', '/protected/newtraining', trainingData, function () {
            if (this.readyState == 4 && this.status == 200) {
                if (this.response.success) {
                //reset table
                var trainingsTable = document.getElementById('addTrainingsTable');
                var i=trainingsTable.rows.length-1;
                while(i>1)
                {
                    trainingsTable.deleteRow(i);
                    i--;
                }
                trainingsTable.rows[1].cells[0].children[0].value = "";
                trainingsTable.rows[1].cells[1].children[0].value = "";
                trainingsTable.rows[1].cells[2].children[0].value = "";
                trainingsTable.rows[1].cells[3].children[0].value = "";
                trainingsTable.rows[1].cells[4].children[0].value = "";
                trainingsTable.rows[1].cells[5].children[0].value = "";
                trainingsTable.rows[1].cells[6].children[0].value = "";

                alert("Succes");

            } /*else if (this.response.message == "skillnotexists") {
                    alert("Skill not found");
                }*/
            }
        });
    };
}

// opens skill creation modal and saves the new skill to the database (user and for approval)
function createSkill () {
    //$('#newSkillForm').reset();
    document.getElementById('newSkillForm').reset();

    var modal = document.getElementById("newSkillModal");
    modal.style.display = "block";

    var span = document.getElementById("closeSkillModal");

    span.onclick = function() {
        modal.style.display = "none";
    }

    closeModal(modal);

    document.getElementById("loadSkill").style.display = "none";
    document.getElementById("childrenDiv").style.display = "none";

    var catSelect = document.getElementById("newSkillCat");
    catSelect.innerHTML = "";
    for (var i = 0; i < data.categories.length; ++i) {
        var option = document.createElement("option");
        option.text = data.categories[i].name;
        option.value = data.categories[i].name;
        catSelect.add(option);
    }

    var save = document.getElementById("saveSkillBtn");
    save.onclick = function () {
        var pointsTable = document.getElementById('pointsTable');
        var pointsNum = pointsTable.rows.length - 1;
        var pointDescription = [];
        for (i = 1; i < pointsNum + 1; ++i) pointDescription.push(pointsTable.rows[i].cells[1].children[0].value);

        var parentsTable = document.getElementById('parentsTable');
        var parents = [];
        for (i = 1; i < parentsTable.rows.length; ++i) {
            parents.push({
                name: parentsTable.rows[i].cells[0].children[0].value,
                minPoint: parentsTable.rows[i].cells[1].children[0].value,
                recommended: !parentsTable.rows[i].cells[2].children[0].checked
            });
        }

        /*var childrenTable = document.getElementById('childrenTable');
        var children = [];
        for (i = 1; i < childrenTable.rows.length; ++i) {
            children.push({
                name: childrenTable.rows[i].cells[0].children[0].value,
                minPoint: childrenTable.rows[i].cells[1].children[0].value,
                recommended: !childrenTable.rows[i].cells[2].children[0].checked
            });
        }*/

        var trainingsTable = document.getElementById('trainingsTable');
        var trainings = [];
        for (i = 1; i < trainingsTable.rows.length; ++i) {
            trainings.push({
                name: trainingsTable.rows[i].cells[0].children[0].value,
                level: trainingsTable.rows[i].cells[1].children[0].value,
                shortDescription: trainingsTable.rows[i].cells[2].children[0].value,
                URL: trainingsTable.rows[i].cells[3].children[0].value,
                goal: trainingsTable.rows[i].cells[4].children[0].value,
                length: trainingsTable.rows[i].cells[5].children[0].value,
                language: trainingsTable.rows[i].cells[6].children[0].value
            });
        }

        var skillData = {
            name: document.getElementById('newSkillName').value,
            description: document.getElementById('newSkillDesc').value,
            descriptionWikipediaURL: document.getElementById('newSkillWiki').value,
            skillIcon: document.getElementById('newSkillIcon').value,
            categoryName: catSelect.value,
            maxPoint: pointsNum,
            pointDescription: pointDescription,
            parents: parents,
            //children: children,
            trainings: trainings
        };

        request('POST', '/protected/newskill', skillData, function () {
            if (this.readyState == 4 && this.status == 200) {
                if (this.response.success) {
                    modal.style.display = "none";
                }
            }
        });
    };
}

// opens skill editor, user can edit (only) her/his own skills
function editMySkill () {
    document.getElementById('newSkillForm').reset();

    var modal = document.getElementById("newSkillModal");
    modal.style.display = "block";

    var span = document.getElementById("closeSkillModal");

    span.onclick = function() {
        modal.style.display = "none";
    }

    document.getElementById("loadSkill").style.display = "block";
    document.getElementById("newSkillModalTitle").innerText = "Edit your skill";
    document.getElementById("childrenDiv").style.display = "block";

    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
            document.getElementById("newSkillModalTitle").innerText = "Create your own skill";
        }
    }

    var catSelect = document.getElementById("newSkillCat");
    catSelect.innerHTML = "";
    for (var i = 0; i < data.categories.length; ++i) {
        var option = document.createElement("option");
        option.text = option.value = data.categories[i].name;
        catSelect.add(option);
    }

    var skillName = document.getElementById("newSkillName");
    skillName.setAttribute('list', 'skillSearchResult');
    skillName.onkeyup = function() {searchSkillsByName(this, false)};

    var loadSkill = document.getElementById("loadSkill");
    loadSkill.onclick = function(){
        //request for the skill to load data from
        skillName = document.getElementById('newSkillName').value;

        if (data.skills.find(obj => obj.name == skillName) !== undefined) {
            var skill = data.skills.find(obj => obj.name == skillName);

            loadSkillToEditor(skill, false);
        }
    }

    //get the save skill button, write the onclick function
    var save = document.getElementById("saveSkillBtn");
    save.onclick = function () {
        var pointsTable = document.getElementById('pointsTable');
        var pointsNum = pointsTable.rows.length - 1;
        var pointDescription = [];
        for (i = 1; i < pointsNum + 1; ++i) pointDescription.push(pointsTable.rows[i].cells[1].children[0].value);

        var parentsTable = document.getElementById('parentsTable');
        var parents = [];
        for (i = 1; i < parentsTable.rows.length; ++i) {
            parents.push({
                name: parentsTable.rows[i].cells[0].children[0].value,
                minPoint: parentsTable.rows[i].cells[1].children[0].value,
                recommended: !parentsTable.rows[i].cells[2].children[0].checked
            });
        }

        var childrenTable = document.getElementById('childrenTable');
        var children = [];
        for (i = 1; i < childrenTable.rows.length; ++i) {
            children.push({
                name: childrenTable.rows[i].cells[0].children[0].value,
                minPoint: childrenTable.rows[i].cells[1].children[0].value,
                recommended: !childrenTable.rows[i].cells[2].children[0].checked
            });
        }

        var trainingsTable = document.getElementById('trainingsTable');
        var trainings = [];
        for (i = 1; i < trainingsTable.rows.length; ++i) {
            trainings.push({
                name: trainingsTable.rows[i].cells[0].children[0].value,
                level: trainingsTable.rows[i].cells[1].children[0].value,
                shortDescription: trainingsTable.rows[i].cells[2].children[0].value,
                URL: trainingsTable.rows[i].cells[3].children[0].value,
                goal: trainingsTable.rows[i].cells[4].children[0].value,
                length: trainingsTable.rows[i].cells[5].children[0].value,
                language: trainingsTable.rows[i].cells[6].children[0].value
            });
        }

        var skillData = {
            name: document.getElementById('newSkillName').value,
            description: document.getElementById('newSkillDesc').value,
            skillIcon: document.getElementById('newSkillIcon').value,
            descriptionWikipediaURL: document.getElementById('newSkillWiki').value,
            categoryName: catSelect.value,
            maxPoint: pointsNum,
            pointDescription: pointDescription,
            parents: parents,
            children: children,
            trainings: trainings
        };

        request('POST', '/protected/editmyskill', skillData, function () {
            if (this.readyState == 4 && this.status == 200) {
                if (this.response.success) {
                    modal.style.display = "none";
                    window.open("/user/", "_self");
                }
            }
        });
    };
}

// opens skill editor, user can edit (only) her/his own skills
function editSkill () {
    document.getElementById('newSkillForm').reset();

    var modal = document.getElementById("newSkillModal");
    modal.style.display = "block";

    var span = document.getElementById("closeSkillModal");

    span.onclick = function() {
        modal.style.display = "none";
    }

    document.getElementById("loadSkill").style.display = "block";
    document.getElementById("newSkillModalTitle").innerText = "Edit skill";
    document.getElementById("childrenDiv").style.display = "block";

    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
            document.getElementById("newSkillModalTitle").innerText = "Create your own skill";
        }
    }

    var catSelect = document.getElementById("newSkillCat");
    catSelect.innerHTML = "";
    for (var i = 0; i < data.categories.length; ++i) {
        var option = document.createElement("option");
        option.text = option.value = data.categories[i].name;
        catSelect.add(option);
    }

    var skillName = document.getElementById("newSkillName");
    skillName.setAttribute('list', 'skillSearchResult');
    skillName.onkeyup = function() {searchSkillsByName(this, true)};

    var loadSkill = document.getElementById("loadSkill");
    loadSkill.onclick = function(){
        //request for the skill to load data from
        request('POST', '/protected/getskill', {value: document.getElementById("newSkillName").value}, function() {
            if(this.readyState == 4 && this.status == 200) {
                skillSearchResult.innerHTML = "";

                loadSkillToEditor(this.response.skill, true);
            }
        });
    }

    //get the save skill button, write the onclick function
    var save = document.getElementById("saveSkillBtn");
    save.onclick = function () {
        var pointsTable = document.getElementById('pointsTable');
        var pointsNum = pointsTable.rows.length - 1;
        var pointDescription = [];
        for (i = 1; i < pointsNum + 1; ++i) pointDescription.push(pointsTable.rows[i].cells[1].children[0].value);

        var parentsTable = document.getElementById('parentsTable');
        var parents = [];
        for (i = 1; i < parentsTable.rows.length; ++i) {
            parents.push({
                name: parentsTable.rows[i].cells[0].children[0].value,
                minPoint: parentsTable.rows[i].cells[1].children[0].value,
                recommended: !parentsTable.rows[i].cells[2].children[0].checked
            });
        }

        var childrenTable = document.getElementById('childrenTable');
        var children = [];
        for (i = 1; i < childrenTable.rows.length; ++i) {
            children.push({
                name: childrenTable.rows[i].cells[0].children[0].value,
                minPoint: childrenTable.rows[i].cells[1].children[0].value,
                recommended: !childrenTable.rows[i].cells[2].children[0].checked
            });
        }

        var trainingsTable = document.getElementById('trainingsTable');
        var trainings = [];
        for (i = 1; i < trainingsTable.rows.length; ++i) {
            trainings.push({
                name: trainingsTable.rows[i].cells[0].children[0].value,
                level: trainingsTable.rows[i].cells[1].children[0].value,
                shortDescription: trainingsTable.rows[i].cells[2].children[0].value,
                URL: trainingsTable.rows[i].cells[3].children[0].value,
                goal: trainingsTable.rows[i].cells[4].children[0].value,
                length: trainingsTable.rows[i].cells[5].children[0].value,
                language: trainingsTable.rows[i].cells[6].children[0].value
            });
        }

        var skillData = {
            name: document.getElementById('newSkillName').value,
            description: document.getElementById('newSkillDesc').value,
            skillIcon: document.getElementById('newSkillIcon').value,
            descriptionWikipediaURL: document.getElementById('newSkillWiki').value,
            categoryName: catSelect.value,
            maxPoint: pointsNum,
            pointDescription: pointDescription,
            parents: parents,
            children: children,
            trainings: trainings
        };

        request('POST', '/admin/editskill', skillData, function () {
            if (this.readyState == 4 && this.status == 200) {
                if (this.response.success) {
                    modal.style.display = "none";
                    window.open("/user/", "_self");
                }
            }
        });
    };
}

function loadSkillToEditor (skill, global) {
    document.getElementById('newSkillName').value = skill.name;
    document.getElementById('newSkillDesc').value = skill.description;
    document.getElementById('newSkillIcon').value = skill.skillIcon;
    document.getElementById('newSkillWiki').value = skill.descriptionWikipediaURL;
    document.getElementById("newSkillCat").value = skill.categoryName;

    var pointsTable = document.getElementById('pointsTable');

    for (var i = pointsTable.rows.length - 1; i > 1; --i) pointsTable.deleteRow(i);

    pointsTable.rows[1].cells[1].children[0].value = "";

    for (var i = 0; i < skill.pointDescription.length; ++i) {
        if (i < skill.pointDescription.length - 1) addRow("pointsTable");

        pointsTable.rows[i + 1].cells[1].children[0].value = skill.pointDescription[i];
    }


    //Dropping data from parentsTable
    var parentsTable = document.getElementById('parentsTable');
    var i = parentsTable.rows.length - 1;
    while (i > 1) {
        parentsTable.deleteRow(i);
        --i;
    }
    parentsTable.rows[1].cells[0].children[0].value = "";
    parentsTable.rows[1].cells[1].children[0].value = "";
    parentsTable.rows[1].cells[2].children[0].checked = false;

    for (var i = 0; i < skill.parents.length; ++i) {
        if (i < skill.parents.length - 1) addRow("parentsTable");

        var parent = undefined;
        if (global) {
            var req = new XMLHttpRequest();
            req.open('POST', '/protected/getskill', false);
            req.setRequestHeader('Content-type', 'application/json');
            req.setRequestHeader('x-access-token', localStorage.getItem("loginToken"));
            //req.responseType = "json";
            req.send(JSON.stringify({value: skill.parents[i]}));

            if (req.readyState == 4 && req.status == 200) {
                var response = JSON.parse(req.response);
                parent = response.skill;
            }
        } else {
            parent = data.skills.find(obj => obj.name == skill.parents[i]);
        }

        var skillAtParent = parent.children.find(obj => obj.name == skill.name);
        parentsTable.rows[i + 1].cells[0].children[0].value = parent.name;
        parentsTable.rows[i + 1].cells[1].children[0].value = skillAtParent.minPoint;
        parentsTable.rows[i + 1].cells[2].children[0].checked = !skillAtParent.recommended;
    }

    var childrenTable = document.getElementById('childrenTable');
    var i = childrenTable.rows.length - 1;
    while(i > 1) {
        childrenTable.deleteRow(i);
        --i;
    }
    childrenTable.rows[1].cells[0].children[0].value = "";
    childrenTable.rows[1].cells[1].children[0].value = "";
    childrenTable.rows[1].cells[2].children[0].checked = false;

    for (var i = 0; i < skill.children.length; ++i) {
        if (i < skill.children.length - 1) addRow("childrenTable");

        childrenTable.rows[i + 1].cells[0].children[0].value = skill.children[i].name;
        childrenTable.rows[i + 1].cells[1].children[0].value = skill.children[i].minPoint;
        childrenTable.rows[i + 1].cells[2].children[0].checked = !skill.children[i].recommended;
    }

    //Dropping data from trainingsTable
    var trainingsTable = document.getElementById('trainingsTable');
    var i = trainingsTable.rows.length - 1;

    while (i > 1) {
        trainingsTable.deleteRow(i);
        --i;
    }
    for (var j = 0; j < 7; j++) {
      trainingsTable.rows[1].cells[j].children[0].value = "";
    }


    for (var i = 0; i < skill.trainings.length; ++i) {
        if (i < skill.trainings.length - 1) addRow("trainingsTable");

        trainingsTable.rows[i + 1].cells[0].children[0].value = skill.trainings[i].name;
        trainingsTable.rows[i + 1].cells[1].children[0].value = skill.trainings[i].level;
        trainingsTable.rows[i + 1].cells[2].children[0].value = skill.trainings[i].shortDescription;
        trainingsTable.rows[i + 1].cells[3].children[0].value = skill.trainings[i].URL;
        trainingsTable.rows[i + 1].cells[4].children[0].value = skill.trainings[i].goal;
        trainingsTable.rows[i + 1].cells[5].children[0].value = skill.trainings[i].length;
        trainingsTable.rows[i + 1].cells[6].children[0].value = skill.trainings[i].language;
    }
}

var skillsToAdd = [];

// opens tree creator and manages it, saving for the user and for approval
function createTree () {
    $('.clear').find('input:text').val('');
    $('.clear').find('textarea').val('');
    var skillList = document.getElementById("skillList");
    skillList.innerHTML = "";
    hideMenus();

    var treeName = document.getElementById("treeName");
    treeName.setAttribute('list', '');
    treeName.onkeyup = undefined;

    var creator = document.getElementById("creator");
    creator.style.display = "grid";

    var loadTree = document.getElementById("loadTree");
    loadTree.style.display = "none";

    var canvas = document.getElementById("pixiCanvas");

    creator.style.width = canvas.style.width;
    creator.style.height = canvas.style.height;

    var addBtn = document.getElementById("addToTree");
    var skillList = document.getElementById("skillList");
    skillsToAdd = [];
    addBtn.onclick = addSkillToList;

    var createSkillBtn = document.getElementById("createSkill");
    createSkillBtn.onclick = createSkill;

    var deleteBtn = document.getElementById("deleteFromList");
    deleteBtn.onclick = deleteSkillFromList;

    var createBtn = document.getElementById("createTree");
    createBtn.onclick = function () {
        if (document.getElementById('treeName').value.length > 0) {
            if (skillsToAdd.length > 0) {
                /*var skillNames = [];
                for (var i = 0; i < skillsToAdd.length; ++i) skillNames.push(skillsToAdd[i].name);*/

                var treeData = {
                    name: document.getElementById('treeName').value,
                    focusArea: document.getElementById('focusarea').value,
                    description: document.getElementById('treeDesc').value,
                    skills: skillsToAdd
                };

                request('POST', '/protected/newtree', treeData, function () {
                    if (this.readyState == 4 && this.status == 200) {
                        if (this.response.success) window.open("/user/", "_self");
                        else if (this.response.message == "treeexists") alert("There is already a tree with this name");
                    }
                });
            } else showBottomAlert("Please add at least one skill to the tree");
        } else showBottomAlert("Please provide a name to the tree");
    };
}

// deletes a row from a table
function deleteRow(table, row) {
  var i = row.parentNode.parentNode.rowIndex;
  document.getElementById(table).deleteRow(i);
}

// adds a row to a table
function addRow(table) {
  var x = document.getElementById(table);
  var new_row = x.rows[1].cloneNode(true);
  var len = x.rows.length;
  if (table == 'pointsTable') new_row.cells[0].innerText = len;

  var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
  inp1.id += len;
  inp1.value = '';
  x.appendChild(new_row);
}

// opens tree creator, user can edit her/his own trees
function editMyTree () {
    $('.clear').find('input:text').val('');
    $('.clear').find('textarea').val('');
    var skillList = document.getElementById("skillList");
    skillList.innerHTML = "";
    hideMenus();

    var treeName = document.getElementById("treeName");
    treeName.setAttribute('list', 'TreeSearchResult');
    treeName.onkeyup = function() {searchTreesByName(treeName, false)};

    var loadTree = document.getElementById("loadTree");
    loadTree.style.display = "block";

    var creator = document.getElementById("creator");
    creator.style.display = "grid";

    var canvas = document.getElementById("pixiCanvas");

    creator.style.width = canvas.style.width;
    creator.style.height = canvas.style.height;

    skillsToAdd = [];
    loadTree.onclick = function () {
        var tree = data.trees.find(obj => obj.name == document.getElementById("treeName").value);

        if (tree == undefined) alert("Tree is not found");
        else {
            document.getElementById("focusarea").value = tree.focusArea;
            document.getElementById("treeDesc").value = tree.description;
            for (var i = 0; i < tree.skillNames.length; ++i) {
                skillsToAdd.push(data.skills.find(obj => obj.name == tree.skillNames[i]));
                var option = document.createElement("option");
                option.text = tree.skillNames[i];
                skillList.add(option);
            }

            if (skillList.length > 1) skillList.size = skillList.length;
            else skillList.size = 2;
        }
    };

    var addBtn = document.getElementById("addToTree");
    addBtn.onclick = addSkillToList;

    var createSkillBtn = document.getElementById("createSkill");
    createSkillBtn.onclick = createSkill;

    var deleteBtn = document.getElementById("deleteFromList");
    deleteBtn.onclick = deleteSkillFromList;

    var createBtn = document.getElementById("createTree");
    createBtn.onclick = function () {
        if (document.getElementById('treeName').value.length > 0) {
            if (skillsToAdd.length > 0) {
                for (var i = 0; i < skillsToAdd.length; ++i) {
                    delete skillsToAdd[i].itemcontainer;
                }

                var treeData = {
                    name: document.getElementById('treeName').value,
                    focusArea: document.getElementById('focusarea').value,
                    description: document.getElementById('treeDesc').value,
                    skills: skillsToAdd
                };

                request('POST', '/protected/editmytree', treeData, function () {
                    if (this.readyState == 4 && this.status == 200) {
                        if (this.response.success) window.open("/user/", "_self");
                    }
                });
            } else alert("Please add at least one skill to the tree");
        } else alert("Please provide a name to the tree");
    };
}

// admins can edit any tree, it will be changed for every user
function editTree () {
    $('.clear').find('input:text').val('');
    $('.clear').find('textarea').val('');
    hideMenus();

    var treeName = document.getElementById("treeName");
    treeName.setAttribute('list', 'TreeSearchResult');
    treeName.onkeyup = function() {searchTreesByName(treeName, true)};

    var loadTree = document.getElementById("loadTree");
    loadTree.style.display = "block";

    var creator = document.getElementById("creator");
    creator.style.display = "grid";

    var canvas = document.getElementById("pixiCanvas");

    creator.style.width = canvas.style.width;
    creator.style.height = canvas.style.height;

    var skillList = document.getElementById("skillList");
    skillsToAdd = [];
    loadTree.onclick = function () {
        skillsToAdd = [];
        skillList.innerHTML = "";

        request('POST', '/protected/gettree', {name: document.getElementById("treeName").value}, function() {
            if(this.readyState == 4 && this.status == 200) {
                TreeSearchResult.innerHTML = "";
                document.getElementById("focusarea").value = this.response.focusArea;
                document.getElementById("treeDesc").value = this.response.description;
                for (var i = 0; i < this.response.skillNames.length; ++i) {
                    var req = new XMLHttpRequest();
                    req.open('POST', '/protected/getskill', false);
                    req.setRequestHeader('Content-type', 'application/json');
                    req.setRequestHeader('x-access-token', localStorage.getItem("loginToken"));
                    //req.responseType = "json";
                    req.send(JSON.stringify({value: this.response.skillNames[i]}));

                    if (req.readyState == 4 && req.status == 200) {
                        var response = JSON.parse(req.response);

                        skillsToAdd.push(response.skill);
                        var option = document.createElement("option");
                        option.text = this.response.skillNames[i];
                        skillList.add(option);
                    }
                }

                if (skillList.length > 1) skillList.size = skillList.length;
                else skillList.size = 2;
            }
        });
    };

    var addBtn = document.getElementById("addToTree");
    addBtn.onclick = addSkillToList;

    var createSkillBtn = document.getElementById("createSkill");
    createSkillBtn.onclick = createSkill;

    var deleteBtn = document.getElementById("deleteFromList");
    deleteBtn.onclick = deleteSkillFromList;

    var createBtn = document.getElementById("createTree");
    createBtn.onclick = function () {
        if (document.getElementById('treeName').value.length > 0) {
            if (skillsToAdd.length > 0) {
                for (var i = 0; i < skillsToAdd.length; ++i) {
                    delete skillsToAdd[i].itemcontainer;
                }

                var treeData = {
                    name: document.getElementById('treeName').value,
                    focusArea: document.getElementById('focusarea').value,
                    description: document.getElementById('treeDesc').value,
                    skills: skillsToAdd
                };

                request('POST', '/admin/edittree', treeData, function () {
                    if (this.readyState == 4 && this.status == 200) {
                        if (this.response.success) window.open("/user/", "_self");
                    }
                });
            } else alert("Please add at least one skill to the tree");
        } else alert("Please provide a name to the tree");
    };
}

function addSkillToList () {
    var skill = {value: document.getElementById('skillSearchTree').value};
    var skillList = document.getElementById("skillList");

    request('POST', '/protected/getskill', skill, function() {
        if(this.readyState == 4 && this.status == 200) {
            if (this.response.success) {
                if (skillsToAdd.find(obj => obj.name == this.response.skill.name) == undefined) {
                    if (this.response.dependency.length > 0) {
                        var text = "The selected skill depends on the following skills. Do you want to add these?\n";
                        for (var i = 0; i < this.response.dependency.length; ++i) {
                            text += this.response.dependency[i].name + "\n";
                        }
                        if (confirm(text)) {
                            skillsToAdd.push(this.response.skill);
                            var option = document.createElement("option");
                            option.text = this.response.skill.name;
                            skillList.add(option);
                            for (var i = 0; i < this.response.dependency.length; ++i) {
                                if (skillsToAdd.find(obj => obj.name == this.response.dependency[i].name) == undefined) {
                                    skillsToAdd.push(this.response.dependency[i]);
                                    var option = document.createElement("option");
                                    option.text = this.response.dependency[i].name;
                                    skillList.add(option);
                                }
                            }
                        }
                    } else {
                        skillsToAdd.push(this.response.skill);
                        var option = document.createElement("option");
                        option.text = this.response.skill.name;
                        skillList.add(option);
                    }

                    if (skillList.length > 1) skillList.size = skillList.length;
                    else skillList.size = 2;
                } else alert("You have already added this skill");
            } else alert("Skill is not found");
        }
    });
}

function deleteSkillFromList () {
    var skillList = document.getElementById("skillList");
    var children = [];
    getChildren(skillsToAdd, skillsToAdd.find(obj => obj.name == skillList.options[skillList.selectedIndex].text), children);

    if (children.length == 0) {
        skillsToAdd = skillsToAdd.filter(obj => obj.name != skillList.options[skillList.selectedIndex].text);
        skillList.remove(skillList.selectedIndex);
    } else {
        var text = "The following skills depend on the selected. Do you want to delete them?\n";
        for (var i = 0; i < children.length; ++i) {
            text += children[i].name + "\n";
        }
        if (confirm(text)) {
            skillsToAdd = skillsToAdd.filter(obj => obj.name != skillList.options[skillList.selectedIndex].text);
            skillList.remove(skillList.selectedIndex);
            for (var i = 0; i < children.length; ++i) {
                skillsToAdd = skillsToAdd.filter(obj => obj.name != children[i].name);
                for (var j = 0; j < skillList.options.length; ++j) {
                    if (skillList.options[j].text == children[i].name) skillList.remove(j);
                }
            }
        }
    }

    if (skillList.length > 1) skillList.size = skillList.length;
    else skillList.size = 2;
}

function getChildren (skills, skill, children) {
    var temp = [];
    for (var i = 0; skill.children != undefined && i < skill.children.length; ++i) {
        var child = skills.find(obj => obj.name == skill.children[i].name);

        if (child != undefined) {
            temp.push(child);
            children.push(child);
        }
    }

    for (var i = 0; i < temp.length; ++i) {
        if (skills.find(obj => obj.name == temp[i].name) != undefined) getChildren(skills, temp[i], children);
    }
}

// make trees globally available
function approveTrees() {
    hideMenus();

    var approveTrees = document.getElementById("approveTrees");
    approveTrees.style.display = "block";

    var btn = document.getElementById('approveTreesBtn');
    var select = document.getElementById('apprTreeSel');

    for (var i = 0; i < data.apprTrees.length; ++i) {
        var text = data.apprTrees[i].name + " (" + data.apprTrees[i].username + ")";
        var option = document.createElement('option');
        option.value = "ss";
        /*option.value = */option.text = text;
        option.name = data.apprTrees[i].name;
        option.username = data.apprTrees[i].username;
        select.add(option);
    }

    btn.onclick = function () {
        var selectedTraining = select.options[select.selectedIndex]
        request('POST', '/admin/approvetree', {
            name: selectedTraining.name,
            username: selectedTraining.username
        }, function () {
            if (this.readyState == 4 && this.status == 200) {
                window.open("/user/", "_self");
            }
        });
    };
}

// make skills globally available
function approveSkills() {
    hideMenus();

    var approveSkills = document.getElementById("approveSkills");

    approveSkills.style.display = "block";

    var approveSkillsSelect = document.getElementById('apprSkillSel');
    var skillsforapproval = undefined;

    request('GET', '/protected/skillsforapproval', undefined, function() {
        if (this.readyState == 4 && this.status == 200) {
            if (this.response !== undefined) {
                approveSkillsSelect.innerHTML = "";

                skillsforapproval = this.response;
                for (var i = 0; i < skillsforapproval.length; i++) {
                    var text = skillsforapproval[i].name + " (" + skillsforapproval[i].username + ")";
                    var option = document.createElement('option');
                    option.value = skillsforapproval[i];
                    option.text = text;
                    approveSkillsSelect.add(option);
                }

            }
        }
    });

    var approveButton = document.getElementById("approvebtn");
    approveButton.onclick = function() {
        var selectedSkill = approveSkillsSelect.options[approveSkillsSelect.selectedIndex].text;

        var skillforapproval = skillsforapproval.find(obj => obj.name == selectedSkill);

        request('POST', '/admin/approveskill', skillforapproval, function(){
            if(this.readyState == 4 && this.status == 200){
                if(this.response !== undefined){
                    alert(this.response.message);
                }
            }

        });
    }
/*
    for (var i = 0; i < data.apprSkills.length; ++i) {
        var text = data.apprSkills[i].name + " (" + data.apprSkills[i].username + ")";
        var option = document.createElement('option');
        option.value = option.text = text;
        document.getElementById('apprSkillSel').add(option);
    }
*/
   //Making the approve page visible

}

// makes trainings for skills globally available
function approveTrainings () {
    hideMenus();

    var approveTrees = document.getElementById("approveTrainings");
    approveTrees.style.display = "block";

    var select = document.getElementById('apprTrainingSel');
    var btn = document.getElementById('approveTrainingsBtn');

    for (var i = 0; i < data.apprTrainings.length; ++i) {
        var text = data.apprTrainings[i].name + " (" + data.apprTrainings[i].skillName + ", " +  data.apprTrainings[i].username + ")";
        var option = document.createElement('option');
        option.name = data.apprTrainings[i].name;
        option.skillName = data.apprTrainings[i].skillName;
        option.username = data.apprTrainings[i].username;
        option.text = text;
        select.add(option);
    }

    btn.onclick = function () {
        var selectedTraining = select.options[select.selectedIndex]
        request('POST', '/admin/approvetraining', {
            name: selectedTraining.name,
            skillName: selectedTraining.skillName,
            username: selectedTraining.username
        }, function () {
            if (this.readyState == 4 && this.status == 200) {
                window.open("/user/", "_self");
            }
        });
    };
}

function addCheckBox(id, boxText, parent){
  var divToAdd = document.createElement('div');
  divToAdd.className = "advSearchDetailsItem";
  var spanToAdd = document.createElement('span');
  var boxToAdd = document.createElement('input');
  boxToAdd.type = "checkbox";
  boxToAdd.id = id;
  spanToAdd.appendChild(boxToAdd);
  spanToAdd.innerHTML += boxText;
  divToAdd.appendChild(spanToAdd);
  document.getElementById(parent).appendChild(divToAdd);
}

// drops all offers from all users (used for dev)
function dropoffers() {
    request('POST', '/admin/dropoffers', {} , function () {
        if (this.readyState == 4 && this.status == 200) {
            window.open("/user/", "_self");
        }
    });
}

// hides skill, tree creator, editor menu
function hideMenus () {
    document.getElementById('submitBtn').style.display = "none";

    var elements = document.getElementsByClassName("hide");

    for (var i = 0; i < elements.length; ++i) {
        elements[i].style.display = "none";
    }
}

function hideCardsAndAlerts (event) {
    if (!event.target.matches("#userCard, .float-right *")) $(".hide-on-click").collapse("hide");

    if (!event.target.matches("#createTree")) $(".alert").hide();
}

document.body.addEventListener('click', hideCardsAndAlerts);

// helper functions

function parseJwt (token) {
    var base64Url = token.split('.')[1];
    var base64 = base64Url.replace('-', '+').replace('_', '/');
    return JSON.parse(window.atob(base64));
}

Array.prototype.sum = function (prop) {
    var total = 0;

    for (var i = 0; i < this.length; ++i) {
        total += this[i][prop];
    }

    return total;
}

function showBottomAlert(msg) {
    document.getElementById('bottomAlertMsg').innerText = msg;
    $('#bottomAlert').show();
}

function request (type, url, sendData, callback) {
    var req = new XMLHttpRequest();
    req.open(type, url, true);
    req.setRequestHeader('Content-type', 'application/json');
    req.setRequestHeader('x-access-token', localStorage.getItem("loginToken"));
    req.responseType = "json";
    req.onreadystatechange = callback;

    if (sendData !== undefined)
        req.send(JSON.stringify(sendData));
    else
        req.send();
}