explore.jsp 19.3 KB
Newer Older
igoshin's avatar
igoshin committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>

<%@include file="/WEB-INF/jsp/init.jsp"%>

<html>
<head>
<title><spring:message code="accession.page.data.title" /></title>
</head>
<body>
	<h1>
		<spring:message code="accession.page.data.title" />
	</h1>
    <%--Dropdown filters--%>
	<div class="main-col-header clearfix">
15
        
igoshin's avatar
igoshin committed
16
	<div class="nav-header">
Matija Obreza's avatar
Matija Obreza committed
17
18
		<div class="results">
			<spring:message code="accessions.number" arguments="${pagedData.totalElements}" />
igoshin's avatar
igoshin committed
19
20
21
		</div>
		<div class="pagination">
			<spring:message code="paged.pageOfPages" arguments="${pagedData.number+1},${pagedData.totalPages}" />
22
23
			<a href="<spring:url value=""><spring:param name="page" value="${pagedData.number eq 0 ? 1 : pagedData.number}" /><spring:param name="filter" value="${jsonFilter}" /></spring:url>"><spring:message code="pagination.previous-page" /></a>
			<a href="<spring:url value=""><spring:param name="page" value="${pagedData.number+2}" /><spring:param name="filter" value="${jsonFilter}" /></spring:url>"><spring:message code="pagination.next-page" /></a>
igoshin's avatar
igoshin committed
24
		</div>
Matija Obreza's avatar
Matija Obreza committed
25
26
27
28
29
30
31
32
33
34
35
36
		<div class="pull-right">
			<a class="btn btn-default" href="<c:url value="/explore/map"><c:param name="crop" value="${crop.shortName}" /><c:param name="filter">${jsonFilter}</c:param></c:url>"><span class="glyphicon glyphicon-globe"></span><span style="margin-left: 0.5em;"><spring:message code="maps.view-map" /></span></a>

			<c:if test="${pagedData.totalElements le 100000}">
			<form class="form-horizontal pull-left" method="post" action="/explore/dwca">
				<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
				<input type="hidden" name="crop" value="${crop.shortName}" />
				<input type="hidden" name="filter" value="<c:out value="${jsonFilter}" />" />
				<button class="btn btn-default" type="submit"><spring:message code="filter.download-dwca" /></button>
			</form>
			</c:if>
		</div>
igoshin's avatar
igoshin committed
37
38
39
40
	</div>
	</div>

    <%--Filters--%>
Matija Obreza's avatar
Matija Obreza committed
41
42
43
44
45
46
47
48
    <div id="toggleFilters" class="applied-filters">
    	<ul class="nav nav-pills">
	    	<li class="active filter-toggler"><a><spring:message code="filters.toggle-filters" /></a></li>
	    	<li class="message right">
				<span class="${fn:length(currentFilters) gt 0 ? '' : 'hide'}"><spring:message code="filter.filters-applied" /></span>
				<span class="${fn:length(currentFilters) gt 0 ? 'hide' : ''}"><spring:message code="filter.filters-not-applied" /></span>
	    	</li>
		</ul>
49
50
    </div>
    <div id="allfilters" class="applied-filters hide">
51
    	<ul class="nav nav-pills">
Matija Obreza's avatar
Matija Obreza committed
52
53
	    	<li class="filter-toggler"><a><spring:message code="filters.toggle-filters" /></a></li>
            <li class="active dropdown form-horizontal" id="menu1">
54
55
56
57
58
59
60
61

                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <spring:message code="filter.add"/>
                    <b class="glyphicon-plus"></b>
                </a>

                <ul class="dropdown-menu">
                    <c:forEach items="${availableFilters}" var="filter">
igoshin's avatar
igoshin committed
62
                        <li><a href="#" id="${filter.key}_id" class="filter-enable">
63
64
65
66
67
68
69
                            <spring:message code="filter.${filter.key}"/></a></li>
                    </c:forEach>
                </ul>

            </li>


70
            <li class="dropdown form-horizontal" id="menu2" style="display: none">
71
72
73
74
75
                <a class="" data-toggle="modal" data-target="#myModal">
                    <spring:message code="filter.additional"/>
                    <b class="glyphicon-plus"></b>
                </a>
            </li>
