diff --git a/awx/ui/client/lib/angular-scheduler/lib/angular-scheduler.js b/awx/ui/client/lib/angular-scheduler/lib/angular-scheduler.js index 8381bc7fff..1a2e853ef8 100644 --- a/awx/ui/client/lib/angular-scheduler/lib/angular-scheduler.js +++ b/awx/ui/client/lib/angular-scheduler/lib/angular-scheduler.js @@ -1,13 +1,13 @@ /*************************************************************************** * angular-scheruler.js - * + * * Copyright (c) 2014 Ansible, Inc. * * Maintainers: * * Chris Houseknecht * @chouseknecht - * chouse@ansible.com + * chouse@ansible.com * */ @@ -23,7 +23,7 @@ angular.module('underscore',[]) angular.module('AngularScheduler', ['underscore']) - + .constant('AngularScheduler.partials', '/lib/') .constant('AngularScheduler.useTimezone', false) .constant('AngularScheduler.showUTCField', false) @@ -96,6 +96,11 @@ angular.module('AngularScheduler', ['underscore']) } }; + // change the utc time with the new start date + scope.$watch('schedulerStartDt', function() { + scope.scheduleTimeChange(scope.processSchedulerEndDt); + }); + scope.resetError = function(variable) { scope[variable] = false; }; @@ -193,24 +198,24 @@ angular.module('AngularScheduler', ['underscore']) } return CreateObject(scope, requireFutureStartTime); - + }; }]) - + /** Return an AngularScheduler object we can use to get the RRule result from user input, check if - user input is valid, reset the form, etc. All the things we need to access and manipulate the - scheduler widget + user input is valid, reset the form, etc. All the things we need to access and manipulate the + scheduler widget */ .factory('CreateObject', ['AngularScheduler.useTimezone', '$filter', 'GetRule', 'Inject', 'InjectDetail', 'SetDefaults', '$timezones', 'SetRule', 'InRange', function(useTimezone, $filter, GetRule, Inject, InjectDetail, SetDefaults, $timezones, SetRule, InRange) { return function(scope, requireFutureST) { var fn = function() { - + this.scope = scope; this.useTimezone = useTimezone; this.requireFutureStartTime = requireFutureST; - + // Evaluate user intput and build options for passing to rrule this.getOptions = function() { var options = {}; @@ -223,9 +228,9 @@ angular.module('AngularScheduler', ['underscore']) if (this.scope.schedulerEnd.value === 'on') { options.endDate = scope.schedulerEndDt.replace(/(\d{2})\/(\d{2})\/(\d{4})/, function(match, p1, p2, p3) { return p3 + '-' + p1 + '-' + p2; - }) + 'T' + - $filter('schZeroPad')(this.scope.schedulerEndHour,2) + ':' + - $filter('schZeroPad')(this.scope.schedulerEndMinute,2) + ':' + + }) + 'T' + + $filter('schZeroPad')(this.scope.schedulerEndHour,2) + ':' + + $filter('schZeroPad')(this.scope.schedulerEndMinute,2) + ':' + $filter('schZeroPad')(this.scope.schedulerEndSecond,2)+ 'Z'; } if (this.scope.schedulerFrequency.value === 'weekly') { @@ -264,7 +269,7 @@ angular.module('AngularScheduler', ['underscore']) this.scope.scheduler_occurrenceCount_error = false; this.scope.scheduler_monthDay_error = false; this.scope.scheduler_yearlyMonthDay_error = false; - + if (this.scope.scheduler_form && this.scope.scheduler_form.schedulerEndDt) { this.scope.scheduler_form.schedulerEndDt.$setValidity('custom-error', true); this.scope.scheduler_form.schedulerEndDt.$setPristine(); @@ -319,7 +324,7 @@ angular.module('AngularScheduler', ['underscore']) this.scope.scheduler_occurrenceCount_error = true; validity = false; } - + if (this.scope.schedulerFrequency.value === 'weekly' && this.scope.weekDays.length === 0) { this.scope.scheduler_weekDays_error = true; validity = false; @@ -367,7 +372,7 @@ angular.module('AngularScheduler', ['underscore']) $filter('schZeroPad')(now.getHours(),2) + ':' + $filter('schZeroPad')(now.getMinutes(),2) + ':' + $filter('schZeroPad')(now.getSeconds(),2) + '.000Z'; - adjNow = $timezones.toUTC(dateStr, this.scope.schedulerTimeZone.name); //Adjust to the selected TZ + adjNow = $timezones.toUTC(dateStr, this.scope.schedulerTimeZone.name); //Adjust to the selected TZ timeNow = adjNow.getTime(); } else { @@ -434,7 +439,7 @@ angular.module('AngularScheduler', ['underscore']) this.scope.schedulerName = name; }; - // Read in the HTML partial, compile and inject it into the DOM. + // Read in the HTML partial, compile and inject it into the DOM. // Pass in the target element's id attribute value or an angular.element() // object. this.inject = function(element, showButtons) { @@ -491,7 +496,7 @@ angular.module('AngularScheduler', ['underscore']) .factory('Inject', ['AngularScheduler.partials', '$compile', '$http', '$log', function(scheduler_partial, $compile, $http) { return function(params) { - + var scope = params.scope, target = params.target, buttons = params.buttons; @@ -521,7 +526,7 @@ angular.module('AngularScheduler', ['underscore']) .factory('InjectDetail', ['AngularScheduler.partials', '$compile', '$http', '$log', function(scheduler_partial, $compile, $http) { return function(params) { - + var scope = params.scope, target = params.target, showRRule = params.showRRule; @@ -551,11 +556,11 @@ angular.module('AngularScheduler', ['underscore']) .factory('GetRule', ['$log', function($log) { return function(params) { // Convert user inputs to an rrule. Returns rrule object using https://github.com/jkbr/rrule - // **list of 'valid values' found below in LoadLookupValues - + // **list of 'valid values' found below in LoadLookupValues + var startDate = params.startDate, // date object or string in yyyy-MM-ddTHH:mm:ss.sssZ format frequency = params.frequency, // string, optional, valid value from frequencyOptions - interval = params.interval, // integer, optional + interval = params.interval, // integer, optional occurrenceCount = params.occurrenceCount, //integer, optional endDate = params.endDate, // date object or string in yyyy-MM-dd format, optional // ignored if occurrenceCount provided @@ -564,7 +569,7 @@ angular.module('AngularScheduler', ['underscore']) weekDays = params.weekDays, // integer, optional, valid value from weekdays setOccurrence = params.setOccurrence, // integer, optional, valid value from occurrences options = {}, i; - + if (angular.isDate(startDate)) { options.dtstart = startDate; } @@ -580,7 +585,7 @@ angular.module('AngularScheduler', ['underscore']) if (frequency && frequency !== 'none') { options.freq = RRule[frequency.toUpperCase()]; options.interval = interval; - + if (weekDays && typeof weekDays === 'string') { options.byweekday = RRule[weekDays.toUpperCase()]; } @@ -636,7 +641,7 @@ angular.module('AngularScheduler', ['underscore']) return function(rule, scope) { var set, result = '', i, setStartDate = false; - + // Search the set of RRule keys for a particular key, returning its value function getValue(set, key) { var pair = _.find(set, function(x) { @@ -837,7 +842,7 @@ angular.module('AngularScheduler', ['underscore']) } } } - + function isValid() { // Check what was put into scope vars, and see if anything is // missing or not quite right. @@ -923,7 +928,7 @@ angular.module('AngularScheduler', ['underscore']) .factory('LoadLookupValues', [ function() { return function(scope) { - + scope.frequencyOptions = [ { name: 'None (run once)', value: 'none', intervalLabel: '' }, { name: 'Minute', value: 'minutely', intervalLabel: 'minutes' }, @@ -978,7 +983,7 @@ angular.module('AngularScheduler', ['underscore']) }; }]) - + // $filter('schZeroPad')(n, pad) -- or -- {{ n | afZeroPad:pad }} .filter('schZeroPad', [ function() { return function (n, pad) { @@ -1034,7 +1039,7 @@ angular.module('AngularScheduler', ['underscore']) }; }]) - // Custom directives + // Custom directives .directive('schSpinner', ['$filter', function($filter) { return { require: 'ngModel', @@ -1072,7 +1077,7 @@ angular.module('AngularScheduler', ['underscore']) } } }); - + $(element).on("click", function () { $(element).select(); }); diff --git a/awx/ui/client/src/management-jobs/scheduler/schedulerForm.partial.html b/awx/ui/client/src/management-jobs/scheduler/schedulerForm.partial.html index 3b23ee861a..0592a0cfeb 100644 --- a/awx/ui/client/src/management-jobs/scheduler/schedulerForm.partial.html +++ b/awx/ui/client/src/management-jobs/scheduler/schedulerForm.partial.html @@ -42,26 +42,9 @@ (mm/dd/yyyy) -
- - - - +
+ +
-
- - - - +
+ +
diff --git a/awx/ui/client/src/scheduler/main.js b/awx/ui/client/src/scheduler/main.js index 5648dd5cf6..9aad2eaa99 100644 --- a/awx/ui/client/src/scheduler/main.js +++ b/awx/ui/client/src/scheduler/main.js @@ -8,12 +8,14 @@ import controller from './scheduler.controller'; import addController from './schedulerAdd.controller'; import editController from './schedulerEdit.controller'; import {templateUrl} from '../shared/template-url/template-url.factory'; +import schedulerDatePicker from './schedulerDatePicker.directive'; export default angular.module('scheduler', []) .controller('schedulerController', controller) .controller('schedulerAddController', addController) .controller('schedulerEditController', editController) + .directive('schedulerDatePicker', schedulerDatePicker) .run(['$stateExtender', function($stateExtender) { $stateExtender.addState({ name: 'jobTemplateSchedules', diff --git a/awx/ui/client/src/scheduler/scheduler.controller.js b/awx/ui/client/src/scheduler/scheduler.controller.js index e67e691246..5433e3c399 100644 --- a/awx/ui/client/src/scheduler/scheduler.controller.js +++ b/awx/ui/client/src/scheduler/scheduler.controller.js @@ -23,11 +23,7 @@ export default [ ClearScope(); - $scope.schedulerStartDT = 'test'; - var base, id, url,parentObject, title; - $scope.schedulerStartDT = 'test'; - base = $location.path().replace(/^\//, '').split('/')[0]; if (base === 'management_jobs') { diff --git a/awx/ui/client/src/scheduler/schedulerDatePicker.directive.js b/awx/ui/client/src/scheduler/schedulerDatePicker.directive.js new file mode 100644 index 0000000000..6e08eecdd7 --- /dev/null +++ b/awx/ui/client/src/scheduler/schedulerDatePicker.directive.js @@ -0,0 +1,92 @@ +/************************************************* + * Copyright (c) 2015 Ansible, Inc. + * + * All Rights Reserved + *************************************************/ + +/* jshint unused: vars */ + +export default + [ 'moment', + 'templateUrl', + function(moment, templateUrl) { + return { + restrict: 'E', + scope: { + date: '=', + minDate: '=', + autoUpdate: '=?', + inputClass: '&' + }, + templateUrl: templateUrl('system-tracking/date-picker/date-picker'), + link: function(scope, element, attrs) { + // We need to make sure this _never_ recurses, which sometimes happens + // with two-way binding. + var mustUpdateValue = true; + scope.autoUpdate = scope.autoUpdate === false ? false : true; + + // convert the passed current date into the correct moment locale + scope.$watch('date', function(newValue) { + if (newValue) { + mustUpdateValue = false; + scope.dateValueMoment = moment(newValue, ['MM/DD/YYYY'], moment.locale()); + scope.dateValue = scope.dateValueMoment.format('L'); + } + }, true); + + // as the date picker value changes, convert back to + // the english date to pass back into the scheduler lib + scope.$watch('dateValue', function(newValue) { + scope.dateValueMoment = moment(newValue, ['L'], moment.locale()); + scope.date = scope.dateValueMoment.locale('en').format('L'); + mustUpdateValue = true; + }); + + var localeData = + moment.localeData(); + var dateFormat = momentFormatToDPFormat(localeData._longDateFormat.L); + var localeKey = momentLocaleToDPLocale(moment.locale()); + + element.find(".DatePicker").addClass("input-prepend date"); + element.find(".DatePicker").find(".DatePicker-icon").addClass("add-on"); + $(".date").systemTrackingDP({ + autoclose: true, + language: localeKey, + format: dateFormat + }); + + function momentLocaleToDPLocale(localeKey) { + var parts = localeKey.split('-'); + + if (parts.length === 2) { + var lastPart = parts[1].toUpperCase(); + return [parts[0], lastPart].join('-'); + } else { + return localeKey; + } + + } + + function momentFormatToDPFormat(momentFormat) { + var resultFormat = momentFormat; + + function lowerCase(str) { + return str.toLowerCase(); + } + + resultFormat = resultFormat.replace(/D{1,2}/, lowerCase); + + if (/MMM/.test(resultFormat)) { + resultFormat = resultFormat.replace('MMM', 'M'); + } else { + resultFormat = resultFormat.replace(/M{1,2}/, 'm'); + } + + resultFormat = resultFormat.replace(/Y{2,4}/, lowerCase); + + return resultFormat; + } + } + }; + } + ]; diff --git a/awx/ui/client/src/scheduler/schedulerDatePicker.partial.html b/awx/ui/client/src/scheduler/schedulerDatePicker.partial.html new file mode 100644 index 0000000000..a2e88ab2c5 --- /dev/null +++ b/awx/ui/client/src/scheduler/schedulerDatePicker.partial.html @@ -0,0 +1,9 @@ +
+ + +
diff --git a/awx/ui/client/src/scheduler/schedulerForm.block.less b/awx/ui/client/src/scheduler/schedulerForm.block.less index d29bae3f4a..4bea0a62e2 100644 --- a/awx/ui/client/src/scheduler/schedulerForm.block.less +++ b/awx/ui/client/src/scheduler/schedulerForm.block.less @@ -6,6 +6,18 @@ padding-right: 0px; } +.SchedulerForm-inputGroup--date { + width: 100%; +} + +#SchedulerFormTarget .DatePicker { + max-height: 31px; +} + +#SchedulerFormTarget .DatePicker-icon { + padding-top: 4px; +} + @media (min-width: 901px) { .SchedulerForm-formGroup { flex: 0 0 auto; diff --git a/awx/ui/client/src/scheduler/schedulerForm.partial.html b/awx/ui/client/src/scheduler/schedulerForm.partial.html index 3e45e79c72..cd8c563b17 100644 --- a/awx/ui/client/src/scheduler/schedulerForm.partial.html +++ b/awx/ui/client/src/scheduler/schedulerForm.partial.html @@ -42,26 +42,9 @@ (mm/dd/yyyy) -
- - - - +
+ +
-
- - - - +
+ +