andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

use text input for filtering, again

Browse Source
This commit is contained in:
Andreas Huber
2017-02-12 09:32:46 +01:00
parent c2e42ea5fb
commit b238849d65
4 changed files with 30 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pdb-ui/src/main/java/org/lucares/pdbui/PdbController.java
View File

@@ -63,7 +63,7 @@ public class PdbController implements HardcodedValues, CollectionUtils {
@RequestMapping(path = "/autocomplete", // @RequestMapping(path = "/autocomplete", //
method = RequestMethod.GET, // method = RequestMethod.GET, //
consumes = MediaType.APPLICATION_JSON_UTF8_VALUE, // APPLICATION_FORM_URLENCODED_VALUE consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE, // APPLICATION_JSON_UTF8_VALUE
produces = MediaType.APPLICATION_JSON_UTF8_VALUE // produces = MediaType.APPLICATION_JSON_UTF8_VALUE //
) )
@ResponseBody @ResponseBody

26
pdb-ui/src/main/resources/resources/index.html
View File

@@ -3,11 +3,12 @@
<head> <head>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/search.js"></script> <script type="text/javascript" src="js/search.js"></script>
<script type="text/javascript" src="js/mustache.min.js"></script> <script type="text/javascript" src="js/autocomplete.js"></script>
<link rel="stylesheet" type="text/css" href="css/typography.css"> <link rel="stylesheet" type="text/css" href="css/typography.css">
<link rel="stylesheet" type="text/css" href="css/design.css"> <link rel="stylesheet" type="text/css" href="css/design.css">
<link rel="stylesheet" type="text/css" href="css/icons.css"> <link rel="stylesheet" type="text/css" href="css/icons.css">
<link rel="stylesheet" type="text/css" href="css/loading.css"> <link rel="stylesheet" type="text/css" href="css/loading.css">
<link rel="stylesheet" type="text/css" href="css/autocomplete.min.css">
</head> </head>
<body> <body>
<div id="content"> <div id="content">
@@ -15,29 +16,14 @@
<div id="logo">LOGO</div> <div id="logo">LOGO</div>
</div> </div>
<div id="search-bar"> <div id="search-bar">
<div id="filter-bar"> <div id="search-input-wrapper">
<button id="add-filter">add</button> <input id="search-input" data-autocomplete="autocomplete"
</div> data-autocomplete-empty-message="nothing found" />
<div id="button-bar">
<button id="search-submit"><i class="fa fa-search"> Search</i></button>
</div> </div>
<button id="search-submit"><i class="fa fa-search"> Search</i></button>
</div> </div>
<div id="result-view"> <div id="result-view">
</div> </div>
</div> </div>
<div style="display:none">
<div id="template-filter">
<div class="filter">
<select class="template-filter-field" name="filter-field" id="filter-field">
{{#fields}}
<option name="{{name}}">{{name}}</option>
{{/fields}}
</select>
<select class="template-filter-values" name="filter-values" id="filter-values" multiple="multiple">
</select>
</div>
</div>
</div>
</body> </body>
</html> </html>

126
pdb-ui/src/main/resources/resources/js/search.js
View File

@@ -3,99 +3,30 @@ $(document).ready(function(){
$('#search-submit').click(plot); $('#search-submit').click(plot);
initFilter(); AutoComplete({
HttpMethod: "GET",
Delay: 300,
_QueryArg: function() {
var caretIndex = document.getElementById('search-input').selectionStart;
return 'caretIndex=' + caretIndex + '&query';
},
_Post: function(response) {
var result = [];
var responseObject = JSON.parse(response);
responseObject['proposals'].forEach(function(item, index){
var proposal = {};
proposal['Label'] = item.value;
proposal['Value'] = item.proposedQuery;
result.push(proposal);
});
console.log(JSON.stringify(result));
return result;
}
});
}); });
function initFilter() {
var successCallback = function (fields) {
var fieldsView = [{name: ""}];
fields.forEach(function(item, index){
fieldsView.push( {name: item} );
});
var template = $('#template-filter').html();
var view = {
fields: fieldsView
};
var rendered = Mustache.render(template, view);
$('#filter-bar').append(rendered);
$('#filter-values').hide();
$('#filter-field').change(function() {
if ($(this).val() == ""){
$('#filter-values').hide();
}else{
addFieldValues($(this).val());
}
});
$('#add-filter').click(function(){
var field = $('#filter-field').val();
var values = $('#filter-values').val();
if (field != ""
&& values != [] )
{
var query = "";
values.forEach(function (value, index) {
if (query.length > 0)
{
query += ",";
}
query += field+"="+value;
} );
$('#filter-bar').append(query);
}
});
};
getFields( successCallback);
}
function addFieldValues(field){
var params = {};
params['query'] = "";
var successCallback = function (values){
$('#result-view').text("SUCCESS: " + JSON.stringify(values));
values.forEach(function (item, index){
$('#filter-values').append($('<option>', {
value: item,
text : item
}));
});
$('#filter-values').show();
};
var errorCallback = function (){
$('#result-view').text("FAILED: " + JSON.stringify(e));
};
getJson("fields/"+field+"/values", params, successCallback);
}
function getFields( successCallback) {
var errorCallback = function (){
$('#result-view').text("FAILED: " + JSON.stringify(e));
};
var params = {};
params['query'] = "";
getJson("fields", params, successCallback, errorCallback)
}
function showLoadingIcon() function showLoadingIcon()
{ {
$('#result-view').html("<div class='center'><div class='uil-cube-css' style='-webkit-transform:scale(0.41)'><div /><div></div><div></div><div></div></div></div>"); $('#result-view').html("<div class='center'><div class='uil-cube-css' style='-webkit-transform:scale(0.41)'><div /><div></div><div></div><div></div></div></div>");
@@ -110,7 +41,6 @@ function plot(event){
request['query'] = $('#search-input').val(); request['query'] = $('#search-input').val();
request['height'] = $('#result-view').height()-10; request['height'] = $('#result-view').height()-10;
request['width'] = $('#result-view').width()-10; request['width'] = $('#result-view').width()-10;
request['groupBy'] = $('input[name=groupBy]:checked').val();
var success = function(response){ var success = function(response){
@@ -137,15 +67,3 @@ function postJson(url, requestData, successCallback, errorCallback) {
.fail(errorCallback); .fail(errorCallback);
} }
function getJson(url, requestData, successCallback, errorCallback) {
$.ajax({
type: "GET",
url: url,
data: requestData,
contentType: 'application/json'
})
.done(successCallback)
.fail(errorCallback);
}

2
performanceDb/build.gradle
View File

@@ -1,7 +1,7 @@
dependencies { dependencies {
compile project(':pdb-api') compile project(':pdb-api')
compile 'org.lucares:ludb:1.0.20170101101722' compile 'org.lucares:ludb:1.0.20170207192657'
compile 'com.fasterxml.jackson.core:jackson-databind:2.8.6' compile 'com.fasterxml.jackson.core:jackson-databind:2.8.6'