<!DOCTYPE html> <html lang="en"> <head> <title>Websock VPN Instrumentation</title> </head> <body ng-app="vpnAdmin" ng-controller="vpnInstrumentationController"> <div class="panel panel-default panel-primary"> <div class="panel-heading">VPN Instrumentation</div> <div class="panel-body"> <div class="panel panel-default panel-info"> <div class="panel-heading ">Control Plane</div> <div class="panel-body"> <div class="row"> <!-- Auth --> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button" ng-click="startWebSocket()">Start WebSocket</button> </span> <button class="btn btn-default" type="button" ng-class="conn == false && 'btn-danger' || 'btn-success'"> {[{ conn == false && 'False' || 'True' }]} </button> </div> </div> </div> <br> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Auth</button> </span> <input type="text" class="form-control" placeholder="Enter auth data here"> </div> </div> </div> </div> </div> <div class="panel panel-default panel-info"> <div class="panel-heading">Data</div> <div class="panel-body"> <p ng-repeat="text in log_elements">{[{text}]}</p> </div> </div> </div> </div> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script type="text/javascript"> console.log("startup"); var vpnAdmin = angular.module('vpnAdmin',[]); vpnAdmin.config(function($interpolateProvider) { console.log("vpnTest Config"); $interpolateProvider.startSymbol('{[{'); $interpolateProvider.endSymbol('}]}'); }); vpnAdmin.controller('vpnInstrumentationController', function ($scope) { console.log("vpnInstrumentationController startup"); $scope.log_elements = []; $scope.auth_key = ""; $scope.conn = false; $scope.webSocketStatus = function() { if ($scope.conn == false) { return "" } } $scope.startWebSocket = function() { console.log("Start webSocket {{$}}"); if (window["WebSocket"]) { $scope.conn = new WebSocket("wss://{{$}}/ws/admin"); $scope.append_log("Websocket opened"); $scope.conn.onclose = function (evt) { $scope.append_log("Connection closed."); } $scope.conn.onmessage = function (evt) { $scope.append_log(evt.data) } } else { appendLog($("<div><b>Your browser does not support WebSockets.</b></div>")) } }; $scope.auth_click = function() { $scope.append_log($scope.auth_key) }; $scope.append_log = function(txt) { $scope.log_elements.push(txt) }; }); </script> </html>