forms
This commit is contained in:
parent
0acad7e737
commit
7b35bd753e
|
@ -5,23 +5,11 @@
|
||||||
<div class="col">
|
<div class="col">
|
||||||
|
|
||||||
<form>
|
<form>
|
||||||
<div class="form-group row">
|
|
||||||
<label class="col-sm-2 col-form-label col-form-label-sm">Datasource</label>
|
<form-textfield-static label="Datasource" value="dsName"></form-textfield-static>
|
||||||
<div class="col-sm-10">
|
|
||||||
<input type="text" readonly class="form-control-plaintext form-control-sm" ng-model="dsName"/>
|
<form-textfield-with-prefix label="API Id" prefix="{{prefix}}" value="api.id"></form-textfield-with-prefix>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group row">
|
|
||||||
<label class="col-sm-2 col-form-label col-form-label-sm">API Id</label>
|
|
||||||
<div class="col-sm-10">
|
|
||||||
<div class="input-group input-group-sm">
|
|
||||||
<div class="input-group-prepend">
|
|
||||||
<span class="input-group-text">{{prefix}}</span>
|
|
||||||
</div>
|
|
||||||
<input type="text" class="form-control" ng-model="api.id" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
<label class="col-sm-2 col-form-label col-form-label-sm">Compatibility level</label>
|
<label class="col-sm-2 col-form-label col-form-label-sm">Compatibility level</label>
|
||||||
<div class="col-sm-10">
|
<div class="col-sm-10">
|
||||||
|
@ -46,12 +34,10 @@
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group row">
|
|
||||||
<label class="col-sm-2 col-form-label col-form-label-sm">BaseURL</label>
|
|
||||||
<div class="col-sm-10">
|
<form-textfield label="BaseURL" value="api.baseUrl" regex="^(http|https|ftp|file|sftp|jar|mongodb):\/\/"></form-textfield>
|
||||||
<input type="text" class="form-control form-control-sm" ng-model="api.baseUrl"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div ng-show="api.protocol" ng-repeat="p in selProtParams">
|
<div ng-show="api.protocol" ng-repeat="p in selProtParams">
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
|
@ -61,11 +47,13 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{{api}}<br />
|
||||||
|
|
||||||
|
<button type="submit" class="btn btn-sm btn-primary">Add API</button>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
{{api}}
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -0,0 +1,10 @@
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label col-form-label-sm">{{label}}</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input type="text" class="form-control form-control-sm is-valid"
|
||||||
|
ng-pattern="mypattern"
|
||||||
|
ng-required="required"
|
||||||
|
ng-class="{'is-invalid': !value || value.trim() == ''}"
|
||||||
|
ng-model="value" />
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,8 @@
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label col-form-label-sm">{{label}}</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input type="text" readonly="readonly"
|
||||||
|
class="form-control-plaintext form-control-sm"
|
||||||
|
ng-model="value"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,14 @@
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label col-form-label-sm">{{label}}</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<div class="input-group input-group-sm">
|
||||||
|
<div class="input-group-prepend">
|
||||||
|
<span class="input-group-text">{{prefix}}</span>
|
||||||
|
</div>
|
||||||
|
<input type="text" class="form-control form-control-sm is-valid"
|
||||||
|
ng-required="required"
|
||||||
|
ng-class="{'is-invalid': !suffix || suffix.trim() == ''}"
|
||||||
|
ng-model="suffix" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -19,3 +19,64 @@ app.config(['$routeProvider', function($routeProvider) {
|
||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
app.directive('formTextfield', function() {
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
scope: {
|
||||||
|
'label' : '@',
|
||||||
|
'regex' : '@',
|
||||||
|
'optional' : '@',
|
||||||
|
'type' : '@',
|
||||||
|
'value' : '=',
|
||||||
|
},
|
||||||
|
templateUrl: './html/parts/form_textfield.html',
|
||||||
|
link: function(scope, element, attrs) {
|
||||||
|
scope.required = (scope.optional != 'true');
|
||||||
|
if (scope.regex) { scope.mypattern = new RegExp(scope.regex); }
|
||||||
|
else if (scope.type == 'NUMBER') { scope.mypattern = new RegExp("^[-+]?[0-9]+(\.[0-9]+)?$"); }
|
||||||
|
else if (scope.type == 'BOOLEAN') { scope.mypattern = new RegExp("^(true|false)$"); }
|
||||||
|
else { scope.mypattern = new RegExp(".+"); }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
app.directive('formTextfieldStatic', function() {
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
scope: {
|
||||||
|
'label' : '@',
|
||||||
|
'value' : '=',
|
||||||
|
},
|
||||||
|
templateUrl: './html/parts/form_textfield_static.html',
|
||||||
|
link: function(scope, element, attrs) {}
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
app.directive('formTextfieldWithPrefix', function() {
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
scope: {
|
||||||
|
'label' : '@',
|
||||||
|
'prefix' : '@',
|
||||||
|
'optional' : '@',
|
||||||
|
'value' : '='
|
||||||
|
},
|
||||||
|
templateUrl: './html/parts/form_textfield_with_prefix.html',
|
||||||
|
link: function(scope, element, attrs) {
|
||||||
|
scope.suffix = '';
|
||||||
|
scope.required = (scope.optional != 'true');
|
||||||
|
|
||||||
|
scope.$watch('suffix', function() {
|
||||||
|
var tmpId = scope.prefix + scope.suffix;
|
||||||
|
|
||||||
|
if (scope.suffix && scope.suffix.trim() != '') {
|
||||||
|
scope.value = tmpId;
|
||||||
|
} else {
|
||||||
|
scope.value = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue