Skip to content
GitLab
Commit 735f9022 authored by joansp's avatar joansp
Browse files

New Machine Form with LXC and Angular validation

parent 847fbd28
Hide whitespace changes
Inline Side-by-side
lib/Ravada.pm
View file @ 735f9022
......@@ -489,6 +489,7 @@ sub _cmd_start {
die "Unknown domain '$name'\n" if !$domain;
$domain->start();
};
$request->status('done');
$request->error($@);
......@@ -522,6 +523,7 @@ sub _cmd_shutdown {
die "Unknown domain '$name'\n" if !$domain;
$domain->shutdown();
};
sleep(60000);
$request->status('done');
$request->error($@);
......
public/css/sb-admin.css
View file @ 735f9022
......@@ -339,13 +339,7 @@ ul.alert-dropdown {
##############AngularJS###############
####################################*/
.ng-invalid.ng-dirty{
border-color: #FA787E;
}
.ng-valid.ng-dirty {
border-color: #78FA89;
}
.machine-card .btn{
margin: 7px 0;
}
\ No newline at end of file
public/js/ravada.js
View file @ 735f9022
var app = angular.module("ravada.app",[]);
angular.module("ravada.app",['ngResource'])
.directive("solShowSupportform", swSupForm)
.directive("solShowNewmachine", swNewMach)
.directive("solShowListmachines", swListMach)
.directive("solShowCardsmachines", swCardsMach)
.service("request", gtRequest)
.service("listMach", gtListMach)
.controller("new_machine", newMachineCtrl)
.controller("SupportForm", suppFormCtrl)
.controller("machines", machinesCrtl);
app.controller("new_machine",[ '$scope', '$http', function($scope, $http) {
function newMachineCtrl($scope, $http) {
$http.get('/list_images.json').then(function(response) {
$scope.images = response.data;
......@@ -10,9 +25,9 @@ var app = angular.module("ravada.app",[]);
});
}]);
};
app.controller("SupportForm",function($scope){
function suppFormCtrl($scope){
this.user = {};
$scope.showErr = false;
$scope.isOkey = function() {
......@@ -23,49 +38,69 @@ var app = angular.module("ravada.app",[]);
}
}
});
};
app.directive("solShowSupportform",function() {
function swSupForm() {
return {
restrict: "E",
templateUrl: '/templates/support_form.html',
};
});
};
app.directive("solShowNewmachine",function() {
function swNewMach() {
return {
restrict: "E",
templateUrl: '/templates/new_machine.html',
};
});
};
// list machines
app.controller("machines",[ '$scope', '$http', function($scope, $http) {
function machinesCrtl($scope, $http, request, listMach) {
$http.get('/list_machines.json').then(function(response) {
$scope.list_machines= response.data;
});
}]);
request.get(function( res ) {
$scope.res = res;
});
};
app.directive("solShowListmachines",function() {
function swListMach() {
return {
restrict: "E",
templateUrl: '/templates/list_machines.html',
};
});
};
app.directive("solShowCardsmachines",function() {
function swCardsMach() {
return {
restrict: "E",
templateUrl: '/templates/user_machines.html',
};
});
};
function gtRequest($resource){
return $resource('/requests.json',{},{
get:{isArray:true}
});
};
function gtListMach($resource){
return $resource('/list_machines.json',{},{
get:{isArray:true}
});
};
\ No newline at end of file
public/templates/list_machines.html
View file @ 735f9022
<div class="panel-body">
<div class="col-lg-12">
<table class="table table-striped">
<thead>
<tr>
<th>Machine Name</th>
<th>Base</th>
<th>Active</th>
<th colspan="2">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="machine in list_machines">
<td><a href="/machine/manage/{{machine.id}}.html">{{machine.name}}</a></td>
<td><i ng-show="{{machine.is_base}}" class="fa fa-check" aria-hidden="true"></i><i ng-show="{{!machine.is_base}}" class="fa fa-times" aria-hidden="true"></i></td>
<td><i ng-show="{{machine.is_active}}" class="fa fa-check" aria-hidden="true"></i><i ng-show="{{!machine.is_active}}" class="fa fa-times" aria-hidden="true"></i></td>
<td><a class="btn btn-primary btn-sm" href="/machine/view/{{machine.id}}.html">View</a>
<a ng-show="{{machine.is_base}}" class="btn btn-primary btn-sm" href="/machine/clone/{{machine.id}}.html">Clone</a>
<a ng-show="{{!machine.is_base}}" class="btn btn-primary btn-sm" href="/machine/prepare/{{machine.id}}.html">Prepare Base</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="panel-body">
<div class="col-lg-12">
<table class="table table-striped">
<thead>
<tr>
<th>Machine Name</th>
<th>Base</th>
<th>Active</th>
<th colspan="2">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="machine in list_machines">
<td><a href="/machine/manage/{{machine.id}}.html">{{machine.name}}</a></td>
<td><i ng-show="{{machine.is_base}}" class="fa fa-check" aria-hidden="true"></i><i ng-show="{{!machine.is_base}}" class="fa fa-times" aria-hidden="true"></i></td>
<td><i ng-show="{{machine.is_active}}" class="fa fa-check" aria-hidden="true"></i><i ng-show="{{!machine.is_active}}" class="fa fa-times" aria-hidden="true"></i></td>
<td><a class="btn btn-primary btn-sm" href="/machine/view/{{machine.id}}.html">View</a>
<a ng-show="{{machine.is_base}}" class="btn btn-primary btn-sm" href="/machine/clone/{{machine.id}}.html">Clone</a>
<a ng-show="{{!machine.is_base}}" class="btn btn-primary btn-sm" href="/machine/prepare/{{machine.id}}.html">Prepare Base</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
public/templates/new_machine.html
View file @ 735f9022
......@@ -24,44 +24,99 @@
<input type="submit" name="submit" value="create">
</form>-->
<div class="panel panel-default">
<div class="panel-heading">
<h2>New Base</h2>
</div>
<div class="panel-body">
<form name="new_machineForm" role="form" method="post" action="#" ng-controller="new_machine" novalidate>
<div class="from-group">
<label for="name">Name</label>
<input class="form-control" ng-model="name" type="text" ng-maxlength="20" name="name" required=""><br/>
</div>
<div class="from-group">
<label for="backend">Backend</label>
<select name="backend"
ng-model="backend"
ng-options="item for item in backends track by item"
required=""
></select>
</div><br/>
<div ng-if="backend == 'KVM'" class="from-group">
<label for="id_iso">ISO image</label>
<select name ="id_iso"
ng-model="id_iso"
ng-options="item.name for item in images track by item.id"
required=""
></select>
</div>
<div ng-if="backend == 'LXC'" class="from-group">
<label for="id_template">Template</label>
<select name ="id_template"
ng-model="id_template"
required=""
></select>
</div><br/>
<div ng-if="backend == 'KVM'" class="from-group">
<label for="disk">Disk Size: (GB)</label>
<input class="form-control" ng-model="ddsize" type="number" name="ddsize" min="1" max="10" required="">
</div>
<div ng-show="backend == 'KVM' || backend == 'LXC'" class="from-group">
<label fro="ram">Ram: (GB)</label>
<input class="form-control" ng-model="ramsize" type="number" name="ramsize" min="1" max="4" required="">
</div><br/>
<div ng-show="new_machineForm.$submitted || new_machineForm.name.$touched">
<div ng-show="new_machineForm.name.$error.required" class="alert alert-warning fade in">
<strong>Error</strong> Machine name is required.
</div>
<div ng-show="new_machineForm.name.$error.maxlength" class="alert alert-warning fade in">
<strong>Error</strong> Machine name can't exceed 20 characters.
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h2>New Base</h2>
</div>
<div class="panel-body">
<form name="new_machine" role="form" method="post" action="#" ng-controller="new_machine" novalidate>
<div class="from-group">
<label for="name">Name</label>
<input class="form-control" type="text" size="20" name="name" ><br/>
<div ng-show="new_machineForm.$submitted || new_machineForm.backend.$touched">
<div ng-show="new_machineForm.backend.$error.required" class="alert alert-warning fade in">
<strong>Error</strong> Backend selection is required.
</div>
</div>
<div ng-show="new_machineForm.$submitted || new_machineForm.id_iso.$touched">
<div ng-show="new_machineForm.id_iso.$error.required" class="alert alert-warning fade in">
<strong>Error</strong> ISO image selection is required
</div>
</div>
<div ng-show="new_machineForm.$submitted || new_machineForm.id_template.$touched">
<div ng-show="new_machineForm.id_template.$error.required" class="alert alert-warning fade in">
<strong>Error</strong> Template selection is required
</div>
</div>
<div ng-show="new_machineForm.$submitted || new_machineForm.ddsize.$touched">
<div ng-show="new_machineForm.ddsize.$error.required" class="alert alert-warning fade in">
<strong>Error</strong> Disk Size selection is required
</div>
<div ng-show="new_machineForm.ddsize.$error.min || new_machineForm.ddsize.$error.max" class="alert alert-warning">
<strong>Error</strong> Disk Size selection must be between 1GB and 10GB
</div>
</div>
<div ng-show="new_machineForm.$submitted || new_machineForm.ramsize.$touched">
<div ng-show="new_machineForm.ramsize.$error.required" class="alert alert-warning fade in">
<strong>Error</strong> Ram Size selection is required
</div>
<div ng-show="new_machineForm.ramsize.$error.min || new_machineForm.ramsize.$error.max" class="alert alert-warning fade in">
<strong>Error</strong> Ram Size selection must be between 1GB and 4GB
</div>
<div class="from-group">
<label for="id_iso">ISO image</label>
<select name ="id_iso"
ng-model="id_iso"
ng-options="item.name for item in images track by item.id"
></select>
</div><br/>
<div class="from-group">
<label for="backend">Backend</label>
<select name="backend"
ng-model="backend"
ng-options="item for item in backends track by item"
></select>
</div><br/>
<div class="from-group">
<label for="disk">Disk Size: (GB)</label>
<input class="form-control" type="text" name="disk" size="2">
</div><br/>
<div class="from-group">
<label fro="ram">Ram: (GB)</label>
<input class="form-control" type="text" name="ram" size="2">
</div><br/>
</div>
<input type="submit" class="btn btn-default" name="submit" value="Create">
<input type="submit" class="btn btn-default" name="submit" value="Create" ng-disabled="new_machineForm.$invalid">
</form>
</div>
</form>
</div>
</div>
\ No newline at end of file
rvd_front.pl
View file @ 735f9022
......@@ -256,8 +256,12 @@ sub domains {
my @error = ();
my $ram = ($c->param('ram') or 2);
my $disk = ($c->param('disk') or 8);
my $ram = ($c->param('ddram') or 2);
my $disk = ($c->param('dddisk') or 8);
my $backend = $c->param('backend');
my $template = $c->param('template');
if ($c->param('submit')) {
push @error,("Name is mandatory") if !$c->param('name');
if (!@error) {
......@@ -269,7 +273,6 @@ sub domains {
}
}
}
my @images = $RAVADA->list_images();
warn join("\n",@error) if @error;
......@@ -278,7 +281,6 @@ sub domains {
,name => $c->param('name')
,ram => $ram
,disk => $disk
,images => \@images
,error => \@error
);
......@@ -300,6 +302,8 @@ sub new_machine {
my $ram = ($c->param('ram') or 2);
my $disk = ($c->param('disk') or 8);
my $backend = $c->param('backend');
my $template = $c->param('template');
if ($c->param('submit')) {
push @error,("Name is mandatory") if !$c->param('name');
if (!@error) {
......@@ -311,14 +315,13 @@ sub new_machine {
}
}
}
my @images = $RAVADA->list_images();
warn join("\n",@error) if @error;
$c->render(template => 'bootstrap/new_machine'
,name => $c->param('name')
,ram => $ram
,disk => $disk
,images => \@images
,error => \@error
);
};
......
templates/bootstrap/scripts.html.ep
View file @ 735f9022
......@@ -8,5 +8,6 @@
<script src="/js/form.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-resource.js"></script>
<script src="/js/ravada.js"></script>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment