source: mauRepo/MolesManager/trunk/src/MolesManager/static/templates/cedaBrowse.html @ 8315

Subversion URL: http://proj.badc.rl.ac.uk/svn/ndg/mauRepo/MolesManager/trunk/src/MolesManager/static/templates/cedaBrowse.html@8315
Revision 8315, 12.8 KB checked in by jhorton, 8 years ago (diff)

added access button dialog

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3  <head>
4    <title>CEDA Browse</title>
5
6    <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery-ui.css" rel="stylesheet" type="text/css"></link>
7    <link rel="stylesheet" type="text/css" href="/static/css/960/reset.css"  />
8<!--
9    <link rel="stylesheet" type="text/css" href="/static/css/960/960_12_col.css"  />
10-->
11    <link rel="stylesheet" type="text/css" href="/static/css/960/960_10.css"  />
12    <link rel="stylesheet" type="text/css" href="/static/css/960/text.css"  />
13    <link rel="stylesheet" type="text/css" href="/static/css/ceda.css"  />
14    <link rel="stylesheet" type="text/css" href="/static/css/cedacat.css"  />
15
16    <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery-ui.css" rel="stylesheet" type="text/css"></link>
17
18    <script src="http://openlayers.org/api/OpenLayers.js"></script>
19<!--
20    <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
21-->
22    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
23    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
24
25    <style>
26      body {
27        background-color: #D0D7E4;
28        line-height: 2.0;
29      }
30      div p {
31        background-color:#fff;
32        margin-top: 0px;
33        margin-bottom: 10px;
34        font:bold 12px arial,sans-serif;
35        line-height: 2.0;
36      }
37      div p textarea {
38        background-color:#fff;
39        font:bold 12px arial,sans-serif;
40        line-height: 2.0;
41      }
42      div p.title textarea {
43        background-color:#fff;
44        font:bold 20px arial,sans-serif;
45        line-height: 2.0;
46      }
47      .container { background-color:#333; }
48      div button {
49        font-size:10px;
50        font-family:Tahoma,sans-serif;
51        font-weight:bold;
52        text-align:left;
53        color:#FFFFFF;
54        width:150px;
55        height:35px;
56        background-color:#2878C0;
57        border-style:default;
58        border-color:#2878C0;
59        border-width:5px;
60      }
61      div p {
62        -webkit-border-top-left-radius: 15px;
63        -webkit-border-top-right-radius: 15px;
64        -webkit-border-bottom-right-radius: 15px;
65        -webkit-border-bottom-left-radius: 15px;
66        -moz-border-radius-topleft: 15px;
67        -moz-border-radius-topright: 15px;
68        -moz-border-radius-bottomright: 15px;
69        -moz-border-radius-bottomleft: 15px;
70        border-top-left-radius: 15px;
71        border-top-right-radius: 15px;
72        border-bottom-right-radius: 15px;
73        border-bottom-left-radius: 15px;
74        border:1px solid #333; padding:10px;
75      }
76    </style>
77
78    <script type="text/javascript" language="javascript">
79      $(document).ready(function() {
80        // setup tabs
81        $( "#tabs" ).tabs();
82        // setup accordian
83        $( "#accordion1" ).accordion();
84        // setup help dialog
85        var $helpdialog = $('<div></div>')
86          .html('For Assistance please contact <a href="mailto: {{ email_contact_addr }}">{{ email_contact_name }}</a>')
87          .dialog({
88            autoOpen: false,
89            show: "blind",
90            hide: "explode",
91            title: 'Help'
92        });       
93        $("#b_help").click(function() {
94          $helpdialog.dialog('open');
95          return false;
96        });
97        // setup citation dialog
98        var $citationdialog = $('<div></div>')
99          .html('{{ citation }}')
100          .dialog({
101            autoOpen: false,
102            show: "blind",
103            hide: "explode",
104            title: 'citation'
105        });
106        $("#b_cit").click(function() {
107          $citationdialog.dialog('open');
108          return false;
109        });
110        var $downloaddialog = $('<div></div>')
111          .html('{{ download_name }} <a href="{{ download_link }}" target="_blank">download</a>')
112          .dialog({
113            autoOpen: false,
114            show: "blind",
115            hide: "explode",
116            title: 'download'
117        });
118        $("#b_download").click(function() {
119          $downloaddialog.dialog('open');
120          return false;
121        });
122        var $accessdialog = $('<div></div>')
123          .html('{{ permission }}')
124          .dialog({
125            autoOpen: false,
126            show: "blind",
127            hide: "explode",
128            title: 'access'
129        });
130        $("#b_access").click(function() {
131          $accessdialog.dialog('open');
132          return false;
133        });
134        // setup openlayers map
135        var map;// = new OpenLayers.Map("map");
136        init();
137        function init() {
138          map = new OpenLayers.Map('map');
139          var wms = new OpenLayers.Layer.WMS(
140            "OpenLayers WMS",
141            "http://labs.metacarta.com/wms/vmap0",
142            {layers: 'basic'}
143          );
144
145          var w = parseFloat(" {{ geographic_extentW }} ");
146          var s = parseFloat(" {{ geographic_extentS }} ");
147          var e = parseFloat(" {{ geographic_extentE }} ");
148          var n = parseFloat(" {{ geographic_extentN }} ");
149          // if we have no extents or if they are bad create a global box
150          if (isNaN(w) || isNaN(s) || isNaN(e) || isNaN(n)) {
151            w = -180.0;
152            s = -90.0;
153            e = 180.0;
154            n = 90.0;
155          }
156          var box_extents = [ w, s, e, n ];
157
158          var boxes  = new OpenLayers.Layer.Vector( "Boxes" );
159          bounds = OpenLayers.Bounds.fromArray(box_extents);
160          box = new OpenLayers.Feature.Vector(bounds.toGeometry());
161          boxes.addFeatures(box);
162
163          map.addLayers([wms, boxes]);
164          map.addControl(new OpenLayers.Control.LayerSwitcher());
165          var sf = new OpenLayers.Control.SelectFeature(boxes);
166          map.addControl(sf);
167          map.zoomToMaxExtent();
168        }
169      });
170    </script>
171  </head>
172  <body>
173    <div class="container_12">
174      <div class="grid_12">
175        <img style="z-index:-1;position:absolute" src="/static/img/stfcHeader_960.jpg" alt="cedalogo" height="94"/width="940">
176        <img src="/static/img/stfc_ceda_left.jpg" alt="cedalogo" height="94" width="352" />
177      </div>
178      <div class="clear">nbsp;</div>
179      <div class="grid_2">
180        <img src="/static/img/cedaObsLogo.jpg" alt="cedalogo" />
181      </div>
182      <div class="grid_10">
183        <p class="title">
184          <textarea readonly="readonly" width="100%" cols="60" rows="2" style="overflow=y:scroll">
185{{ title }}.{{ author }}.{{ DOI }}
186          </textarea>
187        </p>
188      </div>
189      <div class="clear">nbsp;</div>
190      <div class="grid_3">
191        <p>
192          <img src="/static/img/neodc.jpg" alt="cedalogo" height="90" width="180" />
193        </p>
194          <div align="center">
195          <p>
196            <button id="b_cit" >Citation</button>
197            <br/>
198            <button id="b_citby" >Cited by</button>
199          </p>
200          </div>
201          <div align="center">
202          <p>
203          <button id="b1">sample data</button>
204          <br/>
205          <button id="b_download">download and services</button>
206          <br/>
207          <button id="b_access">apply for access</button>
208          <br/>
209          <button id="b_help">help</button>
210          </p>
211          </div>
212      </div>
213      <div class="grid_6">
214        <p>
215          <textarea readonly="readonly" width="100%" cols="60" rows="10" style="overflow=y:scroll">
216Abstract :  {{ abstract }}
217          </textarea>
218        </p>
219        <p>
220          <textarea readonly="readonly" width="100%" cols="60" rows="2" style="overflow=y:scroll">
221latest news
222          </textarea>
223        </p>
224      </div>
225      <div class="grid_3">
226        <p>
227          <b>Status :</b> {{ status }}
228          <br/>
229          <b>Last Update :</b> {{ last_update_year }}-{{ last_update_month }}-{{ last_update_day }}
230        </p>
231       
232        <div id="map" style="width: 230px; height: 150px"></div>
233      <!--
234        <p>
235      -->
236          <div id="accordion1">
237<!--
238          <textarea readonly="readonly" width="100%" cols="26" rows="5" style="overflow=y:scroll">
239-->
240            <h3><a href="#">Phenomenom</a></h3>
241              <div>
242Phenomenon begin : {{ phenomenon_begin_year }}-{{ phenomenon_begin_month }}-{{ phenomenon_begin_day }}
243Phenomenon end : {{ phenomenon_end_year }}-{{ phenomenon_end_month }}-{{ phenomenon_end_day }}
244              </div>
245            <h3><a href="#">Resolution And Extends</a></h3>
246              <div>
247              <textarea readonly="readonly" width="100%" cols="26" rows="7" style="overflow=y:scroll">
248
249Resolution : {{ resolution }}
250Vertical Extent :
251{% for ve in vertical_extent %}
252  {{ ve }}
253{% endfor %}
254Bounding Box
255          N : {{ geographic_extentN }}
256
257W : {{ geographic_extentW }}    E : {{ geographic_extentE }}
258
259          S : {{ geographic_extentS }}
260
261            </textarea>
262            </div>
263          </div>
264<!--
265        </p>
266-->:
267      </div>
268      <div class="grid_9">
269          <div id="tabs">
270            <!-- tabs -->
271            <ul>
272              <li><a href="#tabs-1">Parameters</a></li>
273              <li><a href="#tabs-2">Format</a></li>
274              <li><a href="#tabs-3">Data Quality</a></li>
275              <li><a href="#tabs-4">Data Lineage</a></li>
276              <li><a href="#tabs-5">Related Data</a></li>
277              <li><a href="#tabs-6">Project Details</a></li>
278              <li><a href="#tabs-7">Data Production Details</a></li>
279              <li><a href="#tabs-8">Documentation and links</a></li>
280              <li><a href="#tabs-9">Archive content details</a></li>
281              <li><a href="#tabs-10">Keywords</a></li>
282              <li><a href="#tabs-11">Previous Identifiers Used</a></li>
283            </ul>
284
285            <!-- tab containers -->
286            <div id="tabs-1">
287              <p>
288              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
289Observerd Property : {{ observed_property }}
290Parameters :
291{% for pa in parameters %}
292  {{ pa }}
293{% endfor %}
294              </textarea>
295              </p>
296            </div>
297            <div id="tabs-2">
298              <p>
299              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
300
301              </textarea>
302              </p>
303            </div>
304            <div id="tabs-3">
305              <p>
306              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
307Data quality :
308{% for dq in quality_statement %}
309  {{ dq }}
310{% endfor %}
311              </textarea>
312              </p>
313            </div>
314            <div id="tabs-4">
315              <p>
316              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
317{{ lineage }}
318              </textarea>
319              </p>
320            </div>
321            <div id="tabs-5">
322              <p>
323              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
324Related data :
325{% for rd in related_data %}
326  {{ rd }}
327{% endfor %}
328             </textarea>
329             </p>
330            </div>
331            <div id="tabs-6">
332              <p>
333              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
334Related party :
335{% for pd in project_details %}
336  {{ pd }}
337{% endfor %}
338              </textarea>
339              </p>
340            </div>
341            <div id="tabs-7">
342              <p>
343              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
344Procedure : {{ procedure }}
345              </textarea>
346              </p>
347            </div>
348            <div id="tabs-8">
349              <p>
350              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
351Documentation :
352{% for d in documentation %}
353  {{ d }}
354{% endfor %}
355              </textarea>
356              </p>
357            </div>
358            <div id="tabs-9">
359              <p>
360For further details see the following link: <br/> 
361                <a href="{{ moles2url }}" target="_blank">CEDA MOLES2 Metadata Catalogue Entry</a>
362              </p>
363<!--
364              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
365Number Of Files : {{ archive_no_files }}
366{% for l in archive_linkage %}
367link : {{ l }}
368{% endfor %}
369              </textarea>
370-->
371            </div>
372            <div id="tabs-10">
373            <p>
374Keywords : {{ keywords }}
375            </p>
376            </div>
377            <div id="tabs-11">
378            <p>
379<a href="{{ moles2url }}" target="_blank">{{ moles2url }}</a>
380            </p>
381            </div>
382          </div>
383      </div>
384      <div class="grid_3">
385        <div align="center">
386          <p>
387          <button id="b9">file list and checksums</button>
388          <br/>
389          <button id="b10">XML</button>
390          </p>
391        </div>
392      </div>
393    </div>
394  </body>
395</html>
Note: See TracBrowser for help on using the repository browser.