Matija Obreza's avatar
Matija Obreza committed
76
77
78
79
			<li class="message right">
				<span class="${fn:length(currentFilters) gt 0 ? '' : 'hide'}"><spring:message code="filter.filters-applied" /></span>
				<span class="${fn:length(currentFilters) gt 0 ? 'hide' : ''}"><spring:message code="filter.filters-not-applied" /></span>
	    	</li>
80
        </ul>
81
82
83

		<%-- Only render currently present filters --%>
        <c:forEach items="${currentFilters}" var="filter">
igoshin's avatar
igoshin committed
84

igoshin's avatar
#12579    
igoshin committed
85
            <c:set var="normalizedKey" value="${fn:replace(filter.key,':', '_')}"/>
86
            <c:set var="filterKey" value="${filter.key}"/>
igoshin's avatar
igoshin committed
87

88
            <div class="clearfix filter-block" id="${normalizedKey}_filter" key="${normalizedKey}">
Matija Obreza's avatar
Matija Obreza committed
89
                <div class="col-lg-3 edit-fil">
90
                    <c:if test="${not filter.core}">
Matija Obreza's avatar
Matija Obreza committed
91
92
                        <c:out value="${filter.title}" />
                        <%-- <a href="<c:url value="/descriptors/${filter.key}" />"> --%>
93
                    </c:if>
igoshin's avatar
igoshin committed
94

95
                    <c:if test="${filter.core}">
Matija Obreza's avatar
Matija Obreza committed
96
						<spring:message code="filter.${filter.name}" />
97
                    </c:if>
igoshin's avatar
igoshin committed
98
                </div>
Matija Obreza's avatar
Matija Obreza committed
99
                <div class="col-lg-5 filter-new">
igoshin's avatar
igoshin committed
100
101
102
103
104
                    <c:choose>
                        <c:when test="${filter.filterType=='LIST'}">
                            <div class="">
                                <c:forEach items="${filter.options}" var="option">
                                    <div>
105
                                        <label>
106
                                            <input class="filter-list" id="${option.value}_input" ${fn:contains(filters[filter.key], option.value)?'checked':''} norm-key="${normalizedKey}" i-key="${normalizedKey}${option.value}" type="checkbox" value="${option.value}" />
107
108
                                            <spring:message code="${option.name}"/>
                                        </label>
igoshin's avatar
igoshin committed
109
110
111
112
113
114
115
116
117
                                    </div>
                                </c:forEach>
                            </div>
                        </c:when>
                        <c:when test="${filter.filterType=='I18NLIST'}">
                            <div class="">
                                <c:forEach items="${filter.options}" var="option">
                                    <div>
                                        <label>
118
                                            <input class="filter-list" id="${option.value}_input" ${fn:contains(filters[filter.key], option.value)?'checked':''} norm-key="${normalizedKey}" i-key="${normalizedKey}${option.value}" type="checkbox" value="${option.value}" />
igoshin's avatar
igoshin committed
119
120
121
122
123
124
125
126
127
128
                                            <spring:message code="${option.name}"/>
                                        </label>
                                    </div>
                                </c:forEach>
                            </div>
                        </c:when>
                        <c:when test="${filter.filterType=='AUTOCOMPLETE'}">
                            <div class="ui-front">
                                <div class="form-group input-group">
                                     <span class="input-group-btn">
Matija Obreza's avatar
Matija Obreza committed
129
                                         <input id="${normalizedKey}_input"  class="span2 form-control autocomplete-filter" x-source="${filter.autocompleteUrl}" placeholder="<spring:message code="filter.autocomplete-placeholder" />" type="text"/>
130
                                         <button class="btn notimportant filter-auto" norm-key="${normalizedKey}" >+</button>
igoshin's avatar
igoshin committed
131
132
133
134
135
136
137
                                      </span>
                                </div>
                            </div>
                        </c:when>
                        <c:when test="${filter.dataType=='NUMERIC'}">
                            <div class="form-group input-group">
                                <span class="input-group-btn">
138
139
                                    <input id="${normalizedKey}_input_1" class="span5 form-control" type="text"/>
                                    <input id="${normalizedKey}_input_2" class="span5 form-control" type="text"/>
140
                                    <button class="btn notimportant filter-range" norm-key="${normalizedKey}">+</button>
igoshin's avatar
igoshin committed
141
142
143
144
145
                                </span>
                            </div>
                        </c:when>
                        <c:when test="${filter.dataType=='BOOLEAN'}">
                            <div class="">
