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

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

Fixed the wcsdownload bounding box selection map so that it works with the new bounds control.

Also modified the templates to look for a custom config file value to set the Openlayers.js path, otherwise the compressed one will be used. Hopefully this will stop me committing the code with the wrong path.

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