1
0
mirror of https://github.com/ansible/awx.git synced 2024-10-31 15:21:13 +03:00

Created an Angular slider directive to support JQueryUI slider widget. Job Template page now uses a slider for Forks value. User can set the value with the slider or type in a value btwn 0 and 100. Additionally turned verbosity into a drop-down.

This commit is contained in:
chouseknecht 2013-06-06 15:01:23 -04:00
parent c7748999d8
commit 93e9c7a24d
24 changed files with 107 additions and 28 deletions

View File

@ -352,4 +352,11 @@
#tree-view {
min-height: 100px;
}
.slider {
display: inline-block;
vertical-align: middle;
width: 100px;
margin: 0 10px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 212 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 206 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 336 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 341 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 332 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 333 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 292 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

File diff suppressed because one or more lines are too long

View File

@ -168,6 +168,15 @@ function JobTemplatesAdd ($scope, $rootScope, $compile, $location, $log, $routeP
var form = JobTemplateForm;
var generator = GenerateForm;
var scope = generator.inject(form, {mode: 'add', related: false});
scope.job_type_options = [{ value: 'run', label: 'Run' }, { value: 'check', label: 'Check' }];
scope.verbosity_options = [
{ value: '0', label: 'Silent' },
{ value: '1', label: 'Whisper' },
{ value: '2', label: 'Talk' },
{ value: '3', label: 'Scream' }];
scope.playbook_options = [];
generator.reset();
LoadBreadCrumbs();
@ -221,10 +230,7 @@ function JobTemplatesAdd ($scope, $rootScope, $compile, $location, $log, $routeP
current_item: null,
list: ProjectList,
field: 'project'
});
scope.job_type_options = [{ value: 'run', label: 'Run' }, { value: 'check', label: 'Check' }];
scope.playbook_options = [];
});
// Save
scope.formSave = function() {
@ -261,7 +267,6 @@ function JobTemplatesAdd ($scope, $rootScope, $compile, $location, $log, $routeP
// Defaults
generator.reset();
};
}
JobTemplatesAdd.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'JobTemplateForm',
@ -281,13 +286,24 @@ function JobTemplatesEdit ($scope, $rootScope, $compile, $location, $log, $route
var generator = GenerateForm;
var form = JobTemplateForm;
var scope = generator.inject(form, {mode: 'edit', related: true});
// Our job type options
scope.job_type_options = [{ value: 'run', label: 'Run' }, { value: 'check', label: 'Check' }];
scope.verbosity_options = [
{ value: '0', label: 'Silent' },
{ value: '1', label: 'Whisper' },
{ value: '2', label: 'Talk' },
{ value: '3', label: 'Scream' }];
scope.playbook_options = null;
scope.playbook = null;
generator.reset();
var base = $location.path().replace(/^\//,'').split('/')[0];
var master = {};
var id = $routeParams.id;
var relatedSets = {};
function getPlaybooks(project) {
if (project !== null && project !== '' && project !== undefined) {
var url = GetBasePath('projects') + project + '/playbooks/';
@ -326,13 +342,9 @@ function JobTemplatesEdit ($scope, $rootScope, $compile, $location, $log, $route
scope.search(relatedSets[set].iterator);
}
getPlaybooks(scope.project);
$('#forks-slider').slider('value',scope.forks); // align slider handle with value.
});
// Our job type options
scope.job_type_options = [{ value: 'run', label: 'Run' }, { value: 'check', label: 'Check' }];
scope.playbook_options = null;
scope.playbook = null;
// Retrieve detail record and prepopulate the form
Rest.setUrl(defaultUrl + ':id/');
Rest.get({ params: {id: id} })
@ -442,6 +454,7 @@ function JobTemplatesEdit ($scope, $rootScope, $compile, $location, $log, $route
for (var fld in master) {
scope[fld] = master[fld];
}
$('#forks-slider').slider("option", "value", scope.forks);
};
// Related set: Add button
@ -481,7 +494,6 @@ function JobTemplatesEdit ($scope, $rootScope, $compile, $location, $log, $route
});
}
}
JobTemplatesEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'JobTemplateForm',

View File

