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

responsive playerlist

Browse Source 
use bootstrap table-class
This commit is contained in:
alexfriesen
2016-06-08 19:22:58 +02:00
parent 66098b02bf
commit e2f08d52ce
3 changed files with 95 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/playerlist.html
+26 -21
View File
@@ -1,28 +1,30 @@
<div ng-controller="PlayerListController" flex layout="column" id="PlayerListController">
<div ng-controller="PlayerListController" id="PlayerListController">
<div class="right row">
<div class="float-left">
<input ng-model="FilterText" style="width: 300px" class="form-control" placeholder="Filter..">
<div class="row">
<div class="col-xs-6">
<input ng-model="FilterText" class="form-control" placeholder="Filter..">
</div>
<div class="btn-group">
<button ng-click="Refresh()" class="btn btn-default" type="button"><i class="glyphicon glyphicon-refresh"></i></button>
<div class="col-xs-6">
<button ng-click="Refresh()" class="btn btn-default pull-right" type="button"><span class="glyphicon glyphicon-refresh"></span></button>
</div>
</div>
<div class="row">
<table>
<div class="col-sm-12">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Actions</th>
<th ng-click="Order( 'DisplayName' )" ng-class="SortClass( 'DisplayName' )">Username</th>
<th style="text-align: right" ng-click="Order( 'SteamID' )" ng-class="SortClass( 'SteamID' )">Steamid</th>
<th style="text-align: right" ng-click="Order( 'VoiationLevel' )" ng-class="SortClass( 'VoiationLevel' )">Voilation</th>
<th style="text-align: right" ng-click="Order( 'CurrentLevel' )" ng-class="SortClass( 'CurrentLevel' )">Level</th>
<th style="text-align: right" ng-click="Order( 'UnspentXp' )" ng-class="SortClass( 'UnspentXp' )">XP</th>
<th style="text-align: right" ng-click="Order( 'Address' )" ng-class="SortClass( 'Address' )">Address</th>
<th ng-click="Order( 'Ping' )" ng-class="SortClass( 'Ping' )">Ping</th>
<th ng-click="Order( 'ConnectedSeconds' )" ng-class="SortClass( 'ConnectedSeconds' )">Duration</th>
<th class="text-right" ng-click="Order( 'SteamID' )" ng-class="SortClass( 'SteamID' )">Steamid</th>
<th class="text-right" ng-click="Order( 'VoiationLevel' )" ng-class="SortClass( 'VoiationLevel' )">Voilation</th>
<th class="text-right" ng-click="Order( 'CurrentLevel' )" ng-class="SortClass( 'CurrentLevel' )">Level</th>
<th class="text-right" ng-click="Order( 'UnspentXp' )" ng-class="SortClass( 'UnspentXp' )">XP</th>
<th class="text-right" ng-click="Order( 'Address' )" ng-class="SortClass( 'Address' )">Address</th>
<th class="text-right" ng-click="Order( 'Ping' )" ng-class="SortClass( 'Ping' )">Ping</th>
<th class="text-right" ng-click="Order( 'ConnectedSeconds' )" ng-class="SortClass( 'ConnectedSeconds' )">Duration</th>
</tr>
</thead>
<tr ng-repeat="line in Players | orderBy: OrderBy | filter:FilterText" href="#/{{address}}/player/{{line.SteamID}}/">
@@ -64,32 +66,35 @@
<a href="#/{{address}}/player/{{line.SteamID}}/">{{line.SteamID}}</a>
</td>
<td style="text-align: right" ng-class="{fade: line.VoiationLevel == 0 }">
<td class="text-right" ng-class="{fade: line.VoiationLevel == 0 }">
{{line.VoiationLevel}}
</td>
<td style="text-align: right">
<td class="text-right">
{{line.CurrentLevel}}
</td>
<td style="text-align: right">
<td class="text-right">
<a href="#/{{address}}/player/{{line.SteamID}}/xp">{{line.UnspentXp}}</a>
</td>
<td style="text-align: right">
<td class="text-right">
{{line.Address}}
</td>
<td class="md-list-item-text" style="text-align: right">{{line.Ping}}</td>
<td class="text-right">
{{line.Ping}}
</td>
<td style="text-align: right">
<td class="text-right">
{{line.ConnectedSeconds | SecondsToDuration}}
</td>
<md-divider></md-divider>
</tr>
</table>
</div>
</div>
</div>
</div>
js/playerlist.js
+12 -12
View File
@@ -14,20 +14,20 @@ function PlayerListController( $scope, rconService, $interval )
});
}
$scope.Order = function( o )
$scope.Order = function( field )
{
if ( $scope.OrderBy == o )
if ( $scope.OrderBy === field )
{
o = '-' + o;
field = '-' + field;
}
$scope.OrderBy = o;
$scope.OrderBy = field;
}
$scope.SortClass = function( o )
$scope.SortClass = function( field )
{
if ( $scope.OrderBy == o ) return "active";
if ( $scope.OrderBy == "-" + o ) return "active descending";
if ( $scope.OrderBy === field ) return "sorting";
if ( $scope.OrderBy === "-" + field ) return "sorting descending";
return null;
}
@@ -41,10 +41,10 @@ function PlayerListController( $scope, rconService, $interval )
rconService.InstallService( $scope, $scope.Refresh )
var timer = $interval( function ()
{
//$scope.Refresh();
}.bind( this ), 1000 );
// var timer = $interval( function ()
// {
// //$scope.Refresh();
// }.bind( this ), 1000 );
$scope.$on( '$destroy', function () { $interval.cancel( timer ) } )
//$scope.$on( '$destroy', function () { $interval.cancel( timer ) } )
}
rcon.css
+3 -42
View File
@@ -21,19 +21,11 @@ a:hover
text-decoration: none;
}
.right
{
text-align: right;
}
.center
{
text-align: center;
}
.float-left { float: left; }
#ConsoleController .Output
{
font-family: monospace;
@@ -68,53 +60,22 @@ a:hover
background-color: #428bca;
}
table
{
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
.fade
{
opacity: 0.5;
}
th, td
.table > tbody > tr:hover
{
padding: 5px 8px;
border-bottom: 1px solid #414758;
background-color: rgba( 255, 255, 255, 0.3 );
}
th.active
.table > thead > tr > th.sorting
{
color: #1bc98e;
border-color: #1bc98e;
}
th
{
border-bottom: 2px solid #414758;
border-radius: 10px;
}
th:first-child
{
border-radius: 6px;
}
th:last-child
{
border-radius: 0 6px 0 0;
}
th:only-child
{
border-radius: 6px 6px 0 0;
}
.btn-default, .btn-default:active, .form-control
{
background: rgba( 255, 255, 255, 0.3 );