From 2da33519359941e83ab25632411f7de595c7edfb Mon Sep 17 00:00:00 2001
From: Garry Newman <garrynewman@gmail.com>
Date: Mon, 11 Jul 2016 09:57:17 +0100
Subject: [PATCH] Nice header with server status, better chat layout

---
 html/chat.html       |  9 +++------
 html/serverInfo.html |  7 ++-----
 index.html           | 18 ++++++++++++++++++
 js/app.js            |  6 ++----
 js/serverInfo.js     |  7 +++++--
 rcon.css             | 40 ++++++++++++++++++++++++++++++++++++++++
 6 files changed, 70 insertions(+), 17 deletions(-)
diff --git a/html/chat.html b/html/chat.html
index 2ea4465..5ab4c69 100644
--- a/html/chat.html
+++ b/html/chat.html
@@ -2,12 +2,9 @@
 
     <div style="height: 600px" class="Output scrollable">
     	<div ng-repeat="line in Output" ng-class="line.Class">
-    		<span class="badge">
-    			{{(line.Time * 1000) | date:'shortTime'}}
-    			<a href="#/{{address}}/player/{{line.UserId}}/" style="color: {{line.Color}}">
-    				{{line.Username}}
-    			</a>
-    		</span> {{line.Message}}
+    		<span style="min-width: 60px; display:inline-block;">{{(line.Time * 1000) | date:'shortTime'}}</span>
+			<span style="min-width: 130px; display:inline-block; text-align: right;"><a href="#/{{address}}/player/{{line.UserId}}/">{{line.Username}} :</a></span> 
+			<span style="display:inline-block;">{{line.Message}}</span>
     	</div>
     </div>
 
diff --git a/html/serverInfo.html b/html/serverInfo.html
index d161e31..86da37c 100644
--- a/html/serverInfo.html
+++ b/html/serverInfo.html
@@ -4,16 +4,13 @@
 	<div class="row">
 
 		<div class="col-sm-12">
-			<h2 class="center">
+			<h2>
 				{{info.Hostname}}
-				<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>
 
 		<div class="col-sm-4" ng-repeat="(key, value) in info">
-			<p>{{key}}: <span class="badge">{{value}}</span></p>
+			<p><span class="text-muted">{{key}}:</span> <span>{{value}}</span></p>
 		</div>
 
 		<!--
diff --git a/index.html b/index.html
index 71d83f7..c1c4fad 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,24 @@
     <link href="rcon.css" rel="stylesheet">
   </head>
   <body ng-controller="RconController">
+
+	<nav class="navbar navbar-default" ng-controller="ServerInfoController" ng-show="info.Hostname != null">
+		<div class="container">
+			<div class="navbar-header">
+				<a class="navbar-brand" href="#">{{info.Hostname}}</a>
+			
+				<ul class="nav navbar-nav">
+					<li><div class="navbar-info" title="Uptime"><span class="glyphicon glyphicon-time"></span> {{info.Uptime|SecondsToDuration}}</div></li>
+					<li><div class="navbar-info" title="Map Name"><span class="glyphicon glyphicon-globe"></span> {{info.Map}}</div></li>
+					<li><div class="navbar-info" title="Current Players/Maximum Players"><span class="glyphicon glyphicon-user"></span> {{info.Players|number}}/{{info.MaxPlayers|number}}</div></li>
+					<li><div class="navbar-info" title="Framerate"><span class="glyphicon glyphicon-hourglass"></span> {{info.Framerate|number}}fps</div></li>
+					<li><div class="navbar-info" title="Entity Count"><span class="glyphicon glyphicon-oil"></span> {{info.EntityCount|number}}</div></li>
+				</ul>
+					
+			</div>
+				
+			</div>
+	</nav>
   
   	<div class="container">
 
diff --git a/js/app.js b/js/app.js
index 68cf755..d1966b5 100644
--- a/js/app.js
+++ b/js/app.js
@@ -88,14 +88,12 @@ function SecondsToDuration()
 
 		var out = "";
 		var hours = Math.floor( input / 3600 );
-		if ( input > 3600 ) out += hours + "h ";
+		if ( input > 3600 ) out += hours + "h";
 
 		var minutes = Math.floor( input / 60 ) % 60;
-		if ( input > 60 ) out += minutes + "m ";
+		if ( input > 60 ) out += minutes + "m";
 
 		var seconds = input % 60;
-
-		if ( input < 3600 )
 		out += seconds + "s";
 
 		return out;
diff --git a/js/serverInfo.js b/js/serverInfo.js
index 07b9489..56b31d5 100644
--- a/js/serverInfo.js
+++ b/js/serverInfo.js
@@ -1,7 +1,7 @@
 
 app.controller( 'ServerInfoController', ServerInfoController );
 
-function ServerInfoController( $scope, rconService, $routeParams )
+function ServerInfoController( $scope, rconService, $routeParams, $interval )
 {
 	$scope.info = {};
 
@@ -9,8 +9,11 @@ function ServerInfoController( $scope, rconService, $routeParams )
 	{
 		rconService.Request( 'serverinfo', $scope, function ( msg ) {
 			$scope.info = JSON.parse( msg.Message );
-		});
+		} );
 	}
 
 	rconService.InstallService( $scope, $scope.refresh );
+
+	var timer = $interval( $scope.refresh, 500 );
+	$scope.$on( "$destroy", function () { $interval.cancel( timer ); } );
 }
diff --git a/rcon.css b/rcon.css
index eb15691..97dde59 100644
--- a/rcon.css
+++ b/rcon.css
@@ -102,4 +102,44 @@ a:hover
 	float: left;
 	text-align: right;
 	padding-right: 8px;
+}
+
+.navbar-default
+{
+	background-color: #428bca;
+    background-image: none;
+    border: none;
+    border-radius: 0;
+    color: white;
+}
+
+.navbar-default .navbar-brand, .navbar-default .navbar-brand:hover
+{
+    color: #fff;
+}
+
+.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus
+{
+    color: #fff;
+}
+
+.navbar-default .navbar-nav > li > a:hover
+{
+	background-color: rgba( 255, 255, 255, 0.25 );
+}
+
+.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .active > a
+{
+	background-color: white;
+	background-image: none;
+    border: none;
+	color: #428bca;
+}
+
+.navbar-info
+{
+	position: relative;
+    display: block;
+    padding: 15px;
+	line-height: 20px;
 }
\ No newline at end of file