@ -35,7 +35,7 @@ angular.module('JobTemplateFormDefinition', [])
label: 'Job Type',
type: 'select',
ngOptions: 'type.label for type in job_type_options',
default: 'run',
default: 0,
addRequired: true,
editRequired: true,
column: 1
@ -81,11 +81,14 @@ angular.module('JobTemplateFormDefinition', [])
},
forks: {
label: 'Forks',
id: 'forks-number',
type: 'number',
integer: true,
min: 0,
max: 100,
default: 0,
slider: true,
class: 'input-mini',
default: '0',
addRequired: false,
editRequired: false,
column: 2
@ -99,13 +102,11 @@ angular.module('JobTemplateFormDefinition', [])
},
verbosity: {
label: 'Verbosity',
type: 'number',
integer: true,
type: 'select',
ngOptions: 'v.label for v in verbosity_options',
default: 0,
min: 0,
max: 3,
addRequired: false,
editRequired: false,
addRequired: true,
editRequired: true,
column: 2
},
extra_vars: {

View File

@ -165,7 +165,45 @@ angular.module('AWDirectives', ['RestServices'])
$(element).popover({ placement: placement, delay: 0, title: title,
content: attrs.awPopOver, delay: 0, trigger: 'click', html: true });
}
});
})
//
// Enable jqueryui slider widget on a numeric input field
//
// <input type="number" ng-slider name="myfield" min="0" max="100" />
//
.directive('ngSlider', [ function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
var name = elm.attr('name');
$('#' + name + '-slider').slider({
value: 0,
step: 1,
min: elm.attr('min'),
max: elm.attr('max'),
slide: function(e, u) {
ctrl.$setViewValue(u.value);
ctrl.$setValidity('required',true);
ctrl.$setValidity('min', true);
ctrl.$setValidity('max', true);
ctrl.$dirty = true;
ctrl.$render();
scope['job_templates_form'].$dirty = true;
if (!scope.$$phase) {
scope.$digest();
}
}
});
$('#' + name + '-number').change( function() {
$('#' + name + '-slider').slider('value', parseInt( $(this).val() ));
});
}
}
}]);

View File

@ -107,7 +107,12 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
applyDefaults: function() {
for (fld in this.form.fields) {
if (this.form.fields[fld].default || this.form.fields[fld].default == 0) {
this.scope[fld] = this.form.fields[fld].default;
if (this.form.fields[fld].type == 'select' && this.scope[fld + '_options']) {
this.scope[fld] = this.scope[fld + '_options'][this.form.fields[fld].default];
}
else {
this.scope[fld] = this.form.fields[fld].default;
}
}
}
},
@ -311,18 +316,22 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
html += "<label class=\"control-label\" for=\"" + fld + '">' + field.label + '</label>' + "\n";
html += "<div class=\"controls\">\n";
// Use 'text' rather than 'number' so that our integer directive works correctly
html += "<input type=\"text\" value=\"" + field.default + "\" class=\"spinner\" ";
html += (field.slider) ? "<div class=\"slider\" id=\"" + fld + "-slider\"></div>\n" : "";
html += "<input type=\"text\" value=\"" + field.default + "\" ";
html += (field.class) ? this.attr(field, 'class') : "";
html += (field.slider) ? "ng-slider=\"" + fld + "\" " : "";
html += "ng-model=\"" + fld + '" ';
html += 'name="' + fld + '" ';
html += (field.min || field.min == 0) ? this.attr(field, 'min') : "";
html += (field.max) ? this.attr(field, 'max') : "";
html += (field.ngChange) ? this.attr(field,'ngChange') : "";
html += (field.id) ? this.attr(field,'id') : "";
html += (field.slider) ? "id=\"" + fld + "-number\"" : (field.id) ? this.attr(field,'id') : "";
html += (options.mode == 'edit' && field.editRequired) ? "required " : "";
html += (options.mode == 'add' && field.addRequired) ? "required " : "";
html += (field.readonly) ? "readonly " : "";
html += (field.integer) ? "integer " : "";
html += "/><br />\n";
html += "/>\n";
html += "<br />\n";
// Add error messages
if ( (options.mode == 'add' && field.addRequired) || (options.mode == 'edit' && field.editRequired) ) {
html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$dirty && " +
@ -535,8 +544,7 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
var button = this.form.buttons[btn];
//button
html += "<button ";
html += "class=\"btn";
html += (this.form.twoColumns) ? "" : " btn-small";
html += "class=\"btn btn-small";
html += (button.class) ? " " + button.class : "";
html += "\" ";
if (button.ngClick) {

File diff suppressed because one or more lines are too long

View File

@ -7,6 +7,7 @@
<link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap.min.css" />
<link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="{{ STATIC_URL }}css/font-awesome.min.css" />
<link rel="stylesheet" href="{{ STATIC_URL }}css/redmond/jquery-ui-1.10.3.custom.min.css" />
<link rel="stylesheet" href="{{ STATIC_URL }}css/ansible-ui.css" />
<link rel="shortcut icon" href="{{ STATIC_URL }}img/favicon.ico" />
<script src="{{ STATIC_URL }}js/config.js"></script>
@ -214,13 +215,13 @@
</div><!-- site footer -->
<script src="{{ STATIC_URL }}lib/jquery/jquery-1.9.1.min.js"></script>
<script src="{{ STATIC_URL }}lib/jquery/jquery-ui-1.10.3.custom.min.js"></script>
<script src="{{ STATIC_URL }}lib/twitter/bootstrap.min.js"></script>
<script src="{{ STATIC_URL }}lib/jstree/jquery.jstree.js"></script>
<script>
$('a[data-toggle="tab"]').on('show', function (e) {
var url = $(e.target).text();
var regx = new RegExp('/\#\/' + url.toLowerCase().replace(/ /g,'_') + '/');
var loc = window.location.toString();
if (! regx.test(loc)) {
window.location = '#/' + url.toLowerCase().replace(/ /g,'_');