root/ui/web/htdocs/worksheet_panel.inc

Revision 974e5c453348116220ccd02c8307b980865ba41e, 5.3 kB (checked in by Theo Schlossnagle <jesus@omniti.com>, 5 years ago)

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