add Disconnect

added disconnect feature
auto formatted js/html code
This commit is contained in:
alexfriesen
2017-04-21 15:06:52 +02:00
parent cbe2b27e28
commit a02a57bf99
4 changed files with 289 additions and 241 deletions
+1 -1
View File
@@ -51,4 +51,4 @@
</div> </div>
</div> </div>
+86 -58
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" ng-app="RconApp"> <html lang="en" ng-app="RconApp">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
@@ -6,74 +6,102 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Websocket Rcon</title> <title>Websocket Rcon</title>
<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/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.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.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"> <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"> <nav class="navbar navbar-default" ng-controller="ServerInfoController" ng-show="Connected">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">
<a class="navbar-brand" href="#">{{info.Hostname}}</a> <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 ng-include="'html/connect.html'" ng-show="!Connected"> <ul class="nav navbar-nav">
</div> <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 ng-show="Connected" class="col-sm-2 sidebar"> </div>
<ul class="nav nav-sidebar"> </div>
<li ng-repeat="p in pages | filter: { Nav: '' } " ng-class="{'active' : $route.current.Title == p.Title }"> </nav>
<a href="#{{Nav( p.originalPath )}}">{{p.Title}}</a>
</li>
</ul>
</div> <div class="container">
<div class="col-sm-10" ng-show="Connected"> <div ng-include="'html/connect.html'" ng-show="!Connected"></div>
<h1 class="page-header">{{$route.current.Title}}</h1> <div ng-show="Connected" class="col-sm-2 sidebar">
<div class="row" ng-view></div>
</div>
</div> <ul class="nav nav-sidebar">
<li ng-repeat="page in pages" ng-class="{'active' : $route.current.Title == page.Title }">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <a href="#{{Nav( page.originalPath )}}">{{page.Title}}</a>
</li>
<!-- AngularJS --> <li>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <a href="#" ng-click="Disconnect()">Disconnect</a>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script> </li>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> </ul>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> </div>
<!-- Bootstrap --> <div class="col-sm-10" ng-show="Connected">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<h1 class="page-header">{{$route.current.Title}}</h1>
<!-- For charts --> <div class="row" ng-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.js"></script> </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script>
</div>
<!-- Data manipulation -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script>
<!-- Data manipulation -->
<script src="js/linq.min.js"></script> <script src="js/linq.min.js"></script>
<!-- Our stuff --> <!-- Our stuff -->
<script src="js/rconService.js"></script> <script src="js/rconService.js"></script>
<script src="js/app.js"></script> <script src="js/app.js"></script>
<script src="js/connection.js"></script> <script src="js/connection.js"></script>
@@ -82,6 +110,6 @@
<script src="js/playerlist.js"></script> <script src="js/playerlist.js"></script>
<script src="js/playerInfo.js"></script> <script src="js/playerInfo.js"></script>
<script src="js/chat.js"></script> <script src="js/chat.js"></script>
</body> </body>
</html> </html>
+91 -78
View File
@@ -1,101 +1,114 @@
var app = angular.module('RconApp', ['ngRoute', 'nvd3']);
app.service('rconService', [RconService]);
var app = angular.module( 'RconApp', ['ngRoute', 'nvd3'] ); app.config(function($routeProvider) {
$routeProvider.when("/home", {Title: "Home"});
$routeProvider.when("/:address/info", {
Title: "Server",
templateUrl: "html/serverInfo.html",
Nav: true
});
$routeProvider.when("/:address/console", {
Title: "Console",
templateUrl: "html/console.html",
Nav: true
});
$routeProvider.when("/:address/chat", {
Title: "Chat",
templateUrl: "html/chat.html",
Nav: true
});
$routeProvider.when("/:address/playerlist", {
Title: "Player List",
templateUrl: "html/playerlist.html",
Nav: true
});
$routeProvider.when("/:address/player/:userid", {
Title: "Player Info",
templateUrl: "html/playerInfo.html"
});
$routeProvider.otherwise({redirectTo: '/home'});
});
app.service( 'rconService', [RconService] ); app.controller('RconController', RconController);
app.config( function ( $routeProvider ) function RconController($scope, $rootScope, rconService, $timeout, $route) {
{ $scope.$route = $route;
$routeProvider.when( "/home", { Title: "Home" } )
$routeProvider.when( "/:address/info", { Title: "Server", templateUrl: "html/serverInfo.html", Nav: true } )
$routeProvider.when( "/:address/console", { Title: "Console", templateUrl: "html/console.html", Nav: true } )
$routeProvider.when( "/:address/chat", { Title: "Chat", templateUrl: "html/chat.html", Nav: true } )
$routeProvider.when( "/:address/playerlist", { Title: "Player List", templateUrl: "html/playerlist.html", Nav: true } )
$routeProvider.when( "/:address/player/:userid", { Title: "Player Info", templateUrl: "html/playerInfo.html" } )
$routeProvider.when( "/:address/player/:userid/xp", { Title: "Player Xp Stats", templateUrl: "html/playerXp.html" } )
$routeProvider.otherwise( { redirectTo: '/home' } );
} ); $scope.pages = $.map($route.routes, function(value, index) {
if (value.Nav) {
return [value];
}
});
app.controller( 'RconController', RconController ); $scope.OpenLeftMenu = function() {
$mdSidenav('left').toggle();
};
function RconController( $scope, $rootScope, rconService, $timeout, $route ) $scope.IsConnected = function() {
{ return rconService.IsConnected();
$scope.$route = $route; }
$scope.pages = $.map( $route.routes, function ( value, index ) $rootScope.Nav = function(url) {
{ return url.replace(":address", rconService.Address);
return [value]; }
} );
$scope.OpenLeftMenu = function () $rootScope.$on('$stateChangeStart', function(next, current) {
{ console.log(next);
$mdSidenav( 'left' ).toggle(); });
};
$scope.IsConnected = function () rconService.OnOpen = function() {
{ $scope.Connected = true;
return rconService.IsConnected(); $scope.$broadcast("OnConnected");
} $scope.$digest();
$scope.address = rconService.Address;
}
$rootScope.Nav = function ( url ) rconService.OnClose = function(ev) {
{ $scope.$broadcast("OnDisconnected", ev);
return url.replace( ":address", rconService.Address ); $scope.$digest();
} }
$rootScope.$on( '$stateChangeStart', function ( next, current ) rconService.OnError = function(ev) {
{ $scope.$broadcast("OnConnectionError", ev);
console.log( next ); $scope.$digest();
} ); }
rconService.OnOpen = function () rconService.OnMessage = function(msg) {
{ $scope.$apply(function() {
$scope.Connected = true; $scope.$broadcast("OnMessage", msg);
$scope.$broadcast( "OnConnected" ); });
$scope.$digest(); }
$scope.address = rconService.Address;
}
rconService.OnClose = function ( ev ) $scope.Disconnect = function() {
{ if (confirm('Do you really want to disconnect?')) {
$scope.$broadcast( "OnDisconnected", ev ); rconService.Disconnect();
$scope.$digest(); $scope.Connected = false;
}
rconService.OnError = function ( ev ) $scope.address = '#/home';
{ }
$scope.$broadcast( "OnConnectionError", ev ); }
$scope.$digest();
}
rconService.OnMessage = function ( msg )
{
$scope.$apply( function ()
{
$scope.$broadcast( "OnMessage", msg );
} );
}
} }
app.filter( 'SecondsToDuration', [SecondsToDuration] ); app.filter('SecondsToDuration', [SecondsToDuration]);
function SecondsToDuration() function SecondsToDuration() {
{ return function(input) {
return function ( input ) input = parseInt(input);
{
input = parseInt( input );
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;
out += seconds + "s"; out += seconds + "s";
return out; return out;
} }
} }
+111 -104
View File
@@ -1,123 +1,130 @@
function RconService() {
var ConnectionStatus = {
'CONNECTING': 0,
'OPEN': 1,
'CLOSING': 2,
'CLOSED': 3
};
function RconService() var Service = {
{ Socket: null,
var s = { Address: null,
Callbacks: {} Callbacks: {}
}; };
s.Connect = function ( addr, pass ) var LastIndex = 1001;
{
s.Socket = new WebSocket( "ws://" + addr + "/" + pass );
s.Address = addr;
s.Socket.onmessage = function ( e ) Service.Connect = function(addr, pass) {
{ this.Socket = new WebSocket("ws://" + addr + "/" + pass);
var data = angular.fromJson( e.data ); this.Address = addr;
// this.Socket.onmessage = function(e) {
// This is a targetted message, it has an identifier var data = angular.fromJson(e.data);
// So feed it back to the right callback.
//
if ( data.Identifier > 1000 )
{
var cb = s.Callbacks[data.Identifier];
if ( cb != null )
{
cb.scope.$apply( function ()
{
cb.callback( data );
} );
}
s.Callbacks[data.Identifier] = null;
return; //
} // This is a targetted message, it has an identifier
// So feed it back to the right callback.
//
if (data.Identifier > 1000) {
var cb = Service.Callbacks[data.Identifier];
if (cb != null) {
cb.scope.$apply(function() {
cb.callback(data);
});
}
Service.Callbacks[data.Identifier] = null;
// return;
// Generic console message, let OnMessage catch it }
//
if ( s.OnMessage != null )
{
s.OnMessage( data );
}
};
s.Socket.onopen = s.OnOpen; //
s.Socket.onclose = s.OnClose; // Generic console message, let OnMessage catch it
s.Socket.onerror = s.OnError; //
} if (Service.OnMessage != null) {
Service.OnMessage(data);
}
};
s.Command = function ( msg, identifier ) this.Socket.onopen = this.OnOpen;
{ this.Socket.onclose = this.OnClose;
if ( identifier == null ) this.Socket.onerror = this.OnError;
identifier = -1; }
if ( s.Socket == null ) Service.Disconnect = function() {
return; if (this.Socket) {
this.Socket.close();
if ( !s.IsConnected ) this.Socket = null;
return; }
var packet = this.Callbacks = {};
{ }
Identifier: identifier,
Message: msg,
Name: "WebRcon"
}
s.Socket.send( JSON.stringify( packet ) ); Service.Command = function(msg, identifier) {
}; if (this.Socket === null)
return;
var LastIndex = 1001; if (!this.IsConnected())
return;
// if (identifier === null)
// Make a request, call this function when it returns identifier = -1;
//
s.Request = function ( msg, scope, callback )
{
LastIndex++;
s.Callbacks[LastIndex] = { scope: scope, callback: callback };
s.Command( msg, LastIndex );
}
// var packet = {
// Returns true if websocket is connected Identifier: identifier,
// Message: msg,
s.IsConnected = function () Name: "WebRcon"
{ };
if ( s.Socket == null ) return false;
return s.Socket.readyState == 1;
}
// this.Socket.send(JSON.stringify(packet));
// Helper for installing connectivity logic };
//
// Basically if not connected, call this function when we are
// And if we are - then call it right now.
//
s.InstallService = function( scope, func )
{
scope.$on( "OnConnected", function ()
{
func();
});
if ( s.IsConnected() ) //
{ // Make a request, call this function when it returns
func(); //
} Service.Request = function(msg, scope, callback) {
} LastIndex++;
this.Callbacks[LastIndex] = {
scope: scope,
callback: callback
};
Service.Command(msg, LastIndex);
}
s.getPlayers = function(scope, success) { //
this.Request( "playerlist", scope, function ( response ) // Returns true if websocket is connected
{ //
var players = JSON.parse( response.Message ); Service.IsConnected = function() {
if (this.Socket == null)
return false;
if(typeof success === 'function') { return this.Socket.readyState === ConnectionStatus.OPEN;
success.call(scope, players); }
}
});
}
return s; //
} // Helper for installing connectivity logic
//
// Basically if not connected, call this function when we are
// And if we are - then call it right now.
//
Service.InstallService = function(scope, func) {
scope.$on("OnConnected", function() {
func();
});
if (this.IsConnected()) {
func();
}
}
Service.getPlayers = function(scope, success) {
this.Request("playerlist", scope, function(response) {
var players = JSON.parse(response.Message);
if (typeof success === 'function') {
success.call(scope, players);
}
});
}
return Service;
}