From 7697c6baac0396c52af3b28ca6e893334bc6bbb1 Mon Sep 17 00:00:00 2001
From: alexfriesen <friesen.alex.home@gmail.com>
Date: Thu, 2 Jun 2016 15:40:54 +0200
Subject: [PATCH] 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 | 68 +++++++++++++++++++++--------------------------
 js/connection.js  | 60 ++++++++++++++++++++++++++++++++++++-----
 2 files changed, 85 insertions(+), 43 deletions(-)

diff --git a/html/connect.html b/html/connect.html
index 72e7ed3..c9cdbd8 100644
--- a/html/connect.html
+++ b/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()">
-				<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 />
+		<form ng-submit="Connect()">
+			<div class="md-inline-form">
 
+				<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>
+				<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="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">
-				<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>
\ No newline at end of file
diff --git a/js/connection.js b/js/connection.js
index d4781f8..f11882d 100644
--- a/js/connection.js
+++ b/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 );
+	
 }
-