source: Dev/branches/Cartis/Tiles preview/js/dashboardScripts.js @ 296

dbSelectionInfoTimeout = null;
var currentlySelected = {
    titles: [],
    uids: [],
    type: null
}

var shoppingCart = {
    contents: {
        titles: [],
        uids: [],
        types: []
    }
}

var graphSelection = {
    graphType: null,
    graphData: null,
    dataAvailable: false
}

var mockupData = {
    muData1: [1,3,5,6,12,6], //pie charts
    muData2: [[4,12,6],[2,6,15]], //bar charts
    muData3: [[55,42],[3,4],[5,6]]    //radar charts
}

var dummyDatabase = {
    instances: new Array(
    {
        title: "Participant gender",
        creator: "Jules duGrand",
        date: "25-5-2012",
        description: "The gender of the respondent, wording #1."
    },
    {
        title: "Participant age",
        creator: "Jules duGrand",
        date: "25-5-2012",
        description: "N/a"
    },
    {
        title: "Game experience",
        creator: "Peer van Neer",
        date: "25-5-2012",
        description: "Respondents experience with analog and video games."
    }, 
    {
        title: "Current position within RWS",
        creator: "Peer van Neer",
        date: "26-5-2012",
        description: "Respondent fills in own description of position or job title during the session."
    },
    {
        title: "Job experience at employer",
        creator: "Ellemiek Bosman",
        date: "25-5-2012",
        description: "Respondent fills in own time working at current company. May not be 100% accurate!"
    }

    ),
    gameData: new Array(
    {
        title: "Gameplay errors",
        creator: "Ellemiek Bosman",
        date: "25-5-2012",
        description: "First play session. Users starting game without any instructions."
    },
    {
        title: "Gameplay errors after feedback",
        creator: "Ellemiek Bosman",
        date: "25-5-2012",
        description: "Second play session. Users have played game before and received feedback on their results."
    },
    {
        title: "Quality of control",
        creator: "Bruns von Blasuer",
        date: "18-2-2012",
        description: "Checking quality of control during gameplay."
    },
       {
        title: "Fault recovery",
        creator: "Bruns von Blasuer",
        date: "17-3-2012",
        description: "Second play session. Checking fault recovery after giving feedback."
    }
    )
};

(function() {
    var el = ge("dbSessionInstancesList");
    for (var n = 0; n < dummyDatabase.instances.length; n++) {
        var opt = ce("option");
        opt.value = n;
        opt.innerHTML = dummyDatabase.instances[n].title;
        el.appendChild(opt);
    }
    el = ge("dbGamedataList");
    for (var n = 0; n < dummyDatabase.gameData.length; n++) {
        var opt = ce("option");
        opt.value = n;
        opt.innerHTML = dummyDatabase.gameData[n].title;
        el.appendChild(opt);
    }
})();
    



function infoPanelTimeout(event) {
    // If no event, crash.
    if (event == undefined || event == null) return;
    // Cancel previous timeout if present.
    if (dbSelectionInfoTimeout) {
        window.clearTimeout(dbSelectionInfoTimeout);
    }
    // Gather parameters about event.
    var dbSelectionInfoTime = 250;
    var selectBox = event.target;
    var values = getMultipleListValue(selectBox).values;
    var titles = getMultipleListValue(selectBox).titles;
    var uid = values[values.length-1];
    var type;
    switch (selectBox.id) {
        case "dbSessionInstancesList":
            // This should be session instance, not session. Testing purpose only.
            type = "Session";
            break;
        case "dbGamedataList":
            // This is obviously not the real type, change before committing
            type = "Application";
            break;
        default:
            alert("No valid type passed!");
            break;
    }
    currentlySelected.uids = values;
    currentlySelected.titles = titles;
    currentlySelected.type = type;
    // Set timeout of 500ms, then execute ajaxInfoRequest with previously gathered parameters.
    //dbSelectionInfoTimeout = window.setTimeout(ajaxInfoRequest, dbSelectionInfoTime, uid, ge("dbInfoPanelContent"), type);
    dbSelectionInfoTimeout = window.setTimeout(getInfo, dbSelectionInfoTime, type, uid);
}

