angryzero/rust-rcon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Nice header with server status, better chat layout

Browse Source
This commit is contained in:
Garry Newman
2016-07-11 09:57:17 +01:00
parent 569f5d0535
commit 2da3351935
6 changed files with 70 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/chat.html
+3 -6
View File
@@ -2,12 +2,9 @@
<div style="height: 600px" class="Output scrollable"> <div style="height: 600px" class="Output scrollable">
<div ng-repeat="line in Output" ng-class="line.Class"> <div ng-repeat="line in Output" ng-class="line.Class">
<span class="badge"> <span style="min-width: 60px; display:inline-block;">{{(line.Time * 1000) | date:'shortTime'}}</span>
{{(line.Time * 1000) | date:'shortTime'}} <span style="min-width: 130px; display:inline-block; text-align: right;"><a href="#/{{address}}/player/{{line.UserId}}/">{{line.Username}} :</a></span>
<a href="#/{{address}}/player/{{line.UserId}}/" style="color: {{line.Color}}"> <span style="display:inline-block;">{{line.Message}}</span>
{{line.Username}}
</a>
</span> {{line.Message}}
</div> </div>
</div> </div>
html/serverInfo.html
+2 -5
View File
@@ -4,16 +4,13 @@
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<h2 class="center"> <h2>
{{info.Hostname}} {{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> </h2>
</div> </div>
<div class="col-sm-4" ng-repeat="(key, value) in info"> <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> </div>
<!-- <!--
index.html
+18
View File
@@ -11,6 +11,24 @@
<link href="rcon.css" rel="stylesheet"> <link href="rcon.css" rel="stylesheet">
</head> </head>
<body ng-controller="RconController"> <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"> <div class="container">
js/app.js
+2 -4
View File
@@ -88,14 +88,12 @@ function SecondsToDuration()
var out = ""; var out = "";
var hours = Math.floor( input / 3600 ); 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; var minutes = Math.floor( input / 60 ) % 60;
if ( input > 60 ) out += minutes + "m "; if ( input > 60 ) out += minutes + "m";
var seconds = input % 60; var seconds = input % 60;
if ( input < 3600 )
out += seconds + "s"; out += seconds + "s";
return out; return out;
js/serverInfo.js
+5 -2
View File
@@ -1,7 +1,7 @@
app.controller( 'ServerInfoController', ServerInfoController ); app.controller( 'ServerInfoController', ServerInfoController );
function ServerInfoController( $scope, rconService, $routeParams ) function ServerInfoController( $scope, rconService, $routeParams, $interval )
{ {
$scope.info = {}; $scope.info = {};
@@ -9,8 +9,11 @@ function ServerInfoController( $scope, rconService, $routeParams )
{ {
rconService.Request( 'serverinfo', $scope, function ( msg ) { rconService.Request( 'serverinfo', $scope, function ( msg ) {
$scope.info = JSON.parse( msg.Message ); $scope.info = JSON.parse( msg.Message );
}); } );
} }
rconService.InstallService( $scope, $scope.refresh ); rconService.InstallService( $scope, $scope.refresh );
var timer = $interval( $scope.refresh, 500 );
$scope.$on( "$destroy", function () { $interval.cancel( timer ); } );
} }
rcon.css
+40
View File
@@ -102,4 +102,44 @@ a:hover
float: left; float: left;
text-align: right; text-align: right;
padding-right: 8px; 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;
} }