Basic ui

Procfile

@@ -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

luwak-server/README.md

@@ -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:
@@ -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`

luwak-server/heroku.yml

@@ -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

luwak-server/pom.xml

@@ -10,6 +10,10 @@
     </parent>
     <modelVersion>4.0.0</modelVersion>
 
+    <properties>
+        <dropwizard.version>1.0.5</dropwizard.version>
+    </properties>
+
     <artifactId>luwak-server</artifactId>
 
     <dependencies>
@@ -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>
 
         <!--

luwak-server/src/main/java/uk/co/flax/luwak/server/LuwakServer.java

@@ -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;
@@ -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());
     }
 }

luwak-server/src/main/resources/assets/css/style.css

@@ -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;
+}

luwak-server/src/main/resources/assets/index.html

@@ -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>

luwak-server/src/main/resources/assets/js/script.js

@@ -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]));
+			}  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>'
+	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;
+}