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

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

Added the YUI 2.7.0 library to the repository.

Added a combobox to the wcs download page that displays some pre-entered wcs url's.

Also improved the LegendContainer? so that it now uses the url provided in the capabilities response.

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 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>
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
88
89<link rel="stylesheet" type="text/css" href="$g.server/layout/wcdown.css" />
90
91
92<script src="$g.server/js/json2.js"></script>
93<script src="$g.server/js/splitSelect.js"></script>
94<script src="$g.server/js/wmsc.js"></script>
95<script src="$g.server/js/utils.js"></script>
96
97
98
99
100<script type="text/javascript">
101
102var downloadAction ="$g.server/wcsdown/download";
103var refreshAction = "$g.server/wcsdown";
104
105<py:if test="c.layer != None">
106    var timedata = JSON.parse("${c.timedata}");
107</py:if>
108
109var defaultEndpoints = JSON.parse("${c.defaultWCSEndpoints}");
110
111WMSC.log("defaultEndpoints = " + defaultEndpoints);
112
113function init() {
114
115    <py:if test="c.layer != None">
116        var startTime = new SplitSelect('time_container', 'time', timedata, 'Start Time:');
117        startTime.build();
118   
119        var endTime = new SplitSelect('time_end_container', 'time_end', timedata, 'End Time:');
120        endTime.build();
121       
122        setSingleTime('${c.singleTimePoint}' == 'true');
123    </py:if>
124
125
126    // build endpoint autocomplete
127    makeCombobox("endpoint", "endpoint_toggle", "endpoint_options", defaultEndpoints, onEndpointChange);
128}
129
130function cleanup() {
131   
132}
133
134function onDownloadClick() {
135    var form = document.getElementById('download_form');
136    form.action = downloadAction;
137    form.target = '_blank';
138    form.submit();
139}
140
141function onRefreshClick() {
142    refresh();
143}
144
145function onEndpointChange() {
146    WMSC.log("Endpoint changed");
147    selectLayerValue("");
148    refresh();
149}
150
151function selectLayerValue(value){
152   
153    var layerSelect = document.getElementById('layer');
154   
155    for (var i=0; i&lt;layerSelect.length; i++) {
156        if (layerSelect.options[i].text == value) {
157            layerSelect.options[i].selected = true;
158            break;
159        }
160    }
161}
162
163function onLayerChange() {
164    refresh();
165}
166
167function setSingleTime(value) {
168    var timeEndContainer = document.getElementById('time_end_container');
169    var singleTimeCB = document.getElementById('single_time');
170    var startTimeLabel = document.getElementById('time_label');
171   
172    if (value) {
173        timeEndContainer.style.display = "none";
174        startTimeLabel.innerHTML = "Time:"
175    }
176    else {
177        timeEndContainer.style.display = "block";
178        startTimeLabel.innerHTML = "Start Time:"
179    }
180   
181    singleTimeCB.checked = value
182}
183
184function refresh() {
185    var form = document.getElementById('download_form');
186    form.action = refreshAction;
187    form.target = '';
188    form.submit();
189}
190
191</script>
192
193</head>
194
195<body onload="init()" onunload="cleanup()" class="yui-skin-sam">
196    <h1>test</h1>
197   
198   
199    <span>
200        <py:replace value="c.message">Message placeholder</py:replace>
201    </span>
202   
203    <div id="download_form_container">
204        <form id="download_form" method="get" > 
205   
206            <!-- ${makeTextInput('endpoint', label='Endpoint:', default=c.endpoint, onChange='onEndpointChange();')} -->
207           
208            <!--
209            <div id="lunch_autocomplete">
210                <input id="lInput" type="text"></input> <span id="toggleL"></span>
211                <div id="lContainer"></div>
212            </div>
213             -->
214   
215            <div id="endpoint_container">
216                <label for="endpoint">Endpoint:</label>
217                <div id="endpoint_autocomplete" style="display:inline;">
218                    <input id="endpoint" name="endpoint" type="text" value="${c.endpoint}"></input> <span id="endpoint_toggle"></span>
219                    <div id="endpoint_options"></div>
220                </div >
221            </div>
222           
223           
224            ${makeSelectInput('layer', c.layers, label='Layer:', default=c.layer, onChange='onLayerChange();')}
225           
226            <py:if test="c.layer != None">
227           
228                ${makeSelectInput('format', c.supportedFormats, label='Format:')}
229               
230                ${makeSelectInput('crs', c.supportedCRS, label='CRS:', default=c.crs)}
231               
232                ${makeTextInput('bbox', label='Bounding Box:', default=c.bboxLimits )}
233               
234                <h4>Dimensions</h4>
235               
236                <div>
237                    <label for="single_time">Single Time Point:</label>
238                    <input type="checkbox" id="single_time" name="single_time" value='true' onClick="setSingleTime(this.checked);"></input>
239                </div>
240               
241                <div id="time_container"> </div>
242                <div id="time_end_container"> </div>
243               
244            </py:if>
245           
246            <input type="button" value="Download" onClick="onDownloadClick();"></input>
247           
248            <input type="button" value="Refresh" onClick="onRefreshClick();"></input>
249   
250        </form>
251    </div>
252   
253
254</body>
255</html>
Note: See TracBrowser for help on using the repository browser.