Skip to content

GitLab

Genesys Backend
Genesys Backend
Commit ba5b1b3c authored by Matija Obreza's avatar Matija Obreza
Browse files
Options

Included location filter, i18n corrections 

css.jsp
parent b25083b9
Hide whitespace changes
Inline Side-by-side
Showing with 658 additions and 63 deletions
pom.xml
View file @ ba5b1b3c
......@@ -609,6 +609,7 @@
<include>bootstrap.min.css</include>
<include>jquery-ui.min.css</include>
<include>leaflet.min.css</include>
<include>leaflet.locationfilter.min.css</include>
<include>custom.min.css</include>
<include>responsive.min.css</include>
<include>forza.min.css</include>
......
src/main/webapp/WEB-INF/decorator/css.jsp 0 → 100644
View file @ ba5b1b3c
<%@include file="/WEB-INF/jsp/init.jsp"%>
<c:choose>
<c:when test="${requestContext.theme.name eq 'one'}">
<link href="<c:url value="/html/css/all.min.css" />" rel="stylesheet" />
</c:when>
<c:when test="${requestContext.theme.name eq 'all-min'}">
<link href="<c:url value="/html/css/bootstrap.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.locationfilter.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/genesys.min.css" />" rel="stylesheet" />
</c:when>
<c:when test="${requestContext.theme.name eq 'all'}">
<link href="<c:url value="/html/css/bootstrap.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.locationfilter.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/genesys.css" />" rel="stylesheet" />
</c:when>
<c:otherwise>
<link href="<c:url value="/html/css/bootstrap.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.locationfilter.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/custom.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/responsive.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/forza.css" />" rel="stylesheet" />
</c:otherwise>
</c:choose>
src/main/webapp/WEB-INF/decorator/entry.jsp
View file @ ba5b1b3c
......@@ -18,31 +18,7 @@
<title><sitemesh:write property="title" /></title>
<!-- Custom styles for this template -->
<c:choose>
<c:when test="${requestContext.theme.name eq 'one'}">
<link href="<c:url value="/html/css/all.min.css" />" rel="stylesheet" />
</c:when>
<c:when test="${requestContext.theme.name eq 'all-min'}">
<link href="<c:url value="/html/css/bootstrap.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/genesys.min.css" />" rel="stylesheet" />
</c:when>
<c:when test="${requestContext.theme.name eq 'all'}">
<link href="<c:url value="/html/css/bootstrap.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/genesys.css" />" rel="stylesheet" />
</c:when>
<c:otherwise>
<link href="<c:url value="/html/css/bootstrap.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/custom.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/responsive.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/forza.css" />" rel="stylesheet" />
</c:otherwise>
</c:choose>
<%@include file="css.jsp" %>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
......
src/main/webapp/WEB-INF/decorator/main.jsp
View file @ ba5b1b3c
......@@ -22,29 +22,7 @@
<title><sitemesh:write property="title" /></title>
<!-- Custom styles for this template -->
<c:choose>
<c:when test="${requestContext.theme.name eq 'one'}">
<link href="<c:url value="/html/css/all.min.css" />" rel="stylesheet" />
</c:when>
<c:when test="${requestContext.theme.name eq 'all-min'}">
<link href="<c:url value="/html/css/bootstrap.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/genesys.min.css" />" rel="stylesheet" />
</c:when>
<c:when test="${requestContext.theme.name eq 'all'}">
<link href="<c:url value="/html/css/bootstrap.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/genesys.css" />" rel="stylesheet" />
</c:when>
<c:otherwise>
<link href="<c:url value="/html/css/bootstrap.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/custom.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/responsive.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/forza.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.css" />" rel="stylesheet" />
</c:otherwise>
</c:choose>
<%@include file="css.jsp" %>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
......
src/main/webapp/WEB-INF/jsp/accession/details.jsp
View file @ ba5b1b3c
......@@ -53,16 +53,14 @@
<c:if test="${accessionGeo.latitude ne null}">
<div class="crop-location">
<h3><spring:message code="accession.collecting.site" /></h3>
<div id="map" class="map-container">
<spring:message code="maps.loading-map" />
</div>
<div id="map" class="map-container"></div>
<table class="map-data">
<tr>
<td><spring:message code="filter.lat" />:</td>
<td><spring:message code="filter.latitude" />:</td>
<td><c:out value="${accessionGeo.latitude}" /></td>
</tr><tr>
<td><spring:message code="filter.lon" />:</td>
<td><spring:message code="filter.longitude" />:</td>
<td><c:out value="${accessionGeo.longitude}" /></td>
</tr><tr>
<td><spring:message code="accession.elevation" />:</td>
......@@ -361,13 +359,24 @@
</div>
<content tag="javascript">
<script type="text/javascript">
<c:if test="${accessionGeo ne null and accessionGeo.latitude ne null}">
jQuery(document).ready(function() {
var accessionMap=GoogleMaps.map("${pageContext.response.locale.language}", $("#map"), { center: new GoogleMaps.LatLng(${accessionGeo.latitude}, ${accessionGeo.longitude}), markerTitle: "<spring:escapeBody javaScriptEscape="true">${accession.accessionName}, ${accession.instituteCode}</spring:escapeBody>" });
});
</c:if>
<c:if test="${accessionGeo ne null and accessionGeo.latitude ne null}">
<script type="text/javascript" src="<c:url value="/html/js/leaflet.js" />"></script>
<script type="text/javascript">
L.Icon.Default.imagePath='<c:url value="/html/css/leaflet" />';
jQuery(document).ready(function() {
var map = L.map('map').setView([${accessionGeo.latitude}, ${accessionGeo.longitude}], 5);
L.tileLayer('https://otile{s}-s.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png', {
attribution: "MapQuest",
styleId: 22677,
subdomains: ['1','2','3','4'],
opacity: 0.6
}).addTo(map);
var marker = L.marker([${accessionGeo.latitude}, ${accessionGeo.longitude}]).addTo(map);
});
</script>
</c:if>
<script type="text/javascript">
<%@include file="/WEB-INF/jsp/wiews/ga.jsp"%>
_pageDim = { institute: '${accession.instituteCode}', genus: '${accession.taxonomy.genus}' };
</script>
......
src/main/webapp/WEB-INF/jsp/accession/map.jsp
View file @ ba5b1b3c
......@@ -14,8 +14,10 @@
<div class="main-col-header">
<a href="javascript: window.history.go(-1);"><spring:message code="navigate.back" /></a>
</div>
<div class="row" style="">
<div class="row">
<a class="" href="<c:url value="/explore" />" id="selectArea">View accessions</a>
</div>
<div class="row">
<div class="col-sm-12">
<div id="map" class="gis-map gis-map-square"></div>
</div>
......@@ -23,6 +25,7 @@
<script type="text/javascript" src="<c:url value="/html/js/leaflet.js" />"></script>
<script type="text/javascript" src="<c:url value="/html/js/leaflet.locationfilter.js" />"></script>
<content tag="javascript">
<script type="text/javascript">
jQuery(document).ready(function() {
......@@ -39,6 +42,32 @@
subdomains: ['1','2','3','4']
}).addTo(map);
//.add(po.image().url("http://a.tile.openstreetmap.org/{Z}/{X}/{Y}.png"))
$("#selectArea").hide();
var filterJson=${jsonFilter};
var locationFilter = new L.LocationFilter().addTo(map);
locationFilter.on("change", function (e) {
// Do something when the bounds change.
// Bounds are available in `e.bounds`.
var bounds=locationFilter.getBounds();
filterJson.latitude=[{range:[bounds.getSouth(),bounds.getNorth()]}];
filterJson.longitude=[{range:[bounds.getWest(),bounds.getEast()]}];
});
locationFilter.on("enabled", function () {
// Do something when enabled.
$("#selectArea").show();
});
locationFilter.on("disabled", function () {
// Do something when disabled.
$("#selectArea").hide();
});
$("#selectArea").on("click", function(e) {
this.href=this.href+'?filter='+JSON.stringify(filterJson);
});
});
</script>
</content>
......
src/main/webapp/html/css/leaflet.css
View file @ ba5b1b3c
......@@ -278,12 +278,12 @@
border-radius: 5px;
}
.leaflet-control-layers-toggle {
background-image: url(images/layers.png);
background-image: url(leaflet/layers.png);
width: 36px;
height: 36px;
}
.leaflet-retina .leaflet-control-layers-toggle {
background-image: url(images/layers-2x.png);
background-image: url(leaflet/layers-2x.png);
background-size: 26px 26px;
}
.leaflet-touch .leaflet-control-layers-toggle {
......
src/main/webapp/html/css/leaflet.locationfilter.css 0 → 100644
View file @ ba5b1b3c
div.leaflet-marker-icon.location-filter.resize-marker {
background: url( leaflet/resize-handle.png ) no-repeat;
cursor: move;
}
div.leaflet-marker-icon.location-filter.move-marker {
background: url( leaflet/move-handle.png ) no-repeat;
cursor: move;
}
div.location-filter.button-container {
background: #bfbfbf;
background: rgba(0, 0, 0, 0.25);
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
padding: 5px;
}
.leaflet-container div.location-filter.button-container a {
display: inline-block;
color: #0F2416;
font-size: 11px;
font-weight: normal;
text-shadow: #A1BB9C 0 1px;
padding: 6px 7px;
border: 1px solid #9CC5A4;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset rgba(255,255,255,0.75) 0 1px 1px;
-moz-box-shadow: inset rgba(255,255,255,0.75) 0 1px 1px;
box-shadow: inset rgba(255,255,255,0.75) 0 1px 1px;
background: #c4e3b9;
background: rgba(218, 252, 205, 0.9);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(218, 252, 205, 0.9)), color-stop(100%, rgba(173, 226, 176, 0.9)));
background: -webkit-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background: -moz-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background: -ms-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background: -o-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background: linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
}
.leaflet-container div.location-filter.button-container a:hover {
color: #263F1C;
background: #dde6d8;
background: rgba(245, 255, 240, 0.9);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(245, 255, 240, 0.9)), color-stop(100%, rgba(203, 228, 205, 0.9)));
background: -webkit-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background: -moz-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background: -ms-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background: -o-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background: linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
}
.leaflet-container div.location-filter.button-container a.enable-button {
padding: 6px 7px 6px 25px;
background-image: url( leaflet/filter-icon.png ), -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(218, 252, 205, 0.9)), color-stop(100%, rgba(173, 226, 176, 0.9)));
background-image: url( leaflet/filter-icon.png ), -webkit-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background-image: url( leaflet/filter-icon.png ), -moz-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background-image: url( leaflet/filter-icon.png ), -ms-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background-image: url( leaflet/filter-icon.png ), -o-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background-image: url( leaflet/filter-icon.png ), linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background-repeat: no-repeat;
background-position: left center;
}
.leaflet-container div.location-filter.button-container a.enable-button:hover,
.leaflet-container div.location-filter.button-container.enabled a.enable-button {
background-image: url( leaflet/filter-icon.png ), -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(245, 255, 240, 0.9)), color-stop(100%, rgba(203, 228, 205, 0.9)));
background-image: url( leaflet/filter-icon.png ), -webkit-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background-image: url( leaflet/filter-icon.png ), -moz-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background-image: url( leaflet/filter-icon.png ), -ms-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background-image: url( leaflet/filter-icon.png ), -o-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background-image: url( leaflet/filter-icon.png ), linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background-repeat: no-repeat;
background-position: left center;
}
.leaflet-container div.location-filter.button-container a.adjust-button {
margin-left: 2px;
}
src/main/webapp/html/js/leaflet.locationfilter.js 0 → 100644
View file @ ba5b1b3c
/*
* Leaflet.locationfilter - leaflet location filter plugin
* Copyright (C) 2012, Tripbirds.com
* http://tripbirds.com
*
* Licensed under the MIT License.
*
* Date: 2012-09-24
* Version: 0.1
*/
L.LatLngBounds.prototype.modify = function(map, amount) {
var sw = this.getSouthWest(),
ne = this.getNorthEast(),
swPoint = map.latLngToLayerPoint(sw),
nePoint = map.latLngToLayerPoint(ne);
sw = map.layerPointToLatLng(new L.Point(swPoint.x-amount, swPoint.y+amount));
ne = map.layerPointToLatLng(new L.Point(nePoint.x+amount, nePoint.y-amount));
return new L.LatLngBounds(sw, ne);
};
L.Control.Button = L.Class.extend({
initialize: function(options) {
L.Util.setOptions(this, options);
},
addTo: function(container) {
container.addButton(this);
return this;
},
onAdd: function (buttonContainer) {
this._buttonContainer = buttonContainer;
this._button = L.DomUtil.create('a', this.options.className, this._buttonContainer.getContainer());
this._button.href = '#';
this.setText(this.options.text);
var that = this;
this._onClick = function(event) {
that.options.onClick.call(that, event);
};
L.DomEvent
.on(this._button, 'click', L.DomEvent.stopPropagation)
.on(this._button, 'mousedown', L.DomEvent.stopPropagation)
.on(this._button, 'dblclick', L.DomEvent.stopPropagation)
.on(this._button, 'click', L.DomEvent.preventDefault)
.on(this._button, 'click', this._onClick, this);
},
remove: function() {
L.DomEvent.off(this._button, "click", this._onClick);
this._buttonContainer.getContainer().removeChild(this._button);
},
setText: function(text) {
this._button.title = text;
this._button.innerHTML = text;
}
});
L.Control.ButtonContainer = L.Control.extend({
options: {
position: 'topleft'
},
getContainer: function() {
if (!this._container) {
this._container = L.DomUtil.create('div', this.options.className);
}
return this._container;
},
onAdd: function (map) {
this._map = map;
return this.getContainer();
},
addButton: function(button) {
button.onAdd(this);
},
addClass: function(className) {
L.DomUtil.addClass(this.getContainer(), className);
},
removeClass: function(className) {
L.DomUtil.removeClass(this.getContainer(), className);
}
});
L.LocationFilter = L.Class.extend({
includes: L.Mixin.Events,
options: {
enableButton: {
enableText: "Select area",
disableText: "Remove selection"
},
adjustButton: {
text: "Select area within current zoom"
}
},
initialize: function(options) {
L.Util.setOptions(this, options);
},
addTo: function(map) {
map.addLayer(this);
return this;
},
onAdd: function(map) {
this._map = map;
if (this.options.enableButton || this.options.adjustButton) {
this._initializeButtonContainer();
}
if (this.options.enable) {
this.enable();
}
},
onRemove: function(map) {
this.disable();
if (this._buttonContainer) {
this._buttonContainer.removeFrom(map);
}
},
/* Get the current filter bounds */
getBounds: function() {
return new L.LatLngBounds(this._sw, this._ne);
},
setBounds: function(bounds) {
this._nw = bounds.getNorthWest();
this._ne = bounds.getNorthEast();
this._sw = bounds.getSouthWest();
this._se = bounds.getSouthEast();
if (this.isEnabled()) {
this._draw();
this.fire("change", {bounds: bounds});
}
},
isEnabled: function() {
return this._enabled;
},
/* Draw a rectangle */
_drawRectangle: function(bounds, options) {
options = options || {};
var defaultOptions = {
stroke: false,
fill: true,
fillColor: "black",
fillOpacity: 0.3,
clickable: false
};
options = L.Util.extend(defaultOptions, options);
var rect = new L.Rectangle(bounds, options);
rect.addTo(this._layer);
return rect;
},
/* Draw a draggable marker */
_drawImageMarker: function(point, options) {
var marker = new L.Marker(point, {
icon: new L.DivIcon({
iconAnchor: options.anchor,
iconSize: options.size,
className: options.className
}),
draggable: true
});
marker.addTo(this._layer);
return marker;
},
/* Draw a move marker. Sets up drag listener that updates the
filter corners and redraws the filter when the move marker is
moved */
_drawMoveMarker: function(point) {
var that = this;
this._moveMarker = this._drawImageMarker(point, {
"className": "location-filter move-marker",
"anchor": [-10, -10],
"size": [13,13]
});
this._moveMarker.on('drag', function(e) {
var markerPos = that._moveMarker.getLatLng(),
latDelta = markerPos.lat-that._nw.lat,
lngDelta = markerPos.lng-that._nw.lng;
that._nw = new L.LatLng(that._nw.lat+latDelta, that._nw.lng+lngDelta, true);
that._ne = new L.LatLng(that._ne.lat+latDelta, that._ne.lng+lngDelta, true);
that._sw = new L.LatLng(that._sw.lat+latDelta, that._sw.lng+lngDelta, true);
that._se = new L.LatLng(that._se.lat+latDelta, that._se.lng+lngDelta, true);
that._draw();
});
this._setupDragendListener(this._moveMarker);
return this._moveMarker;
},
/* Draw a resize marker */
_drawResizeMarker: function(point, latFollower, lngFollower, otherPos) {
return this._drawImageMarker(point, {
"className": "location-filter resize-marker",
"anchor": [7, 6],
"size": [13, 12]
});
},
/* Track moving of the given resize marker and update the markers
given in options.moveAlong to match the position of the moved
marker. Update filter corners and redraw the filter */
_setupResizeMarkerTracking: function(marker, options) {
var that = this;
marker.on('drag', function(e) {
var curPosition = marker.getLatLng(),
latMarker = options.moveAlong.lat,
lngMarker = options.moveAlong.lng;
// Move follower markers when this marker is moved
latMarker.setLatLng(new L.LatLng(curPosition.lat, latMarker.getLatLng().lng, true));
lngMarker.setLatLng(new L.LatLng(lngMarker.getLatLng().lat, curPosition.lng, true));
// Sort marker positions in nw, ne, sw, se order
var corners = [that._nwMarker.getLatLng(),
that._neMarker.getLatLng(),
that._swMarker.getLatLng(),
that._seMarker.getLatLng()];
corners.sort(function(a, b) {
if (a.lat != b.lat)
return b.lat-a.lat;
else
return a.lng-b.lng;
});
// Update corner points and redraw everything except the resize markers
that._nw = corners[0];
that._ne = corners[1];
that._sw = corners[2];
that._se = corners[3];
that._draw({repositionResizeMarkers: false});
});
this._setupDragendListener(marker);
},