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

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

added additional functions that are found on original page

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        // setup openlayers map
123        var map;// = new OpenLayers.Map("map");
124        init();
125        function init() {
126          map = new OpenLayers.Map('map');
127          var wms = new OpenLayers.Layer.WMS(
128            "OpenLayers WMS",
129            "http://labs.metacarta.com/wms/vmap0",
130            {layers: 'basic'}
131          );
132
133          var w = parseFloat(" {{ geographic_extentW }} ");
134          var s = parseFloat(" {{ geographic_extentS }} ");
135          var e = parseFloat(" {{ geographic_extentE }} ");
136          var n = parseFloat(" {{ geographic_extentN }} ");
137          // if we have no extents or if they are bad create a global box
138          if (isNaN(w) || isNaN(s) || isNaN(e) || isNaN(n)) {
139            w = -180.0;
140            s = -90.0;
141            e = 180.0;
142            n = 90.0;
143          }
144          var box_extents = [ w, s, e, n ];
145
146          var boxes  = new OpenLayers.Layer.Vector( "Boxes" );
147          bounds = OpenLayers.Bounds.fromArray(box_extents);
148          box = new OpenLayers.Feature.Vector(bounds.toGeometry());
149          boxes.addFeatures(box);
150
151          map.addLayers([wms, boxes]);
152          map.addControl(new OpenLayers.Control.LayerSwitcher());
153          var sf = new OpenLayers.Control.SelectFeature(boxes);
154          map.addControl(sf);
155          map.zoomToMaxExtent();
156        }
157      });
158    </script>
159  </head>
160  <body>
161    <div class="container_12">
162      <div class="grid_12">
163        <img style="z-index:-1;position:absolute" src="/static/img/stfcHeader_960.jpg" alt="cedalogo" height="94"/width="940">
164        <img src="/static/img/stfc_ceda_left.jpg" alt="cedalogo" height="94" width="352" />
165      </div>
166      <div class="clear">nbsp;</div>
167      <div class="grid_2">
168        <img src="/static/img/cedaObsLogo.jpg" alt="cedalogo" />
169      </div>
170      <div class="grid_10">
171        <p class="title">
172          <textarea readonly="readonly" width="100%" cols="60" rows="2" style="overflow=y:scroll">
173{{ title }}.{{ author }}.{{ DOI }}
174          </textarea>
175        </p>
176      </div>
177      <div class="clear">nbsp;</div>
178      <div class="grid_3">
179        <p>
180          <img src="/static/img/neodc.jpg" alt="cedalogo" height="90" width="180" />
181        </p>
182          <div align="center">
183          <p>
184            <button id="b_cit" >Citation</button>
185            <br/>
186            <button id="b_citby" >Cited by</button>
187          </p>
188          </div>
189          <div align="center">
190          <p>
191          <button id="b1">sample data</button>
192          <br/>
193          <button id="b_download">download and services</button>
194          <br/>
195          <button id="b3">apply for access</button>
196          <br/>
197          <button id="b_help">help</button>
198          </p>
199          </div>
200      </div>
201      <div class="grid_6">
202        <p>
203          <textarea readonly="readonly" width="100%" cols="60" rows="10" style="overflow=y:scroll">
204Abstract :  {{ abstract }}
205          </textarea>
206        </p>
207        <p>
208          <textarea readonly="readonly" width="100%" cols="60" rows="2" style="overflow=y:scroll">
209latest news
210          </textarea>
211        </p>
212      </div>
213      <div class="grid_3">
214        <p>
215          <b>Status :</b> {{ status }}
216          <br/>
217          <b>Last Update :</b> {{ last_update_year }}-{{ last_update_month }}-{{ last_update_day }}
218        </p>
219       
220        <div id="map" style="width: 230px; height: 150px"></div>
221      <!--
222        <p>
223      -->
224          <div id="accordion1">
225<!--
226          <textarea readonly="readonly" width="100%" cols="26" rows="5" style="overflow=y:scroll">
227-->
228            <h3><a href="#">Phenomenom</a></h3>
229              <div>
230Phenomenon begin : {{ phenomenon_begin_year }}-{{ phenomenon_begin_month }}-{{ phenomenon_begin_day }}
231Phenomenon end : {{ phenomenon_end_year }}-{{ phenomenon_end_month }}-{{ phenomenon_end_day }}
232              </div>
233            <h3><a href="#">Resolution And Extends</a></h3>
234              <div>
235              <textarea readonly="readonly" width="100%" cols="26" rows="7" style="overflow=y:scroll">
236
237Resolution : {{ resolution }}
238Vertical Extent :
239{% for ve in vertical_extent %}
240  {{ ve }}
241{% endfor %}
242Bounding Box
243          N : {{ geographic_extentN }}
244
245W : {{ geographic_extentW }}    E : {{ geographic_extentE }}
246
247          S : {{ geographic_extentS }}
248
249            </textarea>
250            </div>
251          </div>
252<!--
253        </p>
254-->:
255      </div>
256      <div class="grid_9">
257          <div id="tabs">
258            <!-- tabs -->
259            <ul>
260              <li><a href="#tabs-1">Parameters</a></li>
261              <li><a href="#tabs-2">Format</a></li>
262              <li><a href="#tabs-3">Data Quality</a></li>
263              <li><a href="#tabs-4">Data Lineage</a></li>
264              <li><a href="#tabs-5">Related Data</a></li>
265              <li><a href="#tabs-6">Project Details</a></li>
266              <li><a href="#tabs-7">Data Production Details</a></li>
267              <li><a href="#tabs-8">Documentation and links</a></li>
268              <li><a href="#tabs-9">Archive content details</a></li>
269              <li><a href="#tabs-10">Keywords</a></li>
270              <li><a href="#tabs-11">Previous Identifiers Used</a></li>
271            </ul>
272
273            <!-- tab containers -->
274            <div id="tabs-1">
275              <p>
276              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
277Observerd Property : {{ observed_property }}
278Parameters :
279{% for pa in parameters %}
280  {{ pa }}
281{% endfor %}
282              </textarea>
283              </p>
284            </div>
285            <div id="tabs-2">
286              <p>
287              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
288
289              </textarea>
290              </p>
291            </div>
292            <div id="tabs-3">
293              <p>
294              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
295Data quality :
296{% for dq in quality_statement %}
297  {{ dq }}
298{% endfor %}
299              </textarea>
300              </p>
301            </div>
302            <div id="tabs-4">
303              <p>
304              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
305{{ lineage }}
306              </textarea>
307              </p>
308            </div>
309            <div id="tabs-5">
310              <p>
311              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
312Related data :
313{% for rd in related_data %}
314  {{ rd }}
315{% endfor %}
316             </textarea>
317             </p>
318            </div>
319            <div id="tabs-6">
320              <p>
321              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
322Related party :
323{% for pd in project_details %}
324  {{ pd }}
325{% endfor %}
326              </textarea>
327              </p>
328            </div>
329            <div id="tabs-7">
330              <p>
331              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
332Procedure : {{ procedure }}
333              </textarea>
334              </p>
335            </div>
336            <div id="tabs-8">
337              <p>
338              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
339Documentation :
340{% for d in documentation %}
341  {{ d }}
342{% endfor %}
343              </textarea>
344              </p>
345            </div>
346            <div id="tabs-9">
347              <p>
348For further details see the following link: <br/> 
349                <a href="{{ moles2url }}" target="_blank">CEDA MOLES2 Metadata Catalogue Entry</a>
350              </p>
351<!--
352              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
353Number Of Files : {{ archive_no_files }}
354{% for l in archive_linkage %}
355link : {{ l }}
356{% endfor %}
357              </textarea>
358-->
359            </div>
360            <div id="tabs-10">
361            <p>
362Keywords : {{ keywords }}
363            </p>
364            </div>
365            <div id="tabs-11">
366            <p>
367<a href="{{ moles2url }}" target="_blank">{{ moles2url }}</a>
368            </p>
369            </div>
370          </div>
371      </div>
372      <div class="grid_3">
373        <div align="center">
374          <p>
375          <button id="b9">file list and checksums</button>
376          <br/>
377          <button id="b10">XML</button>
378          </p>
379        </div>
380      </div>
381    </div>
382  </body>
383</html>
Note: See TracBrowser for help on using the repository browser.