source: Dev/branches/Cartis/js/dashboardScripts.js @ 277

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