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

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

Added some code that, when the time strings are of the correct format will split them up into different select boxes.

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<script src="$g.server/js/json2.js"></script>
70<script src="$g.server/js/splitSelect.js"></script>
71<script src="$g.server/js/wmsc.js"></script>
72<script src="$g.server/js/utils.js"></script>
73
74<script type="text/javascript">
75
76downloadAction ="$g.server/wcsdown/download";
77refreshAction = "$g.server/wcsdown";
78
79timedata = JSON.parse("${c.timedata}");
80
81function init() {
82
83    var startTime = new SplitSelect('time_container', 'time', timedata, 'Start Time:');
84    startTime.build();
85
86    var endTime = new SplitSelect('time_end_container', 'time_end', timedata, 'End Time:');
87    endTime.build();
88   
89    setSingleTime('${c.singleTimePoint}' == 'true');
90}
91
92function cleanup() {
93   
94}
95
96function onDownloadClick() {
97    var form = document.getElementById('download_form');
98    form.action = downloadAction;
99    form.target = '_blank';
100    form.submit();
101}
102
103function onRefreshClick() {
104    refresh();
105}
106
107function onEndpointChange() {
108    selectLayerValue("");
109    refresh();
110}
111
112function selectLayerValue(value){
113   
114    var layerSelect = document.getElementById('layer');
115   
116    for (var i=0; i&lt;layerSelect.length; i++) {
117        if (layerSelect.options[i].text == value) {
118            layerSelect.options[i].selected = true;
119            break;
120        }
121    }
122}
123
124function onLayerChange() {
125    refresh();
126}
127
128function setSingleTime(value) {
129    var timeEndContainer = document.getElementById('time_end_container');
130    var singleTimeCB = document.getElementById('single_time');
131    var startTimeLabel = document.getElementById('time_label');
132   
133    if (value) {
134        timeEndContainer.style.display = "none";
135        startTimeLabel.innerHTML = "Time:"
136    }
137    else {
138        timeEndContainer.style.display = "block";
139        startTimeLabel.innerHTML = "Start Time:"
140    }
141   
142    singleTimeCB.checked = value
143}
144
145function refresh() {
146    var form = document.getElementById('download_form');
147    form.action = refreshAction;
148    form.target = '';
149    form.submit();
150}
151
152</script>
153
154</head>
155
156<body onload="init()" onunload="cleanup()">
157    <h1>test</h1>
158   
159    <span>
160        <py:replace value="c.message">Message placeholder</py:replace>
161    </span>
162   
163    <form id="download_form" method="get" > 
164
165        ${makeTextInput('endpoint', label='Endpoint:', default=c.endpoint, onChange='onEndpointChange();')}
166       
167        ${makeSelectInput('layer', c.layers, label='Layer:', default=c.layer, onChange='onLayerChange();')}
168       
169        <py:if test="c.layer != None">
170       
171            ${makeSelectInput('format', c.supportedFormats, label='Format:')}
172           
173            ${makeSelectInput('crs', c.supportedCRS, label='CRS:', default=c.crs)}
174           
175            ${makeTextInput('bbox', label='Bounding Box:', default=c.bboxLimits )}
176           
177            <h4>Dimensions</h4>
178           
179            <div>
180                <label for="single_time">Single Time Point:</label>
181                <input type="checkbox" id="single_time" name="single_time" value='true' onClick="setSingleTime(this.checked);"></input>
182            </div>
183           
184            <div id="time_container"> </div>
185            <div id="time_end_container"> </div>
186           
187        </py:if>
188       
189        <input type="button" value="Download" onClick="onDownloadClick();"></input>
190       
191        <input type="button" value="Refresh" onClick="onRefreshClick();"></input>
192
193    </form>
194   
195
196</body>
197</html>
Note: See TracBrowser for help on using the repository browser.