root/ui/web/htdocs/worksheet_panel.inc

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

ticket 81 - fixes worksheet save/edit issues

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