External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-16 00:17:29 -02:30
Code Issues Packages Projects Releases Wiki Activity

fixing prompt for survey

Browse Source 
within the job launch modal, the prompt for survey needed to be re-styled, as well as getting 'required' warning for each question
This commit is contained in:
Jared Tabor
2014-10-14 09:59:22 -04:00
parent 5b2eadf60b
commit 8d0cdd66e0
1 changed files with 73 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
awx/ui/static/js/helpers/JobSubmission.js
View File

@@ -116,6 +116,7 @@ function($location, Wait, GetBasePath, LookUpInit, JobTemplateForm, CredentialLi
// url = params.url, // url = params.url,
e; e;
html+='<br>job_launch_form.$valid = {{job_launch_form.$valid}}<br></form>';
$('#password-modal').empty().html(html); $('#password-modal').empty().html(html);
$('#password-modal').find('textarea').before(scope.helpContainer); $('#password-modal').find('textarea').before(scope.helpContainer);
e = angular.element(document.getElementById('password-modal')); e = angular.element(document.getElementById('password-modal'));
@@ -143,7 +144,7 @@ function($location, Wait, GetBasePath, LookUpInit, JobTemplateForm, CredentialLi
id: 'password-modal', id: 'password-modal',
scope: scope, scope: scope,
buttons: buttons, buttons: buttons,
width: 600, width: 620,
height: 700, //(scope.passwords.length > 1) ? 700 : 500, height: 700, //(scope.passwords.length > 1) ? 700 : 500,
minWidth: 500, minWidth: 500,
title: 'Launch Configuration', title: 'Launch Configuration',
@@ -158,7 +159,9 @@ function($location, Wait, GetBasePath, LookUpInit, JobTemplateForm, CredentialLi
} }
scope.removeDialogReady = scope.$on('DialogReady', function() { scope.removeDialogReady = scope.$on('DialogReady', function() {
$('#password-modal').dialog('open'); $('#password-modal').dialog('open');
$('#password-accept-button').attr({ "disabled": "disabled" }); $('#password-accept-button').attr('ng-disabled', 'job_launch_form.$invalid' );
e = angular.element(document.getElementById('password-accept-button'));
$compile(e)(scope);
}); });
}; };
@@ -174,22 +177,23 @@ function($location, Wait, GetBasePath, LookUpInit, JobTemplateForm, CredentialLi
callback = params.callback || 'PasswordsAccepted', callback = params.callback || 'PasswordsAccepted',
form = CredentialForm, form = CredentialForm,
acceptedPasswords = {}, acceptedPasswords = {},
fld, field, html; fld, field,
html=params.html || "";
scope.passwords = params.passwords; scope.passwords = params.passwords;
// Wait('stop'); // Wait('stop');
html = "";
html += "<div class=\"alert alert-info\">Launching this job requires the passwords listed below. Enter and confirm each password before continuing.</div>\n"; html += "<div class=\"alert alert-info\">Launching this job requires the passwords listed below. Enter and confirm each password before continuing.</div>\n";
html += "<form name=\"password_form\" novalidate>\n"; // html += "<form name=\"password_form\" novalidate>\n";
scope.passwords.forEach(function(password) { scope.passwords.forEach(function(password) {
// Prompt for password // Prompt for password
field = form.fields[password]; field = form.fields[password];
fld = password; fld = password;
scope[fld] = ''; scope[fld] = '';
html += "<div class=\"form-group\">\n"; html += "<div class=\"form-group prepend-asterisk\">\n";
html += "<label for=\"" + fld + "\">* " + field.label + "</label>\n"; html += "<label for=\"" + fld + "\">" + field.label + "</label>\n";
html += "<input type=\"password\" "; html += "<input type=\"password\" ";
html += "ng-model=\"" + fld + '" '; html += "ng-model=\"" + fld + '" ';
html += "ng-keydown=\"keydown($event)\" "; html += "ng-keydown=\"keydown($event)\" ";
@@ -199,8 +203,8 @@ function($location, Wait, GetBasePath, LookUpInit, JobTemplateForm, CredentialLi
html += "required "; html += "required ";
html += " >"; html += " >";
// Add error messages // Add error messages
html += "<div class=\"error\" ng-show=\"password_form." + fld + ".$dirty && " + html += "<div class=\"error\" ng-show=\"job_launch_form." + fld + ".$dirty && " +
"password_form." + fld + ".$error.required\">A value is required!</div>\n"; "job_launch_form." + fld + ".$error.required\">A value is required!</div>\n";
html += "<div class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></div>\n"; html += "<div class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></div>\n";
html += "</div>\n"; html += "</div>\n";
@@ -209,8 +213,8 @@ function($location, Wait, GetBasePath, LookUpInit, JobTemplateForm, CredentialLi
fld = field.associated; fld = field.associated;
field = form.fields[field.associated]; field = form.fields[field.associated];
scope[fld] = ''; scope[fld] = '';
html += "<div class=\"form-group\">\n"; html += "<div class=\"form-group prepend-asterisk\">\n";
html += "<label for=\"" + fld + "\">* " + field.label + "</label>\n"; html += "<label for=\"" + fld + "\"> " + field.label + "</label>\n";
html += "<input type=\"password\" "; html += "<input type=\"password\" ";
html += "ng-model=\"" + fld + '" '; html += "ng-model=\"" + fld + '" ';
html += "ng-keydown=\"keydown($event)\" "; html += "ng-keydown=\"keydown($event)\" ";
@@ -221,15 +225,15 @@ function($location, Wait, GetBasePath, LookUpInit, JobTemplateForm, CredentialLi
html += (field.awPassMatch) ? "awpassmatch=\"" + field.associated + "\" " : ""; html += (field.awPassMatch) ? "awpassmatch=\"" + field.associated + "\" " : "";
html += "/>"; html += "/>";
// Add error messages // Add error messages
html += "<div class=\"error\" ng-show=\"password_form." + fld + ".$dirty && " + html += "<div class=\"error\" ng-show=\"job_launch_form." + fld + ".$dirty && " +
"password_form." + fld + ".$error.required\">A value is required!</span>\n"; "job_launch_form." + fld + ".$error.required\">A value is required!</span>\n";
html += (field.awPassMatch) ? "<span class=\"error\" ng-show=\"password_form." + fld + html += (field.awPassMatch) ? "<span class=\"error\" ng-show=\"job_launch_form." + fld +
".$error.awpassmatch\">Must match Password value</div>\n" : ""; ".$error.awpassmatch\">Must match Password value</div>\n" : "";
html += "<div class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></div>\n"; html += "<div class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></div>\n";
html += "</div>\n"; html += "</div>\n";
} }
}); });
html += "</form>\n"; // html += "</form>\n";
// $('#password-modal').empty().html(buildHtml); // $('#password-modal').empty().html(buildHtml);
@@ -300,12 +304,12 @@ function($location, Wait, GetBasePath, LookUpInit, JobTemplateForm, CredentialLi
scope.clearPWConfirm = function (fld) { scope.clearPWConfirm = function (fld) {
// If password value changes, make sure password_confirm must be re-entered // If password value changes, make sure password_confirm must be re-entered
scope[fld] = ''; scope[fld] = '';
scope.password_form[fld].$setValidity('awpassmatch', false); scope.job_launch_form[fld].$setValidity('awpassmatch', false);
scope.checkStatus(); scope.checkStatus();
}; };
scope.checkStatus = function() { scope.checkStatus = function() {
if (!scope.password_form.$invalid) { if (!scope.job_launch_form.$invalid) {
$('#password-accept-button').removeAttr('disabled'); $('#password-accept-button').removeAttr('disabled');
} }
else { else {
@@ -461,7 +465,6 @@ function($location, Wait, GetBasePath, LookUpInit, JobTemplateForm, CredentialLi
choices, choices,
element, element,
checked, min, max, checked, min, max,
survey_url = GetBasePath('job_templates') + id + '/survey_spec/' ; survey_url = GetBasePath('job_templates') + id + '/survey_spec/' ;
@@ -469,50 +472,73 @@ function($location, Wait, GetBasePath, LookUpInit, JobTemplateForm, CredentialLi
question.index = index; question.index = index;
if(!$('#question_'+question.index+':eq(0)').is('div')){ if(!$('#question_'+question.index+':eq(0)').is('div')){
html+='<div id="question_'+question.index+'" class="question_final row"></div>'; html+='<div id="question_'+question.index+'" class="survey_taker_question row">';
$('#finalized_questions').append(html); $('#survey_taker_finalized_questions').append(html);
} }
requiredAsterisk = (question.required===true) ? "prepend-asterisk" : ""; requiredAsterisk = (question.required===true) ? "prepend-asterisk" : "";
requiredClasses = (question.required===true) ? "ng-pristine ng-invalid-required ng-invalid" : ""; requiredClasses = (question.required===true) ? "ng-pristine ng-invalid-required ng-invalid" : "";
html += '<div class="col-xs-12 '+requiredAsterisk+'"><b>'+question.question_name+'</b></div>\n'; html += '<div class="col-xs-12 '+requiredAsterisk+'"><b>'+question.question_name+'</b></div>\n';
if(!Empty(question.question_description)){ if(!Empty(question.question_description)){
html += '<div class="col-xs-12 description"><i>'+question.question_description+'</i></div>\n'; html += '<div class="col-xs-12 survey_taker_description"><i>'+question.question_description+'</i></div>\n';
} }
scope[question.variable] = question.default;
if(question.type === 'text' ){ if(question.type === 'text' ){
defaultValue = (question.default) ? question.default : ""; //defaultValue = (question.default) ? question.default : "";
html+='<div class="row">'+ html+='<div class="row">'+
'<div class="col-xs-8">'+ '<div class="col-xs-8">'+
'<input type="text" placeholder="'+defaultValue+'" class="form-control ng-pristine ng-invalid-required ng-invalid final" required="" readonly>'+ '<input type="text" id="'+question.variable+'" ng-model="'+question.variable+'" '+
'</div></div>'; 'name="'+question.variable+'" '+
'class="form-control survey_taker_input ng-pristine ng-invalid-required ng-invalid" required="" >'+
'<div class="error survey_error" ng-show="job_launch_form.'+ question.variable + '.$dirty && ' +
'job_launch_form.'+question.variable+'.$error.required\">A value is required!</div>'+
'<div class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></div>'+
'</div>'+
'</div>';
} }
if(question.type === "textarea"){ if(question.type === "textarea"){
defaultValue = (question.default) ? question.default : (question.default_textarea) ? question.default_textarea: "" ; scope[question.variable] = question.default || question.default_textarea;
html+='<div class="row">'+ html+='<div class="row">'+
'<div class="col-xs-8">'+ '<div class="col-xs-8">'+
'<textarea class="form-control ng-pristine ng-invalid-required ng-invalid final" required="" rows="3" readonly>'+defaultValue+'</textarea>'+ '<textarea id="'+question.variable+'" name="'+question.variable+'" ng-model="'+question.variable+'" '+
'class="form-control survey_taker_input ng-pristine ng-invalid-required ng-invalid final" required="" rows="3"></textarea>'+
'<div class="error survey_error" ng-show="job_launch_form.'+ question.variable + '.$dirty && ' +
'job_launch_form.'+question.variable+'.$error.required\">A value is required!</div>'+
'<div class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></div>'+
'</div></div>'; '</div></div>';
} }
if(question.type === 'multiplechoice' || question.type === "multiselect"){ if(question.type === 'multiplechoice' || question.type === "multiselect"){
choices = question.choices.split(/\n/); choices = question.choices.split(/\n/);
element = (question.type==="multiselect") ? "checkbox" : 'radio'; element = (question.type==="multiselect") ? "checkbox" : 'radio';
question.default = (question.default) ? question.default : (question.default_multiselect) ? question.default_multiselect : "" ; question.default = (question.default) ? question.default : (question.default_multiselect) ? question.default_multiselect : "" ;
html+='<div class="survey_taker_input" > ';
for( j = 0; j<choices.length; j++){ for( j = 0; j<choices.length; j++){
checked = (!Empty(question.default) && question.default.indexOf(choices[j])!==-1) ? "checked" : ""; checked = (!Empty(question.default) && question.default.indexOf(choices[j])!==-1) ? "checked" : "";
html+='<label class="'+element+'-inline final">'+ // html+='<label class="'+element+'-inline">'+
'<input type="'+element+'" name="'+question.variable+ ' " id="" value=" '+choices[i]+' " '+checked+' disabled>' +choices[i]+ // '<input class="survey_taker_input" type="'+element+'" name="'+question.variable+ ' " id="" value=" '+choices[j]+' " '+checked+' >' +choices[j]+
'</label>'; // '</label>';
} html+= '<input type="'+element+'" ng-model="'+question.variable+'" ng-required="!'+question.variable+'" name="'+question.variable+ ' " id="'+question.variable+'" value=" '+choices[j]+' " '+checked+' >' +
'<span>'+choices[j] +'</span><br>' ;
}
html+= '<div class="error survey_error" ng-show="job_launch_form.'+ question.variable + '.$dirty && ' +
'job_launch_form.'+question.variable+'.$error.required\">A value is required!</div>'+
'<div class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></div>';
html+= '</div>';
} }
if(question.type === 'integer'){ if(question.type === 'integer'){
min = (!Empty(question.min)) ? question.min : ""; min = (!Empty(question.min)) ? Number(question.min) : "";
max = (!Empty(question.max)) ? question.max : "" ; max = (!Empty(question.max)) ? Number(question.max) : "" ;
defaultValue = (!Empty(question.default)) ? question.default : (!Empty(question.default_int)) ? question.default_int : "" ; //defaultValue = (!Empty(question.default)) ? question.default : (!Empty(question.default_int)) ? question.default_int : "" ;
html+='<div class="row">'+ html+='<div class="row">'+
'<div class="col-xs-8">'+ '<div class="col-xs-8">'+
'<input type="number" class="final" name="'+question.variable+'" min="'+min+'" max="'+max+'" value="'+defaultValue+'" readonly>'+ '<input type="number" id="'+question.variable+'" class="survey_taker_input form-control" name="'+question.variable+'" ng-min="'+min+'" ng-max="'+max+'" ng-model="'+question.variable+' " integer>'+
'<div class="error survey_error" ng-show="job_launch_form.'+question.variable+'.$error.number || job_launch_form.'+question.variable+'.$error.integer">This is not valid integer!</div>'+
'<div class="error survey_error" ng-show="job_launch_form.'+question.variable+'.$error.ngMin || job_launch_form.'+question.variable+'.$error.ngMax"> The value must be in range {{'+min+'}} to {{'+max+'}}!</div>'+
'</div></div>'; '</div></div>';
} }
@@ -522,10 +548,13 @@ function($location, Wait, GetBasePath, LookUpInit, JobTemplateForm, CredentialLi
defaultValue = (!Empty(question.default)) ? question.default : (!Empty(question.default_float)) ? question.default_float : "" ; defaultValue = (!Empty(question.default)) ? question.default : (!Empty(question.default_float)) ? question.default_float : "" ;
html+='<div class="row">'+ html+='<div class="row">'+
'<div class="col-xs-8">'+ '<div class="col-xs-8">'+
'<input type="number" class="final" name="'+question.variable+'" min="'+min+'" max="'+max+'" value="'+defaultValue+'" readonly>'+ '<input type="number" id="'+question.variable+'" class="survey_taker_input form-control" name="'+question.variable+'" ng-min="'+min+'" ng-max="'+max+'" ng-model="'+question.variable+'" smart-float>'+
'<div class="error survey_error" ng-show="job_launch_form.'+question.variable+'.$error.number || job_launch_form.'+question.variable+'.$error.float">This is not valid float!</div>'+
'<div class="error survey_error" ng-show="job_launch_form.'+question.variable+'.$error.ngMin || job_launch_form.'+question.variable+'.$error.ngMax"> The value must be in range {{'+min+'}} to {{'+max+'}}!</div>'+
'</div></div>'; '</div></div>';
} }
html+='</div>';
if(question.index === scope.survey_questions.length-1){ if(question.index === scope.survey_questions.length-1){
CreateLaunchDialog({scope: scope, html: html}); CreateLaunchDialog({scope: scope, html: html});
} }
@@ -688,6 +717,7 @@ function($location, Wait, GetBasePath, LookUpInit, JobTemplateForm, CredentialLi
survey_enabled, survey_enabled,
launch_url, launch_url,
prompt_for_vars = false, prompt_for_vars = false,
html,
passwords; passwords;
scope.job_template_id = id; scope.job_template_id = id;
if (base === 'job_templates') { if (base === 'job_templates') {
@@ -780,10 +810,11 @@ function($location, Wait, GetBasePath, LookUpInit, JobTemplateForm, CredentialLi
if (scope.removePromptForPasswords) { if (scope.removePromptForPasswords) {
scope.removePromptForPasswords(); scope.removePromptForPasswords();
} }
scope.removePromptForPasswords = scope.$on('PromptForPasswords', function(e, passwords_needed_to_start) { scope.removePromptForPasswords = scope.$on('PromptForPasswords', function(e, passwords_needed_to_start,html) {
PromptForPasswords({ scope: scope, PromptForPasswords({ scope: scope,
passwords: passwords_needed_to_start, passwords: passwords_needed_to_start,
callback: 'PromptForVars' callback: 'PromptForVars',
html: html
}); });
}); });
@@ -859,17 +890,17 @@ function($location, Wait, GetBasePath, LookUpInit, JobTemplateForm, CredentialLi
new_job_id = data.id; new_job_id = data.id;
launch_url = url;//data.related.start; launch_url = url;//data.related.start;
prompt_for_vars = data.ask_variables_on_launch; prompt_for_vars = data.ask_variables_on_launch;
extra_vars = data.variables_needed_to_start; extra_vars = data.variables_needed_to_start;
survey_enabled = data.survey_enabled; survey_enabled = data.survey_enabled;
// new_job = data; // new_job = data;
html = '<form class=" ng-valid ng-valid-required" name="job_launch_form" id="job_launch_form" autocomplete="off" nonvalidate>';
if (data.passwords_needed_to_start.length > 0) { if (data.passwords_needed_to_start.length > 0) {
scope.$emit('PromptForPasswords', data.passwords_needed_to_start); scope.$emit('PromptForPasswords', data.passwords_needed_to_start, html);
} }
else if (data.ask_variables_on_launch) { else if (data.ask_variables_on_launch) {
scope.$emit('PromptForVars'); scope.$emit('PromptForVars', html);
} else if (data.survey_enabled===true) { } else if (data.survey_enabled===true) {
scope.$emit('PromptForSurvey'); scope.$emit('PromptForSurvey', html);
} }
else { else {
scope.$emit('StartPlaybookRun'); scope.$emit('StartPlaybookRun');