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

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

Improved the refreshing of the bounds on the wcsdown page, the red selection border should no longer appear when the whole screen is selected. Also modified the wcs download button on the wmsviz page to disable itself when there is no layer selected.

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