root/ui/web/htdocs/worksheet_panel.inc

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

added icons for remove, drag, zoom, still needs to be looked at by someone with a good design eye
refs#91

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