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

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

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

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");

src/main/resources/public/css/main.css

@@ -9,18 +9,3 @@ 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;
-}

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

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>

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.updateLogs = function() {
-	$scope.reverse = true;
+		bridgeService.viewLogs();
-	$scope.order = function(predicate) {
-		$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
-		$scope.predicate = predicate;
 	};
 });
 
@@ -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 = "";
+		bridgeService.clearDevice();
-		$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;
 	};
 
 	$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) {
+	$scope.addDevice = function () {
-		bridgeService.testUrl(device, type);
+		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) {

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>
+					<th sortable-header col="id">ID</th>
-						<a href="" ng-click="order('id')">ID</a>
+					<th sortable-header col="name">Name</th>
-        				<span class="sortorder" ng-show="predicate === 'id'" ng-class="{reverse:reverse}"></span></th>
+					<th sortable-header col="deviceType">Type</th>
-					<th>
+					<th sortable-header col="targetDevice">Target</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>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">

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>

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>

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>
+						<th sortable-header col="name">Name</th>
-							<a href="" ng-click="order('label')">Name</a>
+						<th sortable-header col="id">Id</th>
-        					<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
+						<th sortable-header col="hub">Hub</th>
-        				</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>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>
+						<th sortable-header col="name">Name</th>
-							<a href="" ng-click="order('label')">Name</a>
+						<th sortable-header col="id">Id</th>
-        					<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
+						<th sortable-header col="hub">Hub</th>
-        				</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>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>

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>
+						<th sortable-header col="name">Name</th>
-							<a href="" ng-click="order('label')">Name</a>
+						<th sortable-header col="id">Id</th>
-        					<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
+						<th sortable-header col="hub">Hub</th>
-        				</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>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>
+						<th sortable-header col="name">Name</th>
-							<a href="" ng-click="order('name')">Name</a>
+						<th sortable-header col="id">Device Id</th>
-        					<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
+						<th sortable-header col="targetDevice">Hub</th>
-        				</th>
+						<th>Harmony Device-Button On-Button Off</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>Actions</th>
 					</tr>
 				</thead>
@@ -108,6 +91,7 @@
 					</td>
 				</tr>
 			</table>
+        	</scrollable-table>
 		</li>
 	</ul>
 </div>

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 sortable-header col="time">Time</th>
-						<th class="col-md-1">
+						<th sortable-header col="level">Level</th>
-							<a href="" ng-click="order('time')">Time</a>
+						<th sortable-header col="message">Message</th>
-	        				<span class="sortorder" ng-show="predicate === 'time'" ng-class="{reverse:reverse}"></span></th>
+						<th sortable-header col="component">Component</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>
 					</tr>
 				</thead>
-				<tr ng-repeat="logMessage in bridge.logMsgs | orderBy:predicate:reverse">
+				<tr ng-repeat="logMessage in bridge.logMsgs">
-					<td class="col-md-1">{{$index+1}}</td>
+					<td>{{logMessage.time}}</td>
-					<td class="col-md-1">{{logMessage.time}}</td>
+					<td>{{logMessage.level}}</td>
-					<td class="col-md-1">{{logMessage.level}}</td>
+					<td>{{logMessage.message}}</td>
-					<td class="col-md-6">{{logMessage.message}}</td>
+					<td>{{logMessage.component}}</td>
-					<td class="col-md-3">{{logMessage.component}}</td>
 				</tr>
 			</table>
+        	</scrollable-table>
 		</div>
 	</div>
 	

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>
+						<th sortable-header col="name">Name</th>
-							<a href="" ng-click="order('name')">Name</a>
+						<th sortable-header col="type">Type</th>
-        					<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
+						<th sortable-header col="location">Location</th>
-        				</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>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>
+						<th sortable-header col="name">Name</th>
-							<a href="" ng-click="order('name')">Name</a>
+						<th sortable-header col="id">Device Id</th>
-        					<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
+						<th>mapId</th>
-        				</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>Actions</th>
 					</tr>
 				</thead>
@@ -106,6 +92,7 @@
 						ng-click="deleteDeviceByMapId(device.mapId, 'nest')">Delete</button></td>
 				</tr>
 			</table>
+        	</scrollable-table>
 		</li>
 	</ul>
 </div>

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>
+						<th sortable-header col="name">Name</th>
-							<a href="" ng-click="order('name')">Name</a>
+						<th sortable-header col="id">Id</th>
-        					<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
+						<th sortable-header col="category">Category</th>
-        				</th>
+						<th sortable-header col="room">Room</th>
-						<th>
+						<th sortable-header col="veraname">Vera</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>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>
+						<th sortable-header col="name">Name</th>
-							<a href="" ng-click="order('name')">Name</a>
+						<th sortable-header col="id">Id</th>
-        					<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
+						<th sortable-header col="category">Category</th>
-        				</th>
+						<th sortable-header col="room">Room</th>
-						<th>
+						<th sortable-header col="veraname">Vera</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>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>

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>
+						<th sortable-header col="name">Name</th>
-							<a href="" ng-click="order('name')">Name</a>
+						<th sortable-header col="id">Id</th>
-        					<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
+						<th sortable-header col="room">Room</th>
-        				</th>
+						<th sortable-header col="veraname">Vera</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>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>
+						<th sortable-header col="name">Name</th>
-							<a href="" ng-click="order('name')">Name</a>
+						<th sortable-header col="id">Id</th>
-        					<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
+						<th sortable-header col="room">Room</th>
-        				</th>
+						<th sortable-header col="veraname">Vera</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>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>