AC-252 Got rid of the nifty slider. Replace with boring spinner. We can't have nice things.

awx/ui/static/css/ansible-ui.css

@@ -82,7 +82,7 @@
     font-size: 16px;
     text-align: center;
     color: #0088cc;
-    margin-bottom: 15px;
+    margin-bottom: 25px;
  }
  
  .controls {

awx/ui/static/js/controllers/JobTemplates.js

@@ -208,7 +208,7 @@ function JobTemplatesAdd ($scope, $rootScope, $compile, $location, $log, $routeP
    scope.formReset = function() {
       // Defaults
       generator.reset();
-      $('#forks-slider').slider("option", "value", scope.forks);
+      //$('#forks-slider').slider("option", "value", scope.forks);
       for (var fld in master) {
           scope[fld] = master[fld];
       }
@@ -293,7 +293,7 @@ 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.
+       //$('#forks-slider').slider('value',scope.forks);   // align slider handle with value.
 
        var dft = (scope['host_config_key'] === "" || scope['host_config_key'] === null) ? 'false' : 'true';
        md5Setup({
@@ -444,7 +444,7 @@ function JobTemplatesEdit ($scope, $rootScope, $compile, $location, $log, $route
           scope[fld] = master[fld];
       }
       scope.parseType = 'yaml';
-      $('#forks-slider').slider("option", "value", scope.forks);
+      //$('#forks-slider').slider("option", "value", scope.forks);
       };
 
    // Related set: Add button

awx/ui/static/js/forms/JobTemplates.js

@@ -90,12 +90,12 @@ angular.module('JobTemplateFormDefinition', [])
                 type: 'number', 
                 integer: true,
                 min: 0,
-                max: 100000000,
+                max: null,
-                slider: true, 
+                spinner: true, 
-                "class": 'input-mini',
                 "default": '0',
                 addRequired: false, 
                 editRequired: false,
+                class: "input-small",
                 column: 1,
                 awPopOver: "<p>The number of parallel or simultaneous processes to use while executing the playbook. Provide a value between 0 and 100. " +
                     "A value of zero will use the ansible default setting of 5 parallel processes.</p>",
@@ -171,7 +171,6 @@ angular.module('JobTemplateFormDefinition', [])
                 trueValue: 'true',
                 falseValue: 'false',
                 ngChange: "toggleCallback('host_config_key')",
-                "class": "span12",
                 column: 2,
                 awPopOver: "<p>Create a callback URL a host can use to contact the AWX server and request a configuration update " + 
                     "using the job template.  The URL will look like the following:</p>\n" +

awx/ui/static/js/forms/Jobs.js

@@ -90,13 +90,14 @@ angular.module('JobFormDefinition', [])
                 type: 'number', 
                 integer: true,
                 min: 0,
-                max: 100,
+                max: null,
-                slider: true, 
+                spinner: true, 
-                "class": 'input-mini',
+                "class": 'input-small',
                 "default": '0',
                 addRequired: false, 
                 editRequired: false,
                 column: 1,
+                disabled: true,
                 awPopOver: "<p>The number of parallel or simultaneous processes to use while executing the playbook. Provide a value between 0 and 100. " +
                     "A value of zero will use the ansible default setting of 5 parallel processes.</p>",
                 dataTitle: 'Forks',

awx/ui/static/lib/ansible/directives.js

@@ -260,6 +260,51 @@ angular.module('AWDirectives', ['RestServices'])
                 });
 
 
+            }
+        }
+        }])
+
+    //
+    // Enable jqueryui spinner widget on a numeric input field
+    //
+    // <input type="number" ng-spinner name="myfield" min="0" max="100" />
+    //
+    .directive('ngSpinner', [ function() {
+        return {
+        require: 'ngModel',
+        link: function(scope, elm, attrs, ctrl) {
+            var name = elm.attr('name');
+            var disabled = elm.attr('data-disabled');
+            var opts = {
+                value: 0,
+                step: 1,
+                min: elm.attr('min'),
+                max: elm.attr('max'),
+                numberFormat: "d",
+                spin: 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();
+                   }
+                   }
+                };
+            if (disabled) { 
+               opts['disabled'] = true;
+            }   
+
+            $(elm).spinner(opts);
+
+            /*$('#' + name + '-number').change( function() {
+                $('#' + name + '-slider').slider('value', parseInt( $(this).val() ));
+                });*/
+
+
             }
         }
         }]);

awx/ui/static/lib/ansible/form-generator.js

@@ -395,9 +395,12 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
              html += "<div class=\"controls\">\n"; 
              // Use 'text' rather than 'number' so that our integer directive works correctly
              html += (field.slider) ? "<div class=\"slider\" id=\"" + fld + "-slider\"></div>\n" : "";
-             html += "<input type=\"text\" value=\"" + field['default'] + "\" ";
+             html += "<input type=\""; 
+             html += (field.spinner) ? "spinner" : "text";
+             html += "\" value=\"" + field['default'] + "\" ";
              html += (field['class']) ? this.attr(field, 'class') : "";
              html += (field.slider) ? "ng-slider=\"" + fld + "\" " : ""; 
+             html += (field.spinner) ? "ng-spinner=\"" + fld + "\" " : ""; 
              html += "ng-model=\"" + fld + '" ';
              html += 'name="' + fld + '" ';
              html += (field.min || field.min == 0) ? this.attr(field, 'min') : "";
@@ -408,6 +411,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
              html += (options.mode == 'add' && field.addRequired) ? "required " : "";
              html += (field.readonly) ? "readonly " : "";
              html += (field.integer) ? "integer " : "";
+             html += (field.disabled) ? "data-disabled=\"true\" " : "";
              html += "/>\n";
              html += "<br />\n";
              // Add error messages
@@ -436,7 +440,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
              html += (field.ngShow) ? this.attr(field,'ngShow') : "";
              html += ">\n";
              html += "<div class=\"controls\">\n";
-             html += "<label class=\"checkbox\">";
+             html += "<label class=\"checkbox inline\">";
              html += "<input "; 
              html += this.attr(field,'type');
              html += "ng-model=\"" + fld + '" ';