146
147
148
                                <div><label><input type="checkbox" ${fn:contains(filters[filter.key], 'true')?'checked':''} class="filter-bool"  i-key="${normalizedKey}true" id="${normalizedKey}" value="true"><spring:message code="boolean.true"/></label></div>
                                <div><label><input type="checkbox" ${fn:contains(filters[filter.key], 'false')?'checked':''} class="filter-bool" i-key="${normalizedKey}false" id="${normalizedKey}" value="false"><spring:message code="boolean.false"/></label></div>
                                <div><label><input type="checkbox" ${fn:contains(filters[filter.key], 'null')?'checked':''}  class="filter-bool" i-key="${normalizedKey}null" id="${normalizedKey}" value="null"><spring:message code="boolean.null"/></label></div>
149
150
151
152
153
                            </div>
                        </c:when>
                        <c:when test="${filter.name=='crop'}">
                            <div class="form-group input-group">
                                <span class="input-group-btn">
igoshin's avatar
igoshin committed
154
                                    <select name="crop" id="cropselector" i-key = "${filterKey}" class="form-control filter-crop">
155
156
157
158
159
160
                                        <option value=""></option>
                                        <c:forEach items="${crops}" var="c">
                                            <option  value="${c.shortName}" ${c.shortName== crop.shortName?'selected':''} ><c:out value="${c.getName(pageContext.response.locale)}" /></option>
                                        </c:forEach>
                                    </select>
                                </span>
igoshin's avatar
igoshin committed
161
162
163
                            </div>
                        </c:when>
                        <c:otherwise>
164
                        <div class="ui-front">
igoshin's avatar
igoshin committed
165
166
                            <div class="form-group input-group">
                                <span class="input-group-btn">
167
                                    <input class="span2 form-control" id="${normalizedKey}_input" type="text"/>
168
                                    <button class="btn notimportant filter-auto" norm-key="${normalizedKey}">+</button>
igoshin's avatar
igoshin committed
169
170
                                </span>
                            </div>
171
                        </div>
igoshin's avatar
igoshin committed
172
173
174
                        </c:otherwise>
                    </c:choose>
                </div>
Matija Obreza's avatar
Matija Obreza committed
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
                <div class="col-lg-9">
                	<div class="filter-values" id="${normalizedKey}_value">
	                    <c:forEach items="${filters[filter.key]}" var="value">
	                        <c:set var="string" value="${value}"/>
	                        <c:if test="${fn:contains(value, 'range')}">
	                            <c:set var="string" value="${fn:replace(value,'{range=[','Between ')}"/>
	                            <c:set var="string" value="${fn:replace(string,',',' and ')}"/>
	                            <c:set var="string" value="${fn:replace(string,']}','')}"/>
	                        </c:if>
	                        <c:if test="${fn:contains(value, 'min')}">
	                            <c:set var="string" value="${fn:replace(value,'{min=','More than ')}"/>
	                            <c:set var="string" value="${fn:replace(string,'}','')}"/>
	                        </c:if>
	                        <c:if test="${fn:contains(value, 'max')}">
	                            <c:set var="string" value="${fn:replace(value,'{max=','Less than ')}"/>
	                            <c:set var="string" value="${fn:replace(string,'}','')}"/>
	                        </c:if>
	                        <c:if test="${string==null}">
	                        	<c:set var="string" value="null" />
	                        </c:if>
	                        <div class="filtval complex" x-key="${normalizedKey}${string}" id="${normalizedKey}">${string}</div>
	                        <c:remove var="string" />
	                    </c:forEach>
	                </div>
                    <div style="margin-top: 3px" class="filter-apply-btn">
	                    <button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
	                    <button class="btn btn-default remove-filter"><spring:message code="filter.remove"/></button>
	                </div>
igoshin's avatar
igoshin committed
203
204
205
                </div>
            </div>
        </c:forEach>
206
207
208
209
210
211
    </div>


    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
212
            <div class="modal-content"></div>
igoshin's avatar
igoshin committed
213
214
        </div>
    </div>
215
    <!--End modal-->