function getInfo(type, uid) {
    var infoPanelContent = ge("dbInfoPanelContent");
    var data;
    switch (type.toLowerCase()) {
        case "session":
            data = dummyDatabase.instances[uid];
            break;
        case "application":
            data = dummyDatabase.gameData[uid];
            break;
        default:
            alert("Lol nope!");
            break;
    }
    
    resultString = "";
    resultString += "Title:<br/>"+data.title+".<br/><br/>";
    resultString += "Creator:<br/>"+data.creator+".<br/><br/>";
    resultString += "Date:<br/>"+data.date+".<br/><br/>";
    resultString += "Description:<br/>"+data.description+".<br/><br/>";
    
    
    infoPanelContent.innerHTML = resultString;
}

function getMultipleListValue(element) {
    // Get multiple values from multiple select box
    //TODO: 
    var result = {
        values: [],
        titles: []
    }
        
    for (var i = 0; i < element.options.length; i++) {
        if (element.options[i].selected == true) {
            result.values.push(element.options[i].value);
            result.titles.push(element.options[i].text);
        }
    }
    return result;
}

function addDataToList() {
    // Take selected objects and add to shopping cart
    // set element
    var element;
    switch (currentlySelected.type){
        case "Session":
            element = ge("dbSessionInstancesList");
            break;
        case "Application":
            element = ge("dbGamedataList");
            break;
        default:
            // ???
            break;
    }
    var uid;
    while (uid = currentlySelected.uids.pop()) {
        // Add to shopping cart
        shoppingCart.contents.uids.push(uid);
        shoppingCart.contents.titles.push(currentlySelected.titles.pop());
        shoppingCart.contents.types.push(currentlySelected.type);
        
        // Remove option from list
        for (var i = 0; i < element.options.length; i++) {
            if (element.options[i].value == uid) {
                element.remove(i);
                break;
            }
        }
    }
    
    // Then add display of shopping cart contents
    drawShoppingCart();
    ge("dbInfoPanelContent").innerHTML = "";
    
}

function removeFromList(event) {
    if (event == null || event == undefined) return;
    
    var id = event.target.parentNode.id;
    var uid = id.split("shoppingCartItem")[1];
    // find index, remove from object
    var indexInCart = shoppingCart.contents.uids.indexOf(uid);
    var tempTitle = shoppingCart.contents.titles[indexInCart];
    var cn = confirm("Are you sure you want to remove: "+tempTitle+ " from the selected data?");
    if (cn == false) return;
    
    
    shoppingCart.contents.uids.splice(indexInCart, 1);
    var title = shoppingCart.contents.titles.splice(indexInCart, 1)[0];
    var type = shoppingCart.contents.types.splice(indexInCart, 1)[0];
    //Then replace element back into relevant list
    // First set element
        
    var element;
    switch (type){
        case "Session":
            element = ge("dbSessionInstancesList");
            break;
        case "Application":
            element = ge("dbGamedataList");
            break;
        default:
            // ???
            break;
    }
    
    var option = ce("option");
    option.value = uid;
    option.text = title;
    element.add(option,null);
    
    
    
    // Lastly, refresh
    drawShoppingCart();
}

function drawShoppingCart() {
    var scElement = ge("shoppingCartContent");
    scElement.innerHTML = "";
    for (var i = 0; i < shoppingCart.contents.uids.length; i++) {
        var newLine = ce("div");
        newLine.className = "shoppingCartItem";
        newLine.id = "shoppingCartItem"+shoppingCart.contents.uids[i];
        var icon = ce("image");
        icon.src = "images/ui/DeleteIcon.png";
        $(icon).css("float", "right");
        icon.addEventListener("click", function(event){
            // TODO: Actually write this function
            removeFromList(event);
        }, false);
        var titleField = ce("text");
        titleField.innerHTML = shoppingCart.contents.titles[i];
        newLine.appendChild(titleField);
        newLine.appendChild(icon);
        scElement.appendChild(newLine);
    }
    
    // reset type after empty
    currentlySelected.type = null;
}
    
