add performance graphs to serverinfo

move serverinfo-bar to seperate file
add serverinfo fps chart 
add network i/o chart

html/header.html

@@ -0,0 +1,40 @@
+<nav class="navbar navbar-default" ng-controller="ServerInfoController" ng-show="serverinfo">
+  <div class="container">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-header" aria-expanded="false">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+
+      <a class="navbar-brand" href="#">{{serverinfo.Hostname}}</a>
+    </div>
+
+    <div class="collapse navbar-collapse" id="navbar-collapse-header">
+      <p class="navbar-text" title="Uptime">
+        <span class="glyphicon glyphicon-time"></span>
+        {{serverinfo.Uptime|SecondsToDuration}}
+      </p>
+      <p class="navbar-text" title="Map Name">
+        <span class="glyphicon glyphicon-globe"></span>
+        {{serverinfo.Map}}
+      </p>
+      <p class="navbar-text" title="Current Players/Maximum Players">
+        <span class="glyphicon glyphicon-user"></span>
+        {{serverinfo.Players|number}}/{{serverinfo.MaxPlayers|number}}
+      </p>
+      <p class="navbar-text" title="Framerate">
+        <span class="glyphicon glyphicon-hourglass"></span>
+        {{serverinfo.Framerate|number}}fps
+      </p>
+      <p class="navbar-text" title="Entity Count">
+        <span class="glyphicon glyphicon-oil"></span>
+        {{serverinfo.EntityCount|number}}
+      </p>
+
+      <button class="btn btn-danger navbar-btn navbar-right" type="button" ng-click="Disconnect()">Disconnect</button>
+
+    </div>
+  </div>
+</nav>

html/serverInfo.html

@@ -1,57 +1,26 @@
-
 <div ng-controller="ServerInfoController" flex layout="column" id="ServerInfoController">
 
 	<div class="row">
 
 		<div class="col-sm-12">
-			<h2>
-				{{info.Hostname}}
-			</h2>
+			<h2>{{serverinfo.Hostname}}</h2>
 		</div>
 
-		<div class="col-sm-4" ng-repeat="(key, value) in info">
-			<p><span class="text-muted">{{key}}:</span> <span>{{value}}</span></p>
+		<div class="col-sm-4" ng-repeat="(key, value) in serverinfo">
+			<p>
+				<span class="text-muted">{{key}}:</span>
+				<span>{{value}}</span>
+			</p>
 		</div>
 
-		<!--
-		<div class="col-sm-4">
-			<p>Map: {{info.Map}}</p>
-		</div>
+	</div>
+	<div class="row">
 
-		<div class="col-sm-4">
-			<p>Max Players: {{info.MaxPlayers}}</p>
+		<div class="col-sm-12">
+			<nvd3 options="fpsChart.options" data="fpsChart.data"></nvd3>
+			<nvd3 options="netChart.options" data="netChart.data"></nvd3>
 		</div>
 
-		<div class="col-sm-4">
-			<p>GameTime: {{info.GameTime}}</p>
-		</div>
-
-		<div class="col-sm-4">
-			<p>Framerate: <span class="badge">{{info.Framerate}}</span></p>
-		</div>
-
-		<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-sm-4">
-			<p>Players: <span class="badge">{{info.Players}}</span></p>
-		</div>
-
-		<div class="col-sm-4">
-			<p>Joining: <span class="badge">{{info.Joining}}</span></p>
-		</div>
-
-		<div class="col-sm-4">
-			<p>Queued: <span class="badge">{{info.Queued}}</span></p>
-		</div>
-
-		-->
-
 	</div>
 
 </div>