Merge pull request #4 from alexfriesen/gh-pages

PlayerInfo, Console & Connection improved

html/connect.html

@@ -1,6 +1,6 @@
 <div ng-controller="ConnectionController" class="row">
 
-	<div class="col-md-offset-4 col-md-6 panel" style="margin-top: 128px">
+	<div class="col-md-offset-4 col-md-6 panel jumbotron" style="margin-top: 128px">
 
 		<h2>Connect</h2>
 
@@ -11,47 +11,41 @@
 		<form ng-submit="Connect()">
 			<div class="md-inline-form">
 
-
-					<div class="md-block" flex-gt-xs>
-						<label>Address</label>
-						<input required minlength=5 ng-model="Address" name="Address" class="form-control">
+				<div class="md-block form-group" flex-gt-xs>
+					<label for="conncetion-adress">Address</label>
+					<input required minlength=5 ng-model="Address" name="Address" class="form-control" placeholder="xxx.xxx.xxx.xxx:28016" id="conncetion-adress">
 				</div>
 
-					<div class="md-block" flex-gt-xs>
-						<label>Password</label>
-						<input required minlength=2 type="password" ng-model="Password" name="Password" class="form-control">
+				<div class="md-block form-group" flex-gt-xs>
+					<label for="conncetion-password">Password</label>
+					<input required minlength=2 type="password" ng-model="Password" name="Password" class="form-control" id="conncetion-password">
 				</div>
 
-					<div class="right">
-						<input type="checkbox" ng-model="SaveConnection">
-						Save Connection
+				<div class="checkbox right">
+					<label>
+						<input type="checkbox" ng-model="SaveConnection"> Save Connection
+					</label>
 				</div>
 
-					<br />		<br />
-
-					<div class="center">
-						<button class="btn btn-primary" ng-click="Connect()">Connect</button>
-					</div>
-
-					<br />
+				<button type="submit" class="btn btn-primary btn-block" ng-click="Connect()">Connect</button>
 
 			</div>
 
 		</form>
 	</div>
 
-	<div class="col-md-offset-4 col-md-6 panel" style="margin-top: 64px">
+	<div class="col-md-offset-4 col-md-6 panel jumbotron">
 
 		<div ng-show="PreviousConnects.length > 0">
 			<h2>Saved Connections</h2>
-			<ul ng-repeat="c in PreviousConnects">
-				<li><a ng-click="ConnectTo( c )" href="#">{{c.Address}}</a></li>
+			<ul ng-repeat="c in PreviousConnects | orderBy:array:true | limitTo:connectionsLimit">
+				<li><a ng-click="ConnectTo( c )" href="#/{{c.Address}}/info">{{c.Address}}</a> - {{c.date | date:'short'}}</li>
 			</ul>
+			<div ng-show="PreviousConnects.length > connectionsLimit || connectionsLimit === undefined">
+				<button type="submit" class="btn btn-primary btn-block" ng-click="toggleConnectionsLimit()">Show {{(connectionsLimit === undefined) ? 'less' : 'more'}}</button>
+			</div>
 		</div>
 
 	</div>
 
-
-
-	</div>
 </div>

html/console.html

@@ -1,11 +1,11 @@
 <div ng-controller="ConsoleController" id="ConsoleController">
 
-    <div id="vertical-container" style="height: 600px" class="Output scrollable"><div ng-repeat="line in Output" ng-class="line.Class">{{line.Message}}</div></div>
+    <div id="vertical-container" style="height: 600px" class="Output scrollable">
+    	<div ng-repeat="line in Output" ng-class="line.Class">{{line.Message}}</div>
+    </div>
 
 	<form ng-submit="SubmitCommand()" class="md-inline-form">
-			<div>
-				<input class="form-control" ng-model="Command" style="width: 100%">
-			</div>
+		<input type="text" class="form-control" ng-model="Command" ng-keyup="KeyUp($event)" />
 	</form>
 
 </div>

html/playerInfo.html

@@ -1,9 +1,47 @@
 
 <div ng-controller="PlayerInfoController" flex layout="column" id="PlayerInfoController">
 
-	Info about player {{userid}} 
+	<div class="row">
 
