Improve breadcrumbs

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) [year] [fullname]
+Copyright (c) 2014 Ian Bishop
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

src/app.js

@@ -6,51 +6,83 @@
 	/* App Module */
 	var app = angular.module('app', [
 		'ui.router',
+		'appDirectives',
 		'appServices',
 		'serverControllers',
 		'zoneControllers',
 	]);
 
 	app.constant('appConfig', {
-		//apiURL:  'http://localhost',
 		apiURL:  '',
 	});
 
 	app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
 
 		// Default route
-		$urlRouterProvider.otherwise("/servers");
+		$urlRouterProvider.otherwise("/pdns");
 
 		$stateProvider
 
-		.state('servers.server.zones.zone', {
+		.state('p.servers.server.zones.zone', {
 			url: '/:zone',
-			templateUrl: 'zones/zone.html',
-			controller: 'ZoneCtrl',
+			views: {
+				'main@p': {
+					templateUrl: 'zones/zone.html',
+					controller: 'ZoneCtrl',
+				}
+			},
+			data: {
+				name: 'zone'
+			}
 		})
 
-		.state('servers.server.zones', {
+		.state('p.servers.server.zones', {
 			url: '/zones',
-			templateUrl: 'zones/zones.html',
-			controller: 'ZoneCtrl',
+			views: {
+				'main@p': {
+					templateUrl: 'zones/zones.html',
+					controller: 'ZoneCtrl',
+				}
+			},
+			data: {
+				name: "zones"
+			}
 		})
 
-		.state('servers.server', {
+		.state('p.servers.server', {
 			url: '/:server',
-			templateUrl: 'servers/server.html',
-			controller: 'ServerCtrl',
+			views: {
+				'main@p': {
+					template: '',
+					controller: 'ServerCtrl',
+				}
+			},
+			data: {
+				name: 'server'
+			}
 		})
 
-		.state('servers', {
+		.state('p.servers', {
 			url: '/servers',
-			templateUrl: 'servers/servers.html',
-			controller: 'ServerCtrl',
-		});
+			views: {
+				'main@p': {
+					templateUrl: 'servers/servers.html',
+					controller: 'ServerCtrl',
+				}
+			},
+			data: {
+				name: 'servers'
+			}
+		})
 
-	});
+		.state('p', {
+			url: '/pdns',
+			templateUrl: 'home.html',
+			data: {
+				name: 'home'
+			}
+		});
 
-	app.config(function ($httpProvider) {
-		//$httpProvider.interceptors.push('authInterceptor');
 	});
 
 }());

src/app/breadcrumbs/breadcrumbs.html

@@ -0,0 +1,7 @@
+<ul class="breadcrumbs">
+	<li ng-repeat="state in $navigationState.currentState.path">
+	<span>
+		<a ui-sref="{{ state.name }}">{{$navigationState.getDisplayName(state, $navigationState.params)}}</a>
+	</span>
+	</li>
+</ul>

src/app/breadcrumbs/breadcrumbs.less

@@ -0,0 +1,67 @@
+.breadcrumbs {
+	overflow: hidden;
+	width: 100%;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.breadcrumbs li{
+	float: left;
+	margin: 0 .5em 0 1em;
+}
+
+.breadcrumbs a{
+	background: #ddd;
+	padding: .7em 1em;
+	float: left;
+	text-decoration: none;
+	color: #444;
+	text-shadow: 0 1px 0 rgba(255,255,255,.5); 
+	position: relative;
+}
+
+.breadcrumbs a:hover{
+	background: #99db76;
+}
+
+.breadcrumbs a::before{
+	content: "";
+	position: absolute;
+	top: 50%; 
+	margin-top: -1.5em;   
+	border-width: 1.5em 0 1.5em 1em;
+	border-style: solid;
+	border-color: #ddd #ddd #ddd transparent;
+	left: -1em;
+}
+
+.breadcrumbs a:hover::before{
+	border-color: #99db76 #99db76 #99db76 transparent;
+}
+
+.breadcrumbs a::after{
+	content: "";
+	position: absolute;
+	top: 50%; 
+	margin-top: -1.5em;   
+	border-top: 1.5em solid transparent;
+	border-bottom: 1.5em solid transparent;
+	border-left: 1em solid #ddd;
+	right: -1em;
+}
+
+.breadcrumbs a:hover::after{
+	border-left-color: #99db76;
+}
+
+.breadcrumbs .current,
+.breadcrumbs .current:hover{
+	font-weight: bold;
+	background: none;
+}
+
+.breadcrumbs .current::after,
+.breadcrumbs .current::before{
+	content: normal;
+}

src/app/home.html

@@ -0,0 +1,5 @@
+<breadcrumbs></breadcrumbs>
+
+<div ui-view="main">
+<a ui-sref="p.servers">Servers</a>
+</div>

src/app/servers/servers.html

@@ -1,19 +1,18 @@
-<h1>Servers</h1>
+<h2>Servers</h2>
 
 <table class="table table-striped">
 	<tr>
 		<thead>
 			<th>Name</th>
+			<th>Server Type</th>
+			<th>Version</th>
 		</thead>
 	</tr>
 	<tbody>
-	<tr ng-repeat="server in servers" ng-click="loadServer(server)" class="clickable">
+	<tr ng-repeat="server in servers" ng-click="viewZones(server)" class="clickable">
 		<td>{{server.id}}</td>
+		<td>{{server.daemon_type}}</td>
+		<td>{{server.version}}</td>
 	</tr>
 	</tbody>
 </table>
-
-<div ui-view></div>
-
-
-

src/app/servers/servers.js

@@ -2,13 +2,16 @@
 angular.module('serverControllers', [] )
 
 .controller('ServerCtrl', function($scope, $state, $stateParams, appConfig, api) {
-	console.log("serverctrl", $stateParams);
 
-	if (!angular.isDefined($stateParams.server)) {
+	if (angular.isDefined($stateParams.server)) {
+		// A single server has nothing useful to see, redirect to zones
+		$state.go('.zones', {server: $stateParams.server});
+	} else {
 		$scope.servers = api.Servers.query();
 	}
 
-	$scope.loadServer = function(server) {
-		$state.go('servers.server.zones', {server: server.id});
+	$scope.viewZones = function(server) {
+		$state.go('.server.zones', {server: server.id});
 	};
+
 });

src/app/zones/zone.html

@@ -3,7 +3,7 @@ <h3>{{ zone.name }}</h3>
 <table class="table table-striped">
 	<tr>
 		<thead>
-			<th ng-click="orderByField='name'; reverseSort = !reverseSort" ng-class=">Name</th>
+			<th ng-click="orderByField='name'; reverseSort = !reverseSort">Name</th>
 			<th ng-click="orderByField='type'; reverseSort = !reverseSort">Type</th>
 			<th ng-click="orderByField='ttl'; reverseSort = !reverseSort">ttl</th>
 			<th ng-click="orderByField='priority'; reverseSort = !reverseSort">priority</th>
@@ -12,7 +12,7 @@ <h3>{{ zone.name }}</h3>
 		</thead>
 	</tr>
 	<tbody>
-	<tr ng-repeat="record in zone.records | orderBy:orderByField:reverseSort" ng-click="loadZone(zone)" class="clickable">
+	<tr ng-repeat="record in zone.records | orderBy:orderByField:reverseSort" class="clickable">
 		<td>{{record.name}}</td>
 		<td>{{record.type}}</td>
 		<td>{{record.ttl}}</td>

src/app/zones/zones.html

@@ -22,7 +22,3 @@ <h2>Zones</h2>
 	</tr>
 	</tbody>
 </table>
-
-<div ui-view></div>
-
-

src/app/zones/zones.js

@@ -2,28 +2,23 @@
 angular.module('zoneControllers', [] )
 
 .controller('ZoneCtrl', function($scope, $state, $stateParams, appConfig, api) {
-	console.log("zonectrl", $stateParams);
 
-	$scope.server = '';
-	$scope.zone = {};
-
-	if (angular.isDefined($stateParams.zone)) {
-		console.log("zonectrl, query records");
-		$scope.zone = api.Zones.get({ server: $stateParams.server, zone: $stateParams.zone }, function(data) {
-			// success
-		}, function(data) {
-			$scope.errMsg = "Error loading records for zone '" + $stateParams.zone + "'. Msg: " + data.statusText;
-		});
-	} else if(angular.isDefined($stateParams.server)) {
+	if($state.is('p.servers.server.zones')) {
 		$scope.server = $stateParams.server;
 		$scope.zones = api.Zones.query({ server: $stateParams.server }, function(data) {
 			// success
 		}, function(data) {
 			$scope.errMsg = "Error loading zones for server '" + $scope.server + "'. Msg: " + data.statusText;
 		});
+	} else if($state.is('p.servers.server.zones.zone')) {
+		$scope.zone = api.Zones.get({ server: $stateParams.server, zone: $stateParams.zone }, function(data) {
+			// success
+		}, function(data) {
+			$scope.errMsg = "Error loading records for zone '" + $stateParams.zone + "'. Msg: " + data.statusText;
+		});
 	}
 
 	$scope.loadZone = function(zone) {
-		$state.go('servers.server.zones.zone', {zone: zone.name});
+		$state.go('.zone', {zone: zone.name});
 	};
 });

src/directives.js

@@ -0,0 +1,58 @@
+var appDirectives = angular.module('appDirectives',[]);
+
+// Credit to: Mauro Servienti, http://milestone.topics.it/2014/03/angularjs-ui-router-and-breadcrumbs.html
+appDirectives.directive('breadcrumbs', function () {
+	return {
+		restrict: 'EA',
+		replace: false,
+		scope: {
+			itemDisplayNameResolver: '&'
+		},
+		templateUrl: 'breadcrumbs/breadcrumbs.html',
+		controller: function ($scope, $state, $stateParams) {
+
+			var defaultResolver = function (state) {
+				if( angular.isDefined($scope.$navigationState.params[state.data.name]) ) {
+					return $scope.$navigationState.params[state.data.name];
+				}
+				return state.data.name;
+			};
+
+			var isCurrent = function(state){
+				return $state.$current.name === state.name;
+			};
+
+			var setNavigationState = function () {
+				$scope.$navigationState = {
+					currentState: $state.$current,
+					params: $stateParams,
+					getDisplayName: function (state, stateParams) {
+						if ($scope.hasCustomResolver) {
+							return $scope.itemDisplayNameResolver({
+								defaultResolver: defaultResolver,
+								state: state,
+								stateParams: stateParams,
+								isCurrent: isCurrent(state)
+							});
+						}
+						else {
+							return defaultResolver(state);
+						}
+					},
+					isCurrent: function (state) {
+						return isCurrent(state);
+					}
+				};
+			};
+
+			$scope.$on('$stateChangeSuccess', function () {
+				setNavigationState();
+			});
+
+			setNavigationState();
+		},
+		link: function (scope, element, attrs, controller) {
+			scope.hasCustomResolver = angular.isDefined(attrs.itemDisplayNameResolver);
+		}
+	};
+});

src/services.js

@@ -13,26 +13,3 @@ appServices.service('api', function($rootScope, $resource, appConfig){
 		   /* Custom methods */
 	   });
 });
-
-appServices.factory('authInterceptor', function ($rootScope, $q, $window, appConfig) {
-	return {
-		request: function (config) {
-			config.headers = config.headers || {};
-
-			var re = new RegExp(appConfig.apiURL);
-			if( re.test(config.url) ){
-				config.headers['X-API-Key'] = appConfig.apiKey;
-			}
-			console.log("authInt config", config);
-			return config;
-		},
-		response: function (response) {
-			// do something on success
-			return response || $q.when(response);
-		},
-		responseError: function(rejection) {
-			//console.log("authinterceptor rejection", rejection);
-			return $q.reject(rejection);
-		}
-	};
-});