igoshin's avatar
igoshin committed
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
    <%--Accessions--%>
	<table class="accessions">
		<thead>
			<tr>
				<td class="idx-col"></td>
				<td />
				<td><spring:message code="accession.accessionName" /></td>
				<td><spring:message code="accession.taxonomy" /></td>
				<td class="notimportant"><spring:message code="accession.origin" /></td>
				<td class="notimportant"><spring:message code="accession.sampleStatus" /></td>
				<td class="notimportant"><spring:message code="accession.holdingInstitute" /></td>
				<%-- 				<td><spring:message code="accession.holdingCountry" /></td>
 --%>
			</tr>
		</thead>
		<tbody>
			<c:forEach items="${pagedData.content}" var="accession" varStatus="status">
				<tr class="acn ${status.count % 2 == 0 ? 'even' : 'odd'}">
					<td class="idx-col">${status.count + pagedData.size * pagedData.number}</td>
					<td class="sel" x-aid="${accession.id}"></td>
					<td><a href="<c:url value="/acn/id/${accession.id}" />"><b><c:out value="${accession.accessionName}" /></b></a></td>
					<%-- <td><a href="<c:url value="/acn/t/${accession.taxonomy.genus}/${accession.taxonomy.species}" />"><c:out value="${accession.taxonomy.taxonName}" /></a></td> --%>
					<td><c:out value="${accession.taxonomy.taxonName}" /></td>
239
					<%-- <td class="notimportant"><a href="<c:url value="/geo/${accession.origin}" />"><c:out value="${accession.countryOfOrigin.name}" /></a></td> --%>
igoshin's avatar
igoshin committed
240
241
					<td class="notimportant"><c:out value="${accession.countryOfOrigin.getName(pageContext.response.locale)}" /></td>
					<td class="notimportant"><spring:message code="accession.sampleStatus.${accession.sampleStatus}" /></td>
242
243
					<td class="notimportant"><a href="<c:url value="/wiews/${accession.institute.code}" />"><c:out value="${accession.institute.code}" /></a></td>
					<%-- 			<td><a href="<c:url value="/geo/${accession.institute.country.code3}" />"><c:out value="${accession.institute.country.name}" /></a></td>
igoshin's avatar
igoshin committed
244
245
246
247
248
249
250
251
		 --%>
				</tr>
			</c:forEach>
		</tbody>
	</table>

    <content tag="javascript">
        <script type="text/javascript">
252
            var jsonData = ${jsonFilter};
igoshin's avatar
igoshin committed
253

igoshin's avatar
#12579    
igoshin committed
254
255
            var page=${pagedData.number};

