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

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

added citation and some dialgos

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