<%@ include file="/WEB-INF/common/taglibs.jsp"%>
<head>
<title><fmt:message key="viewer.title"/></title>
<meta name="menu" content="ViewerMenu"/>
<script type="text/javascript" src="<c:url value='/scripts/jquery/jquery-1.11.1.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/scripts/jquery/jquery.dataTables.js'/>"></script>
<link type="text/css" rel="stylesheet" href="<c:url value="/styles/jquery.dataTables.css" />" />
<style>
.columns {
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}
p {
color: #555;
margin-top: 0;
line-height: 1.4;
}
.nocol {
-webkit-columns: 1;
-moz-columns: 1;
columns: 1;
break-inside: avoid-column;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
overflow: hidden; /* fix for Firefox */
}
</style>
</head>
<body>
<div class="columns">
<div class="nocol">
<label>Choose a datasource :</label>
<br/>
<table id="datasettable" class="display dataTable" cellspacing="0" width="100%">
<thead>
<tr><th> <input type="checkbox" id="checkall"/></th> <th>Datasource</th><th>Provider</th>
</tr>
</thead>
<tbody>
<c:forEach items="${datasources}" var="datasource" varStatus="loop">
<c:if test="${datasource.harvestedCount>0}">
<tr><td> <input type="checkbox" name="datasourcename" value="${datasource.id}"/></td><td>${datasource.name}</td><td>${datasource.providerName}</td></tr>
</c:if>
</c:forEach>
</tbody>
</table>
</div>
<div>
<label>Raw data:</label>
<form id="viewForm" method="post" ENCTYPE="multipart/form-data" action="seeData" validate="false">
<a id="country">See countries</a>
<br/>
<a id="strati">See stratigraphy terms</a>
<br/>
<a id="rank">See rank names</a>
<br/>
<a id="name">See full scientific names</a>
<br/>
<a id="recordbasis">See record basis</a>
<br/>
<a id="collector">See collector names</a>
<br/>
<input id="selectedDatasourceID" name="selectedDatasourceID" type="hidden"/>
<input id="viewType" name="viewType" type="hidden"/>
</form>
</div>
</div>
<script type='text/javascript'>
$(window).load(function(){
$(document).ready(function () {
$("#datasettable").dataTable();
$('#checkall').click(function() { //on click
if(this.checked) { // check select status
$("input:checkbox").attr('checked', true);
}else{
$("input:checkbox").attr('checked', false);
}
});
$("#country").click(function() {
$('#viewType').val("country");
fillValue();
});
$("#strati").click(function() {
$('#viewType').val("strati");
fillValue();
});
$("#rank").click(function() {
$('#viewType').val("rank");
fillValue();
});
$("#name").click(function() {
$('#viewType').val("name");
fillValue();
});
$("#recordbasis").click(function() {
$('#viewType').val("recordbasis");
fillValue();
});
$("#collector").click(function() {
$('#viewType').val("collector");
fillValue();
});
});
});
function fillValue(){
var chkArray = [];
$("input:checkbox[name=datasourcename]:checked").each(function(){
chkArray.push($(this).val());
});
var selected;
selected = chkArray.join(',') + ",";
$('#selectedDatasourceID').val(selected);
if(selected.length > 1){
$('#viewForm').submit();
}else{
alert("Please at least one of the checkbox");
}
}
</script>
</body>