igoshin's avatar
igoshin committed
256
            $(document).ready(function () {
igoshin's avatar
igoshin committed
257

Matija Obreza's avatar
Matija Obreza committed
258
                if (jsonData.crop !=null && jsonData.crop.length > 0) {
igoshin's avatar
igoshin committed
259
                    $("#menu2").show();
igoshin's avatar
igoshin committed
260
261
                }

igoshin's avatar
igoshin committed
262
263
264
                if (page == 0) {
                    $("#allfilters").removeClass("hide");
                    $("#toggleFilters").addClass("hide");
igoshin's avatar
igoshin committed
265
                } else {
igoshin's avatar
igoshin committed
266
267
                    $("#allfilters").addClass("hide");
                    $("#toggleFilters").removeClass("hide");
igoshin's avatar
igoshin committed
268
269
                }

igoshin's avatar
igoshin committed
270
271
272
273
274
                $(".filter-toggler").on("click", function (ev) {
                    ev.preventDefault();
                    $("#allfilters").toggleClass("hide");
                    $("#toggleFilters").toggleClass("hide");
                });
275
276


igoshin's avatar
igoshin committed
277
278
279
280
281
282
283
284
285
286
287
288
289
290
                $("#menu2").on("click", function () {
                    $.ajax("/modal", {
                        type: 'GET',
                        data: "shortName=" + jsonData.crop,
                        success: function (data) {
                            $(".modal-content").empty();
                            $(".modal-content").append(data);
                            for (var x in jsonData) {
                                console.log(".modal-body input[value='" + x + "']");
                                $(".modal-body .filter-block label > input[value='" + x + "']").prop("checked", true);
                            }
                        },
                        error: function (error) {
                            console.log(error);
291
                        }
igoshin's avatar
igoshin committed
292
                    });
293
294
295
                });


igoshin's avatar
igoshin committed
296
297
298
299
                $("body").on("click", ".additional", function () {
                    var id = $(this).attr("id");
                    var filterId = "#" + id.replace("_id", "_filter");
                    var filter = id.replace("gm_", "gm:").replace("_id", "");
300

igoshin's avatar
igoshin committed
301
302
303
304
305
306
307
                    if ($(this).is(":checked")) {
                        GenesysFilterUtil.appendFilter(filter, filterId,jsonData);
                    } else {
                        delete jsonData[filter];
                        $(filterId).remove();
                    }
                });
308

309

igoshin's avatar
igoshin committed
310
311
312
                $("body").on("click", ".filter-list", function () {
                    GenesysFilter.filterList($(this), jsonData);
                });
313

igoshin's avatar
igoshin committed
314
315
316
                $("body").on("click", ".filter-auto", function () {
                    GenesysFilter.filterAutocomplete($(this), jsonData);
                });
317

igoshin's avatar
igoshin committed
318
319
320
                $("body").on("click", ".filter-range", function () {
                    GenesysFilter.filterRange($(this), jsonData);
                });
igoshin's avatar
igoshin committed
321

igoshin's avatar
igoshin committed
322
323
324
                $("body").on("click", ".filter-bool", function () {
                    GenesysFilter.filterBoolean($(this), jsonData);
                });
igoshin's avatar
igoshin committed
325

igoshin's avatar
igoshin committed
326
327
328
                $("body").on("click", ".filter-crop", function () {
                    GenesysFilter.filterCrop($(this), jsonData);
                });
igoshin's avatar
igoshin committed
329

igoshin's avatar
igoshin committed
330
331
332
333
334
                $("body").on("click", ".filter-enable", function () {
                    var filter=$(this).attr("id").replace("_id","");
                    var filterId = "#" + filter + "_filter";
                    GenesysFilterUtil.appendFilter(filter,filterId,jsonData);
                });
igoshin's avatar
igoshin committed
335

igoshin's avatar
igoshin committed
336
337
338
                $("body").on("click", ".apply", function () {
                    GenesysFilterUtil.submitJson(jsonData);
                });
Matija Obreza's avatar
Matija Obreza committed
339
340
341
                
                $("body").on("click", ".remove-filter", function () {
                    var key = $(this).parents(".filter-block").attr("key");
igoshin's avatar
igoshin committed
342
343
344
                    delete jsonData[key.replace("_", ":")];
                    GenesysFilterUtil.submitJson(jsonData);
                });
igoshin's avatar
igoshin committed
345

igoshin's avatar
igoshin committed
346
                $("body").on("click", ".edit-fil", function () {
Matija Obreza's avatar
Matija Obreza committed
347
                	GenesysFilterUtil.showFilter($(this).parents(".filter-block"));
348
349
                });

igoshin's avatar
igoshin committed
350
351
                $("body").on("click", ".filtval", function (event) {
                    event.preventDefault();
igoshin's avatar
igoshin committed
352

igoshin's avatar
igoshin committed
353
                    var key = $(this).attr("id");
igoshin's avatar
igoshin committed
354

igoshin's avatar
igoshin committed
355
                    var value = $(this).attr("x-key").replace(key, "");
igoshin's avatar
igoshin committed
356

igoshin's avatar
igoshin committed
357
358
359
360
361
                    if (value.indexOf("{") > -1) {
                        var jsonVal = value.replace("=", ":").replace(" ", "");
                        value = GenesysFilterUtil.setCharAt(jsonVal, jsonVal.indexOf("{"), '{"');
                        value = GenesysFilterUtil.setCharAt(value, jsonVal.indexOf(":") + 1, '":');
                    }
Matija Obreza's avatar
Matija Obreza committed
362
363
                    
                    if (value=="null") value=null;
igoshin's avatar
igoshin committed
364
                    GenesysFilterUtil.removeValue(value, key, jsonData);
igoshin's avatar
#12579    
igoshin committed
365

Matija Obreza's avatar
Matija Obreza committed
366
                    if (! $(this).parents(".filter-block").hasClass("filter-edit")) {
igoshin's avatar
igoshin committed
367
368
                        GenesysFilterUtil.submitJson(jsonData);
                    }
igoshin's avatar
#12579    
igoshin committed
369

igoshin's avatar
igoshin committed
370
371
372
                    $(this).remove();
                    $('input[i-key=' + key + value + ']').prop('checked', false);
                });
igoshin's avatar
igoshin committed
373

Matija Obreza's avatar
Matija Obreza committed
374
                GenesysFilterUtil.registerAutocomplete("#allfilters");
igoshin's avatar
igoshin committed
375
376
377
378
379
            });
        </script>
    </content>
</body>
</html>