Strabon

view endpoint/WebContent/query.jsp @ 1204:d928a2a245f5

changed the position of crs in geometry of map bounds displayed at strabon endpoint
author Kallirroi Dogani <kallirroi@di.uoa.gr>
date Sun Jul 14 00:34:25 2013 +0300 (2013-07-14)
parents 10481075e1ee
children ec53edfb1632
line source
1 <%@page import="java.net.URLEncoder"%>
2 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
3 <%@page import="org.springframework.web.context.support.WebApplicationContextUtils"%>
4 <%@page import="org.springframework.web.context.WebApplicationContext"%>
5 <%@page import="eu.earthobservatory.org.StrabonEndpoint.StrabonBeanWrapper"%>
6 <%@page import="eu.earthobservatory.org.StrabonEndpoint.StrabonBeanWrapperConfiguration"%>
7 <%@page import="java.util.List"%>
8 <%@page import="java.util.ArrayList"%>
9 <%@page import="java.util.Iterator"%>
10 <%@page import="org.openrdf.query.TupleQueryResult"%>
11 <%@page import="org.openrdf.query.BindingSet"%>
12 <jsp:directive.page import="eu.earthobservatory.org.StrabonEndpoint.Common"/>
13 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
14 <html>
15 <head>
16 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
17 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
18 <script type="text/javascript" src="js/more_link.js"></script>
19 <link rel="stylesheet" href="style.css" type="text/css" />
20 <script type="text/javascript">
21 function toggleMe(a) {
22 var e = document.getElementById(a);
23 if (!e) {
24 return true;
25 }
26 if (e.style.display == "none") {
27 e.style.display = "block";
28 } else {
29 e.style.display = "none";
30 }
31 return true;
32 }
33 </script>
34 <script>
35 $(document).ready(function() {
36 var showChar = 100;
37 var ellipsestext = "...";
38 var moretext = "more";
39 var lesstext = "less";
40 $('.more').each(function() {
41 var content = $(this).html();
43 if(content.length > showChar) {
45 var c = content.substr(0, showChar);
46 var h = content.substr(showChar-1, content.length - showChar);
48 var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">'+moretext+'</a></span>';
50 $(this).html(html);
51 }
53 });
55 $(".morelink").click(function(){
56 if($(this).hasClass("less")) {
57 $(this).removeClass("less");
58 $(this).html(moretext);
59 } else {
60 $(this).addClass("less");
61 $(this).html(lesstext);
62 }
63 $(this).parent().prev().toggle();
64 $(this).prev().toggle();
65 return false;
66 });
67 });
68 </script>
69 <%
70 // get the reference to StrabonBeanWrapper
71 StrabonBeanWrapper strabonWrapper;
72 //String arr = new String[2];
73 int i;
74 ArrayList<String> arr = new ArrayList<String>(2);
75 String gChartString=null;
76 ServletContext context;
77 context = getServletContext();
78 WebApplicationContext applicationContext = WebApplicationContextUtils.getWebApplicationContext(context);
79 strabonWrapper=(StrabonBeanWrapper) applicationContext.getBean("strabonBean");
81 // get query parameter or attribute (the attribute comes from ConnectionBean)
82 String query = strabonWrapper.getPrefixes();
83 if (request.getParameter("query") != null) {
84 query = request.getParameter("query");
86 } else if (request.getAttribute("query") != null) {
87 query = (String) request.getAttribute("query");
89 }
91 if ("null".equals(query)) {
92 query = "";
93 }
95 // get format parameter or attribute (the attribute comes from ConnectionBean)
96 String selFormat = "HTML";
97 if (request.getParameter("format") != null) {
98 selFormat = request.getParameter("format");
100 } else if (request.getAttribute("format") != null) {
101 selFormat = (String) request.getAttribute("format");
103 }
105 // get handle parameter or attribute (the attribute comes from ConnectionBean)
106 String handle = "";
107 if (request.getParameter("handle") != null) {
108 handle = request.getParameter("handle");
110 } else if (request.getAttribute("handle") != null) {
111 handle = (String) request.getAttribute("handle");
113 }
115 if (request.getAttribute("pathToKML") != null) {
116 if ("map_local".equals(request.getAttribute("handle"))) {
117 %>
118 <script type="text/javascript" src="js/geoxml3-kmz.js"></script>
119 <script type="text/javascript" src="js/ProjectedOverlay.js"></script>
120 <%
121 }
122 %>
123 <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
124 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
125 <script type="text/javascript">
127 //listener for the event 'bounds_changed'
128 function addListener(map){
130 google.maps.event.addListener(map, 'bounds_changed', function() {
131 // get the new bounds
132 var bounds = map.getBounds();
133 var northEast = bounds.getNorthEast();
134 var southWest = bounds.getSouthWest();
136 var x1 = northEast.lng().toFixed(2);
137 var y1 = northEast.lat().toFixed(2);
139 var x2 = southWest.lng().toFixed(2);
140 var y2 = southWest.lat().toFixed(2);
142 var polygon = "\"<http\://www.opengis.net/def/crs/EPSG/0/4326\> POLYGON((" +
143 x1 + " " + y2 + ", " +
144 x2 + " " + y2 + ", " +
145 x2 + " " + y1 + ", " +
146 x1 + " " + y1 + ", " +
147 x1 + " " + y2 + "))\"" +
148 "^^<http\://www.opengis.net/ont/geosparql#wktLiteral>";
150 document.getElementById('bounds').value=polygon;
152 });
153 }
155 function initialize() {
156 var myOptions = {
157 zoom: 11,
158 mapTypeId: google.maps.MapTypeId.ROADMAP
159 };
161 // get KML filename
162 var kml = '<%=request.getAttribute("pathToKML")%>';
164 // create map
165 var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
166 <% if (request.getAttribute("pathToKML") == null) {%>
167 // center at Brahames
168 map.setCenter(new google.maps.LatLng(37.92253, 23.72275));
169 <%}%>
171 addListener(map);
174 <%if ("map_local".equals(request.getAttribute("handle"))) {%>
175 // display using geoxml3
176 var myParser = new geoXML3.parser({map: map});
177 myParser.parse(kml);
178 <%} else {%>
179 var ctaLayer = new google.maps.KmlLayer(kml);
180 ctaLayer.setMap(map);
181 <%}%>
183 <%if ("map".equals(request.getAttribute("handle")) || "map_local".equals(request.getAttribute("handle"))) {%>
184 $('html, body').animate({
185 scrollTop: $("#divResultsStart").offset().top
186 }, 1500);
188 <%}%>
191 }
192 </script>
193 <% } else { %>
194 <script type="text/javascript">
195 function initialize() {
196 <%
197 if (query != "" || selFormat != "" || handle != "") {
198 %>
199 $('html, body').animate({
200 scrollTop: $("#divResultsStart").offset().top
201 }, 1000);
202 <%}%>
203 }
204 </script>
205 <%}%>
207 <!-- jQuery start -->
208 <link type="text/css" href="style-menu.css" rel="stylesheet" />
209 <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
210 <script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
211 <script type="text/javascript">
212 $(function(){
213 // Accordion
214 $("#accordion").accordion({
215 header: "h3",
216 fillSpace: true,
217 navigation: true,
218 collapsible: true
219 });
220 //hover states on the static widgets
221 $('#dialog_link, ul#icons li').hover(
222 function() { $(this).addClass('ui-state-hover'); },
223 function() { $(this).removeClass('ui-state-hover'); }
224 );
225 });
226 </script>
227 <style type="text/css">
228 /*demo page css*/
229 body{ font: 90% "Trebuchet MS", sans-serif; margin: 50px;}
230 .container { height:410px; width:165px;}
231 .demoHeaders { margin-top: 1em;}
232 #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
233 #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
234 ul#icons {margin: 0; padding: 0;}
235 ul#icons li {margin: 1px; position: relative; padding: 1px 0; cursor: pointer; float: left; list-style: none;}
236 ul#icons span.ui-icon {float: left; margin: 0 1px;}
237 </style>
238 <!-- jQuery end -->
240 <title>TELEIOS: Strabon Endpoint</title>
241 <!--Load the AJAX API-->
242 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
243 <script type="text/javascript">
245 // Load the Visualization API and the piechart package.
246 google.load('visualization', '1.0', {'packages':['corechart']});
248 google.setOnLoadCallback(drawChart);
250 // Set a callback to run when the Google Visualization API is loaded.
253 // Callback that creates and populates a data table,
254 // instantiates the pie chart, passes in the data and
255 // draws it.
259 function drawChart() {
261 // Create the data table.
262 var data = new google.visualization.DataTable();
263 <% if (request.getParameter("format")!=null && request.getAttribute("response") != null) {
264 if (request.getParameter("format").equals("CHART")) {
265 out.println(request.getAttribute("response"));
266 %>
268 var options = {'title':'Displaying results in chart','width':1000, 'height':1000};
271 var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
272 chart.draw(data, options);
274 <%}}%>
275 }
276 </script>
277 </head>
278 <body topmargin="0" leftmargin="0" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF" onload="initialize()">
280 <!-- include TELEIOS header and description -->
281 <%@ include file="teleios-header.html"%>
282 <!-- include TELEIOS header and description -->
284 <FORM enctype="UTF-8" accept-charset="UTF-8" method="post" action="Query">
285 <INPUT type=hidden name="view" value="HTML"/>
287 <table border="0" width="100%">
288 <tr>
289 <td width="90" valign="top">
290 <table border="0" cellspacing="0" cellpadding="0" width="165">
291 <tr><td id="twidth">
292 <div class="container">
293 <div id="accordion">
294 <%
296 Iterator <StrabonBeanWrapperConfiguration> entryListIterator = strabonWrapper.getEntries().iterator();
297 boolean first = true;
298 String hash = "";
299 while(entryListIterator.hasNext())
300 {
301 StrabonBeanWrapperConfiguration entry = entryListIterator.next();
303 if (entry.isHeader()) {
304 if (!first) {
305 %>
306 </div></div>
307 <%
308 } else {
309 first = false;
310 }
312 String label=entry.getLabel();
313 String style = "", href = "";
314 hash = new Integer(Math.abs(label.hashCode())).toString();
315 href="href=\"#"+hash+"\"";
316 %>
317 <div><h3><a <%=style%> <%=href%>><%=label%></a></h3><div>
318 <%
319 } else if (entry.isBean()) {
320 String label=entry.getLabel();
321 String bean=entry.getBean();
322 if(bean.equals("browse.jsp") || bean.equals("ChangeConnection"))
323 continue;
324 String style = "", href = "";
325 hash = new Integer(Math.abs(label.hashCode()*bean.hashCode())).toString();
326 href = "\"" +bean + "#"+ hash+"\"";
327 style = "class=\"navText\"";
328 %>
329 <b>&middot;</b>&nbsp;<a class="linkText" href=<%=href%>><%=label%></a><br/>
330 <%
331 } else {
332 String href="\""+URLEncoder.encode(entry.getBean(),"utf-8")+"?view=HTML&handle="+entry.getHandle()+"&query="+URLEncoder.encode(entry.getStatement(),"utf-8")+"&format="+URLEncoder.encode(entry.getFormat(),"utf-8")+(hash == "" ? "" : "#" + hash)+"\"";
333 String title="\""+entry.getTitle()+"\"";
334 String label=entry.getLabel();
335 %>
336 <b>&middot;</b>&nbsp;<a class="linkText" href=<%=href%> title=<%=title%>><%=label%></a><br/>
337 <%
339 }
340 }
341 %>
342 </div>
343 </div>
344 </td>
345 </tr>
346 <!--
347 <tr><td width="90" class="style4"><a href="describe.jsp" class="navText">Describe</a></td></tr>
348 <tr><td width="90" class="style4"><a href="store.jsp" class="navText" title="Store triples">Store</a></td></tr>
349 -->
350 </table>
351 </td>
352 <td width="*" valign="top" >
353 <table cellspacing="5">
354 <%if (request.getAttribute("info") != null) { %>
355 <!-- Info Message -->
356 <TR><TD colspan=2>
357 <CENTER><P><%=request.getAttribute("info") %></P></CENTER>
358 </TD></TR>
359 <!-- Info Message -->
360 <%}%>
361 <tr>
362 <td id="output" colspan=2>
363 <div style="font-size:13px">
364 You must be logged in to perform update queries.
365 </div>
366 </td>
367 </tr>
368 <tr>
369 <td id="output" style="width: 150px">stSPARQL Query:</td>
370 <td id="output"><textarea name="query" title="pose your query/update here" rows="20" cols="100"><%=query%></textarea></td>
371 </tr>
372 <tr>
373 <td id="output">Output Format:</td>
374 <td id="output">
375 <select name="format" title="select one of the following output format types">
376 <%
377 for (String format : Common.registeredQueryResultsFormatNames) {%>
378 <OPTION value="<%=format%>"<%=format.equals(selFormat) ? "selected":""%>><%=format%></OPTION>
379 <%}%>
380 </select>
381 </td>
382 </tr>
383 <tr>
384 <td id="output">View Result:</td>
385 <td id="output">
386 <SELECT name="handle" title="select how you would like to view the result">
387 <OPTION value="plain"<%= ("plain".equals(handle)) ? "selected":""%>>Plain</OPTION>
388 <OPTION value="download"<%= ("download".equals(handle)) ? "selected":""%>>Download</OPTION>
389 <OPTION value="map"<%= ("map".equals(handle)) ? "selected":""%>>On a map</OPTION>
390 <OPTION value="map_local"<%= ("map_local".equals(handle)) ? "selected":""%>>On a map (localhost)</OPTION>
391 </SELECT>
392 </td>
393 </tr>
395 <tr>
396 <td id="output">Map Bounds:</td>
397 <td id="output">
398 <textarea readonly id='bounds' rows="1" cols="100"></textarea>
399 </td>
400 </tr>
402 <tr>
403 <td colspan=2 id="output"><br/><center>
404 <input type="submit" title="execute query" value="Query" name="submit" style="width: 350px" />
405 <input type="submit" title="execute update" value="Update" name="submit" style="width: 350px"/></center><br/></td>
406 </tr>
410 <% if (request.getAttribute("error") != null) {%>
411 <!-- Error Message -->
412 <TR>
413 <TD id="output">Result: </TD><TD id="output"><%=request.getAttribute("error") %></TD>
414 </TR>
415 <!-- Error Message -->
416 <%}%>
417 </table></td></tr></table><br/><br/>
418 </form>
419 <a name="#results">&nbsp;</a>
420 <div id="divResultsStart"></div>
421 <!-- Response -->
422 <%
423 if (request.getAttribute("response") != null && !request.getParameter("format").equals("CHART")) {
424 if (!Common.getHTMLFormat().equals(request.getParameter("format"))) {%>
425 <%=request.getAttribute("response")%>
426 <%} else {
427 %>
428 <PRE><%=request.getAttribute("response") %></PRE>
429 <%}%>
430 <%}%>
431 <!-- Response -->
432 <% if (request.getAttribute("pathToKML") != null) { %>
433 <div id="map_canvas"></div>
434 <%}%>
435 <div id="divResultsEnd" style="height: 1px; width 1px"></div>
436 <div id="chart_div"></div>
437 </body>
438 </html>