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

Switch to bootstrap

Browse Source
This commit is contained in:
Garry Newman
2016-04-12 15:13:48 +01:00
parent c95ca0445a
commit 6de72eec86
8 changed files with 276 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/connect.html
+43 -42
View File
@@ -1,56 +1,57 @@
<md-content ng-controller="ConnectionController" layout="column" layout-align="center center" flex>
<div ng-controller="ConnectionController" class="row">
<md-card class="md-block">
<div class="col-md-offset-4 col-md-6 panel" style="margin-top: 128px">
<md-toolbar class="demo-toolbar md-primary">
<div class="md-toolbar-tools">
<h3 class="ng-binding">Connect</h3>
</div>
</md-toolbar>
<h2>Connect</h2>
<div layout-padding layout-gt-xs="column">
<div class="alert alert-danger" ng-show="LastErrorMessage != null">{{LastErrorMessage}}</div>
<div layout-padding>Enter the address (including rcon port) and the rcon password below to connect.</div>
<p>Enter the address (including rcon port) and the rcon password below to connect.</p>
<div ng-repeat="c in PreviousConnects">
<md-button ng-click="ConnectTo( c )">{{c.Address}}</md-button>
<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 />
</div>
</form>
</div>
<div>{{LastErrorMessage}}</div>
<form ng-submit="Connect()">
<div class="md-inline-form">
<md-input-container class="md-block" flex-gt-xs>
<label>Address</label>
<input required minlength=5 ng-model="Address" name="Address">
</md-input-container>
<md-input-container class="md-block" flex-gt-xs>
<label>Password</label>
<input required minlength=2 type="password" ng-model="Password" name="Password">
</md-input-container>
<section layout="row" layout-align="end end" layout-wrap>
<md-checkbox md-no-ink aria-label="Save Connection" ng-model="SaveConnection" class="md-primary">
Save Connection
</section>
<br/> <br/>
<section layout="row" layout-align="end end" layout-wrap>
<md-button class="md-raised md-primary" ng-click="Connect()">Connect</md-button>
</section>
<div class="col-md-offset-4 col-md-6 panel" style="margin-top: 64px">
<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>
</div>
</form>
</div>
</md-card>
</md-content>
</div>
</div>
html/console.html
+5 -15
View File
@@ -1,21 +1,11 @@
<div ng-controller="ConsoleController" flex layout="column" id="ConsoleController">
<div ng-controller="ConsoleController" id="ConsoleController">
<md-content flex id="vertical-container" class="Output"><div ng-repeat="line in Output" ng-class="line.Class">{{line.Message}}</div></md-content>
<div id="vertical-container" style="height: 600px" class="Output scrollable"><div ng-repeat="line in Output" ng-class="line.Class">{{line.Message}}</div></div>
<form ng-submit="SubmitCommand()" class="md-inline-form">
<md-toolbar class="Input">
<div class="md-toolbar-tools">
<span flex>
<input ng-model="Command" style="width: 100%">
</span>
<md-button class="md-icon-button" aria-label="Settings" ng-click="SubmitCommand()">
<md-icon md-menu-origin md-svg-icon="image/arrow-right-bold-hexagon-outline.svg"></md-icon>
</md-button>
</div>
</md-toolbar>
<div>
<input class="form-control" ng-model="Command" style="width: 100%">
</div>
</form>
</div>
html/playerlist.html
+47 -40
View File
@@ -1,56 +1,63 @@
<div ng-controller="PlayerListController" flex layout="column" id="PlayerListController">
<md-content flex id="vertical-container">
<md-list>
<md-list-item class="" ng-repeat="line in Players | filter : FilterText" href="#/{{address}}/player/{{line.SteamID}}/">
<div flex layout="row">
<div flex class="md-list-item-text">
<h3><a href="#/{{address}}/player/{{line.SteamID}}/">{{line.DisplayName}}</a></h3>
</div>
</div>
<div flex="20"style="text-align: right">
{{line.SteamID}} <span>{{line.OwnerSteamID}}</span>
</div>
<div class="right row">
<div class="float-left">
<input ng-model="FilterText" style="width: 300px" 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>
</div>
<div flex="5"style="text-align: right">
<div class="row">
<table>
<thead>
<tr>
<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>
</tr>
</thead>
<tr ng-repeat="line in Players | orderBy: OrderBy | filter:FilterText" href="#/{{address}}/player/{{line.SteamID}}/">
<td>
<a href="#/{{address}}/player/{{line.SteamID}}/">{{line.DisplayName}}</a>
</td>
<td style="text-align: right">
<a href="#/{{address}}/player/{{line.SteamID}}/">{{line.SteamID}}</a>
</td>
<td style="text-align: right" ng-class="{fade: line.VoiationLevel == 0 }">
{{line.VoiationLevel}}
</div>
</td>
<div flex="10"style="text-align: right">
Level: {{line.CurrentLevel}}
</div>
<td style="text-align: right">
{{line.CurrentLevel}}
</td>
<div flex="10"style="text-align: right">
XP: <a href="#/{{address}}/player/{{line.SteamID}}/xp">{{line.UnspentXp}}</a>
</div>
<td style="text-align: right">
<a href="#/{{address}}/player/{{line.SteamID}}/xp">{{line.UnspentXp}}</a>
</td>
<div flex="20"style="text-align: right">
<td style="text-align: right">
{{line.Address}}
</div>
</td>
<div flex="10" class="md-list-item-text" style="text-align: right">Ping {{line.Ping}}</div>
<td class="md-list-item-text" style="text-align: right">{{line.Ping}}</td>
<div flex="10" style="text-align: right">
<td style="text-align: right">
{{line.ConnectedSeconds | SecondsToDuration}}
</div>
</td>
<md-divider></md-divider>
</md-list-item>
</md-list>
</md-content>
</tr>
</table>
<md-toolbar class="Input">
<div class="md-toolbar-tools">
<span flex>
<input ng-model="FilterText" style="width: 100%">
</span>
<md-button class="md-icon-button" aria-label="Settings" ng-click="SubmitCommand()">
<md-icon md-menu-origin md-svg-icon="image/arrow-right-bold-hexagon-outline.svg"></md-icon>
</md-button>
</div>
</md-toolbar>
</div>
</div>
index.html
+22 -31
View File
@@ -5,45 +5,36 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Websocket Rcon</title>
<link href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.5/angular-material.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.css" rel="stylesheet">
<link href="rcon.css" rel="stylesheet">
</head>
<body ng-cloak layout="row" ng-controller="RconController">
<body ng-controller="RconController">
<div ng-include="'html/connect.html'" ng-show="!Connected" flex layout="row" ng-cloak>
</div>
<div class="container">
<md-sidenav md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')" class="md-whiteframe-6dp menu" ng-show="Connected" ng-cloak>
<div ng-include="'html/connect.html'" ng-show="!Connected">
</div>
<md-list>
<md-list-item ng-repeat="p in pages | filter: { Nav: '' } ">
<md-button href="#{{Nav( p.originalPath )}}" class="menu_button" ng-class="{'selected' : $route.current.Title == p.Title }">
{{p.Title}}
</md-button>
</md-list-item>
</md-list>
<div ng-show="Connected" class="col-sm-2 sidebar">
</md-sidenav>
<ul class="nav nav-sidebar">
<li ng-repeat="p in pages | filter: { Nav: '' } " ng-class="{'active' : $route.current.Title == p.Title }">
<a href="#{{Nav( p.originalPath )}}">{{p.Title}}</a>
</li>
</ul>
<div layout="column" flex ng-show="Connected" ng-cloak>
</div>
<md-toolbar layout="row">
<div class="md-toolbar-tools">
<md-button class="md-icon-button hide-gt-sm" aria-label="Settings" ng-click="OpenLeftMenu()">
<md-icon md-menu-origin md-svg-icon="image/menu.svg"></md-icon>
</md-button>
<div layout-row flex><h3 class="md-toolbar-item md-breadcrumb md-headline">{{$route.current.Title}}</h3></div>
</div>
</md-toolbar>
<div class="col-sm-10" ng-show="Connected" >
<div flex layout="column">
<md-content flex class="Content AppBackground" layout="column" ng-view>
</md-content>
</div>
</div>
<h1 class="page-header">{{$route.current.Title}}</h1>
<div class="row" ng-view></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
@@ -54,8 +45,8 @@
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<!-- Angular Material -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.5/angular-material.min.js"></script>
<!-- Bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<!-- For charts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
js/app.js
+5 -8
View File
@@ -1,16 +1,11 @@
var app = angular.module( 'RconApp', ['ngMaterial', 'ngRoute', 'nvd3'] );
var app = angular.module( 'RconApp', ['ngRoute', 'nvd3'] );
app.service( 'rconService', [RconService] );
app.config( function ( $mdThemingProvider, $routeProvider )
app.config( function ( $routeProvider )
{
$mdThemingProvider.theme( 'default' ).primaryPalette( 'blue',
{
'default': '700'
}).accentPalette( 'blue' );
$routeProvider.when( "/home", { Title: "Home" } )
$routeProvider.when( "/:address/console", { Title: "Console", templateUrl: "html/console.html", Nav: true } )
$routeProvider.when( "/:address/playerlist", { Title: "Player List", templateUrl: "html/playerlist.html", Nav: true } )
@@ -22,7 +17,7 @@ app.config( function ( $mdThemingProvider, $routeProvider )
app.controller( 'RconController', RconController );
function RconController( $scope, $rootScope, rconService, $mdSidenav, $timeout, $mdDialog, $route )
function RconController( $scope, $rootScope, rconService, $timeout, $route )
{
$scope.$route = $route;
@@ -97,6 +92,8 @@ function SecondsToDuration()
if ( input > 60 ) out += minutes + "m ";
var seconds = input % 60;
if ( input < 3600 )
out += seconds + "s";
return out;
js/connection.js
-2
View File
@@ -7,8 +7,6 @@ function ConnectionController( $scope, rconService, $routeParams, $timeout, $loc
$scope.Password = "";
$scope.SaveConnection = true;
console.log( $location.search );
if ( localStorage.previousConnections != null )
$scope.PreviousConnects = angular.fromJson( localStorage.previousConnections );
js/playerlist.js
+19
View File
@@ -4,6 +4,7 @@ app.controller( 'PlayerListController', PlayerListController );
function PlayerListController( $scope, rconService, $interval )
{
$scope.Output = new Array();
$scope.OrderBy = '-ConnectedSeconds';
$scope.Refresh = function ()
{
@@ -13,6 +14,24 @@ function PlayerListController( $scope, rconService, $interval )
});
}
$scope.Order = function( o )
{
if ( $scope.OrderBy == o )
{
o = '-' + o;
}
$scope.OrderBy = o;
}
$scope.SortClass = function( o )
{
if ( $scope.OrderBy == o ) return "active";
if ( $scope.OrderBy == "-" + o ) return "active descending";
return null;
}
rconService.InstallService( $scope, $scope.Refresh )
var timer = $interval( function ()
rcon.css
+119 -84
View File
@@ -1,100 +1,135 @@
H3
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
body
{
}
.AppBackground
{
background-color: #ccc;
}
.DropShadow
{
box-shadow: 0 1px 8px 0 rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 3px 3px -2px rgba(0,0,0,.12);
}
#ConsoleController md-input-container .md-errors-spacer
{
min-height: 0;
}
#ConsoleController md-input-container
{
margin: 0;
}
#ConsoleController .Output
{
font-size: 16px;
white-space: pre-wrap;
padding: 8px;
}
#ConsoleController .Output div
{
padding: 2px 4px;
color: #888;
}
#ConsoleController .Output .Command
{
color: #009688;
background-color: rgba(137, 255, 0, 0.44);
}
#ConsoleController .Output .Warning
{
color: #c79621;
background-color: rgba(255, 128, 0, 0.1);
}
#ConsoleController .Output .Assert, #ConsoleController .Output .Error
{
color: #b42626;
background-color: rgba(255,0,0,.1);
}
#ConsoleController .Input input
{
color: #000;
font-family: "Roboto", sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 1.5;
color: #cfd2da;
background-color: #252830;
}
a
{
color: #FF4081;
color: #1ca8dd;
}
a:hover
{
color: #fff;
text-decoration: none;
}
.menu
.right
{
background-color: #1976D2;
text-align: right;
}
.menu_button
.center
{
display: block;
padding: 0 16px 0 32px;
text-transform: none;
text-rendering: optimizeLegibility;
font-weight: 500;
border-radius: 0;
color: white;
cursor: pointer;
display: block;
align-items: inherit;
line-height: 40px;
margin: 0;
max-height: 40px;
overflow: hidden;
padding: 0px 16px;
text-align: left;
text-decoration: none;
white-space: normal;
width: 100%;
text-align: center;
}
.menu_button.selected
.float-left { float: left; }
#ConsoleController .Output
{
background: #90A4AE;
font-family: monospace;
font-size: 12px;
white-space: pre-wrap;
}
.scrollable
{
overflow: auto;
}
.nav-sidebar
{
margin-top: 64px;
margin-right: 16px;
}
.nav-sidebar > li > a
{
padding-right: 20px;
padding-left: 20px;
border-radius: 5px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus
{
color: #fff;
background-color: #428bca;
}
table
{
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
.fade
{
opacity: 0.5;
}
th, td
{
padding: 5px 8px;
border-bottom: 1px solid #414758;
}
th.active
{
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 );
border: none;
color: #cfd2da;
text-shadow: none;
}
.btn-default:hover
{
background: #1ca8dd;
color: #fff;
}
.panel
{
background-color: #434857;
}