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

Last change on this file since 261 was 261, checked in by tjcschipper, 13 years ago
File size: 10.8 KB
Line 
1dbSelectionInfoTimeout = null;
2var currentlySelected = {
3    titles: [],
4    uids: [],
5    type: null
6}
7
8var shoppingCart = {
9    contents: {
10        titles: [],
11        uids: [],
12        types: []
13    }
14}
15
16var graphSelection = {
17    graphType: null,
18    graphData: null,
19    dataAvailable: false
20}
21
22var mockupData = {
23    muData1: [1,2,3,4,5,6], //pie charts
24    muData2: [[1,2,3],[4,5,6]], //bar charts
25    muData3: [[1,2],[3,4],[5,6]]    //radar charts
26}
27
28var dummyDatabase = {
29    instances: new Array(
30    {
31        title: "Teamup Session 1",
32        creator: "Cartis Jansen",
33        date: "25-5-2012",
34        description: "BLablablablabla"
35    },
36    {
37        title: "Teamup Session 2",
38        creator: "Cartis Jansen",
39        date: "28-5-2012",
40        description: "250 deelnemers"
41    }
42
43    ),
44    gameData: new Array(
45    {
46        title: "Veerkracht 17-3-2011",
47        creator: "Arne Bezuijen",
48        date: "17-3-2011",
49        description: "Great success"
50    },
51    {
52        title: "Ventum",
53        creator: "Cartis Jansen",
54        date: "1-1-2010",
55        description: "Op locatie"
56    }
57    )
58};
59
60(function() {
61    debugger;
62    var el = ge("dbSessionInstancesList");
63    for (var n = 0; n < dummyDatabase.instances.length; n++) {
64        var opt = ce("option");
65        opt.value = n;
66        opt.innerHTML = dummyDatabase.instances[n].title;
67        el.appendChild(opt);
68    }
69    el = ge("dbGamedataList");
70    for (var n = 0; n < dummyDatabase.gameData.length; n++) {
71        var opt = ce("option");
72        opt.value = n;
73        opt.innerHTML = dummyDatabase.gameData[n].title;
74        el.appendChild(opt);
75    }
76})();
77   
78
79
80
81function infoPanelTimeout(event) {
82    // If no event, crash.
83    if (event == undefined || event == null) return;
84    // Cancel previous timeout if present.
85    if (dbSelectionInfoTimeout) {
86        window.clearTimeout(dbSelectionInfoTimeout);
87    }
88    // Gather parameters about event.
89    var dbSelectionInfoTime = 250;
90    var selectBox = event.target;
91    var values = getMultipleListValue(selectBox).values;
92    var titles = getMultipleListValue(selectBox).titles;
93    var uid = values[values.length-1];
94    var type;
95    switch (selectBox.id) {
96        case "dbSessionInstancesList":
97            // This should be session instance, not session. Testing purpose only.
98            type = "Session";
99            break;
100        case "dbGamedataList":
101            // This is obviously not the real type, change before committing
102            type = "Application";
103            break;
104        default:
105            alert("No valid type passed!");
106            break;
107    }
108    currentlySelected.uids = values;
109    currentlySelected.titles = titles;
110    currentlySelected.type = type;
111    // Set timeout of 500ms, then execute ajaxInfoRequest with previously gathered parameters.
112    //dbSelectionInfoTimeout = window.setTimeout(ajaxInfoRequest, dbSelectionInfoTime, uid, ge("dbInfoPanelContent"), type);
113    debugger;
114    dbSelectionInfoTimeout = window.setTimeout(getInfo, dbSelectionInfoTime, type, uid);
115}
116
117function getInfo(type, uid) {
118    var infoPanelContent = ge("dbInfoPanelContent");
119    var data;
120    switch (type.toLowerCase()) {
121        case "session":
122            data = dummyDatabase.instances[uid];
123            break;
124        case "application":
125            data = dummyDatabase.gameData[uid];
126            break;
127        default:
128            alert("Lol nope!");
129            break;
130    }
131   
132    resultString = "";
133    resultString += "Title:<br/>"+data.title+".<br/><br/>";
134    resultString += "Creator:<br/>"+data.creator+".<br/><br/>";
135    resultString += "Date:<br/>"+data.date+".<br/><br/>";
136    resultString += "Description:<br/>"+data.description+".<br/><br/>";
137   
138   
139    infoPanelContent.innerHTML = resultString;
140}
141
142function getMultipleListValue(element) {
143    // Get multiple values from multiple select box
144    //TODO:
145    var result = {
146        values: [],
147        titles: []
148    }
149       
150    for (var i = 0; i < element.options.length; i++) {
151        if (element.options[i].selected == true) {
152            result.values.push(element.options[i].value);
153            result.titles.push(element.options[i].text);
154        }
155    }
156    return result;
157}
158
159function addDataToList() {
160    // Take selected objects and add to shopping cart
161    debugger;
162    // set element
163    var element;
164    switch (currentlySelected.type){
165        case "Session":
166            element = ge("dbSessionInstancesList");
167            break;
168        case "Application":
169            element = ge("dbGamedataList");
170            break;
171        default:
172            // ???
173            break;
174    }
175    var uid;
176    while (uid = currentlySelected.uids.pop()) {
177        // Add to shopping cart
178        shoppingCart.contents.uids.push(uid);
179        shoppingCart.contents.titles.push(currentlySelected.titles.pop());
180        shoppingCart.contents.types.push(currentlySelected.type);
181       
182        // Remove option from list
183        for (var i = 0; i < element.options.length; i++) {
184            if (element.options[i].value == uid) {
185                element.remove(i);
186                break;
187            }
188        }
189    }
190   
191    // Then add display of shopping cart contents
192    drawShoppingCart();
193    ge("dbInfoPanelContent").innerHTML = "";
194   
195}
196
197function removeFromList(event) {
198    if (event == null || event == undefined) return;
199   
200    var id = event.target.parentNode.id;
201    var uid = id.split("shoppingCartItem")[1];
202    // find index, remove from object
203    var indexInCart = shoppingCart.contents.uids.indexOf(uid);
204    var tempTitle = shoppingCart.contents.titles[indexInCart];
205    var cn = confirm("Are you sure you want to remove: "+tempTitle+"?");
206    if (cn == false) return;
207   
208   
209    shoppingCart.contents.uids.splice(indexInCart, 1);
210    var title = shoppingCart.contents.titles.splice(indexInCart, 1)[0];
211    var type = shoppingCart.contents.types.splice(indexInCart, 1)[0];
212    //Then replace element back into relevant list
213    // First set element
214       
215    var element;
216    switch (type){
217        case "Session":
218            element = ge("dbSessionInstancesList");
219            break;
220        case "Application":
221            element = ge("dbGamedataList");
222            break;
223        default:
224            // ???
225            break;
226    }
227   
228    var option = ce("option");
229    option.value = uid;
230    option.text = title;
231    element.add(option,null);
232   
233   
234   
235    // Lastly, refresh
236    drawShoppingCart();
237}
238
239function drawShoppingCart() {
240    var scElement = ge("shoppingCartContent");
241    scElement.innerHTML = "";
242    for (var i = 0; i < shoppingCart.contents.uids.length; i++) {
243        var newLine = ce("div");
244        newLine.className = "shoppingCartItem";
245        newLine.id = "shoppingCartItem"+shoppingCart.contents.uids[i];
246        var icon = ce("image");
247        icon.src = "images/ui/DeleteIcon.png";
248        $(icon).css("float", "right");
249        icon.addEventListener("click", function(event){
250            // TODO: Actually write this function
251            removeFromList(event);
252        }, false);
253        var titleField = ce("text");
254        titleField.innerHTML = shoppingCart.contents.titles[i];
255        newLine.appendChild(titleField);
256        newLine.appendChild(icon);
257        scElement.appendChild(newLine);
258    }
259   
260    // reset type after empty
261    currentlySelected.type = null;
262}
263   
264function configureDashboard() {
265    var data = JSON.stringify(shoppingCart);
266    var form = ce("form");
267    //changed to dashboardGraphSelection.php
268    form.action = "dashboardGraphSelection.php";
269    form.method = "POST";
270    var input = ce("input");
271    input.type = "hidden";
272    input.name = "selectedData";
273    input.value = data;
274    form.appendChild(input);
275    form.submit();
276}
277
278//function goto dashboard
279function gotoDashboard() {
280    var data = JSON.stringify(doorstuurData);
281    var form = ce("form");
282    //changed to dashboardGraphSelection.php
283    form.action = "dashboardOverview.php";
284    form.method = "POST";
285    var input = ce("input");
286    input.type = "hidden";
287    input.name = "doorstuurData";
288    input.value = data;
289    form.appendChild(input);
290    form.submit();
291//alert("Graph type is now: "+graphSelection);
292   
293}
294
295function changeGraphType(type) {
296    // If different graph type, clear canvas 1.
297   
298    switch (type.toLowerCase()){
299        case "bar":
300            graphSelection.graphType = "Bar";
301            break;
302        case "radar":
303            graphSelection.graphType = "Radar";
304            break
305        case "pie":
306            graphSelection.graphType = "Pie";
307            break;
308        default:
309            break;
310    }
311   
312   
313    var data = formatGraphData();
314    drawGraph('chart1', 450, 200, graphSelection.graphType, data);
315   
316// alert("Graph type is now: "+graphSelection.graphType);
317}
318
319function formatGraphData() {
320    /*
321     * if (data.available == false) {
322     * graphSelection.dataAvailable = false;
323     * insertStandardPlaceholderData();
324     * }
325     * else {
326     * FormatDataCorrectly();
327     * }
328     */
329    // temporary!!!;
330    graphSelection.graphData = mockupData.muData1;
331    return mockupData.muData1;
332   
333//alert("Data is now being formatted");
334}
335
336function drawGraph(name, sizeX, sizeY, type, data) {
337    //delete old graph
338   
339    var oldGraph = ge("chart1");
340    if (oldGraph) oldGraph.parentNode.removeChild(oldGraph);
341   
342    var canvas = ce("canvas");
343    canvas.id = name;
344    canvas.width = sizeX;
345    canvas.height = sizeY;
346    var parentElement = ge("graphDisplay");
347    parentElement.appendChild(canvas);
348   
349    //js calls
350    var chart1;
351    switch (type) {
352        case "Bar":
353            chart1 = new RGraph.Bar(name, data);
354            break;
355        case "Pie":
356            chart1 = new RGraph.Pie(name, data);
357            break;
358        case "Radar":
359            chart1 = new RGraph.Radar(name, data);
360            break;
361        default:
362            break;
363    }
364   
365    //chart1.Set('chart.background.barcolor1', 'white');
366    // chart1.Set('chart.background.barcolor2', 'white');
367    chart1.Set('chart.labels', ['1st', '2nd', '3rd', '4th', '5th', '6th']);
368    //chart1.Set('chart.key', ['Aapjes', 'Hertjes']);
369    //chart1.Set('chart.key.position.y', 35);
370    //chart1.Set('chart.key.position', 'gutter');
371    //chart1.Set('chart.key.background', 'rgb(255,255,255)');
372    chart1.Set('chart.colors', ['#77f', '#7f7']);
373    chart1.Set('chart.shadow', true);
374    chart1.Set('chart.shadow.blur', 15);
375    chart1.Set('chart.shadow.offsetx', 0);
376    chart1.Set('chart.shadow.offsety', 0);
377    chart1.Set('chart.shadow.color', '#aaa');
378    chart1.Set('chart.yaxispos', 'right');
379    chart1.Set('chart.strokestyle', 'rgba(0,0,0,0)');
380    chart1.Set('chart.gutter.left', 5);
381    chart1.Set('chart.gutter.right', 45);
382    chart1.Draw();
383   
384}
385
386var doorstuurData = {
387    graphs: [],
388    count: null
389}
390
391function addToDashboard() {
392    doorstuurData.graphs.push(["graph"+doorstuurData.count+1, 450, 200, graphSelection.graphType, graphSelection.graphData]);
393    doorstuurData.count++;
394}
Note: See TracBrowser for help on using the repository browser.