Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Basic ui #133

Open
wants to merge 2 commits into
base: luwak-server
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Procfile
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
web: java $JAVA_OPTS -Ddw.server.connector.port=$PORT -jar luwak-server/target/luwak-server-1.5.0-SNAPSHOT.jar server luwak-server/heroku.yml
16 changes: 16 additions & 0 deletions luwak-server/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ In `luwak-server`, Build the jar with `mvn package`, then run

java -jar target/luwak-server-{version number here}-SNAPSHOT.jar

**UI**

There is a basic UI accessible at `localhost:8080/ui`

**To add queries**

Create a query input file in the following JSON format:
Expand All @@ -36,3 +40,15 @@ Then run ```./load-queries <query file>```
**To match a document against the service**

./match "This is the contents of my document"

## Deploying to Heroku
Roughly following the instructions at https://devcenter.heroku.com/articles/getting-started-with-java#introduction
* Install the Heroku CLI
* If you have a public SSH key, you can upload it to Heroku
to make your life easier: `heroku keys:add ~/.ssh/id_rsa.pub`
* Create a Heroku app: `heroku create`
* Push your current branch to heroku: `git push heroku HEAD:master`
* Once that succeeds, start the app via: `heroku ps:scale web=1`
* Run `heroku open` to get the URL of the running application. You should be able to
to post to the API by appending the correct path, e.g.
`POST https://my-app-name.herokuapp.com/update`
8 changes: 8 additions & 0 deletions luwak-server/heroku.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
# This configuration is required to be able to allow Heroku to override the port via e.g.
# -Ddw.server.connector.port=$PORT
server:
type: simple
applicationContextPath: /
connector:
type: http
port: 8080
11 changes: 10 additions & 1 deletion luwak-server/pom.xml
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@
</parent>
<modelVersion>4.0.0</modelVersion>

<properties>
<dropwizard.version>1.0.5</dropwizard.version>
</properties>

<artifactId>luwak-server</artifactId>

<dependencies>
Expand All @@ -21,7 +25,12 @@
<dependency>
<groupId>io.dropwizard</groupId>
<artifactId>dropwizard-core</artifactId>
<version>1.0.5</version>
<version>${dropwizard.version}</version>
</dependency>
<dependency>
<groupId>io.dropwizard</groupId>
<artifactId>dropwizard-assets</artifactId>
<version>${dropwizard.version}</version>
</dependency>

<!--
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
*/

import io.dropwizard.Application;
import io.dropwizard.assets.AssetsBundle;
import io.dropwizard.setup.Bootstrap;
import io.dropwizard.setup.Environment;
import uk.co.flax.luwak.Monitor;
Expand Down Expand Up @@ -46,6 +47,7 @@ public void run(LuwakConfiguration luwakConfiguration, Environment environment)
@Override
public void initialize(Bootstrap<LuwakConfiguration> bootstrap) {
super.initialize(bootstrap);
bootstrap.addBundle(new AssetsBundle("/assets", "/ui", "index.html"));
LuwakMapper.addMappings(bootstrap.getObjectMapper());
}
}
144 changes: 144 additions & 0 deletions luwak-server/src/main/resources/assets/css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
*{
padding: 0;
margin: 0;
}

body {
font-family: "Segoue", sans-serif;
line-height: 1.6em;
color: #666;
background: #e1e1e1 url(../img/creampaper.png);
font-size: 14px;
}

a{
color: #333;
text-decoration: none;
}

#container {
width: 740px;
background: #fff;
margin: auto;
}

.clearfix {
clear: both;
}

header {
padding: 30px 30px;
background: #f4f4f4;
}

header h1 {
color: #000;
margin-bottom: 5px;
}

header span {
color: #dd2826;
}

section {
padding: 30px 20px 20px 20px;
}

footer {
padding: 20px;
background: #f4f4f4;
text-align: center;
}

#search-form {
display: block;
margin-bottom: 15px;
}

.fieldcontainer {
display: block;
position: relative;
width: 90%;
margin: 0 auto;
}

#search-btn:hover{
filter: alpha(opacity=90);
opacity: 0.9;
}

#search-btn {
position: absolute;
right: 360px;
top: 5px;
height: 32px;
width: 32px;
cursor: pointer;
border: 0;
zoom: 1;

filter: alpha(opacity=65);
opacity: 0.65;
background: transparent url(../img/search.png) top left no-repeat;
}

