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

Last change on this file since 278 was 278, checked in by tjcschipper, 13 years ago
File size: 10.5 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    mockup.api.loadPage("graphSelection", false);
266}
267
268//function goto dashboard
269function gotoDashboard() {
270    var data = JSON.stringify(doorstuurData);
271    var form = ce("form");
272    //changed to dashboardGraphSelection.php
273    form.action = "dashboardOverview.php";
274    form.method = "POST";
275    var input = ce("input");
276    input.type = "hidden";
277    input.name = "doorstuurData";
278    input.value = data;
279    form.appendChild(input);
280    form.submit();
281//alert("Graph type is now: "+graphSelection);
282   
283}
284
285function changeGraphType(type) {
286    // If different graph type, clear canvas 1.
287   
288    switch (type.toLowerCase()){
289        case "bar":
290            graphSelection.graphType = "Bar";
291            break;
292        case "radar":
293            graphSelection.graphType = "Radar";
294            break
295        case "pie":
296            graphSelection.graphType = "Pie";
297            break;
298        default:
299            break;
300    }
301   
302   
303    var data = formatGraphData();
304    drawGraph('chart1', 450, 200, graphSelection.graphType, data);
305   
306// alert("Graph type is now: "+graphSelection.graphType);
307}
308
309function formatGraphData() {
310    /*
311     * if (data.available == false) {
312     * graphSelection.dataAvailable = false;
313     * insertStandardPlaceholderData();
314     * }
315     * else {
316     * FormatDataCorrectly();
317     * }
318     */
319    // temporary!!!;
320    graphSelection.graphData = mockupData.muData1;
321    return mockupData.muData1;
322   
323//alert("Data is now being formatted");
324}
325
326function drawGraph(name, sizeX, sizeY, type, data) {
327    //delete old graph
328   
329    var oldGraph = ge("chart1");
330    if (oldGraph) oldGraph.parentNode.removeChild(oldGraph);
331   
332    var canvas = ce("canvas");
333    canvas.id = name;
334    canvas.width = sizeX;
335    canvas.height = sizeY;
336    var parentElement = ge("graphDisplay");
337    parentElement.appendChild(canvas);
338   
339    //js calls
340    var chart1;
341    switch (type) {
342        case "Bar":
343            chart1 = new RGraph.Bar(name, data);
344            break;
345        case "Pie":
346            chart1 = new RGraph.Pie(name, data);
347            break;
348        case "Radar":
349            chart1 = new RGraph.Radar(name, data);
350            break;
351        default:
352            break;
353    }
354   
355    //chart1.Set('chart.background.barcolor1', 'white');
356    // chart1.Set('chart.background.barcolor2', 'white');
357    chart1.Set('chart.labels', ['1st', '2nd', '3rd', '4th', '5th', '6th']);
358    //chart1.Set('chart.key', ['Aapjes', 'Hertjes']);
359    //chart1.Set('chart.key.position.y', 35);
360    //chart1.Set('chart.key.position', 'gutter');
361    //chart1.Set('chart.key.background', 'rgb(255,255,255)');
362    chart1.Set('chart.colors', ['#77f', '#7f7']);
363    chart1.Set('chart.shadow', true);
364    chart1.Set('chart.shadow.blur', 15);
365    chart1.Set('chart.shadow.offsetx', 0);
366    chart1.Set('chart.shadow.offsety', 0);
367    chart1.Set('chart.shadow.color', '#aaa');
368    chart1.Set('chart.yaxispos', 'right');
369    chart1.Set('chart.strokestyle', 'rgba(0,0,0,0)');
370    chart1.Set('chart.gutter.left', 5);
371    chart1.Set('chart.gutter.right', 45);
372    chart1.Draw();
373   
374}
375
376var doorstuurData = {
377    graphs: [],
378    count: null
379}
380
381function addToDashboard() {
382    doorstuurData.graphs.push(["graph"+doorstuurData.count+1, 450, 200, graphSelection.graphType, graphSelection.graphData]);
383    doorstuurData.count++;
384}
385
Note: See TracBrowser for help on using the repository browser.