1 | dbSelectionInfoTimeout = null; |
---|
2 | var currentlySelected = { |
---|
3 | titles: [], |
---|
4 | uids: [], |
---|
5 | type: null |
---|
6 | } |
---|
7 | |
---|
8 | var shoppingCart = { |
---|
9 | contents: { |
---|
10 | titles: [], |
---|
11 | uids: [], |
---|
12 | types: [] |
---|
13 | } |
---|
14 | } |
---|
15 | |
---|
16 | var graphSelection = { |
---|
17 | graphType: null, |
---|
18 | graphData: null, |
---|
19 | dataAvailable: false |
---|
20 | } |
---|
21 | |
---|
22 | var 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 | |
---|
28 | function 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 | |
---|
63 | function 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 | |
---|
80 | function 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 | |
---|
117 | function 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 | |
---|
159 | function 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 | |
---|
183 | function 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 |
---|
198 | function 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 | |
---|
214 | function 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 | |
---|
238 | function 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 | |
---|
255 | function 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 | |
---|
305 | var doorstuurData = { |
---|
306 | graphs: [], |
---|
307 | count: null |
---|
308 | } |
---|
309 | |
---|
310 | function addToDashboard() { |
---|
311 | doorstuurData.graphs.push(["graph"+doorstuurData.count+1, 450, 200, graphSelection.graphType, graphSelection.graphData]); |
---|
312 | doorstuurData.count++; |
---|
313 | } |
---|