-	<p>View <a href="#/{{address}}/player/{{userid}}/xp">XP info for this player</a></p>
-Show info about this player here
+		<div class="col-lg-12">
+
+			<h2 class="center">
+				Player: {{getUsername()}}
+				<div class="btn-group pull-right">
+					<button ng-click="refresh()" class="btn btn-default" type="button"><i class="glyphicon glyphicon-refresh"></i></button>
+				</div>
+			</h2>
+
+			<div class="btn-group btn-group-lg btn-group-justified">
+				<div class="btn-group">
+					<a href="#/{{address}}/player/{{userid}}/xp" class="btn btn-default">
+						<span class="glyphicon glyphicon-education"></span>
+						XP Info
+					</a>
+				</div>
+				<div class="btn-group">
+					<a href="http://www.steamcommunity.com/profiles/{{userid}}" target="_blank" class="btn btn-default">
+						<span class="glyphicon glyphicon-info-sign"></span>
+						Steam Profile
+					</a>
+				</div>
+			</div>
+
+		</div>
+
+		<div class="col-lg-12">
+			<h2 class="center">
+				Info
+			</h2>
+
+			<div class="alert alert-warning" ng-show="!info">
+				This Player is currently not connected to this server!
+			</div>
+		</div>
+
+		<div class="col-sm-4" ng-repeat="(key, value) in info">
+			<p>{{key}}: <span class="badge">{{value}}</span></p>
+		</div>
+	</div>
 
 </div>

html/playerlist.html

@@ -34,7 +34,23 @@
 					  	</button>
 					  	<ul class="dropdown-menu">
 					  		<li>
-						    	<a href ng-click="KickPlayer(line.SteamID)">Kick</a>
+						    	<a href="#/{{address}}/player/{{line.SteamID}}/xp">
+									<span class="glyphicon glyphicon-education"></span>
+									XP Info
+								</a>
+						    </li>
+						    <li>
+						    	<a href="http://www.steamcommunity.com/profiles/{{line.SteamID}}" target="_blank">
+									<span class="glyphicon glyphicon-info-sign"></span>
+									Steam Profile
+								</a>
+						    </li>
+						    <li class="divider"></li>
+						    <li>
+						    	<a href ng-click="KickPlayer(line.SteamID)">
+						    		<span class="glyphicon glyphicon-trash"></span>
+						    		Kick
+						    	</a>
 						    </li>
 						</ul>
 					</div>

html/serverInfo.html

@@ -12,63 +12,41 @@
 			</h2>
 		</div>
 
-		<div class="col-lg-4">
-			<div class="container">
+		<div class="col-sm-4">
 			<p>Map: {{info.Map}}</p>
 		</div>
-		</div>
 
-		<div class="col-lg-4">
-			<div class="container">
+		<div class="col-sm-4">
 			<p>Max Players: {{info.MaxPlayers}}</p>
 		</div>
-		</div>
 
-		<div class="col-lg-4">
-			<div class="container">
+		<div class="col-sm-4">
 			<p>GameTime: {{info.GameTime}}</p>
 		</div>
-		</div>
 
-		<div class="col-lg-4">
-			<div class="container">
+		<div class="col-sm-4">
 			<p>Framerate: <span class="badge">{{info.Framerate}}</span></p>
 		</div>
-		</div>
 
-		<div class="col-lg-4">
-			<div class="container">
+		<div class="col-sm-4">
 			<p>EntityCount: <span class="badge">{{info.EntityCount}}</span></p>
 		</div>
+
+		<div class="col-sm-4">
+			<p>Uptime: <span class="badge">{{info.Uptime}}</span></p>
 		</div>
 
-		<div class="col-lg-4">
-			<div class="container">
-				<p>Uptime: <span class="badge">{{info.Uptime}}s</span></p>
-			</div>
-		</div>
-
-		<div class="col-lg-4">
-			<div class="container">
+		<div class="col-sm-4">
 			<p>Players: <span class="badge">{{info.Players}}</span></p>
 		</div>
-		</div>
 
-		<div class="col-lg-4">
-			<div class="container">
+		<div class="col-sm-4">
 			<p>Joining: <span class="badge">{{info.Joining}}</span></p>
 		</div>
-		</div>
 
-		<div class="col-lg-4">
-			<div class="container">
+		<div class="col-sm-4">
 			<p>Queued: <span class="badge">{{info.Queued}}</span></p>
 		</div>
-		</div>
-
-	</div>
-
-	<div class="right row">
 
 	</div>
 

js/connection.js

@@ -7,11 +7,51 @@ function ConnectionController( $scope, rconService, $routeParams, $timeout, $loc
 	$scope.Password = "";
 	$scope.SaveConnection = true;
 
-	if ( localStorage.previousConnections != null )
-		$scope.PreviousConnects = angular.fromJson( localStorage.previousConnections );
+	$scope.connectionsLimit = 5;
 
-	if ( $scope.PreviousConnects == null )
-		$scope.PreviousConnects = new Array();
+	function _loadFromLocalStorage() {
+		var connections = [];
+
+		// load and parse from local storage
+		if ( localStorage && localStorage.previousConnections ) {
+			connections = angular.fromJson( localStorage.previousConnections );
+		}
+
+		// double check
+		if ( !connections ) {
+			connections = [];
+		}
+
+		return connections;
+	}
+
+	function _addWithoutDuplicates(connections, connection) {
+		// prepare new array
+		var filteredConnections = [];
+
+		for(var i in connections) {
+			if(connections[i].Address !== connection.Address && connections[i].Password !== connection.Password) {
+				// add old connection info to our new array
+				filteredConnections.push(connections[i]);
+			}
+		}
+
+		// add new connection
+		filteredConnections.push(connection);
+
+		return filteredConnections;
+	}
+
+	$scope.toggleConnectionsLimit = function ()
+	{
+		// toggle limit between undefined and 5
+		// undefined sets limit to max
+		if($scope.connectionsLimit === undefined) {
+			$scope.connectionsLimit = 5;
+		} else {
+			$scope.connectionsLimit = undefined;
+		}
+	}
 
 	$scope.Connect = function ()
 	{
@@ -42,11 +82,19 @@ function ConnectionController( $scope, rconService, $routeParams, $timeout, $loc
 	{
 		if ( $scope.SaveConnection )
 		{
-			$scope.PreviousConnects.push( { Address: $scope.Address, Password: $scope.Password } );
+			// new connection to add
+			var connection = { Address: $scope.Address, Password: $scope.Password, date: new Date() };
+
+			// remove old entries and add our new connection info
+			var connections = _addWithoutDuplicates(_loadFromLocalStorage(), connection);
+
+			// push to scope and save data
+			$scope.PreviousConnects = connections;
 			localStorage.previousConnections = angular.toJson( $scope.PreviousConnects );
 		}
 	} );
 
+	$scope.PreviousConnects = _loadFromLocalStorage();
 
 	//
 	// If a server address is passed in.. try to connect if we have a saved entry
@@ -83,5 +131,5 @@ function ConnectionController( $scope, rconService, $routeParams, $timeout, $loc
 		}
 
 	}, 20 );
-}
 	
+}

js/console.js

@@ -3,38 +3,114 @@ app.controller( 'ConsoleController', ConsoleController );
 
 function ConsoleController( $scope, rconService, $timeout )
 {
-	$scope.Output = new Array();
+	$scope.Output = [];
+	$scope.commandHistory = [];
+	$scope.commandHistoryIndex = 0;
+
+	$scope.KeyUp = function (event)
+	{
+		switch(event.keyCode) {
+			
+			// Arrow Key Up
+			case 38:
+
+				// rotate through commandHistory
+				$scope.commandHistoryIndex--;
+				if($scope.commandHistoryIndex < 0) {
+					$scope.commandHistoryIndex = $scope.commandHistory.length;
+				}
+
+				// set command from history 
+				if($scope.commandHistory[$scope.commandHistoryIndex]) {
+					$scope.Command = $scope.commandHistory[$scope.commandHistoryIndex];
+				}
+				
+				break;
+
+			// Arrow Key Down
+			case 40:
+			
+				// rotate through commandHistory
+				$scope.commandHistoryIndex++;
+				if($scope.commandHistoryIndex >= $scope.commandHistory.length) {
+					$scope.commandHistoryIndex = 0;
+				}
+
+				// set command from history 
+				if($scope.commandHistory[$scope.commandHistoryIndex]) {
+					$scope.Command = $scope.commandHistory[$scope.commandHistoryIndex];
+				}
+				
+				break;
+
+			default:
+				// reset command history index
+				$scope.commandHistoryIndex = $scope.commandHistory.length;
+				break;
+		}
+	}
 
 	$scope.SubmitCommand = function ()
 	{
-		$scope.OnMessage( { Message: $scope.Command, Type: 'Command' } )
+		$scope.OnMessage( { Message: $scope.Command, Type: 'Command' } );
+
+		$scope.commandHistory.push($scope.Command);
 
 		rconService.Command( $scope.Command, 1 );
 		$scope.Command = "";
+		$scope.commandHistoryIndex = 0;
 	}
-
 	$scope.$on( "OnMessage", function ( event, msg ) { $scope.OnMessage( msg ); } );
 
 	$scope.OnMessage = function( msg )
 	{
 		
-		if ( msg.Message.startsWith( "[rcon] " ) ) return;
-		if ( msg.Type != "Generic" && msg.Type != "Log" && msg.Type != "Error" && msg.Type != "Warning" )
-		{
-			console.log( msg );
+		if ( msg.Message.startsWith( "[rcon] " ) ) {
 			return;	
 		}
 
-		msg.Class = msg.Type;
-		$scope.Output.push( msg );
+		switch(msg.Type) {
+			case 'Generic':
+			case 'Log':
+			case 'Error':
+			case 'Warning':
+				$scope.addOutput(msg);
+				break;
 
-		$timeout( $scope.ScrollToBottom, 50 );
+			default: 
+				console.log( msg );
+				return;
+		}
 	}
 
 	$scope.ScrollToBottom = function()
 	{
-		// TODO - don't scroll if we're not at the bottom !
-		$( "#ConsoleController .Output" ).scrollTop( $( "#ConsoleController .Output" )[0].scrollHeight );
+		var element = $( "#ConsoleController .Output" );
+
+		$timeout( function() {
+			element.scrollTop( element.prop('scrollHeight') );
+		}, 50 );
+	}
+
+	$scope.isOnBottom = function()
+	{
+		// get jquery element
+		var element = $( "#ConsoleController .Output" );
+
+		// height of the element
+		var height = element.height();
+
+		// scroll position from top position
+		var scrollTop = element.scrollTop();
+
+		//  full height of the element
+		var scrollHeight = element.prop('scrollHeight');
+
+		if((scrollTop + height) > (scrollHeight - 10)) {
+			return true;
+		}
+
+		return false;
 	}
 
 	//
@@ -43,14 +119,26 @@ function ConsoleController( $scope, rconService, $timeout )
 	//
 	$scope.GetHistory = function ()
 	{
-		console.log( "GetHistory" );
-
 		rconService.Request( "console.tail 128", $scope, function ( msg )
 		{
 			var messages = JSON.parse( msg.Message );
 
-			messages.forEach( function ( x ) { $scope.OnMessage( x ); } );
+			messages.forEach( function ( msg ) {
+			 $scope.OnMessage( msg ); 
 			});
+
+			$scope.ScrollToBottom();
+		} );
+	}
+
+	$scope.addOutput = function (msg)
+	{
+		msg.Class = msg.Type;
+		$scope.Output.push( msg );
+
+		if($scope.isOnBottom()) {
+			$scope.ScrollToBottom();
+		}
 	}
 
 	rconService.InstallService( $scope, $scope.GetHistory )

js/playerInfo.js

@@ -4,4 +4,39 @@ app.controller( 'PlayerInfoController', PlayerInfoController );
 function PlayerInfoController( $scope, rconService, $routeParams )
 {
 	$scope.userid = $routeParams.userid;
+
+	$scope.info = null;
+
+	$scope.refresh = function ()
+	{
+		rconService.getPlayers($scope, function(players) {
+
+			for(var i in players) {
+				if(players[i].SteamID === $scope.userid){
+
+					// set player data
+					$scope.info = players[i];
+
+					return;
+				}
+			}
+
+			// player not found
+			// reset data to null
+			$scope.info = null;
+		});
+	}
+
+	$scope.getUsername = function ()
+	{
+		// try to find players name in info
+		if($scope.info && $scope.info.DisplayName) {
+			return $scope.info.DisplayName;
+		}
+
+		// otherwise show the id
+		return $scope.userid;
+	}
+
+	rconService.InstallService( $scope, $scope.refresh )
 }

js/playerlist.js

@@ -3,14 +3,14 @@ app.controller( 'PlayerListController',  PlayerListController );
 
 function PlayerListController( $scope, rconService, $interval )
 {
-	$scope.Output = new Array();
+	$scope.Output = [];
 	$scope.OrderBy = '-ConnectedSeconds';
 
 	$scope.Refresh = function ()
 	{
-		rconService.Request( "playerlist", $scope, function ( msg )
+		rconService.getPlayers($scope, function ( players )
 		{
-			$scope.Players = JSON.parse( msg.Message );
+			$scope.Players = players;
 		});
 	}
 

js/rconService.js

@@ -1,9 +1,9 @@
 
 function RconService()
 {
-	var s = {};
-
-	s.Callbacks = {};
+	var s = {
+		Callbacks: {}
+	};
 
 	s.Connect = function ( addr, pass )
 	{
@@ -102,5 +102,16 @@ function RconService()
 		}
 	}
 
+	s.getPlayers = function(scope, success) {
+		this.Request( "playerlist", scope, function ( response )
+		{
+			var players = JSON.parse( response.Message );
+
+			if(typeof success === 'function') {
+				success.call(scope, players);
+			}
+		});
+	}
+
 	return s;
 }