root/ui/web/htdocs/worksheet_panel.inc

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

building worksheets... saving will come later, 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 process_worksheet_json(r) {
8   console.log(r.graphs.length);
9   var ul = $("ul#worksheet-graphs");
10   $("h2.worksheetTitle").html(r.title);
11   ul.empty();
12   for(var i = 0; i < r.graphs.length; i++) {
13     r.graphs[i].start = ws_displayinfo.start;
14     r.graphs[i].end = ws_displayinfo.end;
15     r.graphs[i].cnt = ws_displayinfo.cnt;
16     var o = $('<div></div>').ReconGraph( r.graphs[i] );
17     ul.append($('<li/>').append(o));
18     o.ReconGraphRefresh();
19   }
20   ul.sortable({ handle: '.graphTitle',
21                 scroll: true,
22                 stop:
23                   function (e,ui) {
24                     var ol = new Array();
25                     ui.item.parent().find("> li > div").each(
26                       function(i) { ol.push($(this).attr("id")); }
27                     );
28                     // Store new worksheet order here
29                     console.log(ol);
30                   }
31               });
32 }
33 function add_graph_to_worksheet(graphid) {
34   var g = { start: ws_displayinfo.start,
35             end: ws_displayinfo.end,
36             cnt: ws_displayinfo.cnt,
37             graphid: graphid };
38   var o = $('<div></div>').ReconGraph( g );
39   var ul = $("ul#worksheet-graphs");
40   ul.append($('<li/>').append(o));
41   o.ReconGraphRefresh();
42 }
43 function refresh_worksheet() {
44   var g = { start: ws_displayinfo.start,
45             end: ws_displayinfo.end,
46             cnt: ws_displayinfo.cnt };
47   $("ul#worksheet-graphs > li > div").ReconGraphRefresh(g);
48 }
49 function load_worksheet(id) {
50   $.getJSON("json/worksheet/info/" + id, process_worksheet_json);
51 }
52 -->
53 </script>
54 <h2 class="worksheetTitle">Worksheet Title</h2>
55 <p/>
56 <!-- date range box -->
57 <script type="text/javascript">
58 $(document).ready(function(){
59         var time_windows = { '2d' : 86400*2,
60                              '1w' : 86400*7,
61                              '2w' : 86400*14,
62                              '4w' : 86400*28,
63                              '1y' : 86400*365,
64                            };
65         var state = false;
66         $("#ws_datetool .btn-slide").click(function(){
67                 $("#ws_widgetCalendar").stop().animate({
68                      height: state ? 0 :
69                        $('#ws_widgetCalendar div.datepicker').get(0).offsetHeight
70                   }, 500);
71                 state = !state;
72                 $(this).toggleClass("active");
73                 return false;
74         });
75         $("#ws_datetool .datechoice").click(function(){
76                 $("#ws_datetool .range a.btn-slide").html("YYYY/MM/DD - YYYY/MM/DD");
77                 $("#ws_widgetCalendar").slideUp("slow");
78                 $(".datechoice").removeClass("selected");
79                 ws_displayinfo.start = time_windows[$(this).html()];
80                 ws_displayinfo.end = '';
81                 $(this).addClass("selected");
82                 refresh_worksheet();
83                 return false;
84         });
85         $('#ws_widgetCalendar').DatePicker({
86                 flat: true,
87                 format: 'Y/m/d',
88                 date: [new Date(), new Date()],
89                 calendars: 3,
90                 mode: 'range',
91                 starts: 1,
92                 onChange: function(formated) {
93                         var dates;
94                         dates = formated[0].split('/');
95                         var start = new Date(dates[0], dates[1]-1, dates[2], 0, 0, 0);
96                         dates = formated[1].split('/');
97                         var end = new Date((new Date(dates[0], dates[1]-1, dates[2], 0, 0, 0)).getTime() + 86400000);
98                         ws_displayinfo.start = start.toUTCString();
99                         ws_displayinfo.end = end.toUTCString();
100                         refresh_worksheet();
101                         $(".datechoice").removeClass("selected");
102                         $('#ws_datetool .range a.btn-slide').get(0).innerHTML = formated.join(' - ');
103                 }
104         });
105         $("#ws-tool-error").click(function(){
106           $("#ws-tool-error").fadeOut("slow");
107         });
108 });
109 </script>
110
111 <div id="ws_datetool">
112         <div class="zoom">
113                 <dl>
114                         <dt>Zoom:</dt>
115                         <dd><a href="#" class="first datechoice">2d</a></dd>
116                         <dd><a href="#" class="datechoice">1w</a></dd>
117                         <dd><a href="#" class="selected datechoice">2w</a></dd>
118                         <dd><a href="#" class="datechoice">4w</a></dd>
119                         <dd><a href="#" class="datechoice">1y</a></dd>
120                 </dl>
121         </div>
122         <div class="range">
123                 <dl>
124                         <dt>Date Range:</dt>
125                         <dd><a href="" class="btn-slide">YYYY/MM/DD - YYYY/MM/DD</a></dd>
126                 </dl>
127         </div>
128 <br style="clear:both; margin-bottom:0.5em;"/>
129         <div id="ws_widgetCalendar" class="widgetCalendar"></div>
130 </div>
131
132 <div>
133   <ul id="worksheet-graphs" />
134   <br style="clear:left" />
135 </div>                 
136 <div style="display:none">
137         <div id="maingraph-template">
138         <h3 class="graphTitle">graph title</h3>
139         <div class="plot-area" style="width:380px;height:180px"></div>
140         <div class="plot-legend">legend</div>
141         </div>
142 </div>
143
144 <div class="error"><p class="error" id="ws-tool-error"></p></div>
145
146 <div id="ws_payload">
147 </div>
Note: See TracBrowser for help on using the browser.