function configureDashboard() {
    mockup.api.loadPage("graphSelection", false);
}

//function goto dashboard
function gotoDashboard() {
    var data = JSON.stringify(doorstuurData);
    var form = ce("form");
    //changed to dashboardGraphSelection.php
    form.action = "dashboardOverview.php";
    form.method = "POST";
    var input = ce("input");
    input.type = "hidden";
    input.name = "doorstuurData";
    input.value = data;
    form.appendChild(input);
    form.submit();
//alert("Graph type is now: "+graphSelection);
    
}

function changeGraphType(type) {
    // If different graph type, clear canvas 1.
    
    switch (type.toLowerCase()){
        case "bar":
            graphSelection.graphType = "Bar";
            break;
        case "radar":
            graphSelection.graphType = "Radar";
            break
        case "pie":
            graphSelection.graphType = "Pie";
            break;
        default:
            break;
    }
    
    
    var data = formatGraphData();
    drawGraph('chart1', 450, 200, graphSelection.graphType, data);
    
// alert("Graph type is now: "+graphSelection.graphType);
}

function formatGraphData() {
    /*
     * if (data.available == false) {
     * graphSelection.dataAvailable = false;
     * insertStandardPlaceholderData();
     * }
     * else {
     * FormatDataCorrectly();
     * }
     */
    // temporary!!!;
    graphSelection.graphData = mockupData.muData1;
    return mockupData.muData1;
    
//alert("Data is now being formatted");
}

function drawGraph(name, sizeX, sizeY, type, data) {
    //delete old graph
    
    var oldGraph = ge("chart1");
    if (oldGraph) oldGraph.parentNode.removeChild(oldGraph);
    
    var canvas = ce("canvas");
    canvas.id = name;
    canvas.width = sizeX;
    canvas.height = sizeY;
    var parentElement = ge("graphDisplay");
    parentElement.appendChild(canvas);
    
    //js calls
    var chart1;
    switch (type) {
        case "Bar":
            chart1 = new RGraph.Bar(name, data);
            break;
        case "Pie":
            chart1 = new RGraph.Pie(name, data);
            break;
        case "Radar":
            chart1 = new RGraph.Radar(name, data);
            break;
        default:
            break;
    }
    
    //chart1.Set('chart.background.barcolor1', 'white');
    // chart1.Set('chart.background.barcolor2', 'white');
    chart1.Set('chart.labels', ['1st', '2nd', '3rd', '4th', '5th', '6th']);
    //chart1.Set('chart.key', ['Aapjes', 'Hertjes']);
    //chart1.Set('chart.key.position.y', 35);
    //chart1.Set('chart.key.position', 'gutter');
    //chart1.Set('chart.key.background', 'rgb(255,255,255)');
    chart1.Set('chart.colors', ['#77f', '#7f7']);
    chart1.Set('chart.shadow', true);
    chart1.Set('chart.shadow.blur', 15);
    chart1.Set('chart.shadow.offsetx', 0);
    chart1.Set('chart.shadow.offsety', 0);
    chart1.Set('chart.shadow.color', '#aaa');
    chart1.Set('chart.yaxispos', 'right');
    chart1.Set('chart.strokestyle', 'rgba(0,0,0,0)');
    chart1.Set('chart.gutter.left', 5);
    chart1.Set('chart.gutter.right', 45);
    chart1.Draw();
    
}

var doorstuurData = {
    graphs: [],
    count: null
}

function addToDashboard() {
    doorstuurData.graphs.push(["graph"+doorstuurData.count+1, 450, 200, graphSelection.graphType, graphSelection.graphData]);
    doorstuurData.count++;
}