reworked the connection view

- use bootstrap styling
- connections will save the date
- connection duplicates will be removed on a new connection
- saved connections can be toggled between 5 items and all

html/connect.html

@@ -1,57 +1,51 @@
 <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>
 
-			<div class="alert alert-danger" ng-show="LastErrorMessage != null">{{LastErrorMessage}}</div>
+		<div class="alert alert-danger" ng-show="LastErrorMessage != null">{{LastErrorMessage}}</div>
 
-			<p>Enter the address (including rcon port) and the rcon password below to connect.</p>
+		<p>Enter the address (including rcon port) and the rcon password below to connect.</p>
 
-			<form ng-submit="Connect()">
+		<form ng-submit="Connect()">
-				<div class="md-inline-form">
+			<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>
-
-					<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>
-
-					<div class="right">
-						<input type="checkbox" ng-model="SaveConnection">
-						Save Connection
-					</div>
-
-					<br />		<br />
-
-					<div class="center">
-						<button class="btn btn-primary" ng-click="Connect()">Connect</button>
-					</div>
-
-					<br />
 
+				<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>
 
-			</form>
+				<div class="md-block form-group" flex-gt-xs>
-		</div>
+					<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="col-md-offset-4 col-md-6 panel" style="margin-top: 64px">
+				<div class="checkbox right">
+					<label>
+						<input type="checkbox" ng-model="SaveConnection"> Save Connection
+					</label>
+				</div>
+
+				<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 jumbotron">
 
 		<div ng-show="PreviousConnects.length > 0">
 			<h2>Saved Connections</h2>
-			<ul ng-repeat="c in PreviousConnects">
+			<ul ng-repeat="c in PreviousConnects | orderBy:array:true | limitTo:connectionsLimit">
-				<li><a ng-click="ConnectTo( c )" href="#">{{c.Address}}</a></li>
+				<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>

js/connection.js

@@ -7,11 +7,51 @@ function ConnectionController( $scope, rconService, $routeParams, $timeout, $loc
 	$scope.Password = "";
 	$scope.SaveConnection = true;
 
-	if ( localStorage.previousConnections != null )
+	$scope.connectionsLimit = 5;
-		$scope.PreviousConnects = angular.fromJson( localStorage.previousConnections );
 
-	if ( $scope.PreviousConnects == null )
+	function _loadFromLocalStorage() {
-		$scope.PreviousConnects = new Array();
+		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 );
+	
 }
-