Strabon

view endpoint/WebContent/query.jsp @ 1427:5b6b65340693

find changesets by author, revision, files, or words in the commit message
merge with default branch
author Babis Nikolaou <charnik@di.uoa.gr>
date Wed Sep 24 18:44:26 2014 +0300 (2014-09-24)
parents 4dff2f1163d8 a1137629f208
children
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" src="js/timemap/jquery-1.6.2.min.js"></script>
21 <script type="text/javascript" src="js/timemap/mxn.js?(googlev3)"></script>
22 <script type="text/javascript" src="js/timemap/timeline-1.2.js"></script>
23 <script src="js/timemap/timemap.js" type="text/javascript"></script>
24 <script src="js/timemap/param.js" type="text/javascript"></script>
25 <script src="js/timemap/xml.js" type="text/javascript"></script>
26 <script src="js/timemap/kml.js" type="text/javascript"></script>
27 <script type="text/javascript">
28 function toggleMe(a) {
29 var e = document.getElementById(a);
30 if (!e) {
31 return true;
32 }
33 if (e.style.display == "none") {
34 e.style.display = "block";
35 } else {
36 e.style.display = "none";
37 }
38 return true;
39 }
40 </script>
41 <script>
42 $(document).ready(function() {
43 var showChar = 100;
44 var ellipsestext = "...";
45 var moretext = "more";
46 var lesstext = "less";
47 $('.more').each(function() {
48 var content = $(this).html();
49
50 if(content.length > showChar) {
51
52 var c = content.substr(0, showChar);
53 var h = content.substr(showChar-1, content.length - showChar);
54
55 var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">'+moretext+'</a></span>';
56
57 $(this).html(html);
58 }
59
60 });
61
62 $(".morelink").click(function(){
63 if($(this).hasClass("less")) {
64 $(this).removeClass("less");
65 $(this).html(moretext);
66 } else {
67 $(this).addClass("less");
68 $(this).html(lesstext);
69 }
70 $(this).parent().prev().toggle();
71 $(this).prev().toggle();
72 return false;
73 });
74 });
75 </script>
76 <%
77 // get the reference to StrabonBeanWrapper
78 StrabonBeanWrapper strabonWrapper;
79 //String arr = new String[2];
80 int i;
81 ArrayList<String> arr = new ArrayList<String>(2);
82 String gChartString=null;
83 ServletContext context;
84 context = getServletContext();
85 WebApplicationContext applicationContext = WebApplicationContextUtils.getWebApplicationContext(context);
86 strabonWrapper=(StrabonBeanWrapper) applicationContext.getBean("strabonBean");
87
88 // get query parameter or attribute (the attribute comes from ConnectionBean)
89 String query = strabonWrapper.getPrefixes();
90 if (request.getParameter("query") != null) {
91 query = request.getParameter("query");
92
93 } else if (request.getAttribute("query") != null) {
94 query = (String) request.getAttribute("query");
95
96 }
97
98 if ("null".equals(query)) {
99 query = "";
100 }
101
102 // get format parameter or attribute (the attribute comes from ConnectionBean)
103 String selFormat = "HTML";
104 if (request.getParameter("format") != null) {
105 selFormat = request.getParameter("format");
106
107 } else if (request.getAttribute("format") != null) {
108 selFormat = (String) request.getAttribute("format");
109
110 }
111
112 // get handle parameter or attribute (the attribute comes from ConnectionBean)
113 String handle = "";
114 if (request.getParameter("handle") != null) {
115 handle = request.getParameter("handle");
116
117 } else if (request.getAttribute("handle") != null) {
118 handle = (String) request.getAttribute("handle");
119
120 }
121
122 if (request.getAttribute("pathToKML") != null) {
123 if (request.getAttribute("handle").toString().contains("map")) {
124 %>
125 <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
126 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
127 <script type="text/javascript" src="js/geoxml3-kmz.js"></script>
128 <script type="text/javascript" src="js/ProjectedOverlay.js"></script>
129 <%
130 }
131 %>
132
133 <script type="text/javascript">
134
135 //listener for the event 'bounds_changed'
136 function addListener(map){
137
138 google.maps.event.addListener(map, 'bounds_changed', function() {
139 // get the new bounds
140 var bounds = map.getBounds();
141 var northEast = bounds.getNorthEast();
142 var southWest = bounds.getSouthWest();
143
144 var x1 = northEast.lng().toFixed(2);
145 var y1 = northEast.lat().toFixed(2);
146
147 var x2 = southWest.lng().toFixed(2);
148 var y2 = southWest.lat().toFixed(2);
149
150 var polygon = "\"POLYGON((" +
151 x1 + " " + y2 + ", " +
152 x2 + " " + y2 + ", " +
153 x2 + " " + y1 + ", " +
154 x1 + " " + y1 + ", " +
155 x1 + " " + y2 + "))\"" +
156 "^^<http\://www.opengis.net/ont/geosparql#wktLiteral>";
157
158 document.getElementById('bounds').value=polygon;
159
160 });
161 }
162
163 function initialize() {
164 var myOptions = {
165 zoom: 11,
166 mapTypeId: google.maps.MapTypeId.ROADMAP,
167 zoomControl: true
168 };
169
170 // get KML filename
171 var kml = '<%=request.getAttribute("pathToKML")%>';
172 var map;
173 // create map
174 <%if(request.getAttribute("handle").toString().contains("timemap")){ %>
175 map = tm.getNativeMap();
176 map.setOptions(myOptions);
177 <%} else {%>
178 var map = new google.maps.Map(document.getElementById("map"), myOptions);
179 <%}%>
180 <% if (request.getAttribute("pathToKML") == null) {%>
181 // center at Brahames
182 map.setCenter(new google.maps.LatLng(37.92253, 23.72275));
183 <%}%>
184
185 addListener(map);
186
187
188 <%if ("map_local".equals(request.getAttribute("handle"))) {%>
189 // display using geoxml3
190 var myParser = new geoXML3.parser({map: map});
191 myParser.parse(kml);
192 <%} else {%>
193 var ctaLayer = new google.maps.KmlLayer(kml);
194 ctaLayer.setMap(map);
195 <%}%>
196
197 <%if (("map".equals(request.getAttribute("handle"))) || ("map_local".equals(request.getAttribute("handle")))
198 || ("timemap".equals(request.getAttribute("handle")))) {%>
199 $('html, body').animate({
200 scrollTop: $("#divResultsStart").offset().top
201 }, 1500);
202
203 <%}%>
204
205
206 }
207 </script>
208 <% } else { %>
209 <script type="text/javascript">
210 function initialize() {
211 <%
212 if (query != "" || selFormat != "" || handle != "") {
213 %>
214 $('html, body').animate({
215 scrollTop: $("#divResultsStart").offset().top
216 }, 1000);
217 <%}%>
218 }
219 </script>
220 <%}%>
221
222 <!-- jQuery start -->
223 <link type="text/css" href="style-menu.css" rel="stylesheet" />
224 <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
225 <script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
226 <script type="text/javascript">
227 $(function(){
228 // Accordion
229 $("#accordion").accordion({
230 header: "h3",
231 fillSpace: true,
232 navigation: true,
233 collapsible: true
234 });
235 //hover states on the static widgets
236 $('#dialog_link, ul#icons li').hover(
237 function() { $(this).addClass('ui-state-hover'); },
238 function() { $(this).removeClass('ui-state-hover'); }
239 );
240 });
241 </script>
242 <style type="text/css">
243 /*demo page css*/
244 body{ font: 90% "Trebuchet MS", sans-serif; margin: 50px;}
245 .container { height:410px; width:165px;}
246 .demoHeaders { margin-top: 1em;}
247 #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
248 #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
249 ul#icons {margin: 0; padding: 0;}
250 ul#icons li {margin: 1px; position: relative; padding: 1px 0; cursor: pointer; float: left; list-style: none;}
251 ul#icons span.ui-icon {float: left; margin: 0 1px;}
252 </style>
253
254 <script type="text/javascript">
255
256 var tm;
257 $(function() {
258 var myOptions = {
259 zoom: 11,
260 mapTypeId: google.maps.MapTypeId.ROADMAP,
261 zoomControl: true,
262 scrollwheel : true
263
264 };
265
266 var map = new google.maps.Map(document.getElementById("map"), myOptions);
267 tm = TimeMap.init({
268 // Id of map div element (required)
269 mapId: "map",
270 timelineId: "timeline", // Id of timeline div element (required)
271 options: {
272 eventIconPath: "images/"
273 },
274 datasets: [
275 {
276 title: "Visualization of timestamps",
277 theme: "red",
278 type: "kml", // Data to be loaded in KML - must be a local URL
279 options: {
280 url: <% if(request.getAttribute("pathToKML") != null){
281 out.println("\""+request.getAttribute("pathToKML")+"\"");
282 }%> // KML file to load
283 }
284 }
285 ],
286 bandInfo: [
287 {
288 width: "85%",
289 intervalUnit: Timeline.DateTime.MONTH,
290 intervalPixels: 210
291 },
292 {
293 width: "15%",
294 intervalUnit: Timeline.DateTime.YEAR,
295 intervalPixels: 150,
296 showEventText: false,
297 trackHeight: 0.2,
298 trackGap: 0.2
299 }
300 ]
301 });
302
303
304 });
305
306
307 </script>
308
309
310 <link href="js/timemap/examples.css" type="text/css" rel="stylesheet"/>
311 <style>
312 div#timelinecontainer{ height: 310px; }
313 div#mapcontainer{ height: 600px; }
314 </style>
315
316 <!-- jQuery end -->
317
318 <title>Strabon Endpoint</title>
319 <!--Load the AJAX API-->
320 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
321 <script type="text/javascript">
322
323 // Load the Visualization API and the piechart package.
324 google.load('visualization', '1.0', {'packages':['corechart']});
325
326 google.setOnLoadCallback(drawChart);
327
328 // Set a callback to run when the Google Visualization API is loaded.
329
330
331 // Callback that creates and populates a data table,
332 // instantiates the pie chart, passes in the data and
333 // draws it.
334
335
336
337 function drawChart() {
338
339 // Create the data table.
340 var data = new google.visualization.DataTable();
341 <% if (request.getAttribute("format")!=null && request.getAttribute("response") != null) {
342 if (request.getAttribute("format").equals("CHART")) {
343 out.println(request.getAttribute("response"));
344 %>
345
346
347 chart.draw(data, options);
348
349 <%}}%>
350 }
351 </script>
352
353
354 </head>
355 <body topmargin="0" leftmargin="0" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF" onload="initialize()">
356
357 <!-- include TELEIOS header and description -->
358 <%@ include file="header.html"%>
359 <!-- include TELEIOS header and description -->
360
361 <FORM enctype="UTF-8" accept-charset="UTF-8" method="post" action="Query">
362 <INPUT type=hidden name="view" value="HTML"/>
363
364 <table border="0" width="100%">
365 <tr>
366 <td width="90" valign="top">
367 <table border="0" cellspacing="0" cellpadding="0" width="165">
368 <tr><td id="twidth">
369 <div class="container">
370 <div id="accordion">
371 <%
372
373 Iterator <StrabonBeanWrapperConfiguration> entryListIterator = strabonWrapper.getEntries().iterator();
374 boolean first = true;
375 String hash = "";
376 while(entryListIterator.hasNext())
377 {
378 StrabonBeanWrapperConfiguration entry = entryListIterator.next();
379
380 if (entry.isHeader()) {
381 if (!first) {
382 %>
383 </div></div>
384 <%
385 } else {
386 first = false;
387 }
388
389 String label=entry.getLabel();
390 String style = "", href = "";
391 hash = new Integer(Math.abs(label.hashCode())).toString();
392 href="href=\"#"+hash+"\"";
393 %>
394 <div><h3><a <%=style%> <%=href%>><%=label%></a></h3><div>
395 <%
396 } else if (entry.isBean()) {
397 String label=entry.getLabel();
398 String bean=entry.getBean();
399 if(bean.equals("browse.jsp") || bean.equals("ChangeConnection"))
400 continue;
401 String style = "", href = "";
402 hash = new Integer(Math.abs(label.hashCode()*bean.hashCode())).toString();
403 href = "\"" +bean + "#"+ hash+"\"";
404 style = "class=\"navText\"";
405 %>
406 <b>&middot;</b>&nbsp;<a class="linkText" href=<%=href%>><%=label%></a><br/>
407 <%
408 } else {
409 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)+"\"";
410 String title="\""+entry.getTitle()+"\"";
411 String label=entry.getLabel();
412 %>
413 <b>&middot;</b>&nbsp;<a class="linkText" href=<%=href%> title=<%=title%>><%=label%></a><br/>
414 <%
415
416 }
417 }
418 %>
419 </div>
420 </div>
421 </td>
422 </tr>
423 <!--
424 <tr><td width="90" class="style4"><a href="describe.jsp" class="navText">Describe</a></td></tr>
425 <tr><td width="90" class="style4"><a href="store.jsp" class="navText" title="Store triples">Store</a></td></tr>
426 -->
427 </table>
428 </td>
429 <td width="*" valign="top" >
430 <table cellspacing="5">
431 <%if (request.getAttribute("info") != null) { %>
432 <!-- Info Message -->
433 <TR><TD colspan=2>
434 <CENTER><P><%=request.getAttribute("info") %></P></CENTER>
435 </TD></TR>
436 <!-- Info Message -->
437 <%}%>
438 <tr>
439 <td id="output" colspan=2>
440 <div style="font-size:13px">
441 You must be logged in to perform update queries, or run in localhost.
442 </div>
443 </td>
444 </tr>
445 <tr>
446 <td id="output" style="width: 150px">stSPARQL Query:</td>
447 <td id="output"><textarea name="query" title="pose your query/update here" rows="20" cols="100"><%=query%></textarea></td>
448 </tr>
449 <tr>
450 <td id="output">Output Format:</td>
451 <td id="output">
452 <select name="format" title="select one of the following output format types">
453 <%
454 for (String format : Common.registeredQueryResultsFormatNames) {%>
455 <OPTION value="<%=format%>"<%=format.equals(selFormat) ? "selected":""%>><%=format%></OPTION>
456 <%}%>
457 </select>
458 </td>
459 </tr>
460 <tr>
461 <td id="output">View Result:</td>
462 <td id="output">
463 <SELECT name="handle" title="select how you would like to view the result">
464 <OPTION value="plain"<%= ("plain".equals(handle)) ? "selected":""%>>Plain</OPTION>
465 <OPTION value="download"<%= ("download".equals(handle)) ? "selected":""%>>Download</OPTION>
466 <OPTION value="map"<%= ("map".equals(handle)) ? "selected":""%>>On a map</OPTION>
467 <OPTION value="map_local"<%= ("map_local".equals(handle)) ? "selected":""%>>On a map (localhost)</OPTION>
468 <OPTION value="timemap"<%= ("timemap".equals(handle)) ? "selected":""%>>On a timemap</OPTION>
469 </SELECT>
470 </td>
471 </tr>
472
473 <tr>
474 <td id="output">Map Bounds:</td>
475 <td id="output">
476 <textarea readonly id='bounds' rows="1" cols="100"></textarea>
477 </td>
478 </tr>
479
480 <tr>
481 <td colspan=2 id="output"><br/><center>
482 <input type="submit" title="execute query" value="Query" name="submit" style="width: 350px" />
483 <input type="submit" title="execute update" value="Update" name="submit" style="width: 350px"/></center><br/></td>
484 </tr>
485
486
487
488 <% if (request.getAttribute("error") != null) {%>
489 <!-- Error Message -->
490 <TR>
491 <TD id="output">Result: </TD><TD id="output"><%=request.getAttribute("error") %></TD>
492 </TR>
493 <!-- Error Message -->
494 <%}%>
495 </table></td></tr></table><br/><br/>
496 </form>
497 <a name="#results">&nbsp;</a>
498 <div id="divResultsStart"></div>
499 <!-- Response -->
500 <% if(request.getAttribute("format") == null || !request.getAttribute("format").equals("CHART")){
501 if (request.getAttribute("response") != null) {
502 if (Common.getHTMLFormat().equals(request.getParameter("format"))) {%>
503 <%=request.getAttribute("response")%>
504 <%} else { %>
505 <PRE><%=request.getAttribute("response") %></PRE>
506 <%}%>
507 <%}}%>
508 <!-- Response -->
509 <% if (request.getAttribute("pathToKML") != null && request.getAttribute("handle").toString().contains("timemap")) { %>
510 <div id="timemap">
511 <div id="timelinecontainer">
512 <div id="timeline"></div>
513 </div>
514 <div id="mapcontainer">
515 <div id="map"></div>
516 </div>
517 </div>
518 <%} else {%>
519 <div id="map"></div>
520 <%} %>
521 <div id="divResultsEnd" style="height: 1px; width 1px"></div>
522 <div id="chart_div"></div>
523 </body>
524 </html>