source: qesdi/graphplotter/trunk/graphplotter/templates/buildplot.html @ 6478

Subversion URL: http://proj.badc.rl.ac.uk/svn/ndg/qesdi/graphplotter/trunk/graphplotter/templates/buildplot.html@6478
Revision 6478, 6.5 KB checked in by pnorton, 10 years ago (diff)

Improved the appearance of the selection list elements.

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2
3<html xmlns:py="http://genshi.edgewall.org/" 
4      xmlns="http://www.w3.org/1999/xhtml">
5
6<?python
7
8
9?>
10
11<head>
12<title>buildplot</title>
13
14<link type="text/css" rel="stylesheet" href="${h.url_for('/css/buildplot.css', qualified=True)}" />
15
16<script src="${h.url_for('/js/jquery-1.4.1.js', qualified=True)}" type="text/javascript"></script>
17<script src="${h.url_for('/js/jquery.corner.js', qualified=True)}" type="text/javascript"></script>
18
19<script src="${h.url_for('/js/utils.js', qualified=True)}" type="text/javascript"></script>
20<script src="${h.url_for('/js/axisSelection.js', qualified=True)}" type="text/javascript"></script>
21<script src="${h.url_for('/js/axisSelectionList.js', qualified=True)}" type="text/javascript"></script>
22<script src="${h.url_for('/js/plotRequestBuilder.js', qualified=True)}" type="text/javascript"></script>
23
24<script type="text/javascript">
25
26// jquery rounding a few corners
27
28$(document).ready(function(){
29    $("#page").corner();
30    $("#data_selection_controls").corner();
31    $("#line_selection_controls").corner();
32    $('#data_selection_heading').corner("round top");
33    $('#line_selection_heading').corner("round top");
34});
35
36var refreshAction = "${h.url_for(controller='buildplot')}";
37var plotAction = "${h.url_for(controller='getplot')}";
38
39var selList = null;
40var reqBuilder = null;
41
42function init() {
43    selList = new AxisSelectionList('selection_list', 'selection_input_container');
44    reqBuilder = new PlotRequestBuilder('hidden_input_container');
45}
46
47function onRefreshClick() {
48    var form = document.getElementById('buildplot');
49    form.action = refreshAction;
50    form.target = '';
51    form.submit();
52}
53
54function onPlotClick() {
55    var form = document.getElementById('buildplot');
56
57    reqBuilder.buildSelectionInputs(selList.getSelectionItems());
58   
59    form.action = plotAction;
60    form.target = '_blank';
61    form.submit();
62}
63
64function onAddSelectionClick() {
65    selList.addSelection();
66}
67
68function onSelectAll(control) {
69    selList.addSelectionForAllOptions(control);
70}
71
72</script>
73
74<style type="text/css">
75
76    .close_box {
77        display: inline-block;
78        background: #ffffff url("${h.url_for('/images/close.gif')}") no-repeat center;
79        width:17px;
80        height:17px;
81        position:relative;
82        top:1px;
83        cursor:pointer;cursor:hand;
84        float:right;
85    }
86
87</style>
88
89</head>
90
91<body onload="init();">
92   
93    <div id="page">
94   
95        <div id="header">Graphplotter</div>
96       
97        <div id="main">
98            <form id='buildplot'>
99           
100                <div id="data_selection_controls" class="selection_control">
101               
102                    <div id="data_selection_heading"  class="selection_heading">Data Selection</div>
103                   
104                    <div id="data_selection_content"  class="selection_content">
105                   
106                        <div class="data_input_item">
107                            <label for="datafile"> Select Data File </label>
108                            ${ h.select('datafile', c.selectedDataFile, c.dataFiles, onChange='onRefreshClick()')}
109                        </div>
110                       
111                         <py:if test="c.selectedDataFile != ''">
112                           
113                         <div class="data_input_item">
114                            <label for="variable"> Select Variable </label>
115                            ${ h.select('variable', c.selectedVariable, c.variables, onChange='onRefreshClick()')}
116                         </div>
117                         
118                         </py:if>
119                         
120                         <py:if test="c.selectedVariable != ''">
121                           
122                         <div class="data_input_item">
123                            <label for="axis"> Select Plotting Axis </label>
124                            ${ h.select('axis', c.selectedAxis, c.axis, onChange='onRefreshClick()')}
125                         </div>
126                         
127                         </py:if>
128                     </div>
129                </div>
130                 
131                 <py:if test="c.selectedAxis != ''">
132                 
133                 <div id="line_selection_controls" class="selection_control">
134       
135                    <div id="line_selection_heading" class="selection_heading">
136                        <span>Line Selection</span>
137                    </div>
138                   
139                    <div id="line_selection_content"  class="selection_content">
140                        <div id='selection_input_container'>
141                       
142                        <py:for each="axSelect in c.axisSelect.keys()">
143                            <div class="axis_select_item">
144                            <label for="${'sel_' + axSelect}">${axSelect} </label>
145                            ${h.select('sel_' + axSelect, getattr(c, 'sel_' + axSelect), c.axisSelect[axSelect])}
146                            <span class="axis_select_units">${c.axisSelectUnits.get(axSelect, '')}</span>
147                            <input class="select_all_button" type="button" value="Select All" onClick="onSelectAll('${'sel_' + axSelect}')" />
148                            <div class="clear"></div>
149                            </div>
150                            <br />
151                        </py:for>
152                       
153                        </div>               
154                     
155                        <input id="add_selection_btn" type="button" value="Add Selection" onClick="onAddSelectionClick();"></input>         
156                       
157                        <div>
158                            Selections:
159                            <div id="selection_list_wrapper">
160                                <ul id="selection_list">
161                                    <li class="empty_item"> Empty </li>
162                                </ul>
163                            </div>
164                           
165                            <div id="hidden_input_container" style="display:none;"></div>
166                        </div>
167                       
168                    </div>
169                 
170                 </div>
171                 
172                 </py:if>
173               
174            </form>
175           
176            <div id="page_buttons">
177                <input type="button" value="Clear Selections" onClick="onRefreshClick();"></input>
178                <input type="button" value="Plot" onClick="onPlotClick();"></input>
179            </div>
180        </div>
181       
182    </div>
183   
184</body>
185
186</html>
Note: See TracBrowser for help on using the repository browser.