Skip to content

CIRCLE / cloud

Go to a project
Commit 07bacf6f by Bence Dányi
Options

firewall_gui: client-side validation feedback

parent e9a40a29
Showing with 39 additions and 10 deletions
firewall_gui/static/js/project.js
...@@ -236,6 +236,7 @@ function EntityController(url, init) { ...@@ -236,6 +236,7 @@ function EntityController(url, init) {
return function($scope, $http, $routeParams) { return function($scope, $http, $routeParams) {
init($scope); init($scope);
var id = $routeParams.id; var id = $routeParams.id;
$scope.errors = {};
/** /**
* Generic filter for collections * Generic filter for collections
* *
...@@ -246,15 +247,37 @@ function EntityController(url, init) { ...@@ -246,15 +247,37 @@ function EntityController(url, init) {
$scope.destroyed = function(item) { $scope.destroyed = function(item) {
return !item.__destroyed; return !item.__destroyed;
} }
$scope.hasError = function(name) {
return $scope.errors[name] ? 'error' : null;
}
$scope.getError = function(name) {
return $scope.errors[name] ? $scope.errors[name] : '';
}
$scope.save = function() { $scope.save = function() {
console.log($scope.entity); $scope.errors = {};
console.log(JSON.stringify($scope.entity));
$.ajax({ $.ajax({
url: url + 'save/', url: url + 'save/',
type: 'post', type: 'post',
data: JSON.stringify($scope.entity), data: JSON.stringify($scope.entity),
success: function(data) { success: function(data) {
console.log(data); console.log(data);
$scope.$apply(function(){
$scope.errors = {};
})
}
}).error(function(data){
try {
data = JSON.parse(data.responseText);
var newErrors = {};
for (var i in data) {
var id = $('#'+i).length ? i : 'targetName';
newErrors[id]=data[i];
}
$scope.$apply(function(){
$scope.errors = newErrors;
})
} catch (ex) {
} }
}) })
} }
......
firewall_gui/static/partials/rule-edit.html
...@@ -30,10 +30,11 @@ ...@@ -30,10 +30,11 @@
</select> </select>
</div> </div>
</div> </div>
<div class="control-group"> <div class="control-group" ng-class="hasError('targetName')">
<label class="control-label" for="targetName">Target</label> <label class="control-label" for="targetName">Target</label>
<div class="controls"> <div class="controls">
<input type="text" data-provide="typeahead" autocomplete="off" id="targetName" ng-model="entity.target.name" /> <input type="text" data-provide="typeahead" autocomplete="off" id="targetName" ng-model="entity.target.name" />
<span class="help-inline" ng-bind="getError('targetName')"></span>
</div> </div>
</div> </div>
<div class="control-group"> <div class="control-group">
...@@ -51,16 +52,18 @@ ...@@ -51,16 +52,18 @@
</select> </select>
</div> </div>
</div> </div>
<div class="control-group"> <div class="control-group" ng-class="hasError('owner')">
<label class="control-label" for="owner">Owner</label> <label class="control-label" for="owner">Owner</label>
<div class="controls"> <div class="controls">
<input type="text" autocomplete="off" id="owner" ng-model="entity.owner.name" /> <input type="text" autocomplete="off" id="owner" ng-model="entity.owner.name" />
<span class="help-inline" ng-bind="getError('owner')"></span>
</div> </div>
</div> </div>
<div class="control-group"> <div class="control-group" ng-class="hasError('foreign_network')">
<label class="control-label" for="foreignNetwork">Foreign network</label> <label class="control-label" for="foreign_network">Foreign network</label>
<div class="controls"> <div class="controls">
<input type="text" data-provide="typeahead" autocomplete="off" id="foreignNetwork" class="vlangroup" ng-model="entity.foreignNetwork.name" /> <input type="text" data-provide="typeahead" autocomplete="off" id="foreign_network" class="vlangroup" ng-model="entity.foreignNetwork.name" />
<span class="help-inline" ng-bind="getError('foreign_network')"></span>
</div> </div>
</div> </div>
</div> </div>
...@@ -86,22 +89,25 @@ ...@@ -86,22 +89,25 @@
</label> </label>
</div> </div>
</div> </div>
<div class="control-group"> <div class="control-group" ng-class="hasError('dport')">
<label class="control-label" for="dport">Destination port</label> <label class="control-label" for="dport">Destination port</label>
<div class="controls"> <div class="controls">
<input class="input-mini" type="number" id="dport" ng-model="entity.dport"> <input class="input-mini" type="number" id="dport" ng-model="entity.dport">
<span class="help-inline" ng-bind="getError('dport')"></span>
</div> </div>
</div> </div>
<div class="control-group"> <div class="control-group" ng-class="hasError('nat_dport')">
<label class="control-label" for="nat_dport">NAT Destination port</label> <label class="control-label" for="nat_dport">NAT Destination port</label>
<div class="controls"> <div class="controls">
<input class="input-mini" type="number" id="nat_dport" ng-model="entity.nat_dport"> <input class="input-mini" type="number" id="nat_dport" ng-model="entity.nat_dport">
<span class="help-inline" ng-bind="getError('nat_dport')"></span>
</div> </div>
</div> </div>
<div class="control-group"> <div class="control-group" ng-class="hasError('sport')">
<label class="control-label" for="sport">Source port</label> <label class="control-label" for="sport">Source port</label>
<div class="controls"> <div class="controls">
<input class="input-mini" type="number" id="sport" ng-model="entity.sport"> <input class="input-mini" type="number" id="sport" ng-model="entity.sport">
<span class="help-inline" ng-bind="getError('sport')"></span>
</div> </div>
</div> </div>
<div class="control-group"> <div class="control-group">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment