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

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