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

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