Commit 7180ad16 authored by igoshin's avatar igoshin Committed by Matija Obreza
Browse files

js cleanup

#12834
parent 3ed87a50
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<c:forEach items="${availableFilters}" var="filter"> <c:forEach items="${availableFilters}" var="filter">
<li><a href="#" id="${filter.key}_id" onclick="enableFilter('${filter.key}')"> <li><a href="#" id="${filter.key}_id" class="filter-enable">
<spring:message code="filter.${filter.key}"/></a></li> <spring:message code="filter.${filter.key}"/></a></li>
</c:forEach> </c:forEach>
</ul> </ul>
...@@ -162,7 +162,7 @@ ...@@ -162,7 +162,7 @@
<c:when test="${filter.name=='crop'}"> <c:when test="${filter.name=='crop'}">
<div class="form-group input-group"> <div class="form-group input-group">
<span class="input-group-btn"> <span class="input-group-btn">
<select name="crop" id="cropselector" onclick="filterCrop('${filterKey}')" class="form-control"> <select name="crop" id="cropselector" i-key = "${filterKey}" class="form-control filter-crop">
<option value=""></option> <option value=""></option>
<c:forEach items="${crops}" var="c"> <c:forEach items="${crops}" var="c">
<option value="${c.shortName}" ${c.shortName== crop.shortName?'selected':''} ><c:out value="${c.getName(pageContext.response.locale)}" /></option> <option value="${c.shortName}" ${c.shortName== crop.shortName?'selected':''} ><c:out value="${c.getName(pageContext.response.locale)}" /></option>
...@@ -267,331 +267,129 @@ ...@@ -267,331 +267,129 @@
var page=${pagedData.number}; var page=${pagedData.number};
function setCharAt(str,index,chr) { $(document).ready(function () {
if(index > str.length-1) return str;
return str.substr(0,index) + chr + str.substr(index+1);
}
function submitJson() { if (jsonData.crop != null) {
var filter = JSON.stringify(jsonData); $("#menu2").show();
var url='/explore?filter=' + filter;
window.location.href = encodeURI(url);
}
function existInJson(input, key) {
key=key.replace("_",":");
var exist = input != '';
var array = jsonData[key];
for (var val in array) {
if (array[val] == input) {
exist = false;
}
}
return exist;
}
function enableFilter(key) {
var editId = "#" + key + "_filter";
appendFilter(key, editId);
}
function appendHtml(key, value,element) {
var valueId = "#" + key + "_value";
var summaryViewId="#"+key+"_summary";
var div = "<div class='filtval complex' x-key='" + key + value + "' id='" + key + "'>" + value + "</div>";
$(element).parent().parent().parent().parent().parent().find(valueId).append(div);
$(element).parent().parent().parent().parent().parent().find(summaryViewId).append(div);
}
function collectData(key,value) {
key=key.replace("_",":");
var jsonValue = [];
var exist = jsonData[key] != null;
if(exist){
jsonValue=jsonData[key];
}
jsonValue.push(value);
return jsonValue;
}
function removeValue(value, key) {
key= key.replace("_",":")
var array = jsonData[key];
for (var val in array) {
var isJson = value.indexOf("{") > -1;
var jsonArray = array[val];
if (isJson) {
jsonArray = JSON.stringify(jsonArray);
}
if (jsonArray == value) {
array.splice(val, 1);
}
}
}
function filterAuto(element) {
var key=$(element).attr("norm-key");
var inputId = "#" + key + "_input";
var value = $(element).parent().find(inputId).val();
if (existInJson(value, key)) {
appendHtml(key, value,element);
jsonData[key.replace("_",":")] = collectData(key,value);
$(inputId).val('');
}
}
function filterRange(element) {
var key= $(element).attr("norm-key");
var inputId1 = "#" + key + "_input_1";
var inputId2 = "#" + key + "_input_2";
var inputValue1 = $(inputId1).val();
var inputValue2 = $(inputId2).val();
var value = null;
var range = {};
var rangeValue = [];
var jsonValue = [];
var exist = jsonData[key.replace("_",":")] != null;
if (exist) {
jsonValue = jsonData[key.replace("_",":")];
}
var notNull=inputValue1!=''&&inputValue2!='';
if (!isNaN(inputValue1) && !isNaN(inputValue2)&&notNull) {
if (inputValue1 == inputValue2) {
jsonValue.push(parseFloat(inputValue1));
value = inputValue1;
} else if (inputValue1 != '' && inputValue2 == '') {
range["min"] = parseFloat(inputValue1);
jsonValue.push(range);
value = "More than " + inputValue1;
} else if (inputValue1 == '' && inputValue2 != '') {
range["max"] = parseFloat(inputValue2);
jsonValue.push(range);
value = "Less than " + inputValue2;
} else if (inputValue1 != '' && inputValue2 != '') {
rangeValue.push(parseFloat(inputValue1));
rangeValue.push(parseFloat(inputValue2));
range["range"] = rangeValue;
jsonValue.push(range);
value = "Between " + inputValue1 + " and " + inputValue2;
}
appendHtml(key, value,element);
jsonData[key.replace("_",":")] = jsonValue;
$(inputId1).val('');
$(inputId2).val('');
} }
}
function filterList(element) {
var key = $(element).attr("norm-key");
var option = $(element).val();
var inputId = "#" + option + "_input";
var value = $(element).parent().find(inputId).val();
var checked = $(element).parent().find(inputId).is(":checked");
if (checked && existInJson(value, key)) {
jsonData[key.replace("_", ":")] = collectData(key, value);
appendHtml(key, value, element);
if (page == 0) {
$("#allfilters").removeClass("hide");
$("#toggleFilters").addClass("hide");
} else { } else {
var xkey = key + value; $("#allfilters").addClass("hide");
removeValue(value, key); $("#toggleFilters").removeClass("hide");
$('div[x-key=' + xkey + ']').remove();
} }
}
function filterCrop(key) { $(".filter-toggler").on("click", function (ev) {
var selectBox = document.getElementById("cropselector"); ev.preventDefault();
var value = selectBox.options[selectBox.selectedIndex].value; $("#allfilters").toggleClass("hide");
$("#toggleFilters").toggleClass("hide");
});
delete jsonData[key];
$(selectBox).parent().parent().parent().parent().find('.complex').remove()
if(value!=''){ $("#menu2").on("click", function () {
appendHtml(key, value); $.ajax("/modal", {
jsonData[key] = collectData(key, value); type: 'GET',
$("#menu2").show(); data: "shortName=" + jsonData.crop,
}else{ success: function (data) {
$("#menu2").hide(); $(".modal-content").empty();
} $(".modal-content").append(data);
} for (var x in jsonData) {
console.log(".modal-body input[value='" + x + "']");
function appendFilter(filter, filterId) { $(".modal-body .filter-block label > input[value='" + x + "']").prop("checked", true);
if ($(filterId).length != 0) { }
console.log("Filter already loaded"); },
return; error: function (error) {
} console.log(error);
$.ajax("/additional-filter", {
type: 'GET',
data: "filter=" + filter,
success: function (data) {
jsonData[filter]=[];
$("#allfilters").append(data);
},
error: function (error) {
console.log(error);
}
});
}
$( document ).ready(function() {
if (jsonData.crop != null) {
$("#menu2").show();
}
$("#menu2").on("click", function (event) {
$.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);
}
}); });
});
$("body").on("click",".additional", function (event) {
var id = $(this).attr("id");
var filterId = "#" + id.replace("_id", "_filter");
var filter = id.replace("gm_", "gm:").replace("_id", "");
if ($(this).is(":checked")) {
appendFilter(filter, filterId);
}else{
delete jsonData[filter];
$(filterId).remove();
}
});
if(page==0) { $("body").on("click", ".additional", function () {
$("#allfilters").removeClass("hide"); var id = $(this).attr("id");
$("#toggleFilters").addClass("hide"); var filterId = "#" + id.replace("_id", "_filter");
} else { var filter = id.replace("gm_", "gm:").replace("_id", "");
$("#allfilters").addClass("hide");
$("#toggleFilters").removeClass("hide");
}
$(".filter-toggler").on("click", function(ev) { if ($(this).is(":checked")) {
ev.preventDefault(); GenesysFilterUtil.appendFilter(filter, filterId,jsonData);
$("#allfilters").toggleClass("hide"); } else {
$("#toggleFilters").toggleClass("hide"); delete jsonData[filter];
}); $(filterId).remove();
}
});
$("body").on("click", ".filter-list", function(event) {
filterList($(this));
});
$("body").on("click", ".filter-auto", function(event) { $("body").on("click", ".filter-list", function () {
filterAuto($(this)); GenesysFilter.filterList($(this), jsonData);
}); });
$("body").on("click", ".filter-range", function(event) { $("body").on("click", ".filter-auto", function () {
filterRange($(this)); GenesysFilter.filterAutocomplete($(this), jsonData);
}); });
$("body").on("click",".filter-bool", function (event) { $("body").on("click", ".filter-range", function () {
GenesysFilter.filterRange($(this), jsonData);
});
var value = $(this).val(); $("body").on("click", ".filter-bool", function () {
var key = $(this).attr("id"); GenesysFilter.filterBoolean($(this), jsonData);
var checked = $(this).is(":checked"); });
if (checked && existInJson(value, key)) { $("body").on("click", ".filter-crop", function () {
appendHtml(key, value); GenesysFilter.filterCrop($(this), jsonData);
jsonData[key.replace("_",":")] = collectData(key,value); });
} else { $("body").on("click", ".filter-enable", function () {
var xkey = key + value; var filter=$(this).attr("id").replace("_id","");
removeValue(value, key); var filterId = "#" + filter + "_filter";
$('div[x-key=' + xkey + ']').remove(); GenesysFilterUtil.appendFilter(filter,filterId,jsonData);
} });
});
$("body").on("click",".apply",function (event) { $("body").on("click", ".apply", function () {
submitJson(); GenesysFilterUtil.submitJson(jsonData);
}); });
$("body").on("click",".close-fil", function (event) { $("body").on("click", ".close-fil", function () {
var parent = $(this).parent().parent(); var key = $(this).parent().parent().attr("key");
var key = parent.attr("key"); delete jsonData[key.replace("_", ":")];
delete jsonData[key.replace("_",":")]; GenesysFilterUtil.submitJson(jsonData);
submitJson(); });
parent.hide();
});
$("body").on("click",".edit-fil", function () { $("body").on("click", ".edit-fil", function () {
var parent = $(this).parent().parent().find(".filter-new"); $(this).parent().parent().find(".filter-new").toggle("fast");
var key = parent.attr("key");
parent.toggle("fast", function() {
}); });
});
$("body").on("click", ".filtval", function (event) { $("body").on("click", ".filtval", function (event) {
event.preventDefault(); event.preventDefault();
var key = $(this).attr("id"); var key = $(this).attr("id");
var value = $(this).attr("x-key").replace(key,""); var value = $(this).attr("x-key").replace(key, "");
if(value.indexOf("{") > -1){ if (value.indexOf("{") > -1) {
var jsonVal=value.replace("=",":").replace(" ",""); var jsonVal = value.replace("=", ":").replace(" ", "");
value = setCharAt(jsonVal, jsonVal.indexOf("{"), '{"'); value = GenesysFilterUtil.setCharAt(jsonVal, jsonVal.indexOf("{"), '{"');
value = setCharAt(value, jsonVal.indexOf(":") + 1, '":'); value = GenesysFilterUtil.setCharAt(value, jsonVal.indexOf(":") + 1, '":');
} }
removeValue(value, key); GenesysFilterUtil.removeValue(value, key, jsonData);
if($(this).parent().parent().find(".filter-new").is(":hidden")){ if ($(this).parent().parent().find(".filter-new").is(":hidden")) {
submitJson(); GenesysFilterUtil.submitJson(jsonData);
} }
$(this).remove(); $(this).remove();
$('input[i-key=' + key + value + ']').prop('checked', false); $('input[i-key=' + key + value + ']').prop('checked', false);
}); });
$(".autocomplete-filter").each(function () { $(".autocomplete-filter").each(function () {
var t = $(this); var t = $(this);
t.autocomplete({ delay: 200, minLength: 3, source: t.attr('x-source'), messages: { noResults: '', results: function () { t.autocomplete({ delay: 200, minLength: 3, source: t.attr('x-source'), messages: { noResults: '', results: function () {
} } }); } } });
});
}); });
});
</script> </script>
</content> </content>
</body> </body>
......
...@@ -96,6 +96,226 @@ GenesysMaps.BoundingBox.prototype.getBounds = function() { ...@@ -96,6 +96,226 @@ GenesysMaps.BoundingBox.prototype.getBounds = function() {
return [[this.west, this.south],[this.east, this.north]]; return [[this.west, this.south],[this.east, this.north]];
}; };
GenesysFilter = {
//add filter with autocomplete or exact field
filterAutocomplete: function (element, jsonData) {
var key = $(element).attr("norm-key");
var inputId = "#" + key + "_input";
var value = $(element).parent().find(inputId).val();
if (GenesysFilterUtil.existInJson(value, key, jsonData)) {
GenesysFilterUtil.appendHtml(key, value, element);
jsonData[key.replace("_", ":")] = GenesysFilterUtil.collectData(key, value, jsonData);
$(inputId).val('');
}
return jsonData;
},
//add filter with two input text fileds for enter values of range
filterRange: function (element, jsonData) {
var key = $(element).attr("norm-key");
var inputId1 = "#" + key + "_input_1";
var inputId2 = "#" + key + "_input_2";
var inputValue1 = $(inputId1).val();
var inputValue2 = $(inputId2).val();
var value = null;
var range = {};
var rangeValue = [];
var jsonValue = [];
var exist = jsonData[key.replace("_", ":")] != null;
if (exist) {
jsonValue = jsonData[key.replace("_", ":")];
}
var notNull = inputValue1 != '' && inputValue2 != '';
if (!isNaN(inputValue1) && !isNaN(inputValue2) && notNull) {
if (inputValue1 == inputValue2) {
jsonValue.push(parseFloat(inputValue1));
value = inputValue1;
} else if (inputValue1 != '' && inputValue2 == '') {
range["min"] = parseFloat(inputValue1);
jsonValue.push(range);
value = "More than " + inputValue1;
} else if (inputValue1 == '' && inputValue2 != '') {
range["max"] = parseFloat(inputValue2);
jsonValue.push(range);
value = "Less than " + inputValue2;
} else if (inputValue1 != '' && inputValue2 != '') {
rangeValue.push(parseFloat(inputValue1));
rangeValue.push(parseFloat(inputValue2));
range["range"] = rangeValue;
jsonValue.push(range);
value = "Between " + inputValue1 + " and " + inputValue2;
}
GenesysFilterUtil.appendHtml(key, value, element);
jsonData[key.replace("_", ":")] = jsonValue;
$(inputId1).val('');
$(inputId2).val('');
return jsonData;
}
},
//add filter with few checkboxes
filterList: function (element, jsonData) {
var key = $(element).attr("norm-key");
var option = $(element).val();
var inputId = "#" + option + "_input";
var value = $(element).parent().find(inputId).val();
var checked = $(element).parent().find(inputId).is(":checked");
if (checked && GenesysFilterUtil.existInJson(value, key, jsonData)) {
jsonData[key.replace("_", ":")] = GenesysFilterUtil.collectData(key, value, jsonData);
GenesysFilterUtil.appendHtml(key, value, element);
} else {
var xkey = key + value;
GenesysFilterUtil.removeValue(value, key, jsonData);
$('div[x-key=' + xkey + ']').remove();
}
},
//add filter with three checkboxes true/false/null values
filterBoolean: function (element, jsonData) {
var value = $(element).val();
var key = $(element).attr("id");