From 1a2024d92b98c0871cbd8bf793c77ddb798c0fb2 Mon Sep 17 00:00:00 2001
From: Admin <info@bwssystems.com>
Date: Thu, 25 Feb 2016 16:42:35 -0600
Subject: [PATCH] Tables in all views updated to scrollable/sortable.
 Refactored controllers for views. debugging logging message return for
 messages with invalid text for json parsing.

---
 pom.xml                                       |   2 +-
 .../HABridge/upnp/UpnpListener.java           |   6 +-
 .../HABridge/upnp/UpnpSettingsResource.java   |   4 +-
 src/main/resources/public/css/main.css        |  17 +-
 .../resources/public/css/scrollable-table.css | 127 ++++++
 src/main/resources/public/index.html          |   2 +
 .../public/js/angular-scrollable-table.min.js |   1 +
 src/main/resources/public/scripts/app.js      | 372 +++++++++++-------
 .../resources/public/views/configuration.html |  20 +-
 .../resources/public/views/editdevice.html    |   1 +
 src/main/resources/public/views/editor.html   |   1 +
 .../public/views/harmonyactivity.html         |  39 +-
 .../resources/public/views/harmonydevice.html |  42 +-
 src/main/resources/public/views/logs.html     |  36 +-
 .../resources/public/views/nestactions.html   |  35 +-
 .../resources/public/views/veradevice.html    |  59 +--
 .../resources/public/views/verascene.html     |  49 +--
 17 files changed, 465 insertions(+), 348 deletions(-)
 create mode 100644 src/main/resources/public/css/scrollable-table.css
 create mode 100644 src/main/resources/public/js/angular-scrollable-table.min.js

diff --git a/pom.xml b/pom.xml
index 66ea73c..45f44cd 100644
--- a/pom.xml
+++ b/pom.xml
@@ -5,7 +5,7 @@
 
 	<groupId>com.bwssystems.HABridge</groupId>
 	<artifactId>ha-bridge</artifactId>
-	<version>1.4.0c</version>
+	<version>1.4.0d</version>
 	<packaging>jar</packaging>
 
 	<name>HA Bridge</name>