.search-field {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
width: 45%;
padding: 11px 7px;
padding-right: 43px;
background: #fff;
color: #ccc;
border: 1px solid #c8c8c8;
font-size: 1.6em;
border-bottom-color:#d2e2e7;
border-radius: 1px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
box-shadow: inset 0 1px 2px rgba(0,0,0, 0.1), 0 0 0 6px #f0f0f0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0, 0.1), 0 0 0 6px #f0f0f0;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0, 0.1), 0 0 0 6px #f0f0f0;
}

#results li {
padding: 10px 0;
border-bottom: 1px #ccc dotted;
list-style: none;
overflow: auto;
}

.list-left {
float: left;
width: 20%;
}

.list-left img {
width: 100px;
padding: 3px;
}

.list-right {
float: right;
width: 78%;
}

.cTitle {
color: #dd2826;
}

.button-container {
margin-top: 25px;
}
.paging-button {
background: #f4f4f4;

padding: 8px 13px;
border: #ccc 1px solid;
border-radius: 5px;
color: #ccc;
margin: 10px;
cursor: pointer;
}
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 32 additions & 0 deletions luwak-server/src/main/resources/assets/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<title>LuwakMatch</title>
<link rel="stylesheet" href="/ui/css/style.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/ui/js/script.js"></script>
</head>
<body>
<div id="container">
<header>
<h1>Luwak<span>Match</span></h1>
<p>Search claims with Luwak</p>
</header>
<section>
<form id="search-form" name="search-form" onsubmit="return search()">
<div class = "fieldcontainer">
<input type="search" id="query" class="search-field" placeholder="Search facts...">
<input type="submit" name="search-btn" id="search-btn" value="">
</div>
</form>

<ul id="results"></ul>
<div id="buttons"></div>
</section>
<footer>
<p>Copyright 2017</p>
</footer>
</div>
</body>
</html>
4 changes: 4 additions & 0 deletions luwak-server/src/main/resources/assets/js/jquery.min.js

Large diffs are not rendered by default.

90 changes: 90 additions & 0 deletions luwak-server/src/main/resources/assets/js/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
$(function() {
var searchField = $('#query');
var icon = $('#search-btn');

// Focus Event Handler
$(searchField).on('focus', function() {
$(this).animate({
width:'100%'
}, 400);
$(icon).animate({
right: '10px'
}, 400);
});

// Blur Event Handler
// Focus Event Handler
$(searchField).on('blur', function() {
if(searchField.val() == ''){
$(searchField).animate({
width:'45%'
}, 400, function() {})
$(icon).animate({
right:'360px'
}, 400, function() {})

}
});

$('#search-form').submit(function(e){
e.preventDefault();
});
})

function search() {
// Clear Results
$('#results').html('');
$('#buttons').html('');

// Get Form Input
q = $('#query').val();
inputDocument = {
"id": "1",
"fields": {"field": q}
};

// Run POST Request on API
$.ajax({
url: "/match",
type: "POST",
data: JSON.stringify(inputDocument),
contentType:"application/json; charset=utf-8",
dataType:"json",
success: function(data) {
console.log("success");
console.log(data);
if(data.matches.length > 0) {
// display results
$('#results').append(getGood(data.matches[0]));
Copy link

@ngondard ngondard Dec 11, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The match url sends an array as a result, while data.matches[0] processes only the first item . May I suggest adapting the getGood function so that it handles an array (see my next comment), then calling it with the whole matches array as a parameter?
$('#results').append(getGood(data.matches));

} else {
$('#results').append(getBad());
}
},
failure: function(data) {
console.log("failure");
}
});
}

function getGood(item) {

var output = '<li>' +
'<div class="list-left">' +
'<img src="ui/img/found.png">' +
'</div>' +
'<div class="list-right">' +
'<h3> Hurrah - we have found a match and its id is ' + item[0] + '</h3>'
Copy link

@ngondard ngondard Dec 11, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Herebelow my proposition for parsing the result array. In order to insert a <li> list tag within the existing <li>, I added an <ul> element.

	'<h3>Hurrah - here comes the match list!<ul>'
	// Parses result array in a list
	for(var i in item) {
		output += '<li>id: ' + item[i] + '</li>';
	}
	output += '</ul></h3>';

return output;
}

function getBad() {

var output = '<li>' +
'<div class="list-left">' +
'<img src="ui/img/not_found.png">' +
'</div>' +
'<div class="list-right">' +
'<h3> Alas - none of our queries match</h3>'

return output;
}