view src/main/webapp/pages/search.jsp @ 58:b8ad346e39a0

new: modify based on doc 'Improving LGServices interface.docx': user workflow improvement, functions like adding task into a topic and search suggestions.
author Zoe Hong <zhong@mpiwg-berlin.mpg.de>
date Mon, 02 May 2016 12:03:30 +0200
parents 5cbe567a9c52
children 824b808a7481
line wrap: on
line source

<%@page import="de.mpiwg.gazetteer.bo.LGBranch"%>
<%@page import="de.mpiwg.gazetteer.bo.LGTopicSectionRelation"%>
<%@page import="org.apache.commons.lang.StringUtils"%>
<%@page import="de.mpiwg.gazetteer.db.DBSection"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<jsp:useBean id="sessionBean" class="de.mpiwg.web.jsp.SessionBean" scope="session" />
	

<html>

<head>

	<jsp:include page="../componentes/headContent.jsp"/>	
	
	<script>
	
		$(function() {
		
			$("#addAllSectionsToTopic").click(function() {
				
					
				var r = confirm("Add all sections to a topic?");
				if (r == true) {
				    console.log("addAllSectionsToTopic");
			
					var url0 = "<%=sessionBean.getApplicationBean().getRootServer()%>/methods/addSectionToTopic.jsp?addAllSections=1";
					
					$.ajax( url0 )
					.done(function(data) {
						$( "#dialogAddSectionToTopicTable" ).replaceWith(data);
						dialogAddSectionToTopic.dialog( "open" );
					})
				  	.fail(function() {
				    	console.error("Error calling: " + query);
				  	});
			  	
				}

			});
			
			$( ".addSectionToTopic" ).click(function() {
				var sectionId = $( this ).data('section-id');
				//console.log("addSectionToTopic. sectionId = " + sectionId);
						
				var url0 = "<%=sessionBean.getApplicationBean().getRootServer()%>/methods/addSectionToTopic.jsp?sectionId=" + sectionId + "&sourceBean=search";
		
				$.ajax( url0 )
				.done(function(data) {
					$( "#dialogAddSectionToTopicTable" ).replaceWith(data);
					dialogAddSectionToTopic.dialog( "open" );
				})
			  	.fail(function() {
			    	console.error("Error calling: " + query);
			  	})
					
			});
			
			
			var dialogAddSectionToTopic = $("#dialogAddSectionToTopic").dialog({
				position: { my: "center", at: "top+400", of: window },	// TODO show dialog at cursor position?
				autoOpen: false
			});	  
			
		
		    $( "#dialogMoreInfo" ).dialog({
		        autoOpen: false,
		        modal: true,
		        position: { my: "center", at: "top", of: window },
		        hide: {
		          effect: "explode",
		          duration: 1000
		        }
		      });
		   
			$( ".moreInfo" ).click(function() {
				var sectionId = $( this ).data('section-id');
				
				var url0 = "<%=sessionBean.getApplicationBean().getRootServer()%>/methods/sectionTableDetails.jsp?sectionId=" + sectionId;
				
				$.ajax( url0 )
				.done(function(data) {
					$( "#dialogMoreInfoTable" ).replaceWith(data);
					$( "#dialogMoreInfo" ).dialog( "open" );
				})
			  	.fail(function() {
			    	console.error("Error calling: " + query);
			  	})
				
				
				
		    });			
			
			$("#searchTerm").autocomplete({
				source : function(request, response) {
					var radioButton0 = $("input[type='radio'][name='searchIn']:checked");
					var searchInVal = (radioButton0) ? radioButton0.val() : 0;
				$.ajax({
					url : "<%=sessionBean.getApplicationBean().getRootServer()%>/methods/searchAutocomplete.jsp",
						type : "POST",
						dataType : "json",
						data : {
							term : request.term,
							searchIn : searchInVal
						},
						success : function(data) {
	
							response($.map(data, function(item) {
								return {
									label : item.name,
									value : item.value,
								}
							}));
						},
						error : function(error) {
							alert('error: ' + error);
						}
					});
				},
				minLength : 0
			});
			
			$("#bookNameFilter").autocomplete({
				source : function(request, response) {
					$.ajax({
						url : "<%=sessionBean.getApplicationBean().getRootServer()%>/methods/bookNameAutocomplete.jsp",
						type : "POST",
						dataType : "json",
						data : {
							term : request.term
						},
						success : function(data) {
	
							response($.map(data, function(item) {
								return {
									label : item.name,
									value : item.value,
								}
							}));
						},
						error : function(error) {
							alert('error: ' + error);
						}
					});
				},
				minLength : 0
			});	
	
			$("#dynastyFilter").autocomplete({
				source : function(request, response) {
					$.ajax({
						url : "<%=sessionBean.getApplicationBean().getRootServer()%>/methods/dynastyAutocomplete.jsp",
						type : "POST",
						dataType : "json",
						data : {
							term : request.term
						},
						success : function(data) {
	
							response($.map(data, function(item) {
								return {
									label : item.name,
									value : item.value,
								}
							}));
						},
						error : function(error) {
							alert('error: ' + error);
						}
					});
				},
				minLength : 0
			});	
	
			
			$("#level1Filter").autocomplete({
				source : function(request, response) {
					$.ajax({
						url : "<%=sessionBean.getApplicationBean().getRootServer()%>/methods/level1Autocomplete.jsp",
						type : "POST",
						dataType : "json",
						data : {
							term : request.term
						},
						success : function(data) {
	
							response($.map(data, function(item) {
								return {
									label : item.name,
									value : item.value,
								}
							}));
						},
						error : function(error) {
							alert('error: ' + error);
						}
					});
				},
				minLength : 0
			});	
			

			$("#level2Filter").autocomplete({
				source : function(request, response) {
					$.ajax({
						url : "<%=sessionBean.getApplicationBean().getRootServer()%>/methods/level2Autocomplete.jsp",
						type : "POST",
						dataType : "json",
						data : {
							term : request.term
						},
						success : function(data) {
	
							response($.map(data, function(item) {
								return {
									label : item.name,
									value : item.value,
								}
							}));
						},
						error : function(error) {
							alert('error: ' + error);
						}
					});
				},
				minLength : 0
			});		
			
			
			$("#periodFilter").autocomplete({
				source : function(request, response) {
					$.ajax({
						url : "<%=sessionBean.getApplicationBean().getRootServer()%>/methods/periodAutocomplete.jsp",
						type : "POST",
						dataType : "json",
						data : {
							term : request.term
						},
						success : function(data) {
	
							response($.map(data, function(item) {
								return {
									label : item.name,
									value : item.value,
								}
							}));
						},
						error : function(error) {
							alert('error: ' + error);
						}
					});
				},
				minLength : 0
			});	
	
			
			$("#adminTypeFilter").autocomplete({
				source : function(request, response) {
					$.ajax({
						url : "<%=sessionBean.getApplicationBean().getRootServer()%>/methods/adminTypeAutocomplete.jsp",
						type : "POST",
						dataType : "json",
						data : {
							term : request.term
						},
						success : function(data) {
	
							response($.map(data, function(item) {
								return {
									label : item.name,
									value : item.value,
								}
							}));
						},
						error : function(error) {
							alert('error: ' + error);
						}
					});
				},
				minLength : 0
			});		
			
			$("#sectionNameFilter").autocomplete({
				source : function(request, response) {
					$.ajax({
						url : "<%=sessionBean.getApplicationBean().getRootServer()%>/methods/sectionNameAutocomplete.jsp",
						type : "POST",
						dataType : "json",
						data : {
							term : request.term
						},
						success : function(data) {
	
							response($.map(data, function(item) {
								return {
									label : item.name,
									value : item.value,
								}
							}));
						},
						error : function(error) {
							alert('error: ' + error);
						}
					});
				},
				minLength : 0
			});	
			
				
			// enter pressed event, we don't want to always go to "search".
			$(document).keypress(
				function(event){
					if (event.which == '13') {	// enter pressed
						// if any of the filter fields is filled in, filter first; otherwize, go to search
						$(".filterInput" ).each(function( i ) {
							//console.log( this.value );
							if (this.value != "") {
								//console.log('filtering' + i);
								setAction('filter', 'searchForm');
								$("#searchForm").submit();
								return false;		
							}
							
						});
				    }
			});
			
			
			
		});
		
		
	</script>
