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

Last change on this file since 259 was 259, checked in by tjcschipper, 13 years ago

Metro interface, selector werkt bijna! (Alleen move to dashboard nog niet, rest is prima (en de icons zijn lelijk).
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.gif";
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.