Added API response view to second frontend
diff --git a/Changes b/Changes
index 4b0b29e..87c58a1 100755
--- a/Changes
+++ b/Changes
@@ -1,3 +1,6 @@
+0.07 2014-11-03
+        - Added API-Response view.
+
 0.06 2014-09-22
         - Updated certain Notifications and AssetPack plugins
 	- Updated pagination plugin.
diff --git a/korap.conf b/korap.conf
index 05a476f..53730fb 100644
--- a/korap.conf
+++ b/korap.conf
@@ -1,6 +1,7 @@
 {
   KorAP => {
-    'api-0.1' => 'http://10.0.10.13:8888/api/v0.1/'
+#    'api-0.1' => 'http://10.0.10.13:8888/api/v0.1/'
+    'api-0.1' => 'http://10.0.10.13:7070/api/v0.1/'
   },
   Notifications => {
     Alertify => 1,
diff --git a/lib/Korap.pm b/lib/Korap.pm
index 987d08b..311ed48 100644
--- a/lib/Korap.pm
+++ b/lib/Korap.pm
@@ -1,7 +1,7 @@
 package Korap;
 use Mojo::Base 'Mojolicious';
 
-our $VERSION = '0.06';
+our $VERSION = '0.07';
 
 # Start dev with
 # morbo -w lib -w templates -w public/sass -w public/js -w public/css script/korap
diff --git a/lib/Korap/Plugin/KorapSearch.pm b/lib/Korap/Plugin/KorapSearch.pm
index 9950eec..29e4d2b 100644
--- a/lib/Korap/Plugin/KorapSearch.pm
+++ b/lib/Korap/Plugin/KorapSearch.pm
@@ -128,9 +128,9 @@
 
       $c->stash('search.itemsPerPage' => $count);
 
-      $c->app->log->debug($url->to_string);
+      $c->stash('search.apirequest' => $url->to_string);
 
-      my $ua = Mojo::UserAgent->new($url);
+      my $ua = Mojo::UserAgent->new;
 
       # Blocking request
       # TODO: Make non-blocking
@@ -144,6 +144,9 @@
 
       # Request successful
       if (my $res = $tx->success) {
+
+	$c->stash('search.apiresponse' => $res->body);
+
 	my $json = $res->json;
 
 	# Reformat benchmark counter
@@ -177,6 +180,8 @@
 	if ($json->{error}) {
 	  $c->notify(error => $json->{error});
 	};
+
+#	$json->{}
       }
 
       # Request failed
diff --git a/public/sass/colors.scss b/public/sass/colors.scss
index 1b9deb4..f77f972 100644
--- a/public/sass/colors.scss
+++ b/public/sass/colors.scss
@@ -1,8 +1,12 @@
-$light-orange:  #f4eebb;
-$dark-orange:   #ffa500;
-$darker-orange: #ff8000;
+$light-orange:   #f4eebb;
+$dark-orange:    #ffa500;
+$darker-orange:  #ff8000;
 $darkest-orange: darken($dark-orange, 20%);
 
+$light-blue:     #cfe6f4;
+$dark-blue:      #73b2f4;
+$darkest-blue:   darken($dark-blue, 40%);
+
 $dark-green:    #496000;
 $light-green:   #7ba400;
 
@@ -23,7 +27,7 @@
 $kwic-match-shadow: $light-shadow;
 
 $kwic-highlight-0: #c1002b;
-$kwic-highlight-1: #009ee0;
+$kwic-highlight-1: $dark-blue; // #009ee0;
 $kwic-highlight-2: #f29400;
 
 $pagination-bg: $light-grey;
diff --git a/public/sass/query.scss b/public/sass/query.scss
index 591f458..4735d0f 100644
--- a/public/sass/query.scss
+++ b/public/sass/query.scss
@@ -5,7 +5,15 @@
 /* code data - clickable */
 pre.query {
   overflow-x: hidden;
+  color: $darkest-orange;
   background-color: $light-orange;
+  text-shadow: $light-shadow;
+  border: {
+    color: $dark-orange;
+    style: solid;
+    width: 3px;
+    radius: 6px;
+  }
   white-space: normal;
   cursor: pointer;
   display: block;
@@ -16,33 +24,30 @@
   padding: 2pt;
   margin: 0;
   margin-bottom: 5pt;
-  color: $darkest-orange;
-  text-shadow: $light-shadow;
-  border: {
-    color: $dark-orange;
-    style: solid;
-    width: 3px;
-    radius: 6px;
-  }
-  code {
+  > code {
     white-space: pre;
     display: block;
     padding: 2px 5px;
     margin: 0;
   }
-  &.serial {
+  > span {
+     padding: 2pt;
+  }
+  &.serial, &.api {
     overflow-x: auto;
     &:not(.active) {
       overflow-x: hidden;
-      > span {
-        padding: 2pt;
-      }
       code {
         display: none;
       }
     }
-    &.active > span {
-      display: none;
-    }
+  }
+}
+
+pre.query.api {
+  background-color: $light-blue;
+  color: $darkest-blue;
+  border: {
+    color: $dark-blue;
   }
 }
diff --git a/templates/api-communication.html.ep b/templates/api-communication.html.ep
new file mode 100644
index 0000000..2daaa37
--- /dev/null
+++ b/templates/api-communication.html.ep
@@ -0,0 +1,17 @@
+% use JSON::XS;
+
+% if (stash('test_port') && stash('search.apirequest')) {
+<pre class="query api">
+  <span>API Response for </span>
+  <span style="font-size: 70%"><%= stash('search.apirequest') %></span>
+  <code>
+<%= stash('search.apiresponse') =%>
+  </code>
+</pre>
+%= javascript begin
+hljs.initHighlightingOnLoad();
+$("pre.query.api").on("click", function () {
+  $(this).toggleClass('active');
+});
+% end
+% };
diff --git a/templates/collections.html.ep b/templates/collections.html.ep
index 046a3a8..59f62ce 100644
--- a/templates/collections.html.ep
+++ b/templates/collections.html.ep
@@ -12,3 +12,4 @@
   </li>
 % };
 </ul>
+<p style="font-size: 9pt; padding-left: 1em">Index port: <%= $c->url_for($c->config('KorAP')->{'api-0.1'})->port %></p>
diff --git a/templates/search.html.ep b/templates/search.html.ep
index 0cc4a90..7c96a68 100644
--- a/templates/search.html.ep
+++ b/templates/search.html.ep
@@ -13,6 +13,7 @@
   </p>
 </div>
 %= include 'query'
+%= include 'api-communication'
 %     };
 
 % unless (stash('search.totalResults') == 0) {
@@ -24,7 +25,6 @@
 </ol>
 </div>
 % };
-
 %   end
 % end