</head>

<body>
	<jsp:include page="../componentes/template.jsp"/>

	<div id="dialogMoreInfo" title="Section Details">
	  <div id="dialogMoreInfoTable"></div>
	</div>
 	
	<div id="dialogAddSectionToTopic" title="Add Section(s) into Topic:">
		<div id="dialogAddSectionToTopicTable"></div>
	</div>

	<div id="page">
	
		<% if (sessionBean.getUser() == null) { %>
			<label class="subTitel">You must login!</label>
		<%} else if (sessionBean.getSearchPage().getSearchIn() == null) { %>
			<label class="subTitel">The searchPage().getSearchIn() is null.</label>
			
		<% } else { %>
				
			<label class="subTitel">Search for Sections</label>
			
			<form name="searchForm" id="searchForm"
				action="<%=sessionBean.getApplicationBean().getRootServer()%>/proxy.jsp"
				method="post"
				class="contentForm">
				<input name="bean" type="hidden" value="searchBean" /> 
				
				
				<table style="width: 300px; margin-left: auto;margin-right: auto;">
					<tr>
						<td>
							<input
								id="searchTerm"
								name="searchTerm"
								type="text"
								class="searchInput"
								value="<%=sessionBean.getSearchPage().getSearchTerm()%>" />				
						</td>
						<td>
							<input
								type="image" 
								onclick="setAction('search', 'searchForm');"
								src="<%=sessionBean.getApplicationBean().getSearchImage()%>"/>
						</td>
					</tr>
					<tr>
						<td>
							<label>Search in:</label>
							<input type="radio" name="searchIn" value="0" <%= (sessionBean.getSearchPage().getSearchIn() == 0) ? "checked" : "" %>/><label>Section Name</label>
							<input type="radio" name="searchIn" value="1" <%= (sessionBean.getSearchPage().getSearchIn() == 1) ? "checked" : "" %>/><label>Book Name</label>
							
						</td>
					</tr>
					<tr><td><label class="label"><%= (StringUtils.isNotEmpty(sessionBean.getSearchPage().getSearchMessage())) ? sessionBean.getSearchPage().getSearchMessage() : ""%></label></td></tr>
					<tr><td><label class="label"><%= (StringUtils.isNotEmpty(sessionBean.getSearchPage().getFilteringMessage())) ? sessionBean.getSearchPage().getFilteringMessage() : ""%></label></td></tr>
				</table>
		
		
				<% if (sessionBean.getSearchPage().getCompleteSectionList() != null) { %>
		
		
					<jsp:include page="../componentes/paginator.jsp">
						<jsp:param name="formName" value="searchForm"/>
					</jsp:include> 
						
					<div class="tableDiv double-scroll">
						<table class="pageTable">
							<tbody>
								<tr>
									<th>
										<table class="sortTable">
											<tr>
												<td><label class="tableTitle">Book Id</label></td>
												<td>
													<table>
														<tr><td>
															<input type="image" 
																onclick="setAction('sortByBookIdUp', 'searchForm');"
																src="<%=sessionBean.getApplicationBean().getUpImage()%>"/>										
														</td></tr>
														<tr><td>
															<input type="image"
																onclick="setAction('sortByBookIdDown', 'searchForm');"
																src="<%=sessionBean.getApplicationBean().getDownImage()%>"/>																				
														</td></tr>
													</table>
												</td>
											</tr>
										</table>
									</th>
									<th>
										<table class="sortTable">
											<tr>
												<td><label class="tableTitle">Book Name</label></td>
												<td>
													<table>
														<tr><td>
															<input type="image"
																onclick="setAction('sortByBookNameUp', 'searchForm');"
																src="<%=sessionBean.getApplicationBean().getUpImage()%>"/>										
														</td></tr>
														<tr><td>
															<input type="image"
																onclick="setAction('sortByBookNameDown', 'searchForm');"
																src="<%=sessionBean.getApplicationBean().getDownImage()%>"/>																	
														</td></tr>
													</table>
												</td>
											</tr>
											<tr>
												<td>
													<input type="text" class="filterInput" name="bookNameFilter" id="bookNameFilter" value="<%= sessionBean.getSearchPage().getBookNameFilter()%>"/>
												</td>									
												<td>
													<input type="image"
														onclick="setAction('filter', 'searchForm');"
														src="<%=sessionBean.getApplicationBean().getFilterImage()%>"/>
												</td>							
											</tr>
										</table>					
									</th>
									<th>
										<table class="sortTable">
											<tr>
												<td><label class="tableTitle">Level 1</label></td>
												<td>
													<table>
														<tr><td>
															<input type="image"
																onclick="setAction('sortByLevel1Up', 'searchForm');"
																src="<%=sessionBean.getApplicationBean().getUpImage()%>"/>
														</td></tr>
														<tr><td>
															<input type="image"
																onclick="setAction('sortByLevel1Down', 'searchForm');"
																src="<%=sessionBean.getApplicationBean().getDownImage()%>"/>																				
														</td></tr>
													</table>
												</td>
											</tr>
											<tr>
												<td>
													<input type="text" class="filterInput" name="level1Filter" id="level1Filter" value="<%= sessionBean.getSearchPage().getLevel1Filter()%>"/>
												</td>									
												<td>
													<input type="image"
														onclick="setAction('filter', 'searchForm');"
														src="<%=sessionBean.getApplicationBean().getFilterImage()%>"/>
												</td>							
											</tr>								
										</table>	
									</th>
									<th>
										
										<table class="sortTable">
											<tr>
												<td><label class="tableTitle">Level 2</label></td>
												<td>
													<table>
														<tr><td>
															<input type="image"
																onclick="setAction('sortByLevel2Up', 'searchForm');"
																src="<%=sessionBean.getApplicationBean().getUpImage()%>"/>
														</td></tr>
														<tr><td>
															<input type="image"
																onclick="setAction('sortByLevel2Down', 'searchForm');"
																src="<%=sessionBean.getApplicationBean().getDownImage()%>"/>																				
														</td></tr>
													</table>
												</td>
											</tr>
											<tr>
												<td>
													<input type="text" class="filterInput" name="level2Filter" id="level2Filter" value="<%= sessionBean.getSearchPage().getLevel2Filter()%>"/>
												</td>									
												<td>
													<input type="image"
														onclick="setAction('filter', 'searchForm');"
														src="<%=sessionBean.getApplicationBean().getFilterImage()%>"/>
												</td>							
											</tr>								
										</table>
									
									</th>
									<th>
										<table class="sortTable">
											<tr>
												<td><label class="tableTitle">Dynasty</label></td>
												<td>
													<table>
														<tr><td>
															<input type="image"
																onclick="setAction('sortByDynastyUp', 'searchForm');"
																src="<%=sessionBean.getApplicationBean().getUpImage()%>"/>
														</td></tr>
														<tr><td>
															<input type="image"
																onclick="setAction('sortByDynastyDown', 'searchForm');"
																src="<%=sessionBean.getApplicationBean().getDownImage()%>"/>																				
														</td></tr>
													</table>
												</td>
											</tr>
											<tr>
												<td>
													<input type="text" class="filterInput" name="dynastyFilter" id="dynastyFilter" value="<%= sessionBean.getSearchPage().getDynastyFilter()%>"/>
												</td>									
												<td>
													<input type="image"
														onclick="setAction('filter', 'searchForm');"
														src="<%=sessionBean.getApplicationBean().getFilterImage()%>"/>
												</td>							
											</tr>
										</table>					
									</th>
									<th>
										<table class="sortTable">
											<tr>
												<td><label class="tableTitle">Period</label></td>
												<td>
													<table>
														<tr><td>
															<input type="image"
																onclick="setAction('sortByPeriodUp', 'searchForm');"
																src="<%=sessionBean.getApplicationBean().getUpImage()%>"/>										
														</td></tr>
														<tr><td>
															<input type="image"
																onclick="setAction('sortByPeriodDown', 'searchForm');"
																src="<%=sessionBean.getApplicationBean().getDownImage()%>"/>																				
														</td></tr>
													</table>
												</td>
											</tr>
											<tr>
												<td>
													<input type="text" class="filterInput" name="periodFilter" id="periodFilter" value="<%= sessionBean.getSearchPage().getPeriodFilter()%>"/>
												</td>									
												<td>
													<input type="image"
														onclick="setAction('filter', 'searchForm');"
														src="<%=sessionBean.getApplicationBean().getFilterImage()%>"/>
												</td>							
											</tr>
										</table>						
									</th>
									<th>
										<table class="sortTable">
											<tr>
												<td><label class="tableTitle">Admin Type</label></td>
												<td>
													<table>
														<tr><td>
															<input type="image"
																onclick="setAction('sortByAdminTypeUp', 'searchForm');"
																src="<%=sessionBean.getApplicationBean().getUpImage()%>"/>
														</td></tr>
														<tr><td>
															<input type="image"
																onclick="setAction('sortByAdminTypeDown', 'searchForm');"
																src="<%=sessionBean.getApplicationBean().getDownImage()%>"/>																				
														</td></tr>
													</table>
												</td>
											</tr>
											<tr>
												<td>
													<input type="text" class="filterInput" name="adminTypeFilter" id="adminTypeFilter" value="<%= sessionBean.getSearchPage().getAdminTypeFilter()%>"/>
												</td>									
												<td>
													<input type="image"
														onclick="setAction('filter', 'searchForm');"
														src="<%=sessionBean.getApplicationBean().getFilterImage()%>"/>
												</td>							
											</tr>								
										</table>	
									</th>
									<th>
										<table class="sortTable">
											<tr>
												<td><label class="tableTitle">Section Name</label></td>
												<td>
													<table>
														<tr><td>
															<input type="image"
																onclick="setAction('sortBySectionNameUp', 'searchForm');"
																src="<%=sessionBean.getApplicationBean().getUpImage()%>"/>										
														</td></tr>
														<tr><td>
															<input type="image"
																onclick="setAction('sortBySectionNameDown', 'searchForm');"
																src="<%=sessionBean.getApplicationBean().getDownImage()%>"/>																				
														</td></tr>
													</table>
												</td>
											</tr>
											<tr>
												<td>
													<input type="text" class="filterInput" name="sectionNameFilter" id="sectionNameFilter" value="<%= sessionBean.getSearchPage().getSectionNameFilter()%>"/>
												</td>									
												<td>
													<input type="image"
														onclick="setAction('filter', 'searchForm');"
														src="<%=sessionBean.getApplicationBean().getFilterImage()%>"/>
												</td>							
											</tr>	
										</table>	
									</th>
									<th>
										<table class="sortTable">
											<tr>
												<td><label class="tableTitle">Pages</label></td>
												<td>
													<table>
														<tr><td>
															<input type="image"
																onclick="setAction('sortByStartPageUp', 'searchForm');"
																src="<%=sessionBean.getApplicationBean().getUpImage()%>"/>										
														</td></tr>
														<tr><td>
															<input type="image"
																onclick="setAction('sortByStartPageDown', 'searchForm');"
																src="<%=sessionBean.getApplicationBean().getDownImage()%>"/>																				
														</td></tr>
													</table>
												</td>
											</tr>
										</table>							
									
									</th>
									<th><label class="tableTitle">Load Text</label></th>
									
									<th>
										<label class="tableTitle">Add to Topic</label>
										
										<img id="addAllSectionsToTopic" width="15" height="15" title="Add all sections to Topic" src="<%=sessionBean.getApplicationBean().getPlusImage()%>">
										
										
									</th>
									<th><label class="tableTitle">Existing Tasks</label></th>
								</tr>
							
				
								<% 
								for (DBSection section : sessionBean.getSearchPage().getDisplaySectionList()) {
								%>
								<tr>
									<td>
										<a href="<%=sessionBean.getApplicationBean().getTocInterfaceUrl()%>/check_sections_details.php?book_id=<%=section.getBook().getId() %>&amp;count=100&amp;sessionId=<%= session.getId()%>" target="blank">
											<%=section.getBook().getId()%>
										</a>	
										<img title="More Information" src="<%=sessionBean.getApplicationBean().getMoreInfoImage()%>" data-section-id="<%=section.getId()%>" class="moreInfo"/>
									</td>
									<td><%=section.getBook().getName()%></td>
									<td><%=section.getBook().getLevel1()%></td>
									<td><%=section.getBook().getLevel2()%></td>
									<td><%=section.getBook().getDynasty()%></td>
									<td><%=section.getBook().getPeriod()%></td>
									<td><%=section.getBook().getAdmin_type() %></td>
									<td><%=section.getName()%></td>
									<td><%=section.getPages()%></td>
									
									
									<!-- View text in Ext-Interface -->
									<td>
										<a href="#"
											title="Show Section in Extraction Interface"
										 	onclick="sectionInExtractionInterface('<%=section.getId() %>', '<%=section.getName() %>', '<%=section.getBook().getId() %>', '<%=section.getBook().getName() %>', '<%=sessionBean.getTopicListPage().getCompleteTopicList().get(0).getId() %>', '<%=sessionBean.getUser().getId() %>','<%=sessionBean.getApplicationBean().getExtractionInterfaceUrl()%>');">
										 	
										 	<img title="Show Section in Extraction Interface" src="<%=sessionBean.getApplicationBean().getShowImage()%>">
										</a>
										
									</td>
									
									<!-- Add to Topic -->
									<td style="max-width:300px;">
										<!-- existing topic -->
										<% if(section.getTopicSectionRelation() != null && !section.getTopicSectionRelation().isEmpty()) { %>
											<lable>Already in topic: </lable>
											<table style="width:100%">		
												<% for(LGTopicSectionRelation relation : section.getTopicSectionRelation()) { %>
													<tr>
														<td>
															<table style="width:100%; min-width:100px">
															<tr><td><%=relation.getTopic().info() %></td></tr>
															</table>
														</td>
														<td style="max-width:150px">
															
															<a href="<%=sessionBean.getApplicationBean().getRootServer() %>/pages/topicPage.jsp?topicId=<%=relation.getTopicId() %>" >
																<img title="Manage Topic" src="<%=sessionBean.getApplicationBean().getEditBranchImage()%>"/>
															</a>												
															
														</td>
													</tr>
												<% } %>
											</table>
										<% } %>
										
										<img width="10" height="10" title="Add the section to Topic" src="<%=sessionBean.getApplicationBean().getPlusImage()%>" data-section-id="<%=section.getId()%>" class="addSectionToTopic">
									
									
									</td>
									
									
									<!-- Existing Tasks -->
									<td style="max-width:300px;">
										<% if(section.getBranches() != null && !section.getBranches().isEmpty()) { %>
											<table style="width:100%">
												<% for(LGBranch branch : section.getBranches()) { %>
													<tr>
														<td>
															<table style="width:100%">
															<tr><td><%=branch.getFomattedLastChange() %></td></tr>
															<tr><td><%=branch.getLabel() %></td></tr>
															</table>
														</td>
														<td style="max-width:150px">
															<% if (branch.hasContributor(sessionBean.getUser().getId())) { %>
															<a href="<%=sessionBean.getApplicationBean().getRootServer() %>/pages/branchPage.jsp?branchId=<%=branch.getId() %>" >
																<img title="Manage Branch" src="<%=sessionBean.getApplicationBean().getEditBranchImage()%>"/>
															</a>												
															<% } else { %>
																<label>Contributors: <%=branch.getContributorsNameList() %></label>
															<% } %>
														</td>
													</tr>
												<% } %>
											</table>
										<% } %>
									</td>
					
								</tr>
								<% } %>
							</tbody>
						</table>
				
						
					<% } %>
					
					</div>
					
					<jsp:include page="../componentes/paginator.jsp">
						<jsp:param name="formName" value="searchForm"/>
					</jsp:include> 
				
			</form>

		<% } %>
		
	</div>

</body>
</html>