root/ui/web/htdocs/worksheet_panel.inc

Revision 45a812e5fddeed3282ec4aad51fd3c4759df25fa, 13.1 kB (checked in by Umar Farooq <umar@omniti.com>, 5 years ago)

refers to ref#[83] refreshGraph now only processes most current ajax request

  • Property mode set to 100644
Line 
1 <script type="text/javascript" src="js/eye/datepicker.js"></script>
2 <script type="text/javascript" src="js/eye/eye.js"></script>
3 <script type="text/javascript" src="js/eye/utils.js"></script>
4 <script type="text/javascript" src="js/jquery.timers.js"></script>
5 <script type="text/javascript" src="js/jquery.ajaxmanager.js" ></script>
6 <script type="text/javascript">
7 <!--
8
9 var ws_displayinfo = { start : 14*86400, cnt: '100', end: '' };
10 var wsinfo = {};
11 var locked = true;
12 var streaming = false;
13 var stream_graph;
14
15 function stream_data(graph_id) {
16
17   polltime = 5000;
18   timewindow = 50000;
19   stream_object = stream_graph;
20   stream_dirty = false;
21   stream_graph.ReconGraphPrepareStream(timewindow, polltime);
22
23
24 //setup functionality so that every second check if we are streaming and dirty, plot if true
25   stream_graph.everyTime(1000, function() {
26     if(!streaming) {   
27      $('#streambox').html('');
28      $(".stream-log").attr("style", "display:none;");
29      stream_graph.stopTime();
30     }
31     else {
32       if(stream_dirty){
33         stream_graph.ReconGraphPlotPoints();     
34         stream_dirty=false;
35       }
36     }
37   });
38
39   $.getJSON("json/graph/info/" + graph_id,
40     function(g) {
41
42       sids = "";
43       var sidneed = new Object();
44
45       for(var i=0; i<g.datapoints.length; i++) {
46         if(g.datapoints[i].sid) {
47           sidneed[g.datapoints[i].sid] = polltime;
48         }
49       }
50       for(var sid in sidneed) {
51         sids+= "/"+sid+"@"+sidneed[sid];
52       }
53
54        //console.log("sids requestd from noit server = ", sids);
55        $('#streambox').html('<iframe src="http://bob.office.omniti.com/data'+sids+'"></iframe>');
56    });
57
58 }
59
60 function lock_wforms() {
61   $("h2#worksheetTitle").unbind();
62   $("ul#worksheet-graphs").unbind();
63   $("ul#worksheet-graphs > li >div").each(function(i) { $(this).unbind();});
64 }
65          
66 function unlock_wforms() {
67   $("h2#worksheetTitle").editable(function(value, settings) {
68          wsinfo.title = value;
69          update_current_worksheet();
70          return(value);
71        }, { });
72
73   var ul = $("ul#worksheet-graphs");
74   ul.sortable({ handle: '.graphTitle',
75                 scroll: true,
76                 stop:
77                   function (e,ui) {
78                     wsinfo.reorder = true;
79                     wsinfo.graphs = new Array();
80                     ui.item.parent().find("> li > div").each(
81                       function(i) { wsinfo.graphs.push($(this).attr("id")); }
82                     );
83                     update_current_worksheet();
84                     wsinfo.reorder = false;
85                   }
86               });
87
88   $("ul#worksheet-graphs > li >div").each(
89   function(i) {
90                     var g = { start: ws_displayinfo.start,
91                       end: ws_displayinfo.end,
92                       cnt: ws_displayinfo.cnt,
93                       graphid:  $(this).attr("id")
94                     };
95                    
96                     $(this).prepend("<span style='display:none'; class='zoomGraph' id='Zoom-"+$(this).attr('id')+"'>Zoom</span>");
97                     $(this).prepend("<span style='display:none'; class='deleteWorksheetGraph' id='Remove-"+$(this).attr('id')+"'>Remove</span>");
98
99                     $("#Remove-"+$(this).attr('id')).click( function() {
100                       $.getJSON('json/worksheet/deletegraph/' + wsinfo.id + '/' + g.graphid,
101                         function(r) { if(r.error) { alert(r.error); } });
102                         $("#"+g.graphid).remove();
103                     });
104
105                     $("#Zoom-"+$(this).attr('id')).click( function() {
106                        
107                       stream_graph = $('<div></div>').ReconGraph({graphid: g.graphid});
108
109                       var smod = stream_graph.modal({
110                         containerId: 'StreamingModalContainer',
111                         close: 'true',
112                         overlayCss: {
113                         backgroundColor: '#000000',
114                         cursor: 'wait'
115                         },
116                         containerCss: {
117                         backgroundColor: '#FFFFFF',
118                         left: '30%',
119                         top: '10%',
120                         border: '2px solid #000000',
121                         padding: '5px'
122                         },
123                       });
124
125                       stream_graph.ReconGraphRefresh({graphid: g.graphid});
126                       stream_graph.prepend("<span class='zoomStream'>Stream Data</span>");
127                       stream_graph.prepend("<span class='zoomClose'>x</span>");
128                       stream_graph.append("<div class='stream-log' style='display:none'></div>");
129                       $(".zoomClose").click(function() {
130                         streaming = false;                       
131                         $('#streambox').html('');
132                         smod.close();
133                       });
134
135                       $(".zoomStream").click(function() {
136                         if(!streaming) {
137                            streaming = true;
138                            $(".zoomStream").html('Streaming!').fadeIn('slow');
139                            $(".stream-log").removeAttr("style").html("stream log_");
140                            stream_data(g.graphid);
141                         }
142                         else if(streaming) {
143                            streaming = false;
144                            $('#streambox').html('');
145                            $(".zoomStream").html('Stream Data').fadeIn('slow');
146                            $(".stream-log").attr("style", "display:none;");
147                            stream_graph.ReconGraphRefresh({graphid: g.graphid});
148                         }
149
150                       }); //end stream click function                     
151
152                     }); //end zoom click function
153
154                     $(this).mouseover(                 
155                        function() {
156                          $(this).attr("style", "outline: 1px solid #DDDDDD;");
157                          $("#Zoom-"+$(this).attr('id')).removeAttr("style");
158                          $("#Remove-"+$(this).attr('id')).removeAttr("style");
159                     }
160                     );
161   }); //end for each graph in the list
162
163   $("ul#worksheet-graphs > li >div").each(
164   function(i) { $(this).mouseout(
165                  function() {
166                     $(this).removeAttr("style");
167                     $("#Zoom-"+$(this).attr('id')).attr("style", "display:none;");
168                     $("#Remove-"+$(this).attr('id')).attr("style", "display:none;");
169                  }
170 ); });
171
172 }           
173
174 function update_current_worksheet(f) {
175   var str = JSON.stringify(wsinfo);
176   $.post("json/worksheet/store",
177          {'json':str},
178          function(d) {
179            wsinfo.id = d.id;
180            if(d.error) $("#ws-tool-error").html(d.error).fadeIn('fast');
181            else $("#ws-tool-error").fadeOut('fast');
182            if(wsinfo.id && wsinfo.title && wsinfo.saved != true &&
183               $(".rememberWorksheet:visible").length == 0) {
184              wsinfo.saved = false;
185              $(".rememberWorksheet").html('"Remember" this worksheet.').fadeIn('slow');
186              $(".rememberWorksheet").click(function() {
187                wsinfo.saved = true;
188                update_current_worksheet(function(r) {
189                  if(r.error) wsinfo.saved = false;
190                  else $(".rememberWorksheet").html('Remebered').fadeOut('slow');
191                });
192              });
193            }
194            if(f) f(d);
195          }, 'json');
196 }
197
198 function process_worksheet_json(r) {
199   wsinfo.id = r.sheetid;
200   wsinfo.title = r.title;
201   wsinfo.graphs = new Array();
202
203   var ul = $("ul#worksheet-graphs");
204   $("h2#worksheetTitle").html(r.title);
205   ul.empty();
206   for(var i = 0; i < r.graphs.length; i++) {
207     var g = {};
208     g.graphid = r.graphs[i];
209     g.start = ws_displayinfo.start;
210     g.end = ws_displayinfo.end;
211     g.cnt = ws_displayinfo.cnt;
212     var o = $('<div></div>').ReconGraph(g);
213     ul.append($('<li/>').append(o));
214     o.ReconGraphRefresh();
215     wsinfo.graphs.push(o.attr("id"));
216   }
217   ul.sortable("refresh");
218 }
219 function add_graph_to_worksheet(graphid) {
220   if(!locked){
221     for(var i = 0; wsinfo.graphs && (i < wsinfo.graphs.length); i++) {
222       if(wsinfo.graphs[i]==graphid) {
223          alert("Worksheets cannot have dusplicate graphs!");
224          return;
225       }
226     } 
227     var g = { start: ws_displayinfo.start,
228               end: ws_displayinfo.end,
229               cnt: ws_displayinfo.cnt,
230               graphid: graphid };
231     var o = $('<div></div>').ReconGraph( g );
232     var ul = $("ul#worksheet-graphs");
233     ul.append($('<li/>').append(o));
234     o.ReconGraphRefresh();
235     ul.sortable("refresh");
236     wsinfo.graphs = new Array();
237     alert('pushing ' + graphid);
238     wsinfo.graphs.push(graphid);
239     update_current_worksheet();
240     unlock_wforms();
241   }
242
243 }
244 function refresh_worksheet() {
245   var g = { start: ws_displayinfo.start,
246             end: ws_displayinfo.end,
247             cnt: ws_displayinfo.cnt };
248   $("ul#worksheet-graphs > li > div").ReconGraphRefresh(g);
249 }
250 function load_worksheet(id) {
251     wsinfo.graphs = new Array();
252   if(id==null) {
253     wsinfo.saved = false;
254     locked = false;
255     unlock_wforms();
256     $(".editWorksheet").html('Editing!').fadeIn('slow');
257     process_worksheet_json({graphs: [], title:'Worksheet Title (click to edit)', sheetid: ''});
258   }
259   else {
260     wsinfo.saved = true;
261     locked = true;
262     lock_wforms();
263     $(".editWorksheet").html('Edit Worksheet').fadeIn('slow');
264     $.getJSON("json/worksheet/info/" + id, process_worksheet_json);
265   }
266 }
267 -->
268 </script>
269 <span class="rememberWorksheet"></span>
270 <span class="blankWorksheet">New Blank</span>
271 <span class="editWorksheet">Editing!</span>
272 <h2 id="worksheetTitle">Worksheet Title</h2>
273 <p/>
274 <!-- date range box -->
275 <script type="text/javascript">
276 $(document).ready(function(){
277         var time_windows = { '2d' : 86400*2,
278                              '1w' : 86400*7,
279                              '2w' : 86400*14,
280                              '4w' : 86400*28,
281                              '1y' : 86400*365,
282                            };
283         var state = false;
284
285         $("h2#worksheetTitle").editable(function(value, settings) {
286          wsinfo.title = value;
287          update_current_worksheet();
288          return(value);
289        }, { });
290
291         $(".editWorksheet").click(function() {         
292                 if(locked){
293                     locked = false;                 
294                     unlock_wforms();
295                     $(".editWorksheet").html('Editing!').fadeIn('slow');
296                 }
297                 else if(!locked){
298                     locked = true;     
299                     lock_wforms();
300                     $(".editWorksheet").html('Edit Worksheet').fadeIn('slow');
301                 }
302         });
303
304
305         $(".blankWorksheet").click(function() {
306                 load_worksheet();               
307                 alert("id = "+wsinfo.id);
308         });
309
310         $("#ws_datetool .btn-slide").click(function(){
311                 $("#ws_widgetCalendar").stop().animate({
312                      height: state ? 0 :
313                        $('#ws_widgetCalendar div.datepicker').get(0).offsetHeight
314                   }, 500);
315                 state = !state;
316                 $(this).toggleClass("active");
317                 return false;
318         });
319         $("#ws_datetool .datechoice").click(function(){
320                 $("#ws_datetool .range a.btn-slide").html("YYYY/MM/DD - YYYY/MM/DD");
321                 $("#ws_widgetCalendar").slideUp("slow");
322                 $(".datechoice").removeClass("selected");
323                 ws_displayinfo.start = time_windows[$(this).html()];
324                 ws_displayinfo.end = '';
325                 $(this).addClass("selected");
326                 refresh_worksheet();
327                 return false;
328         });
329         $('#ws_widgetCalendar').DatePicker({
330                 flat: true,
331                 format: 'Y/m/d',
332                 date: [new Date(), new Date()],
333                 calendars: 3,
334                 mode: 'range',
335                 starts: 1,
336                 onChange: function(formated) {
337                         var dates;
338                         dates = formated[0].split('/');
339                         var start = new Date(dates[0], dates[1]-1, dates[2], 0, 0, 0);
340                         dates = formated[1].split('/');
341                         var end = new Date((new Date(dates[0], dates[1]-1, dates[2], 0, 0, 0)).getTime() + 86400000);
342                         ws_displayinfo.start = start.toUTCString();
343                         ws_displayinfo.end = end.toUTCString();
344                         refresh_worksheet();
345                         $(".datechoice").removeClass("selected");
346                         $('#ws_datetool .range a.btn-slide').get(0).innerHTML = formated.join(' - ');
347                 }
348         });
349         $("#ws-tool-error").click(function(){
350           $("#ws-tool-error").fadeOut("slow");
351         });
352
353 });
354 </script>
355
356 <div id="ws_datetool">
357         <div class="zoom">
358                 <dl>
359                         <dt>Zoom:</dt>
360                         <dd><a href="#" class="first datechoice">2d</a></dd>
361                         <dd><a href="#" class="datechoice">1w</a></dd>
362                         <dd><a href="#" class="selected datechoice">2w</a></dd>
363                         <dd><a href="#" class="datechoice">4w</a></dd>
364                         <dd><a href="#" class="datechoice">1y</a></dd>
365                 </dl>
366         </div>
367         <div class="range">
368                 <dl>
369                         <dt>Date Range:</dt>
370                         <dd><a href="" class="btn-slide">YYYY/MM/DD - YYYY/MM/DD</a></dd>
371                 </dl>
372         </div>
373 <br style="clear:both; margin-bottom:0.5em;"/>
374         <div id="ws_widgetCalendar" class="widgetCalendar"></div>
375 </div>
376
377 <div>
378   <ul id="worksheet-graphs" />
379   <br style="clear:left" />
380 </div> 
381 <div id="streambox" style="display:none"></div>
382 <div style="display:none">
383         <div id="maingraph-template">
384         <h3 class="graphTitle">graph title</h3>
385         <div class="plot-area" style="width:380px;height:180px"></div>
386         <div class="plot-legend">legend</div>
387         </div>
388 </div>
389
390 <div class="error"><p class="error" id="ws-tool-error"></p></div>
391
392 <div id="ws_payload">
393 </div>
Note: See TracBrowser for help on using the browser.