Improvements

nbproject/project.xml

@@ -3,7 +3,7 @@
     <type>org.netbeans.modules.web.clientproject</type>
     <configuration>
         <data xmlns="http://www.netbeans.org/ns/clientside-project/1">
-            <name>scorexplorer</name>
+            <name>scorex-explorer</name>
         </data>
     </configuration>
 </project>

src/css/style.css

@@ -16,6 +16,9 @@ footer p {
     margin-bottom: 0;
 }
 
+.search-input {
+	width: 350px;
+}
 
 .blockDetails th, .blockDetails td {
     border-top: none !important;

src/index.html

@@ -27,16 +27,20 @@
 						<li>
 							<a ui-sref="peers">Peers</a>
 						</li>
-						
+
 					</ul>
 
+					<div class="navbar-right col-sm-5 col-md-5 col-lg-5" ng-controller="SearchCtrl">
+						<form class="navbar-form" role="search">
+							<div class="input-group col-sm-12 col-md-12 col-lg-12">
+								<input type="text" class="form-control" ng-model="searchQuery" placeholder="Address / Tx sig / Block sig" name="q">
+								<div class="input-group-btn">
+									<button class="btn btn-default" ng-click="search()"><i class="glyphicon glyphicon-search"></i></button>
+								</div>
+							</div>
+						</form>
+					</div>
 
-					<form class="navbar-form navbar-right" role="search" ng-controller="SearchCtrl">
-						<div class="form-group">
-							<input class="form-control" ng-model="address" placeholder="Address" type="text">
-						</div>
-						<button ng-click="search()" type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
-					</form>
         </div>
 			</div>
 		</div>
@@ -86,8 +90,10 @@
 		<script src="/js/controllers/blocks.js?v=2"></script>
 		<script src="/js/controllers/block-details.js?v=2"></script>
 		<script src="/js/controllers/address-details.js?v=2"></script>
+		<script src="/js/controllers/block-details-sig.js?v=2"></script>
 		<script src="/js/controllers/search.js?v=2"></script>
 		<script src="/js/controllers/peers.js?v=2"></script>
+		<script src="/js/controllers/tx-details.js?v=2"></script>
 
 	</body>
 </html>

src/js/apiMethods.js

@@ -2,7 +2,7 @@
 	'use strict';
 
 	var URL = 'http://23.94.190.226:9081';
-
+					
 	angular.module('web').constant('apiMethods', {
 		version: URL + '/scorex/version',
 		status: URL + '/scorex/status',
@@ -23,14 +23,17 @@
 				return URL + '/addresses/balance/' + address;
 			},
 			generatingBalance: function (address) {
-				return URL + '/addresses/generatingbalance/' + address
+				return URL + '/addresses/generatingbalance/' + address;
 			},
 			validate: function (address) {
 				return URL + '/addresses/validate/' + address;
 			}
 		},
 		transactions: {
 			unconfirmed: URL + '/transactions/unconfirmed',
+			info: function (signature) {
+				return URL + '/transactions/info/' + signature;
+			},
 			forAddress: function (address) {
 				return URL + '/transactions/address/' + address + '/limit/50';
 			}

src/js/controllers/block-details-sig.js

@@ -0,0 +1,32 @@
+(function () {
+	'use strict';
+
+	function BlocksDetailsSigCtrl($http, apiMethods, $stateParams, $state) {
+		var ctrl = this;
+		ctrl.signature = $stateParams.signature;
+		ctrl.next = nextBlock;
+		ctrl.prev = prevBlock;
+
+		activate();
+
+		function activate() {
+
+			$http.get(apiMethods.blocks.bySignature(ctrl.signature))
+							.success(function (data) {
+								ctrl.details = data;
+							});
+		}
+
+		function nextBlock() {
+			$state.go('block-details', {height: ctrl.height + 1});
+		}
+
+		function prevBlock() {
+			if (ctrl.height > 1)
+				$state.go('block-details', {height: ctrl.height - 1});
+		}
+
+	}
+
+	angular.module('web').controller('BlocksDetailsSigCtrl', BlocksDetailsSigCtrl);
+})();

src/js/controllers/block-details.js

@@ -14,7 +14,7 @@
 			$http.get(apiMethods.blocks.byHeight(ctrl.height))
 							.success(function (data) {
 								ctrl.details = data;
-							})
+							});
 		}
 
 		function nextBlock() {

src/js/controllers/general.js

@@ -35,15 +35,15 @@
 							});
 			$http.get(apiMethods.transactions.unconfirmed)
 							.success(function (data) {
-								ctrl.unconfirmedTxs = data[0];
+								ctrl.unconfirmedTxs = data;
 							});
 			$http.get(apiMethods.consensus.puz)
 							.success(function (data) {
 								ctrl.consensus.puz = data.puz;
 							});
 			$http.get(apiMethods.consensus.algo)
 							.success(function (data) {
-								ctrl.consensus.algo = data["consensus-algo"];
+								ctrl.consensus.algo = data.consensusAlgo;
 							});
 			$http.get(apiMethods.consensus.target)
 							.success(function (data) {

src/js/controllers/search.js

@@ -1,15 +1,42 @@
-(function(){
+(function () {
 	'use strict';
-	
-	function SearchCtrl($scope, $state) {
-		
+
+	function SearchCtrl($scope, $state, $http, apiMethods) {
+
 		$scope.search = search;
-		
+
 		function search() {
-			$state.go('address-details', {address: $scope.address});
+			var q = $scope.searchQuery;
+			if (!q)
+				return;
+			// check address
+			$http.get(apiMethods.address.validate(q))
+					.success(function (data) {
+						if (data.valid)
+							$state.go('address-details', {address: q});
+						else {
+							// check block
+							$http.get(apiMethods.blocks.bySignature(q))
+									.success(function (data) {
+										if (!data.error) {
+											$state.go('block-details-sig', {signature: q})
+										} else {
+											// check tx
+											$http.get(apiMethods.transactions.info(q))
+													.success(function(data){
+														if (!data.error)
+															$state.go('tx-details', {signature:q});
+											})
+										}
+									});
+						}
+					})
+					.error(function (data) {
+					});
+
 		}
 	}
-	
+
 	angular.module('web').controller('SearchCtrl', SearchCtrl);
 })();
 

src/js/controllers/tx-details.js

@@ -0,0 +1,19 @@
+(function(){
+	'use strict';
+
+	function TxDetailsCtrl($http, $stateParams, apiMethods) {
+		var ctrl = this;
+		ctrl.signature = $stateParams.signature;
+
+		activate();
+
+		function activate() {
+			$http.get(apiMethods.transactions.info(ctrl.signature))
+					.success(function(data){
+						ctrl.details = data;
+			});
+		}
+	}
+
+	angular.module('web').controller('TxDetailsCtrl', TxDetailsCtrl);
+})();

src/js/routes.js

@@ -2,59 +2,77 @@
 	'use strict';
 
 	angular.module('web')
-					.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', function ($stateProvider, $locationProvider, $urlRouterProvider) {
-							$stateProvider
-											.state('general', {
-												url: '/',
-												views: {
-													"main": {
-														controller: 'GeneralCtrl as ctrl',
-														templateUrl: '/js/views/general.html'
-													}
-												}
-											})
-											.state('address-details', {
-												url: '/address/:address',
-												views: {
-													"main": {
-														controller: 'AddressDetailsCtrl as ctrl',
-														templateUrl: '/js/views/address-details.html'
-													}
-												}
-											})
-											.state('blocks', {
-												url: '/blocks',
-												views: {
-													"main": {
-														controller: 'BlocksCtrl as ctrl',
-														templateUrl: '/js/views/blocks.html'
-													}
-												}
-											})
-											.state('block-details', {
-												url: '/blocks/:height',
-												views: {
-													"main": {
-														controller: 'BlocksDetailsCtrl as ctrl',
-														templateUrl: '/js/views/block-details.html'
-													}
-												}
-											})
-											.state('peers', {
-												url: '/peers',
-												views: {
-													"main": {
-														controller: 'PeersCtrl as ctrl',
-														templateUrl: '/js/views/peers.html'
-													}
-												}
-											});
-
-							$locationProvider.html5Mode({
-								enabled: true,
-								requireBase: false,
-								rewriteLinks: false
+			.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', function ($stateProvider, $locationProvider, $urlRouterProvider) {
+					$stateProvider
+							.state('general', {
+								url: '/',
+								views: {
+									"main": {
+										controller: 'GeneralCtrl as ctrl',
+										templateUrl: '/js/views/general.html'
+									}
+								}
+							})
+							.state('address-details', {
+								url: '/address/:address',
+								views: {
+									"main": {
+										controller: 'AddressDetailsCtrl as ctrl',
+										templateUrl: '/js/views/address-details.html'
+									}
+								}
+							})
+							.state('blocks', {
+								url: '/blocks',
+								views: {
+									"main": {
+										controller: 'BlocksCtrl as ctrl',
+										templateUrl: '/js/views/blocks.html'
+									}
+								}
+							})
+							.state('block-details-sig', {
+								url: '/blocks/s/:signature',
+								views: {
+									"main": {
+										controller: 'BlocksDetailsSigCtrl as ctrl',
+										templateUrl: '/js/views/block-details-sig.html'
+									}
+								}
+							})
+							.state('block-details', {
+								url: '/blocks/:height',
+								views: {
+									"main": {
+										controller: 'BlocksDetailsCtrl as ctrl',
+										templateUrl: '/js/views/block-details.html'
+									}
+								}
+							})
+							.state('tx-details', {
+								url: '/tx/:signature',
+								views: {
+									"main": {
+										controller: 'TxDetailsCtrl as ctrl',
+										templateUrl: '/js/views/tx-details.html'
+									}
+								}
+							})
+							.state('peers', {
+								url: '/peers',
+								views: {
+									"main": {
+										controller: 'PeersCtrl as ctrl',
+										templateUrl: '/js/views/peers.html'
+									}
+								}
 							});
-						}
-					]);
+
+					$locationProvider.html5Mode({
+						enabled: true,
+						requireBase: false,
+						rewriteLinks: false
+					});
+				}
+			]);
 })();

