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

Scheduled dialog now uses Modal library. Turned on timezone and UTC date start. Made scheduledjobs.name clickable.

Browse Source
This commit is contained in:
Chris Houseknecht
2014-04-01 11:05:27 -04:00
parent 7d168e9fd1
commit a9e499c1af
5 changed files with 65 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
awx/ui/static/js/app.js
View File

@@ -101,8 +101,8 @@ angular.module('ansible', [
]) ])
.constant('AngularScheduler.partials', $basePath + 'lib/angular-scheduler/lib/') .constant('AngularScheduler.partials', $basePath + 'lib/angular-scheduler/lib/')
.constant('AngularScheduler.useTimezone', false) .constant('AngularScheduler.useTimezone', true)
.constant('AngularScheduler.showUTCField', false) .constant('AngularScheduler.showUTCField', true)
.constant('$timezones.definitions.location', $basePath + 'lib/angular-tz-extensions/tz/data') .constant('$timezones.definitions.location', $basePath + 'lib/angular-tz-extensions/tz/data')
.config(['$routeProvider', .config(['$routeProvider',

160
awx/ui/static/js/helpers/Schedules.js
View File

@@ -9,104 +9,57 @@
'use strict'; 'use strict';
angular.module('SchedulesHelper', ['Utilities', 'RestServices', 'SchedulesHelper', 'SearchHelper', 'PaginationHelpers', 'ListGenerator']) angular.module('SchedulesHelper', [ 'Utilities', 'RestServices', 'SchedulesHelper', 'SearchHelper', 'PaginationHelpers', 'ListGenerator', 'ModalDialog' ])
.factory('ShowSchedulerModal', ['Wait', function(Wait) { .factory('ShowSchedulerModal', ['Wait', 'CreateDialog', function(Wait, CreateDialog) {
return function(params) { return function(params) {
// Set modal dimensions based on viewport width // Set modal dimensions based on viewport width
var ww, wh, x, y, maxrows, scope = params.scope; var buttons,
scope = params.scope,
callback = params.callback;
ww = $(document).width(); buttons = [{
wh = $('body').height(); "label": "Cancel",
if (ww > 1199) { "onClick": function() {
// desktop $(this).dialog('close');
x = 675; },
y = (675 > wh) ? wh - 20 : 675; "icon": "fa-times",
maxrows = 20; "class": "btn btn-default",
} else if (ww <= 1199 && ww >= 768) { "id": "schedule-close-button"
x = 550; },{
y = (675 > wh) ? wh - 15 : 675; "label": "Save",
maxrows = 15; "onClick": function() {
} else { setTimeout(function(){
x = (ww - 20); scope.$apply(function(){
y = (675 > wh) ? wh : 675; scope.saveSchedule();
maxrows = 10;
}
// Create the modal
$('#scheduler-modal-dialog').dialog({
buttons: {
'Cancel': function() {
$(this).dialog('close');
},
'Save': function () {
setTimeout(function(){
scope.$apply(function(){
scope.saveSchedule();
});
}); });
}
},
modal: true,
width: x,
height: y,
autoOpen: false,
closeOnEscape: false,
create: function () {
$('.ui-dialog[aria-describedby="scheduler-modal-dialog"]').find('.ui-dialog-titlebar button').empty().attr({'class': 'close'}).text('x');
$('.ui-dialog[aria-describedby="scheduler-modal-dialog"]').find('.ui-dialog-buttonset button').each(function () {
var c, h, i, l;
l = $(this).text();
if (l === 'Cancel') {
h = "fa-times";
c = "btn btn-default";
i = "schedule-close-button";
$(this).attr({
'class': c,
'id': i
}).html("<i class=\"fa " + h + "\"></i> Cancel");
} else if (l === 'Save') {
h = "fa-check";
c = "btn btn-primary";
i = "schedule-save-button";
$(this).attr({
'class': c,
'id': i
}).html("<i class=\"fa " + h + "\"></i> Save");
}
}); });
$('#scheduler-tabs a:first').tab('show');
}, },
resizeStop: function () { "icon": "fa-check",
// for some reason, after resizing dialog the form and fields (the content) doesn't expand to 100% "class": "btn btn-primary",
var dialog = $('.ui-dialog[aria-describedby="scheduler-modal-dialog"]'), "id": "schedule-save-button"
titleHeight = dialog.find('.ui-dialog-titlebar').outerHeight(), }];
buttonHeight = dialog.find('.ui-dialog-buttonpane').outerHeight(),
content = dialog.find('#scheduler-modal-dialog'); CreateDialog({
content.width(dialog.width() - 28); id: 'scheduler-modal-dialog',
content.css({ height: (dialog.height() - titleHeight - buttonHeight - 10) }); scope: scope,
}, buttons: buttons,
close: function () { width: 700,
// Destroy on close height: 725,
$('.tooltip').each(function () { minWidth: 400,
// Remove any lingering tooltip <div> elements onClose: function() {
$(this).remove();
});
$('.popover').each(function () {
// remove lingering popover <div> elements
$(this).remove();
});
$('#scheduler-modal-dialog').dialog('destroy');
$('#scheduler-modal-dialog #form-container').empty(); $('#scheduler-modal-dialog #form-container').empty();
}, },
open: function () { onOpen: function() {
Wait('stop'); Wait('stop');
$('#scheduler-tabs a:first').tab('show');
$('#schedulerName').focus(); $('#schedulerName').focus();
$('#rrule_nlp_description').dblclick(function() { $('#rrule_nlp_description').dblclick(function() {
setTimeout(function() { scope.$apply(function() { scope.showRRule = (scope.showRRule) ? false : true; }); }, 100); setTimeout(function() { scope.$apply(function() { scope.showRRule = (scope.showRRule) ? false : true; }); }, 100);
}); });
} },
callback: callback
}); });
}; };
}]) }])
@@ -119,6 +72,20 @@ angular.module('SchedulesHelper', ['Utilities', 'RestServices', 'SchedulesHelper
schedule, scheduler, schedule, scheduler,
url = GetBasePath('schedules') + id + '/'; url = GetBasePath('schedules') + id + '/';
if (scope.removeDialogReady) {
scope.removeDialogReady();
}
scope.removeDialogReady = scope.$on('DialogReady', function() {
$('#scheduler-modal-dialog').dialog('open');
$('#schedulerName').focus();
setTimeout(function() {
scope.$apply(function() {
scheduler.setRRule(schedule.rrule);
scheduler.setName(schedule.name);
});
}, 300);
});
if (scope.removeScheduleFound) { if (scope.removeScheduleFound) {
scope.removeScheduleFound(); scope.removeScheduleFound();
} }
@@ -128,7 +95,7 @@ angular.module('SchedulesHelper', ['Utilities', 'RestServices', 'SchedulesHelper
scheduler.inject('form-container', false); scheduler.inject('form-container', false);
scheduler.injectDetail('occurrences', false); scheduler.injectDetail('occurrences', false);
ShowSchedulerModal({ scope: scope }); ShowSchedulerModal({ scope: scope, callback: 'DialogReady' });
scope.showRRuleDetail = false; scope.showRRuleDetail = false;
if (!/DTSTART/.test(schedule.rrule)) { if (!/DTSTART/.test(schedule.rrule)) {
@@ -136,17 +103,6 @@ angular.module('SchedulesHelper', ['Utilities', 'RestServices', 'SchedulesHelper
} }
schedule.rrule = schedule.rrule.replace(/ RRULE:/,';'); schedule.rrule = schedule.rrule.replace(/ RRULE:/,';');
schedule.rrule = schedule.rrule.replace(/DTSTART:/,'DTSTART='); schedule.rrule = schedule.rrule.replace(/DTSTART:/,'DTSTART=');
setTimeout(function(){
Wait('stop');
$('#scheduler-modal-dialog').dialog('open');
scope.$apply(function() {
scheduler.setRRule(schedule.rrule);
scheduler.setName(schedule.name);
});
$('#schedulerName').focus();
}, 500);
}); });
scope.saveSchedule = function() { scope.saveSchedule = function() {
@@ -207,19 +163,23 @@ angular.module('SchedulesHelper', ['Utilities', 'RestServices', 'SchedulesHelper
url += (!Empty($routeParams.id)) ? $routeParams.id + '/schedules/' : ''; url += (!Empty($routeParams.id)) ? $routeParams.id + '/schedules/' : '';
if (scope.removeDialogReady) {
scope.removeDialogReady();
}
scope.removeDialogReady = scope.$on('DialogReady', function() {
$('#scheduler-modal-dialog').dialog('open');
$('#schedulerName').focus();
});
Wait('start'); Wait('start');
$('#form-container').empty(); $('#form-container').empty();
scheduler = SchedulerInit({ scope: scope, requireFutureStartTime: false }); scheduler = SchedulerInit({ scope: scope, requireFutureStartTime: false });
scheduler.inject('form-container', false); scheduler.inject('form-container', false);
scheduler.injectDetail('occurrences', false); scheduler.injectDetail('occurrences', false);
scheduler.clear(); scheduler.clear();
ShowSchedulerModal({ scope: scope }); ShowSchedulerModal({ scope: scope, callback: 'DialogReady' });
scope.showRRuleDetail = false; scope.showRRuleDetail = false;
setTimeout(function(){
$('#scheduler-modal-dialog').dialog('open');
}, 300);
scope.saveSchedule = function() { scope.saveSchedule = function() {
var newSchedule, rrule, schedule = {}; var newSchedule, rrule, schedule = {};
$('#scheduler-tabs a:first').tab('show'); $('#scheduler-tabs a:first').tab('show');

1
awx/ui/static/js/lists/ScheduledJobs.js
View File

@@ -52,6 +52,7 @@ angular.module('ScheduledJobsDefinition', [])
name: { name: {
label: 'Name', label: 'Name',
columnClass: "col-md-3 col-xs-5", columnClass: "col-md-3 col-xs-5",
ngClick: "editSchedule(schedule.id)"
} }
}, },

2
awx/ui/static/lib/angular-scheduler/lib/angular-scheduler.html
View File

@@ -82,7 +82,7 @@
ng-change="scheduleRepeatChange()"></select> ng-change="scheduleRepeatChange()"></select>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-8">
<div class="form-group no-label" ng-show="schedulerShowInterval"> <div class="form-group no-label" ng-show="schedulerShowInterval">
<label>Every</label> <label>Every</label>
<input name="schedulerInterval" id="schedulerInterval" sch-spinner="scheduler_form" class="scheduler-spinner" <input name="schedulerInterval" id="schedulerInterval" sch-spinner="scheduler_form" class="scheduler-spinner"

1
awx/ui/static/lib/ansible/Modal.js
View File

@@ -16,6 +16,7 @@ angular.module('ModalDialog', ['Utilities', 'ParseHelper'])
/** /**
* *
* CreateDialog({ * CreateDialog({
* id: - id attribute value of the target DOM element
* scope: - Required, $scope associated with the #id DOM element * scope: - Required, $scope associated with the #id DOM element
* buttons: - Required, Array of button objects. See example below. * buttons: - Required, Array of button objects. See example below.
* width: - Desired width of modal dialog on open. Defaults to 500. * width: - Desired width of modal dialog on open. Defaults to 500.