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

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

Added the ability to remove line selections. Also introduced some css + jquery to the buildplot page.

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});
33
34var refreshAction = "${h.url_for(controller='buildplot')}";
35var plotAction = "${h.url_for(controller='getplot')}";
36
37var selList = null;
38var reqBuilder = null;
39
40function init() {
41    selList = new AxisSelectionList('selection_list', 'selection_input_container');
42    reqBuilder = new PlotRequestBuilder('hidden_input_container');
43}
44
45function onRefreshClick() {
46    var form = document.getElementById('buildplot');
47    form.action = refreshAction;
48    form.target = '';
49    form.submit();
50}
51
52function onPlotClick() {
53    var form = document.getElementById('buildplot');
54
55    reqBuilder.buildSelectionInputs(selList.getSelectionItems());
56   
57    form.action = plotAction;
58    form.target = '_blank';
59    form.submit();
60}
61
62function onAddSelectionClick() {
63    selList.addSelection();
64}
65
66function onSelectAll(control) {
67    selList.addSelectionForAllOptions(control);
68}
69
70</script>
71
72<style type="text/css">
73
74    .close_box {
75        display: inline-block;
76        background: #ffffff url("${h.url_for('/images/close.gif')}") no-repeat center;
77        width:17px;
78        height:17px;
79        position:relative;
80        top:3px;
81        cursor:pointer;cursor:hand;
82        margin-left: 3px;
83    }
84
85</style>
86
87</head>
88
89<body onload="init();">
90   
91    <div id="page">
92   
93        <div id="header">Graphplotter</div>
94       
95        <div id="main">
96            <form id='buildplot'>
97           
98                <fieldset id="data_selection_controls">
99               
100                    <legend>Data Selection</legend>
101               
102                    <div class="data_input_item">
103                        <label for="datafile"> Select Data File </label>
104                        ${ h.select('datafile', c.selectedDataFile, c.dataFiles, onChange='onRefreshClick()')}
105                    </div>
106                   
107                     <py:if test="c.selectedDataFile != ''">
108                       
109                     <div class="data_input_item">
110                        <label for="variable"> Select Variable </label>
111                        ${ h.select('variable', c.selectedVariable, c.variables, onChange='onRefreshClick()')}
112                     </div>
113                     
114                     </py:if>
115                     
116                     <py:if test="c.selectedVariable != ''">
117                       
118                     <div class="data_input_item">
119                        <label for="axis"> Select Plotting Axis </label>
120                        ${ h.select('axis', c.selectedAxis, c.axis, onChange='onRefreshClick()')}
121                     </div>
122                     
123                     </py:if>
124                 
125                </fieldset>
126                 
127                 <py:if test="c.selectedAxis != ''">
128                 
129                 <fieldset id="line_selection_controls">
130       
131                    <legend>Line Selection</legend>
132                   
133                    <div id='selection_input_container'>
134                   
135                    <py:for each="axSelect in c.axisSelect.keys()">
136                        <div class="axis_select_item">
137                        <label for="${'sel_' + axSelect}">${axSelect}</label>
138                        ${h.select('sel_' + axSelect, getattr(c, 'sel_' + axSelect), c.axisSelect[axSelect])}
139                        ${c.axisSelectUnits.get(axSelect, '')}
140                        <input class="select_all_button" type="button" value="Select All" onClick="onSelectAll('${'sel_' + axSelect}')" />
141                        </div>
142                        <br />
143                    </py:for>
144                   
145                    </div>               
146                 
147                    <br />
148                    <input type="button" value="Add Selection" onClick="onAddSelectionClick();"></input>         
149                    <br />
150                   
151                    <div>
152                        Selections:
153                        <br />
154                        <ul id="selection_list">
155                            <li class="empty_item"> Empty </li>
156                        </ul>
157                       
158                        <div id="hidden_input_container" style="display:none;"></div>
159                    </div>
160                 
161                 </fieldset>
162                 
163                 </py:if>
164               
165            </form>
166           
167            <div id="page_buttons">
168                <input type="button" value="Remove Selection" onClick=""></input>
169                <input type="button" value="Clear Selections" onClick="onRefreshClick();"></input>
170                <input type="button" value="Plot" onClick="onPlotClick();"></input>
171            </div>
172        </div>
173       
174    </div>
175   
176</body>
177
178</html>
Note: See TracBrowser for help on using the repository browser.