src/js/views/address-details.html

@@ -38,21 +38,21 @@
 				<table class="table blockDetails">
 					<thead>
 						<tr>
-							<th>type</th>
-							<th>fee</th>
-							<th>timestamp</th>
-							<th>signature</th>
-							<th>sender</th>
-							<th>recipient</th>
-							<th><span class="pull-right">amount</span></th>
+							<th>Type</th>
+							<th>Fee</th>
+							<th>Timestamp</th>
+							<th>Signature</th>
+							<th>Sender</th>
+							<th>Recipient</th>
+							<th><span class="pull-right">Amount</span></th>
 						</tr>
 					</thead>
 					<tbody>
 						<tr ng-repeat="item in ctrl.txs">
 							<td>{{item.type}}</td>
 							<td>{{item.fee}}</td>
 							<td>{{item.timestamp|date:'yyyy-MM-dd HH:mm:ss'}}</td>
-							<td>{{item.signature|limitTo:8}}...</td>
+							<td><a ui-sref="tx-details({signature:item.signature})">{{item.signature|limitTo:8}}...</a></td>
 							<td><a ui-sref="address-details({address:item.sender})" title="{{item.sender}}">{{item.sender|limitTo:8}}...</a></td>
 							<td><a ui-sref="address-details({address:item.recipient})" title="{{item.recipient}}">{{item.recipient|limitTo:8}}...</a></td>
 							<td><span class="pull-right">{{item.amount|currency:''}}</span></td>