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

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

Made some improvements to the wcsdown page and fixed a couple of layout issues.

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       
244    </div>
245   
246
247
248   
249
250</body>
251</html>
Note: See TracBrowser for help on using the repository browser.