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

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

Implemented the endpoint auto complete on the wmsvis page.

To do this I also migrated the YUI controls to version 2.70. I haven't removed the old YUI js code as more testing is needed.

The only YUI part not migrated is the treeview css as the images have changed in this version.

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