angular-no-vnc
Version:
noVNC port for angular.js
146 lines (121 loc) • 5.13 kB
HTML
<html ng-app="VNCapp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
<script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="//localhost:35729/livereload.js"></script>
<style media="screen">
body {
padding-top: 70px;
padding-bottom: 30px;
}
</style>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">angular-noVNC</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="https://github.com/rootStar-lock/angular-noVNC.git">Home</a></li>
<li><a href="https://github.com/rootStar-lock/angular-noVNC/blob/master/README.md">Docs</a></li>
</ul>
</div>
</div>
</div>
<div class="container" data:ng-controller="VNCController">
<div class="page-header">
<h1>Connections</h1>
</div>
<div class="row">
<div class="col-sm-4 col-md-6" data:ng-repeat="connection in connections">
<div class="thumbnail">
<button type="button" class="close" data-dismiss="alert" data:ng-click="removeConnection($index)"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<vnc
data:ng-init = "display = { width: 500, fitTo: 'width' }; viewOnly = false; trueColor = true; states=[]; path='websockify'"
data:style = "{ margin: '5px 20px' }"
data:view-only = "viewOnly"
data:true-color = "trueColor"
data:display = "display"
data:host = "{{host}}"
data:port = "{{port}}"
data:path = "{{path}}"
data:is-connected="connected"
data:states="states"
></vnc>
<div class="caption">
<form role="form">
<div class="form-group">
<label for="host">Host</label>
<input type="text" id="host" class="form-control" placeholder="host" data:ng-model="host">
</div>
<div class="form-group">
<label for="path">Path</label>
<input type="text" id="path" class="form-control" placeholder="path" data:ng-model="path">
</div>
<div class="form-group">
<label for="port">Port</label>
<input type="text" id="port" class="form-control" placeholder="port" data:ng-model="port">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" id="password" class="form-control" placeholder="password" data:ng-model="password">
</div>
<div class="form-group" data:ng-init="connected=false">
<button type="button" class="btn btn-sm btn-primary" data:ng-hide="connected" data:ng-click="connected=true">Connect</button>
<button type="button" class="btn btn-sm btn-danger" data:ng-hide="!connected" data:ng-click="connected=false">Disconnect</button>
<button type="button" class="btn btn-sm btn-default" data:ng-click="display.fullScreen=true">Full screen</button>
<div class="checkbox">
<label>
<input type="checkbox" data:ng-model="viewOnly"> View only
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" data:ng-model="trueColor"> True color
</label>
</div>
<details>
<summary>states</summary>
<div data:ng-repeat="state in states">
<strong>{{state.status}}</strong>:<span>{{state.msg}}</span>
</div>
</details>
</div>
</form>
</div>
</div>
</div>
</div>
<button class="btn btn-lg btn-success" ng-click="addConnection()">Add connection</button>
</div>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="dist/angular-noVNC.js"></script>
<script type="text/javascript">
var app = angular.module('VNCapp', ['noVNC']);
app.controller('VNCController', ['$scope',
function($scope) {
$scope.connections = [];
$scope.addConnection = function () {
$scope.connections.push({});
}
$scope.removeConnection = function (index) {
$scope.connections.splice(index, 1);
}
}
]);
</script>
</body>
</html>