source: cowsclient/trunk/cowsclient/templates/wcsdown.html @ 5759

Subversion URL: http://proj.badc.rl.ac.uk/svn/ndg/cowsclient/trunk/cowsclient/templates/wcsdown.html@5759
Revision 5759, 9.2 KB checked in by pnorton, 11 years ago (diff)

Added a openlayers map to select the bounding box. Also fixed a few smaller bugs + changed the layout a bit.

Line 
1<html xmlns:py="http://genshi.edgewall.org/" 
2      xmlns="http://www.w3.org/1999/xhtml"
3      xmlns:xi="http://www.w3.org/2001/XInclude">   
4
5
6<?python
7def setAtt(dict, name, value):
8    if value != None:
9        dict[name] = value
10   
11?>
12
13<py:def function="makeSelect(name, options, id=None, descriptions=None, default=None, onChange=None)">
14    <?python
15        atts = {"name":name}
16        setAtt(atts,'id', id)
17        setAtt(atts,'onChange', onChange)
18
19        if descriptions == None:
20            descriptions = options
21    ?>
22   
23    <select py:attrs="atts">
24        <py:for each="i in range(len(options))">
25            <?python
26            optAtts = {"value":options[i]}
27            if default != None and default == options[i]:
28                optAtts["selected"] = "selected"
29            ?>
30       
31            <option py:attrs="optAtts">${descriptions[i]}</option>
32        </py:for>
33    </select>
34   
35</py:def>
36
37<py:def function="makeSelectInput(name, options, descriptions=None, label=None, default=None, onChange=None)">
38    <?python
39        if label == None:
40            label = name
41
42        labelAtts = {'for':name, 'id':name+'_label'}
43        divAtts = {'id':name+'_container'}
44    ?>
45   
46    <div class="input_item" py:attrs="divAtts">
47        <label py:attrs="labelAtts">${label}</label>
48        ${makeSelect(name, options, id=name, descriptions=descriptions, default=default, onChange=onChange)}
49    </div>
50</py:def>
51
52<py:def function="makeTextInput(name, label=None, default=None, onChange=None)">
53    <?python
54        atts = {'type':'text', 'name':name, 'id':name}
55        setAtt(atts, 'value', default)
56        setAtt(atts, 'onChange', onChange)
57
58        if label == None:
59            label = name
60    ?>
61    <div class="input_item">
62        <label for="${name}">${label}</label>
63        <input py:attrs="atts" ></input>
64    </div>
65</py:def>
66
67<head>
68
69
70<!-- YUI imports for autocomplete -->
71
72<link rel="stylesheet" type="text/css" href="$g.server/js/yui_2.7.0b/fonts/fonts.css" />
73<link rel="stylesheet" type="text/css" href="$g.server/js/yui_2.7.0b/button/assets/skins/sam/button.css" />
74<link rel="stylesheet" type="text/css" href="$g.server/js/yui_2.7.0b/autocomplete/assets/skins/sam/autocomplete.css" />
75
76<script type="text/javascript" src="$g.server/js/yui_2.7.0b/yahoo-dom-event/yahoo-dom-event.js"></script>
77<script type="text/javascript" src="$g.server/js/yui_2.7.0b/animation/animation.js"></script>
78<script type="text/javascript" src="$g.server/js/yui_2.7.0b/element/element.js"></script>
79<script type="text/javascript" src="$g.server/js/yui_2.7.0b/button/button.js"></script>
80<script type="text/javascript" src="$g.server/js/yui_2.7.0b/datasource/datasource.js"></script>
81<script type="text/javascript" src="$g.server/js/yui_2.7.0b/autocomplete/autocomplete.js"></script>
82<script type="text/javascript" src="$g.server/js/yui_2.7.0b/event/event.js"></script>
83
84<!--script type="text/javascript" src="$g.server/js/yui/build/datasource/datasource.js"></script-->
85<!-- End of autocomplete imports -->
86
87<script type="text/javascript" src="$g.server/js/openlayers/lib/OpenLayers.js" />
88<script type="text/javascript" src="$g.server/js/openlayers-x.js" />
89
90<link rel="stylesheet" type="text/css" href="$g.server/layout/wcdown.css" />
91<link rel="stylesheet" type="text/css" href="$g.server/layout/yui_autocomplete.css" />
92
93
94<script src="$g.server/js/wmsc.js"></script>
95<script src="$g.server/js/boundingBoxMapSelect.js"></script>
96<script src="$g.server/js/boundsControl.js"></script>
97<script src="$g.server/js/json2.js"></script>
98<script src="$g.server/js/splitSelect.js"></script>
99<script src="$g.server/js/utils.js"></script>
100
101
102
103
104<script type="text/javascript">
105
106var downloadAction ="$g.server/wcsdown/download";
107var refreshAction = "$g.server/wcsdown";
108
109<py:if test="c.layer != None">
110    var timedata = JSON.parse("${c.timedata}");
111</py:if>
112
113var defaultEndpoints = JSON.parse("${c.defaultWCSEndpoints}");
114
115WMSC.log("defaultEndpoints = " + defaultEndpoints);
116
117function init() {
118
119    var baseLayerJSON = "${c.baseLayerJSON}";
120    var baseLayerData = JSON.parse(baseLayerJSON);
121   
122    <py:if test="c.layer != None">
123        var startTime = new SplitSelect('time_container', 'time', timedata, 'Start Time:');
124        startTime.build();
125   
126        var endTime = new SplitSelect('time_end_container', 'time_end', timedata, 'End Time:');
127        endTime.build();
128       
129        setSingleTime('${c.singleTimePoint}' == 'true');
130    </py:if>
131
132
133    // build endpoint autocomplete
134    Utils.makeCombobox("endpoint", "endpoint_toggle", "endpoint_options", defaultEndpoints, onEndpointChange);
135
136
137    var bboxSelect = new BoundingBoxMapSelect('map', 'bounds_control_container', baseLayerData.url, baseLayerData.params,  'bbox_hidden_input', null);
138   
139   
140}
141
142function cleanup() {
143   
144}
145
146function onDownloadClick() {
147    var form = document.getElementById('download_form');
148    form.action = downloadAction;
149    form.target = '_blank';
150    form.submit();
151}
152
153function onRefreshClick() {
154    refresh();
155}
156
157function onEndpointChange() {
158    WMSC.log("Endpoint changed");
159    selectLayerValue("");
160    refresh();
161}
162
163function selectLayerValue(value){
164   
165    var layerSelect = document.getElementById('layer');
166   
167    for (var i=0; i&lt;layerSelect.length; i++) {
168        if (layerSelect.options[i].text == value) {
169            layerSelect.options[i].selected = true;
170            break;
171        }
172    }
173}
174
175function onLayerChange() {
176    refresh();
177}
178
179function setSingleTime(value) {
180    var timeEndContainer = document.getElementById('time_end_container');
181    var singleTimeCB = document.getElementById('single_time');
182    var startTimeLabel = document.getElementById('time_label');
183   
184    if (value) {
185        timeEndContainer.style.display = "none";
186        startTimeLabel.innerHTML = "Time :"
187    }
188    else {
189        timeEndContainer.style.display = "block";
190        startTimeLabel.innerHTML = "Start Time :"
191    }
192   
193    singleTimeCB.checked = value
194}
195
196function refresh() {
197    var form = document.getElementById('download_form');
198    form.action = refreshAction;
199    form.target = '';
200    form.submit();
201}
202
203</script>
204
205</head>
206
207<body onload="init()" onunload="cleanup()" class="yui-skin-sam">
208       
209    <span>
210        <py:replace value="c.message">Message placeholder</py:replace>
211    </span>
212   
213   
214    <div id="page_content">
215   
216        <h1 id="page_title">WCS Download</h1>
217   
218        <div id="download_form_container">
219            <form id="download_form" method="get" > 
220                   
221                <div id="data_container">
222                    <h4>Data Selection</h4>
223                   
224                    <div id="endpoint_container" class="input_item">
225                        <label for="endpoint">Endpoint :</label>
226                        <div id="endpoint_autocomplete" style="display:inline;">
227                            <input id="endpoint" name="endpoint" type="text" value="${c.endpoint}"></input> <span id="endpoint_toggle"></span>
228                            <div id="endpoint_options"></div>
229                        </div >
230                    </div>
231                   
232                   
233                    ${makeSelectInput('layer', c.layers, label='Layer :', default=c.layer, onChange='onLayerChange();')}
234                   
235                    <py:if test="c.layer != None">
236                   
237                        ${makeSelectInput('format', c.supportedFormats, label='Format :')}
238                       
239                        ${makeSelectInput('crs', c.supportedCRS, label='CRS :', default=c.crs)}
240                    </py:if>
241               
242                </div>
243               
244                <py:if test="c.layer != None">
245               
246   
247                    <div id="bounding_container">
248                        <h4>Bounding Box</h4>   
249                        <div id="bounds_control_container"></div>
250                       
251                        <div id="map_container">
252                            <div id='map'></div>
253                        </div>   
254                           
255                        <input type="hidden" id="bbox_hidden_input" name="bbox" value=''></input>
256   
257                    </div>
258   
259               
260                   
261                   
262                    <div id="dimensions_container">
263                        <h4>Dimensions</h4>
264                       
265                        <div class="input_item">
266                            <label for="single_time">Single Time Point :</label>
267                            <input type="checkbox" id="single_time" name="single_time" value='true' onClick="setSingleTime(this.checked);"></input>
268                        </div>
269                       
270                        <div id="time_container" class="input_item"> </div>
271                        <div id="time_end_container" class="input_item"> </div>
272                    </div>
273                   
274                </py:if>
275               
276               
277                <div id="form_control_buttons">
278                    <input type="button" value="Download" onClick="onDownloadClick();"></input>
279               
280                    <input type="button" value="Refresh" onClick="onRefreshClick();"></input>
281                   
282                    <br class="clear" />
283                </div>
284       
285            </form>
286        </div>
287       
288    </div>
289   
290
291
292   
293
294</body>
295</html>
Note: See TracBrowser for help on using the repository browser.