root/ui/web/htdocs/worksheet_panel.inc

Revision 1ce987a5cb94bbac2a5e72b72b9c2f926711eb1b, 12.2 kB (checked in by Umar Farooq <umar@omniti.com>, 5 years ago)

changes to allow better live streaming, now working in graph edit mode, and bug fixes

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