diff --git a/src/main/java/com/bwssystems/HABridge/upnp/UpnpListener.java b/src/main/java/com/bwssystems/HABridge/upnp/UpnpListener.java
index fb4a8a3..19f8dbe 100644
--- a/src/main/java/com/bwssystems/HABridge/upnp/UpnpListener.java
+++ b/src/main/java/com/bwssystems/HABridge/upnp/UpnpListener.java
@@ -104,7 +104,7 @@ public class UpnpListener {
 	 */
 	protected boolean isSSDPDiscovery(DatagramPacket packet){
 		//Only respond to discover request for strict upnp form
-		String packetString = new String(packet.getData());
+		String packetString = new String(packet.getData(), 0, packet.getLength());
 		if(packetString != null && packetString.startsWith("M-SEARCH * HTTP/1.1") && packetString.contains("\"ssdp:discover\"")){
 			log.debug("isSSDPDiscovery Found message to be an M-SEARCH message.");
 			log.debug("isSSDPDiscovery Got SSDP packet from " + packet.getAddress().getHostAddress() + ":" + packet.getPort() + ", body: " + packetString);
@@ -148,9 +148,9 @@ public class UpnpListener {
 		String discoveryResponse = null;
 		discoveryResponse = String.format(discoveryTemplate, responseAddress, httpServerPort);
 		if(traceupnp)
-			log.info("Traceupnp: sendUpnpResponse: " + discoveryResponse);
+			log.info("Traceupnp: sendUpnpResponse discovery template with address: " + responseAddress + " and port: " + httpServerPort);
 		else
-			log.debug("sendUpnpResponse: " + discoveryResponse);
+			log.debug("sendUpnpResponse discovery template with address: " + responseAddress + " and port: " + httpServerPort);
 		DatagramPacket response = new DatagramPacket(discoveryResponse.getBytes(), discoveryResponse.length(), requester, sourcePort);
 		socket.send(response);
 	}
diff --git a/src/main/java/com/bwssystems/HABridge/upnp/UpnpSettingsResource.java b/src/main/java/com/bwssystems/HABridge/upnp/UpnpSettingsResource.java
index e437b9c..3bcb423 100644
--- a/src/main/java/com/bwssystems/HABridge/upnp/UpnpSettingsResource.java
+++ b/src/main/java/com/bwssystems/HABridge/upnp/UpnpSettingsResource.java
@@ -54,9 +54,9 @@ public class UpnpSettingsResource {
 			String filledTemplate = null;
 			filledTemplate = String.format(hueTemplate, theSettings.getUpnpConfigAddress(), portNumber, theSettings.getUpnpConfigAddress());
 			if(theSettings.isTraceupnp())
-				log.info("Traceupnp: upnp device settings response: " + filledTemplate);
+				log.info("Traceupnp: upnp device settings template filled with address: " + theSettings.getUpnpConfigAddress() + " and port: " + portNumber);
 			else
-				log.debug("upnp device settings response: " + filledTemplate);
+				log.debug("Traceupnp: upnp device settings template filled with address: " + theSettings.getUpnpConfigAddress() + " and port: " + portNumber);
 //			response.header("Cache-Control", "no-store, no-cache, must-revalidate, post-check=0, pre-check=0");
 //			response.header("Pragma", "no-cache");
 //			response.header("Expires", "Mon, 1 Aug 2011 09:00:00 GMT");
diff --git a/src/main/resources/public/css/main.css b/src/main/resources/public/css/main.css
index 5c1ccad..4f6a5dc 100644
--- a/src/main/resources/public/css/main.css
+++ b/src/main/resources/public/css/main.css
@@ -8,19 +8,4 @@ body {
 	  }
 .sortorder.reverse:after {
 	    content: '\25bc';
-	  }
-.table-fixed thead {
-  width: 97%;
-}
-.table-fixed tbody {
-  height: 500px;
-  overflow-y: auto;
-  width: 100%;
-}
-.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
-  display: block;
-}
-.table-fixed tbody td, .table-fixed thead > tr> th {
-  float: left;
-  border-bottom-width: 0;
-}
\ No newline at end of file
+	  }
\ No newline at end of file
diff --git a/src/main/resources/public/css/scrollable-table.css b/src/main/resources/public/css/scrollable-table.css
new file mode 100644
index 0000000..b99b843
--- /dev/null
+++ b/src/main/resources/public/css/scrollable-table.css
@@ -0,0 +1,127 @@
+.scrollableContainer {
+    height: 800px;
+    position: relative;
+    padding-top: 35px;
+    overflow: hidden;
+}
+.scrollableContainer .headerSpacer {
+    border: 1px solid #d5d5d5;
+    border-bottom-color: #bbb;
+    position: absolute;
+    height: 36px;
+    top: 0;
+    right: 0;
+    left: 0;
+}
+.scrollableContainer th .orderWrapper {
+    position: absolute;
+    top: 0;
+    right: 2px;
+    cursor: pointer;
+}
+.scrollableContainer th .orderWrapper .order {
+    font-size: 8pt;
+    color: #BDBDBD;
+}
+.scrollableContainer th .orderWrapper .active {
+    color: #464646;
+}
+
+.scrollArea {
+    height: 100%;
+    overflow-x: auto;
+    overflow-y: auto;
+    border: 1px solid #d5d5d5;
+    /*  the implementation of this is still quite buggy; specifically, it doesn't like the 
+        absolutely positioned headers within 
+    -webkit-overflow-scrolling: touch;  */
+}
+.scrollArea table {
+    overflow-x: hidden;
+    overflow-y: auto;
+    margin-bottom: 0;
+    width: 100%;
+    border: none;
+    /*border-collapse: separate;*/
+}
+.scrollArea table th {
+    padding: 0 !important;
+    border: none !important;
+    min-width: 60px;
+}
+.scrollArea table .th-inner {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    position: absolute;
+    top: 0;
+    height: 36px;
+    line-height: 36px;
+}
+
+.scrollArea table th .box {
+    padding: 0 8px;
+    padding-right: 11px;    /*  order icon width*/
+    border-left: 1px solid #ddd;
+}
+
+/*  to hack fix firefox border issue    */
+@-moz-document url-prefix() {
+    .scrollArea table th .box{
+        border-right: 1px solid #ddd;
+        border-left: none;
+    }
+}
+
+.scrollArea table .th-inner .ng-scope {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.scrollArea table tr th:first-child th .box {
+    border-left: none;
+}
+.scrollArea table .th-inner.condensed {
+    padding: 0 3px;
+}
+.scrollArea table tbody tr td:first-child {
+    border-left: none;
+}
+.scrollArea table tbody tr td:last-child {
+    border-right: none;
+}
+.scrollArea table tbody tr:first-child td {
+    border-top: none;
+}
+.scrollArea table tbody tr:last-child td {
+    border-bottom: 2px solid #ddd;
+}
+.scrollArea table tbody tr td {
+    border-bottom: 1px solid #ddd;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.scrollableContainer .scaler {
+    position: absolute;
+    top: 0px;
+    width: 2px;
+    height: 100%;
+    background-color: #CFCFCF;
+}
+
+.scrollableContainer th .resize-rod {
+    position: absolute;
+    top: 0;
+    right: 0;
+    cursor: col-resize;
+    width: 4px;
+    height: 100%;
+}
+
+.scrollable-resizing .scrollableContainer {
+    cursor: col-resize;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+}
\ No newline at end of file
diff --git a/src/main/resources/public/index.html b/src/main/resources/public/index.html
index f51be3f..ec28645 100644
--- a/src/main/resources/public/index.html
+++ b/src/main/resources/public/index.html
@@ -12,6 +12,7 @@
 	<link href="css/rzslider.min.css" rel="stylesheet">
 	<link href="css/ngDialog.min.css" rel="stylesheet">
 	<link href="css/ngDialog-theme-default.min.css" rel="stylesheet">
+	<link href="css/scrollable-table.css" rel="stylesheet">
 
     <!--[if lt IE 9]>
     <script type="text/javascript" src="js/html5shiv.min.js"></script>
@@ -63,6 +64,7 @@
 	<script src="js/ngToast.min.js"></script>
 	<script src="js/rzslider.min.js"></script>
     <script src="js/ngDialog.min.js"></script>
+    <script src="js/angular-scrollable-table.min.js"></script>
     <script src="scripts/app.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/public/js/angular-scrollable-table.min.js b/src/main/resources/public/js/angular-scrollable-table.min.js
new file mode 100644
index 0000000..513e1fb
--- /dev/null
+++ b/src/main/resources/public/js/angular-scrollable-table.min.js
@@ -0,0 +1 @@
+(function(e){"use strict";function t(e){return parseInt(e.replace(/px|%/,""),10)}e.module("scrollable-table",[]).directive("scrollableTable",["$timeout","$q","$parse",function(n,r,i){return{transclude:true,restrict:"E",scope:{rows:"=watch",sortFn:"="},template:'<div class="scrollableContainer">'+'<div class="headerSpacer"></div>'+'<div class="scrollArea" ng-transclude></div>'+"</div>",controller:["$scope","$element","$attrs",function(s,o,u){function a(e,t){var n=s.sortExpr.match(/(.+)\s+as\s+(.+)/);var r={};r[n[1]]=e;var o=i(n[2])(r);r[n[1]]=t;var u=i(n[2])(r);if(o===u)return 0;return o>u?1:-1}function f(e){var t=o.find(".headerSpacer").height();var n=o.find(".scrollArea").scrollTop();o.find(".scrollArea").scrollTop(n+e.position().top-t)}function l(){function t(){if(o.find("table:visible").length===0){n(t,100)}else{e.resolve()}}var e=r.defer();n(t);return e.promise}function h(){if(!o.find("thead th .th-inner").length){o.find("thead th").wrapInner('<div class="th-inner"></div>')}if(o.find("thead th .th-inner:not(:has(.box))").length){o.find("thead th .th-inner:not(:has(.box))").wrapInner('<div class="box"></div>')}o.find("table th .th-inner:visible").each(function(n,r){r=e.element(r);var i=r.parent().width(),s=o.find("table th:visible:last"),u=i;if(s.css("text-align")!=="center"){var a=o.find(".scrollArea").height()<o.find("table").height();if(s[0]==r.parent()[0]&&a){u+=o.find(".scrollArea").width()-o.find("tbody tr").width();u=Math.max(u,i)}}var f=t(r.parent().css("min-width")),l=r.parent().attr("title");u=Math.max(f,u);r.css("width",u);if(!l){l=r.find(".title .ng-scope").html()||r.find(".box").html()}r.attr("title",l.trim())});c.resolve()}function p(){var e=l().then(h),t=s.headerResizeHanlers||[];for(var n=0;n<t.length;n++){e=e.then(t[n])}return e}this.getSortExpr=function(){return s.sortExpr};this.isAsc=function(){return s.asc};this.setSortExpr=function(e){s.asc=true;s.sortExpr=e};this.toggleSort=function(){s.asc=!s.asc};this.doSort=function(e){if(e){s.rows.sort(function(t,n){var r=e(t,n);return s.asc?r:r*-1})}else{s.rows.sort(function(e,t){var n=a(e,t);return s.asc?n:n*-1})}};this.renderTalble=function(){return l().then(h)};this.getTableElement=function(){return o};this.appendTableResizingHandler=function(e){var t=s.headerResizeHanlers||[];for(var n=0;n<t.length;n++){if(t[n].name===e.name){return}}t.push(e);s.headerResizeHanlers=t};s.$on("rowSelected",function(e,t){var n=o.find(".scrollArea table tr[row-id='"+t+"']");if(n.length===1){r.all([l(),c.promise]).then(function(){f(n)})}});var c=r.defer();s.$watch("rows",function(e,t){if(e){p(o.find(".scrollArea").width());s.sortExpr=null;o.find(".scrollArea").scrollTop(0)}});s.asc=!u.hasOwnProperty("desc");s.sortAttr=u.sortAttr;o.find(".scrollArea").scroll(function(e){o.find("thead th .th-inner").css("margin-left",0-e.target.scrollLeft)});s.$on("renderScrollableTable",function(){p(o.find(".scrollArea").width())});e.element(window).on("resize",function(){s.$apply()});s.$watch(function(){return o.find(".scrollArea").width()},function(e,t){if(e*t<=0){return}p()})}]}}]).directive("sortableHeader",[function(){return{transclude:true,scope:true,require:"^scrollableTable",template:'<div class="box">'+'<div ng-mouseenter="enter()" ng-mouseleave="leave()">'+'<div class="title" ng-transclude></div>'+'<span class="orderWrapper">'+'<span class="order" ng-show="focused || isActive()" '+'ng-click="toggleSort($event)" ng-class="{active:isActive()}">'+'<i ng-show="isAscending()" class="glyphicon glyphicon-chevron-up"></i>'+'<i ng-show="!isAscending()" class="glyphicon glyphicon-chevron-down"></i>'+"</span>"+"</span>"+"</div>"+"</div>",link:function(t,n,r,i){var s=r.on||"a as a."+r.col;t.element=e.element(n);t.isActive=function(){return i.getSortExpr()===s};t.toggleSort=function(e){if(t.isActive()){i.toggleSort()}else{i.setSortExpr(s)}i.doSort(t[r.comparatorFn]);e.preventDefault()};t.isAscending=function(){if(t.focused&&!t.isActive()){return true}else{return i.isAsc()}};t.enter=function(){t.focused=true};t.leave=function(){t.focused=false};t.isLastCol=function(){return n.parent().find("th:last-child").get(0)===n.get(0)}}}}]).directive("resizable",["$compile",function(n){return{restrict:"A",priority:0,require:"^scrollableTable",link:function(i,s,o,u){function a(){var t=s.find("table th .th-inner");if(t.find(".resize-rod").length==0){u.getTableElement().find(".scrollArea table").css("table-layout","auto");var r=e.element('<div class="resize-rod" ng-mousedown="resizing($event)"></div>');t.append(n(r)(i))}}function f(){var n=u.getTableElement();var r=1;n.find("table th .th-inner:visible").each(function(n,i){i=e.element(i);var s=i.parent().width(),o=t(i.parent().css("min-width"));s=Math.max(o,s);i.css("left",r);r+=s})}function l(){var n=1,r=u.getTableElement();u.getTableElement().find("table th .th-inner:visible").each(function(i,s){s=e.element(s);var o=s.parent().width(),u=r.find("table th:visible:last"),a=t(s.parent().css("min-width"));o=Math.max(a,o);if(u[0]!=s.parent()[0]){s.parent().css("width",o)}s.css("left",n);n+=o})}function c(n){var r=u.getTableElement(),i=r.find("table th:visible").length,s=r.find("table th:visible:last");r.find("table th:visible").each(function(r,o){o=e.element(o);if(s.get(0)==o.get(0)){o.css("width","auto");return}var u=o.data("width");if(/\d+%$/.test(u)){u=Math.ceil(n*t(u)/100)}else{u=n/i}o.css("width",u+"px")});u.renderTalble().then(l())}u.appendTableResizingHandler(function(){a()});u.appendTableResizingHandler(function(){var t=u.getTableElement().find(".scrollArea table");if(t.css("table-layout")==="auto"){f()}else{c(t.parent().width())}});i.resizing=function(n){var r=u.getTableElement().find(".scrollArea").scrollLeft(),i=e.element(n.target).parent(),s=i.parent(),o=t(i.css("left"))+i.width()-r,a=n.pageX,f=e.element(document),c=e.element("body"),h=e.element(".scrollableContainer .resizing-cover"),p=e.element('<div class="scaler">');c.addClass("scrollable-resizing");h.addClass("active");e.element(".scrollableContainer").append(p);p.css("left",o);f.bind("mousemove",function(e){var n=e.pageX-a,r=t(p.css("left"))-o,i=s.width(),u=t(s.css("min-width")),f=s.next().width(),l=t(s.next().css("min-width"));a=e.pageX;e.preventDefault();if(n>0&&f-r<=l||n<0&&i+r<=u){return}p.css("left",t(p.css("left"))+n)});f.bind("mouseup",function(n){n.preventDefault();p.remove();c.removeClass("scrollable-resizing");h.removeClass("active");f.unbind("mousemove");f.unbind("mouseup");var r=t(p.css("left"))-o,i=s.width(),a=t(s.css("min-width")),d=s.next().width(),v=t(s.next().css("min-width")),m=u.getTableElement().find(".scrollArea table");if(m.css("table-layout")==="auto"){m.find("th .th-inner").each(function(t,n){n=e.element(n);var r=n.parent().width();n.parent().css("width",r)})}m.css("table-layout","fixed");if(r>0&&d-r<=v){r=d-v}s.next().removeAttr("style");i+=r;s.css("width",Math.max(a,i));s.next().css("width",d-r);u.renderTalble().then(l())})}}}}])})(angular)
\ No newline at end of file
diff --git a/src/main/resources/public/scripts/app.js b/src/main/resources/public/scripts/app.js
index 78276e8..91ada45 100644
--- a/src/main/resources/public/scripts/app.js
+++ b/src/main/resources/public/scripts/app.js
@@ -1,4 +1,4 @@
-var app = angular.module('habridge', ['ngRoute','ngToast','rzModule','ngDialog']);
+var app = angular.module('habridge', ['ngRoute','ngToast','rzModule','ngDialog','scrollable-table']);
 
 app.config(function ($routeProvider) {
 	$routeProvider.when('/#', {
@@ -12,25 +12,25 @@ app.config(function ($routeProvider) {
 		controller: 'LogsController'		
 	}).when('/editor', {
 		templateUrl: 'views/editor.html',
-		controller: 'AddingController'		
+		controller: 'EditController'		
 	}).when('/editdevice', {
 		templateUrl: 'views/editdevice.html',
-		controller: 'AddingController'		
+		controller: 'EditController'		
 	}).when('/veradevices', {
 		templateUrl: 'views/veradevice.html',
-		controller: 'AddingController'		
+		controller: 'VeraController'		
 	}).when('/verascenes', {
 		templateUrl: 'views/verascene.html',
-		controller: 'AddingController'		
+		controller: 'VeraController'		
 	}).when('/harmonydevices', {
 		templateUrl: 'views/harmonydevice.html',
-		controller: 'AddingController'		
+		controller: 'HarmonyController'		
 	}).when('/harmonyactivities', {
 		templateUrl: 'views/harmonyactivity.html',
-		controller: 'AddingController'		
+		controller: 'HarmonyController'		
 	}).when('/nest', {
 		templateUrl: 'views/nestactions.html',
-		controller: 'AddingController'		
+		controller: 'NestController'		
 	}).otherwise({
 		templateUrl: 'views/configuration.html',
 		controller: 'ViewingController'
@@ -95,6 +95,22 @@ app.service('bridgeService', function ($http, $window, ngToast) {
 		);
 	};
 
+	this.clearDevice = function () {
+		self.state.device.id = "";
+		self.state.device.mapType = null;
+		self.state.device.mapId = null;
+		self.state.device.name = "";
+		self.state.device.onUrl = "";
+		self.state.device.deviceType = "custom";
+		self.state.device.targetDevice = null;
+		self.state.device.offUrl = "";
+		self.state.device.httpVerb = null;
+		self.state.device.contentType = null;
+		self.state.device.contentBody = null;
+		self.state.device.contentBodyOff = null;
+		self.state.bridge.olddevicename = "";
+	};
+
 	this.getHABridgeVersion = function () {
 		return $http.get(this.state.systemsbase + "/habridge/version").then(
 				function (response) {
@@ -462,7 +478,7 @@ app.service('bridgeService', function ($http, $window, ngToast) {
 					self.viewDevices();
 				},
 				function (error) {
-					nself.displayWarn("Delete Device Error: ", error);
+					self.displayWarn("Delete Device Error: ", error);
 				}
 		);
 	};
@@ -601,11 +617,8 @@ app.controller('SystemController', function ($scope, $location, $http, $window,
 app.controller('LogsController', function ($scope, $location, $http, $window, bridgeService) {
     bridgeService.viewLogs();
     $scope.bridge = bridgeService.state;
-	$scope.predicate = '';
-	$scope.reverse = true;
-	$scope.order = function(predicate) {
-		$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
-		$scope.predicate = predicate;
+	$scope.updateLogs = function() {
+		bridgeService.viewLogs();
 	};
 });
 
@@ -619,12 +632,6 @@ app.controller('ViewingController', function ($scope, $location, $http, $window,
 	$scope.imgUrl = "glyphicon glyphicon-plus";
 	$scope.visibleBk = false;
 	$scope.imgBkUrl = "glyphicon glyphicon-plus";
-	$scope.predicate = '';
-	$scope.reverse = true;
-	$scope.order = function(predicate) {
-		$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
-		$scope.predicate = predicate;
-	};
 	$scope.testUrl = function (device, type) {
 		var dialogNeeded = false;
 		if((type == "on" && (bridgeService.aContainsB(device.onUrl, "${intensity..byte}") ||
@@ -710,7 +717,7 @@ app.controller('ValueDialogCtrl', function ($scope, bridgeService, ngDialog) {
 	};
 });
 
-app.controller('AddingController', function ($scope, $location, $http, bridgeService) {
+app.controller('VeraController', function ($scope, $location, $http, bridgeService) {
 	$scope.bridge = bridgeService.state;
 	$scope.device = $scope.bridge.device;
 	$scope.device_dim_control = "";
@@ -722,72 +729,11 @@ app.controller('AddingController', function ($scope, $location, $http, bridgeSer
 		$scope.vera = {base: "http://", port: "3480", id: ""};
 	bridgeService.viewVeraDevices();
 	bridgeService.viewVeraScenes();
-	bridgeService.viewHarmonyActivities();
-	bridgeService.viewHarmonyDevices();
-	bridgeService.viewNestItems();
 	$scope.imgButtonsUrl = "glyphicon glyphicon-plus";
 	$scope.buttonsVisible = false;
 
-	$scope.predicate = '';
-	$scope.reverse = true;
-	$scope.order = function(predicate) {
-		$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
-		$scope.predicate = predicate;
-	};
-
 	$scope.clearDevice = function () {
-		$scope.device.id = "";
-		$scope.device.mapType = null;
-		$scope.device.mapId = null;
-		$scope.device.name = "";
-		$scope.device.onUrl = "";
-		$scope.device.deviceType = "custom";
-		$scope.device.targetDevice = null;
-		$scope.device.offUrl = "";
-		$scope.device.httpVerb = null;
-		$scope.device.contentType = null;
-		$scope.device.contentBody = null;
-		$scope.device.contentBodyOff = null;
-		$scope.bridge.olddevicename = "";
-	};
-
-	$scope.buildUrlsUsingDevice = function (dim_control) {
-		if ($scope.vera.base.indexOf("http") < 0) {
-			$scope.vera.base = "http://" + $scope.vera.base;
-		}
-		$scope.device.deviceType = "switch";
-		$scope.device.targetDevice = "Encapsulated";
-		$scope.device.mapType = "veraDevice";
-		$scope.device.mapId = $scope.vera.id;
-		if(dim_control.indexOf("byte") >= 0 || dim_control.indexOf("percent") >= 0 || dim_control.indexOf("math") >= 0)
-			$scope.device.onUrl = $scope.vera.base + ":" + $scope.vera.port
-			+ "/data_request?id=action&output_format=json&DeviceNum="
-			+ $scope.vera.id
-			+ "&serviceId=urn:upnp-org:serviceId:Dimming1&action=SetLoadLevelTarget&newLoadlevelTarget="
-			+ dim_control;
-		else
-			$scope.device.onUrl = $scope.vera.base + ":" + $scope.vera.port
-			+ "/data_request?id=action&output_format=json&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=1&DeviceNum="
-			+ $scope.vera.id;
-		$scope.device.offUrl = $scope.vera.base + ":" + $scope.vera.port
-		+ "/data_request?id=action&output_format=json&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=0&DeviceNum="
-		+ $scope.vera.id;
-	};
-
-	$scope.buildUrlsUsingScene = function () {
-		if ($scope.vera.base.indexOf("http") < 0) {
-			$scope.vera.base = "http://" + $scope.vera.base;
-		}
-		$scope.device.deviceType = "scene";
-		$scope.device.targetDevice = "Encapsulated";
-		$scope.device.mapType = "veraScene";
-		$scope.device.mapId = $scope.vera.id;
-		$scope.device.onUrl = $scope.vera.base + ":" + $scope.vera.port
-		+ "/data_request?id=action&output_format=json&serviceId=urn:micasaverde-com:serviceId:HomeAutomationGateway1&action=RunScene&SceneNum="
-		+ $scope.vera.id;
-		$scope.device.offUrl = $scope.vera.base + ":" + $scope.vera.port
-		+ "/data_request?id=action&output_format=json&serviceId=urn:micasaverde-com:serviceId:HomeAutomationGateway1&action=RunScene&SceneNum="
-		+ $scope.vera.id;
+		bridgeService.clearDevice();
 	};
 
 	$scope.buildDeviceUrls = function (veradevice, dim_control) {
@@ -825,6 +771,90 @@ app.controller('AddingController', function ($scope, $location, $http, bridgeSer
 		+ verascene.id;
 	};
 
+	$scope.addDevice = function () {
+		if($scope.device.name == "" && $scope.device.onUrl == "")
+			return;
+		bridgeService.addDevice($scope.device).then(
+				function () {
+					$scope.clearDevice();
+					bridgeService.viewVeraDevices();
+					bridgeService.viewVeraScenes();
+				},
+				function (error) {
+				}
+		);
+
+	};
+
+	$scope.bulkAddDevices = function(dim_control) {
+		var devicesList = [];
+		for(var i = 0; i < $scope.bulk.devices.length; i++) {
+			for(var x = 0; x < bridgeService.state.veradevices.length; x++) {
+				if(bridgeService.state.veradevices[x].id == $scope.bulk.devices[i]) {
+					$scope.buildDeviceUrls(bridgeService.state.veradevices[x],dim_control);
+					devicesList[i] = {
+							name: $scope.device.name,
+							mapId: $scope.device.mapId,
+							mapType: $scope.device.mapType,
+							deviceType: $scope.device.deviceType,
+							targetDevice: $scope.device.targetDevice,
+							onUrl: $scope.device.onUrl,
+							offUrl: $scope.device.offUrl,
+							httpVerb: $scope.device.httpVerb,
+							contentType: $scope.device.contentType,
+							contentBody: $scope.device.contentBody,
+							contentBodyOff: $scope.device.contentBodyOff
+					};
+				}
+			}
+		}
+		bridgeService.bulkAddDevice(devicesList);
+		$scope.clearDevice();
+		bridgeService.viewVeraDevices();
+		bridgeService.viewVeraScenes();
+		$scope.bulk = { devices: [] };
+	};
+
+	$scope.toggleSelection = function toggleSelection(deviceId) {
+		var idx = $scope.bulk.devices.indexOf(deviceId);
+
+		// is currently selected
+		if (idx > -1) {
+			$scope.bulk.devices.splice(idx, 1);
+		}
+
+		// is newly selected
+		else {
+			$scope.bulk.devices.push(deviceId);
+		}
+	};
+
+	$scope.toggleButtons = function () {
+		$scope.buttonsVisible = !$scope.buttonsVisible;
+		if($scope.buttonsVisible)
+			$scope.imgButtonsUrl = "glyphicon glyphicon-minus";
+		else
+			$scope.imgButtonsUrl = "glyphicon glyphicon-plus";
+	};
+
+	$scope.deleteDeviceByMapId = function (id, mapType) {
+		bridgeService.deleteDeviceByMapId(id, mapType);
+	};
+
+});
+
+app.controller('HarmonyController', function ($scope, $location, $http, bridgeService) {
+	$scope.bridge = bridgeService.state;
+	$scope.device = $scope.bridge.device;
+	bridgeService.viewHarmonyActivities();
+	bridgeService.viewHarmonyDevices();
+	$scope.imgButtonsUrl = "glyphicon glyphicon-plus";
+	$scope.buttonsVisible = false;
+
+	$scope.clearDevice = function () {
+		bridgeService.clearDevice();
+	};
+
 	$scope.buildActivityUrls = function (harmonyactivity) {
 		$scope.device.deviceType = "activity";
 		$scope.device.targetDevice = harmonyactivity.hub;
@@ -855,6 +885,46 @@ app.controller('AddingController', function ($scope, $location, $http, bridgeSer
 		}
 	};
 
+	$scope.addDevice = function () {
+		if($scope.device.name == "" && $scope.device.onUrl == "")
+			return;
+		bridgeService.addDevice($scope.device).then(
+				function () {
+					$scope.clearDevice();
+					bridgeService.viewHarmonyActivities();
+					bridgeService.viewHarmonyDevices();
+				},
+				function (error) {
+				}
+		);
+
+	};
+
+	$scope.toggleButtons = function () {
+		$scope.buttonsVisible = !$scope.buttonsVisible;
+		if($scope.buttonsVisible)
+			$scope.imgButtonsUrl = "glyphicon glyphicon-minus";
+		else
+			$scope.imgButtonsUrl = "glyphicon glyphicon-plus";
+	};
+
+	$scope.deleteDeviceByMapId = function (id, mapType) {
+		bridgeService.deleteDeviceByMapId(id, mapType);
+	};
+
+});
+
+app.controller('NestController', function ($scope, $location, $http, bridgeService) {
+	$scope.bridge = bridgeService.state;
+	$scope.device = $scope.bridge.device;
+	bridgeService.viewNestItems();
+	$scope.imgButtonsUrl = "glyphicon glyphicon-plus";
+	$scope.buttonsVisible = false;
+
+	$scope.clearDevice = function () {
+		bridgeService.clearDevice();
+	};
+
 	$scope.buildNestHomeUrls = function (nestitem) {
 		$scope.device.deviceType = "home";
 		$scope.device.name = nestitem.name;
@@ -925,8 +995,87 @@ app.controller('AddingController', function ($scope, $location, $http, bridgeSer
 		$scope.device.offUrl = "{\"name\":\"" + nestitem.id + "\",\"control\":\"fan-auto\"}";
 	};
 
-	$scope.testUrl = function (device, type) {
-		bridgeService.testUrl(device, type);
+	$scope.addDevice = function () {
+		if($scope.device.name == "" && $scope.device.onUrl == "")
+			return;
+		bridgeService.addDevice($scope.device).then(
+				function () {
+					$scope.clearDevice();
+				},
+				function (error) {
+				}
+		);
+
+	};
+
+	$scope.toggleButtons = function () {
+		$scope.buttonsVisible = !$scope.buttonsVisible;
+		if($scope.buttonsVisible)
+			$scope.imgButtonsUrl = "glyphicon glyphicon-minus";
+		else
+			$scope.imgButtonsUrl = "glyphicon glyphicon-plus";
+	};
+
+	$scope.deleteDeviceByMapId = function (id, mapType) {
+		bridgeService.deleteDeviceByMapId(id, mapType);
+	};
+
+});
+
+app.controller('EditController', function ($scope, $location, $http, bridgeService) {
+	$scope.bridge = bridgeService.state;
+	$scope.device = $scope.bridge.device;
+	$scope.device_dim_control = "";
+	$scope.bulk = { devices: [] };
+	var veraList = angular.fromJson($scope.bridge.settings.veraaddress);
+	if(veraList != null)
+		$scope.vera = {base: "http://" + veraList.devices[0].ip, port: "3480", id: ""};
+	else
+		$scope.vera = {base: "http://", port: "3480", id: ""};
+	$scope.imgButtonsUrl = "glyphicon glyphicon-plus";
+	$scope.buttonsVisible = false;
+
+	$scope.clearDevice = function () {
+		bridgeService.clearDevice();
+	};
+
+	$scope.buildUrlsUsingDevice = function (dim_control) {
+		if ($scope.vera.base.indexOf("http") < 0) {
+			$scope.vera.base = "http://" + $scope.vera.base;
+		}
+		$scope.device.deviceType = "switch";
+		$scope.device.targetDevice = "Encapsulated";
+		$scope.device.mapType = "veraDevice";
+		$scope.device.mapId = $scope.vera.id;
+		if(dim_control.indexOf("byte") >= 0 || dim_control.indexOf("percent") >= 0 || dim_control.indexOf("math") >= 0)
+			$scope.device.onUrl = $scope.vera.base + ":" + $scope.vera.port
+			+ "/data_request?id=action&output_format=json&DeviceNum="
+			+ $scope.vera.id
+			+ "&serviceId=urn:upnp-org:serviceId:Dimming1&action=SetLoadLevelTarget&newLoadlevelTarget="
+			+ dim_control;
+		else
+			$scope.device.onUrl = $scope.vera.base + ":" + $scope.vera.port
+			+ "/data_request?id=action&output_format=json&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=1&DeviceNum="
+			+ $scope.vera.id;
+		$scope.device.offUrl = $scope.vera.base + ":" + $scope.vera.port
+		+ "/data_request?id=action&output_format=json&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=0&DeviceNum="
+		+ $scope.vera.id;
+	};
+
+	$scope.buildUrlsUsingScene = function () {
+		if ($scope.vera.base.indexOf("http") < 0) {
+			$scope.vera.base = "http://" + $scope.vera.base;
+		}
+		$scope.device.deviceType = "scene";
+		$scope.device.targetDevice = "Encapsulated";
+		$scope.device.mapType = "veraScene";
+		$scope.device.mapId = $scope.vera.id;
+		$scope.device.onUrl = $scope.vera.base + ":" + $scope.vera.port
+		+ "/data_request?id=action&output_format=json&serviceId=urn:micasaverde-com:serviceId:HomeAutomationGateway1&action=RunScene&SceneNum="
+		+ $scope.vera.id;
+		$scope.device.offUrl = $scope.vera.base + ":" + $scope.vera.port
+		+ "/data_request?id=action&output_format=json&serviceId=urn:micasaverde-com:serviceId:HomeAutomationGateway1&action=RunScene&SceneNum="
+		+ $scope.vera.id;
 	};
 
 	$scope.addDevice = function () {
@@ -963,59 +1112,6 @@ app.controller('AddingController', function ($scope, $location, $http, bridgeSer
 
 	};
 
-	$scope.bulkAddDevices = function(dim_control) {
-		var devicesList = [];
-		for(var i = 0; i < $scope.bulk.devices.length; i++) {
-			for(var x = 0; x < bridgeService.state.veradevices.length; x++) {
-				if(bridgeService.state.veradevices[x].id == $scope.bulk.devices[i]) {
-					$scope.buildDeviceUrls(bridgeService.state.veradevices[x],dim_control);
-					devicesList[i] = {
-							name: $scope.device.name,
-							mapId: $scope.device.mapId,
-							mapType: $scope.device.mapType,
-							deviceType: $scope.device.deviceType,
-							targetDevice: $scope.device.targetDevice,
-							onUrl: $scope.device.onUrl,
-							offUrl: $scope.device.offUrl,
-							httpVerb: $scope.device.httpVerb,
-							contentType: $scope.device.contentType,
-							contentBody: $scope.device.contentBody,
-							contentBodyOff: $scope.device.contentBodyOff
-					};
-				}
-			}
-		}
-		bridgeService.bulkAddDevice(devicesList);
-		$scope.clearDevice();
-		$scope.bulk = { devices: [] };
-	};
-
-	$scope.toggleSelection = function toggleSelection(deviceId) {
-		var idx = $scope.bulk.devices.indexOf(deviceId);
-
-		// is currently selected
-		if (idx > -1) {
-			$scope.bulk.devices.splice(idx, 1);
-		}
-
-		// is newly selected
-		else {
-			$scope.bulk.devices.push(deviceId);
-		}
-	};
-
-	$scope.toggleButtons = function () {
-		$scope.buttonsVisible = !$scope.buttonsVisible;
-		if($scope.buttonsVisible)
-			$scope.imgButtonsUrl = "glyphicon glyphicon-minus";
-		else
-			$scope.imgButtonsUrl = "glyphicon glyphicon-plus";
-	};
-
-	$scope.deleteDeviceByMapId = function (id, mapType) {
-		bridgeService.deleteDeviceByMapId(id, mapType);
-	};
-
 });
 
 app.filter('availableHarmonyActivityId', function(bridgeService) {
diff --git a/src/main/resources/public/views/configuration.html b/src/main/resources/public/views/configuration.html
index 5dcea49..de0f7f1 100644
--- a/src/main/resources/public/views/configuration.html
+++ b/src/main/resources/public/views/configuration.html
@@ -14,26 +14,19 @@
 		<div class="panel-heading">
 			<h2 class="panel-title">Current devices ({{bridge.devices.length}}) </h2>
 		</div>
+        <scrollable-table watch="bridge.devices">
 		<table class="table table-bordered table-striped table-hover">
 			<thead>
 				<tr>
 					<th>Row</th>
-					<th>
-						<a href="" ng-click="order('id')">ID</a>
-        				<span class="sortorder" ng-show="predicate === 'id'" ng-class="{reverse:reverse}"></span></th>
-					<th>
-						<a href="" ng-click="order('name')">Name</a>
-        				<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span></th>
-					<th>
-						<a href="" ng-click="order('deviceType')">Type</a>
-        				<span class="sortorder" ng-show="predicate === 'deviceType'" ng-class="{reverse:reverse}"></span></th>
-					<th>
-						<a href="" ng-click="order('targetDevice')">Target</a>
-        				<span class="sortorder" ng-show="predicate === 'targetDevice'" ng-class="{reverse:reverse}"></span></th>
+					<th sortable-header col="id">ID</th>
+					<th sortable-header col="name">Name</th>
+					<th sortable-header col="deviceType">Type</th>
+					<th sortable-header col="targetDevice">Target</th>
 					<th>Actions</th>
 				</tr>
 			</thead>
-			<tr ng-repeat="device in bridge.devices | orderBy:predicate:reverse">
+			<tr ng-repeat="device in bridge.devices">
 				<td>{{$index+1}}</td>
 				<td>{{device.id}}</td>
 				<td>{{device.name}}</td>
@@ -53,6 +46,7 @@
 				</td>
 			</tr>
 		</table>
+        </scrollable-table>
 	</div>
 	<div class="panel panel-default backup">
 		<div class="panel-heading">
diff --git a/src/main/resources/public/views/editdevice.html b/src/main/resources/public/views/editdevice.html
index 82200e5..48d4f93 100644
--- a/src/main/resources/public/views/editdevice.html
+++ b/src/main/resources/public/views/editdevice.html
@@ -1,6 +1,7 @@
       <ul class="nav nav-pills" role="tablist">
         <li role="presentation"><a href="#">Bridge Devices</a></li>
         <li role="presentation"><a href="#/system">Bridge Control</a></li>
+        <li role="presentation"><a href="#/logs">Logs</a></li>
         <li ng-if="bridge.showVera" role="presentation"><a href="#/veradevices">Vera Devices</a></li>
         <li ng-if="bridge.showVera" role="presentation"><a href="#/verascenes">Vera Scenes</a></li>
         <li ng-if="bridge.showHarmony" role="presentation"><a href="#/harmonyactivities">Harmony Activities</a></li>
diff --git a/src/main/resources/public/views/editor.html b/src/main/resources/public/views/editor.html
index 0511710..cf7146b 100644
--- a/src/main/resources/public/views/editor.html
+++ b/src/main/resources/public/views/editor.html
@@ -1,6 +1,7 @@
       <ul class="nav nav-pills" role="tablist">
         <li role="presentation"><a href="#">Bridge Devices</a></li>
         <li role="presentation"><a href="#/system">Bridge Control</a></li>
+        <li role="presentation"><a href="#/logs">Logs</a></li>
         <li ng-if="bridge.showVera" role="presentation"><a href="#/veradevices">Vera Devices</a></li>
         <li ng-if="bridge.showVera" role="presentation"><a href="#/verascenes">Vera Scenes</a></li>
         <li ng-if="bridge.showHarmony" role="presentation"><a href="#/harmonyactivities">Harmony Activities</a></li>
diff --git a/src/main/resources/public/views/harmonyactivity.html b/src/main/resources/public/views/harmonyactivity.html
index fcc4047..9418552 100644
--- a/src/main/resources/public/views/harmonyactivity.html
+++ b/src/main/resources/public/views/harmonyactivity.html
@@ -1,6 +1,7 @@
       <ul class="nav nav-pills" role="tablist">
         <li role="presentation"><a href="#">Bridge Devices</a></li>
         <li role="presentation"><a href="#/system">Bridge Control</a></li>
+        <li role="presentation"><a href="#/logs">Logs</a></li>
         <li ng-if="bridge.showVera" role="presentation"><a href="#/veradevices">Vera Devices</a></li>
         <li ng-if="bridge.showVera" role="presentation"><a href="#/verascenes">Vera Scenes</a></li>
         <li role="presentation" class="active"><a href="#/harmonyactivities">Harmony Activities</a></li>
@@ -19,26 +20,18 @@
 			Then you can modify the name to anything you want that will be the keyword for Alexa. Click the 'Add Bridge Device' to finish that selection setup.
 			The 'Already Configured Activities' list below will show what is already setup for your Harmony Hubs.</p>
 
+        	<scrollable-table watch="bridge.harmonyactivities">
 			<table class="table table-bordered table-striped table-hover">
 				<thead>
 					<tr>
 						<th>Row</th>
-						<th>
-							<a href="" ng-click="order('label')">Name</a>
-        					<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('id')">Id</a>
-        					<span class="sortorder" ng-show="predicate === 'id'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('hub')">Hub</a>
-        					<span class="sortorder" ng-show="predicate === 'hub'" ng-class="{reverse:reverse}"></span>
-        				</th>
+						<th sortable-header col="name">Name</th>
+						<th sortable-header col="id">Id</th>
+						<th sortable-header col="hub">Hub</th>
 						<th>Actions</th>
 					</tr>
 				</thead>
-				<tr ng-repeat="harmonyactivity in bridge.harmonyactivities | availableHarmonyActivityId | orderBy:predicate:reverse">
+				<tr ng-repeat="harmonyactivity in bridge.harmonyactivities | availableHarmonyActivityId">
 					<td>{{$index+1}}</td>
 					<td>{{harmonyactivity.activity.label}}</td>
 					<td>{{harmonyactivity.activity.id}}</td>
@@ -50,6 +43,7 @@
 					</td>
 				</tr>
 			</table>
+        	</scrollable-table>
 		</li>
 	</ul>
 	<div class="panel-heading">
@@ -57,26 +51,18 @@
 	</div>
 	<ul ng-if="buttonsVisible" class="list-group">
 		<li class="list-group-item">
+        	<scrollable-table watch="bridge.harmonyactivities">
 			<table class="table table-bordered table-striped table-hover">
 				<thead>
 					<tr>
 						<th>Row</th>
-						<th>
-							<a href="" ng-click="order('label')">Name</a>
-        					<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('id')">Id</a>
-        					<span class="sortorder" ng-show="predicate === 'id'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('hub')">Hub</a>
-        					<span class="sortorder" ng-show="predicate === 'hub'" ng-class="{reverse:reverse}"></span>
-        				</th>
+						<th sortable-header col="name">Name</th>
+						<th sortable-header col="id">Id</th>
+						<th sortable-header col="hub">Hub</th>
 						<th>Actions</th>
 					</tr>
 				</thead>
-				<tr ng-repeat="harmonyactivity in bridge.harmonyactivities | unavailableHarmonyActivityId | orderBy:predicate:reverse">
+				<tr ng-repeat="harmonyactivity in bridge.harmonyactivities | unavailableHarmonyActivityId">
 					<td>{{$index+1}}</td>
 					<td>{{harmonyactivity.activity.label}}</td>
 					<td>{{harmonyactivity.activity.id}}</td>
@@ -85,6 +71,7 @@
 						ng-click="deleteDeviceByMapId(harmonyactivity.activity.id, 'harmonyActivity')">Delete</button></td>
 				</tr>
 			</table>
+        	</scrollable-table>
 		</li>
 	</ul>
 </div>
diff --git a/src/main/resources/public/views/harmonydevice.html b/src/main/resources/public/views/harmonydevice.html
index 2b87204..2bfe929 100644
--- a/src/main/resources/public/views/harmonydevice.html
+++ b/src/main/resources/public/views/harmonydevice.html
@@ -1,6 +1,7 @@
       <ul class="nav nav-pills" role="tablist">
         <li role="presentation"><a href="#">Bridge Devices</a></li>
         <li role="presentation"><a href="#/system">Bridge Control</a></li>
+        <li role="presentation"><a href="#/logs">Logs</a></li>
         <li ng-if="bridge.showVera" role="presentation"><a href="#/veradevices">Vera Devices</a></li>
         <li ng-if="bridge.showVera" role="presentation"><a href="#/verascenes">Vera Scenes</a></li>
         <li role="presentation"><a href="#/harmonyactivities">Harmony Activities</a></li>
@@ -20,28 +21,20 @@
 			Then you can modify the name to anything you want that will be the keyword for Alexa. Click the 'Add Bridge Device' to finish that selection setup.
 			The 'Already Configured Harmony Buttons' list below will show what is already setup for your Harmony Hubs.</p>
 
+        	<scrollable-table watch="bridge.harmonydevices">
 			<table class="table table-bordered table-striped table-hover">
 				<thead>
 					<tr>
 						<th>Row</th>
-						<th>
-							<a href="" ng-click="order('label')">Name</a>
-        					<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('id')">Id</a>
-        					<span class="sortorder" ng-show="predicate === 'id'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('hub')">Hub</a>
-        					<span class="sortorder" ng-show="predicate === 'hub'" ng-class="{reverse:reverse}"></span>
-        				</th>
+						<th sortable-header col="name">Name</th>
+						<th sortable-header col="id">Id</th>
+						<th sortable-header col="hub">Hub</th>
 						<th>On Button</th>
 						<th>Off Button</th>
 						<th>Actions</th>
 					</tr>
 				</thead>
-				<tr ng-repeat="harmonydevice in bridge.harmonydevices | orderBy:predicate:reverse">
+				<tr ng-repeat="harmonydevice in bridge.harmonydevices">
 					<td>{{$index+1}}</td>
 					<td>{{harmonydevice.device.label}}</td>
 					<td>{{harmonydevice.device.id}}</td>
@@ -66,6 +59,7 @@
 					</td>
 				</tr>
 			</table>
+        	</scrollable-table>
 		</li>
 	</ul>
 	<div class="panel-heading">
@@ -73,26 +67,15 @@
 	</div>
 	<ul ng-if="buttonsVisible" class="list-group">
 		<li class="list-group-item">
+        	<scrollable-table watch="bridge.harmonydevices">
 			<table class="table table-bordered table-striped table-hover">
 				<thead>
 					<tr>
 						<th>Row</th>
-						<th>
-							<a href="" ng-click="order('name')">Name</a>
-        					<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('id')">Device Id</a>
-        					<span class="sortorder" ng-show="predicate === 'id'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('targetDevice')">Hub</a>
-        					<span class="sortorder" ng-show="predicate === 'targetDevice'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('mapId')">Harmony Device-Button On-Button Off</a>
-        					<span class="sortorder" ng-show="predicate === 'id'" ng-class="{reverse:reverse}"></span>
-        				</th>
+						<th sortable-header col="name">Name</th>
+						<th sortable-header col="id">Device Id</th>
+						<th sortable-header col="targetDevice">Hub</th>
+						<th>Harmony Device-Button On-Button Off</th>
 						<th>Actions</th>
 					</tr>
 				</thead>
@@ -108,6 +91,7 @@
 					</td>
 				</tr>
 			</table>
+        	</scrollable-table>
 		</li>
 	</ul>
 </div>
diff --git a/src/main/resources/public/views/logs.html b/src/main/resources/public/views/logs.html
index 02625f2..0b2e750 100644
--- a/src/main/resources/public/views/logs.html
+++ b/src/main/resources/public/views/logs.html
@@ -15,32 +15,28 @@
 			<h1 class="panel-title">Log Messages</h1>
 		</div>
 		<div class="panel-body">
-			<table class="table table-striped table-fixed">
+			<p>
+				<button class="btn btn-primary" type="submit"
+					ng-click="updateLogs()">Update Log</button>
+			</p>
+        	<scrollable-table watch="bridge.logMsgs">
+			<table class="table table-striped table-bordered table-hover">
 				<thead>
 					<tr>
-						<th class="col-md-1">Row</th>
-						<th class="col-md-1">
-							<a href="" ng-click="order('time')">Time</a>
-	        				<span class="sortorder" ng-show="predicate === 'time'" ng-class="{reverse:reverse}"></span></th>
-						<th class="col-md-1">
-							<a href="" ng-click="order('level')">Level</a>
-	        				<span class="sortorder" ng-show="predicate === 'level'" ng-class="{reverse:reverse}"></span></th>
-						<th class="col-md-6">
-							<a href="" ng-click="order('message')">Message</a>
-	        				<span class="sortorder" ng-show="predicate === 'message'" ng-class="{reverse:reverse}"></span></th>
-						<th class="col-md-3">
-							<a href="" ng-click="order('component')">Component</a>
-	        				<span class="sortorder" ng-show="predicate === 'component'" ng-class="{reverse:reverse}"></span></th>
+						<th sortable-header col="time">Time</th>
+						<th sortable-header col="level">Level</th>
+						<th sortable-header col="message">Message</th>
+						<th sortable-header col="component">Component</th>
 					</tr>
 				</thead>
-				<tr ng-repeat="logMessage in bridge.logMsgs | orderBy:predicate:reverse">
-					<td class="col-md-1">{{$index+1}}</td>
-					<td class="col-md-1">{{logMessage.time}}</td>
-					<td class="col-md-1">{{logMessage.level}}</td>
-					<td class="col-md-6">{{logMessage.message}}</td>
-					<td class="col-md-3">{{logMessage.component}}</td>
+				<tr ng-repeat="logMessage in bridge.logMsgs">
+					<td>{{logMessage.time}}</td>
+					<td>{{logMessage.level}}</td>
+					<td>{{logMessage.message}}</td>
+					<td>{{logMessage.component}}</td>
 				</tr>
 			</table>
+        	</scrollable-table>
 		</div>
 	</div>
 	
\ No newline at end of file
diff --git a/src/main/resources/public/views/nestactions.html b/src/main/resources/public/views/nestactions.html
index d10091a..47de20d 100644
--- a/src/main/resources/public/views/nestactions.html
+++ b/src/main/resources/public/views/nestactions.html
@@ -1,6 +1,7 @@
       <ul class="nav nav-pills" role="tablist">
         <li role="presentation"><a href="#">Bridge Devices</a></li>
         <li role="presentation"><a href="#/system">Bridge Control</a></li>
+        <li role="presentation"><a href="#/logs">Logs</a></li>
         <li ng-if="bridge.showVera" role="presentation"><a href="#/veradevices">Vera Devices</a></li>
         <li ng-if="bridge.showVera" role="presentation"><a href="#/verascenes">Vera Scenes</a></li>
         <li ng-if="bridge.showHarmony"  role="presentation"><a href="#/harmonyactivities">Harmony Activities</a></li>
@@ -19,22 +20,14 @@
 			Then you can modify the name to anything you want that will be the keyword for Alexa. Click the 'Add Bridge Device' to finish that selection setup.
 			The 'Already Configured Nest Items' list below will show what is already setup for your Nest.</p>
 
+        	<scrollable-table watch="bridge.nestitems">
 			<table class="table table-bordered table-striped table-hover">
 				<thead>
 					<tr>
 						<th>Row</th>
-						<th>
-							<a href="" ng-click="order('name')">Name</a>
-        					<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('type')">Type</a>
-        					<span class="sortorder" ng-show="predicate === 'type'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('location')">Location</a>
-        					<span class="sortorder" ng-show="predicate === 'location'" ng-class="{reverse:reverse}"></span>
-        				</th>
+						<th sortable-header col="name">Name</th>
+						<th sortable-header col="type">Type</th>
+						<th sortable-header col="location">Location</th>
 						<th>Actions</th>
 					</tr>
 				</thead>
@@ -71,6 +64,7 @@
 					</td>
 				</tr>
 			</table>
+        	</scrollable-table>
 		</li>
 	</ul>
 	<div class="panel-heading">
@@ -78,22 +72,14 @@
 	</div>
 	<ul ng-if="buttonsVisible" class="list-group">
 		<li class="list-group-item">
+        	<scrollable-table watch="bridge.nestitems">
 			<table class="table table-bordered table-striped table-hover">
 				<thead>
 					<tr>
 						<th>Row</th>
-						<th>
-							<a href="" ng-click="order('name')">Name</a>
-        					<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('id')">Id</a>
-        					<span class="sortorder" ng-show="predicate === 'id'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('mapId')">mapId</a>
-        					<span class="sortorder" ng-show="predicate === 'mapId'" ng-class="{reverse:reverse}"></span>
-        				</th>
+						<th sortable-header col="name">Name</th>
+						<th sortable-header col="id">Device Id</th>
+						<th>mapId</th>
 						<th>Actions</th>
 					</tr>
 				</thead>
@@ -106,6 +92,7 @@
 						ng-click="deleteDeviceByMapId(device.mapId, 'nest')">Delete</button></td>
 				</tr>
 			</table>
+        	</scrollable-table>
 		</li>
 	</ul>
 </div>
diff --git a/src/main/resources/public/views/veradevice.html b/src/main/resources/public/views/veradevice.html
index 47a774e..0758814 100644
--- a/src/main/resources/public/views/veradevice.html
+++ b/src/main/resources/public/views/veradevice.html
@@ -1,6 +1,7 @@
       <ul class="nav nav-pills" role="tablist">
         <li role="presentation"><a href="#">Bridge Devices</a></li>
         <li role="presentation"><a href="#/system">Bridge Control</a></li>
+        <li role="presentation"><a href="#/logs">Logs</a></li>
         <li role="presentation" class="active"><a href="#/veradevices">Vera Devices</a></li>
         <li role="presentation"><a href="#/verascenes">Vera Scenes</a></li>
         <li ng-if="bridge.showHarmony" role="presentation"><a href="#/harmonyactivities">Harmony Activities</a></li>
@@ -30,34 +31,20 @@
 			<p>Use the check boxes by the names to use the bulk addition feature. Select your items and dim control type if wanted, then click bulk add below.
 			Your items will be added with on and off or dim and off if selected with the name of the device from the Vera.
 			</p>
+        	<scrollable-table watch="bridge.veradevices">
 			<table class="table table-bordered table-striped table-hover">
 				<thead>
 					<tr>
 						<th>Row</th>
-						<th>
-							<a href="" ng-click="order('name')">Name</a>
-        					<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('id')">Id</a>
-        					<span class="sortorder" ng-show="predicate === 'id'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('category')">Category</a>
-        					<span class="sortorder" ng-show="predicate === 'category'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('room')">Room</a>
-        					<span class="sortorder" ng-show="predicate === 'room'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('vera')">Vera</a>
-        					<span class="sortorder" ng-show="predicate === 'vera'" ng-class="{reverse:reverse}"></span>
-        				</th>
+						<th sortable-header col="name">Name</th>
+						<th sortable-header col="id">Id</th>
+						<th sortable-header col="category">Category</th>
+						<th sortable-header col="room">Room</th>
+						<th sortable-header col="veraname">Vera</th>
 						<th>Actions</th>
 					</tr>
 				</thead>
-				<tr ng-repeat="veradevice in bridge.veradevices | availableVeraDeviceId | orderBy:predicate:reverse">
+				<tr ng-repeat="veradevice in bridge.veradevices | availableVeraDeviceId">
 					<td>{{$index+1}}</td>
 					<td><input type="checkbox" name="bulk.devices[]" value="{{veradevice.id}}" ng-checked="bulk.devices.indexOf(veradevice.id) > -1" ng-click="toggleSelection(veradevice.id)"> {{veradevice.name}}</td>
 					<td>{{veradevice.id}}</td>
@@ -71,6 +58,7 @@
 					</td>
 				</tr>
 			</table>
+        	</scrollable-table>
 			<p>
 				<button class="btn btn-success" type="submit"
 					ng-click="bulkAddDevices(device_dim_control)">Bulk Add ({{bulk.devices.length}})</button>
@@ -82,34 +70,20 @@
 	</div>
 	<ul ng-if="buttonsVisible" class="list-group">
 		<li class="list-group-item">
+        	<scrollable-table watch="bridge.veradevices">
 			<table class="table table-bordered table-striped table-hover">
 				<thead>
 					<tr>
 						<th>Row</th>
-						<th>
-							<a href="" ng-click="order('name')">Name</a>
-        					<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('id')">Id</a>
-        					<span class="sortorder" ng-show="predicate === 'id'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('category')">Category</a>
-        					<span class="sortorder" ng-show="predicate === 'category'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('room')">Room</a>
-        					<span class="sortorder" ng-show="predicate === 'room'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('vera')">Vera</a>
-        					<span class="sortorder" ng-show="predicate === 'vera'" ng-class="{reverse:reverse}"></span>
-        				</th>
+						<th sortable-header col="name">Name</th>
+						<th sortable-header col="id">Id</th>
+						<th sortable-header col="category">Category</th>
+						<th sortable-header col="room">Room</th>
+						<th sortable-header col="veraname">Vera</th>
 						<th>Actions</th>
 					</tr>
 				</thead>
-				<tr ng-repeat="veradevice in bridge.veradevices | unavailableVeraDeviceId | orderBy:predicate:reverse">
+				<tr ng-repeat="veradevice in bridge.veradevices | unavailableVeraDeviceId">
 					<td>{{$index+1}}</td>
 					<td>{{veradevice.name}}</td>
 					<td>{{veradevice.id}}</td>
@@ -122,6 +96,7 @@
 					</td>
 				</tr>
 			</table>
+        	</scrollable-table>
 		</li>
 	</ul>
 </div>
diff --git a/src/main/resources/public/views/verascene.html b/src/main/resources/public/views/verascene.html
index 097aecc..9728de3 100644
--- a/src/main/resources/public/views/verascene.html
+++ b/src/main/resources/public/views/verascene.html
@@ -1,6 +1,7 @@
       <ul class="nav nav-pills" role="tablist">
         <li role="presentation"><a href="#">Bridge Devices</a></li>
         <li role="presentation"><a href="#/system">Bridge Control</a></li>
+        <li role="presentation"><a href="#/logs">Logs</a></li>
         <li role="presentation"><a href="#/veradevices">Vera Devices</a></li>
         <li role="presentation" class="active"><a href="#/verascenes">Vera Scenes</a></li>
         <li ng-if="bridge.showHarmony" role="presentation"><a href="#/harmonyactivities">Harmony Activities</a></li>
@@ -19,30 +20,19 @@
 			Then you can modify the name to anything you want that will be the keyword for Alexa. Click the 'Add Bridge Device' to finish that selection setup.
 			The 'Already Configured Vera Scenes' list below will show what is already setup for your Vera.</p>
 
+        	<scrollable-table watch="bridge.verascenes">
 			<table class="table table-bordered table-striped table-hover">
 				<thead>
 					<tr>
 						<th>Row</th>
-						<th>
-							<a href="" ng-click="order('name')">Name</a>
-        					<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('id')">Id</a>
-        					<span class="sortorder" ng-show="predicate === 'id'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('room')">Room</a>
-        					<span class="sortorder" ng-show="predicate === 'room'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('vera')">Vera</a>
-        					<span class="sortorder" ng-show="predicate === 'vera'" ng-class="{reverse:reverse}"></span>
-        				</th>
+						<th sortable-header col="name">Name</th>
+						<th sortable-header col="id">Id</th>
+						<th sortable-header col="room">Room</th>
+						<th sortable-header col="veraname">Vera</th>
 						<th>Actions</th>
 					</tr>
 				</thead>
-				<tr ng-repeat="verascene in bridge.verascenes | availableVeraSceneId | orderBy:predicate:reverse">
+				<tr ng-repeat="verascene in bridge.verascenes | availableVeraSceneId">
 					<td>{{$index+1}}</td>
 					<td>{{verascene.name}}</td>
 					<td>{{verascene.id}}</td>
@@ -55,6 +45,7 @@
 					</td>
 				</tr>
 			</table>
+        	</scrollable-table>
 		</li>
 	</ul>
 	<div class="panel-heading">
@@ -62,30 +53,19 @@
 	</div>
 	<ul ng-if="buttonsVisible" class="list-group">
 		<li class="list-group-item">
+        	<scrollable-table watch="bridge.verascenes">
 			<table class="table table-bordered table-striped table-hover">
 				<thead>
 					<tr>
 						<th>Row</th>
-						<th>
-							<a href="" ng-click="order('name')">Name</a>
-        					<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('id')">Id</a>
-        					<span class="sortorder" ng-show="predicate === 'id'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('room')">Room</a>
-        					<span class="sortorder" ng-show="predicate === 'room'" ng-class="{reverse:reverse}"></span>
-        				</th>
-						<th>
-							<a href="" ng-click="order('vera')">Vera</a>
-        					<span class="sortorder" ng-show="predicate === 'vera'" ng-class="{reverse:reverse}"></span>
-        				</th>
+						<th sortable-header col="name">Name</th>
+						<th sortable-header col="id">Id</th>
+						<th sortable-header col="room">Room</th>
+						<th sortable-header col="veraname">Vera</th>
 						<th>Actions</th>
 					</tr>
 				</thead>
-				<tr ng-repeat="verascene in bridge.verascenes | unavailableVeraSceneId | orderBy:predicate:reverse">
+				<tr ng-repeat="verascene in bridge.verascenes | unavailableVeraSceneId">
 					<td>{{$index+1}}</td>
 					<td>{{verascene.name}}</td>
 					<td>{{verascene.id}}</td>
@@ -97,6 +77,7 @@
 					</td>
 				</tr>
 			</table>
+        	</scrollable-table>
 		</li>
 	</ul>
 </div>