root/ui/web/htdocs/worksheet_panel.inc

Revision 1a8ddc4c1234e664bfd96ff9a8ef95d4b07079f2, 5.6 kB (checked in by Theo Schlossnagle <jesus@omniti.com>, 6 years ago)

fixups, renames, refs #22

  • 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">
5 <!--
6 var ws_displayinfo = { start : 14*86400, cnt: '100', end: '' };
7 function plot_id(r, domid) {
8       var placeholder = $(domid + " > div.plot-area");
9       placeholder.bind("plotselected", function (event, ranges) {
10         alert(ranges.xaxis.from + " -> " + ranges.xaxis.to);
11         plot = $.plot(placeholder, data,
12                     $.extend(true, {}, options, {
13                                xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
14                              }));
15       });
16       r.options.legend.container = $(domid + " div.plot-legend");
17       if(!r.options.yaxis) r.options.yaxis = {};
18       if(r.options.yaxis.suffix)
19         r.options.yaxis.tickFormatter = function (val, axis) {
20           return val.toFixed(axis.tickDecimals) + r.options.yaxis.suffix;
21         };
22       var plot = $.plot(placeholder, r.data, r.options);
23 }
24 function ws_redraw_graph(info, domid) {
25   if(info.datapoints.length > 0) {
26     var url = "flot/graph/settings/" + info.graphid;
27     $(domid + " .plot-area").html('<div class="centered"><div class="loading">&nbsp;</div></div>');
28     $.getJSON(url, {'cnt':ws_displayinfo.cnt,
29                     'start':ws_displayinfo.start,
30                     'end':ws_displayinfo.end},
31               function (r) { plot_id(r,domid); });
32   }
33   else {
34     $(domid + " .plot-area").html('<div class="centered">No data</div>');
35   }
36 }
37 function ws_refresh_graph_from_json(info, domid) {
38   if(info.datapoints == undefined) info.datapoints = Array();
39   $(domid + " h3.graphTitle").html(info.title);
40   ws_redraw_graph(info, domid);
41 }
42 function ws_fetch_graph_info(id, domid) {
43   $.getJSON("json/graph/info/" + id,
44             function(r) { ws_refresh_graph_from_json(r, domid); });
45 }
46 function process_worksheet_json(r) {
47   var ul = $("ul#worksheet-graphs");
48   ul.empty();
49   for(var i = 0; i < r.graphs.length; i++) {
50     var o = $("#maingraph-template").clone();
51     o.attr("id", r.graphs[i].graphid);
52     ul.append($('<li/>').append(o));
53     ws_refresh_graph_from_json(r.graphs[i], "#" + r.graphs[i].graphid);
54   }
55 }
56 function load_worksheet(id) {
57   $.getJSON("json/worksheet/info/" + id, process_worksheet_json);
58 }
59 -->
60 </script>
61 <h2>Worksheet Title</h2>
62 <p/>
63 <!-- date range box -->
64 <script type="text/javascript">
65 $(document).ready(function(){
66         var time_windows = { '2d' : 86400*2,
67                              '1w' : 86400*7,
68                              '2w' : 86400*14,
69                              '4w' : 86400*28,
70                              '1y' : 86400*365,
71                            };
72         var state = false;
73         $(".btn-slide").click(function(){
74                 $("#widgetCalendar").stop().animate({
75                      height: state ? 0 :
76                        $('#widgetCalendar div.datepicker').get(0).offsetHeight
77                   }, 500);
78                 state = !state;
79                 $(this).toggleClass("active");
80                 return false;
81         });
82         $(".datechoice").click(function(){
83                 $("#range a.btn-slide").html("YYYY/MM/DD - YYYY/MM/DD");
84                 $("#widgetCalendar").slideUp("slow");
85                 $(".datechoice").removeClass("selected");
86                 ws_displayinfo.start = time_windows[$(this).html()];
87                 ws_displayinfo.end = '';
88                 $(this).addClass("selected");
89                 load_worksheet();
90                 return false;
91         });
92         $('#widgetCalendar').DatePicker({
93                 flat: true,
94                 format: 'Y/m/d',
95                 date: [new Date(), new Date()],
96                 calendars: 3,
97                 mode: 'range',
98                 starts: 1,
99                 onChange: function(formated) {
100                         var dates;
101                         dates = formated[0].split('/');
102                         var start = new Date(dates[0], dates[1]-1, dates[2], 0, 0, 0);
103                         dates = formated[1].split('/');
104                         var end = new Date((new Date(dates[0], dates[1]-1, dates[2], 0, 0, 0)).getTime() + 86400000);
105                         ws_displayinfo.start = start.toUTCString();
106                         ws_displayinfo.end = end.toUTCString();
107                         load_worksheet('');
108                         $(".datechoice").removeClass("selected");
109                         $('#range a.btn-slide').get(0).innerHTML = formated.join(' - ');
110                 }
111         });
112         $("#gtool-error").click(function(){
113           $("#gtool-error").fadeOut("slow");
114         });
115         load_worksheet('<?php print $_GET['worksheetid'] ?>');
116 });
117 </script>
118
119 <div id="datetool">
120         <div id="zoom">
121                 <dl>
122                         <dt>Zoom:</dt>
123                         <dd><a href="#" class="first datechoice">2d</a></dd>
124                         <dd><a href="#" class="datechoice">1w</a></dd>
125                         <dd><a href="#" class="selected datechoice">2w</a></dd>
126                         <dd><a href="#" class="datechoice">4w</a></dd>
127                         <dd><a href="#" class="datechoice">1y</a></dd>
128                 </dl>
129         </div>
130         <div id="range">
131                 <dl>
132                         <dt>Date Range:</dt>
133                         <dd><a href="" class="btn-slide">YYYY/MM/DD - YYYY/MM/DD</a></dd>
134                 </dl>
135         </div>
136 <br style="clear:both; margin-bottom:0.5em;"/>
137         <div id="widgetCalendar"></div>
138 </div>
139
140 <div>
141   <ul id="worksheet-graphs" />
142   <br style="clear:left" />
143 </div>                 
144 <div style="display:none">
145         <div id="maingraph-template">
146         <h3 class="graphTitle">graph title</h3>
147         <div class="plot-area" style="width:380px;height:180px"></div>
148         <div class="plot-legend">legend</div>
149         </div>
150 </div>
151
152 <div class="error"><p class="error" id="gtool-error"></p></div>
153
154 <div id="payload">
155 </div>
Note: See TracBrowser for help on using the browser.