mirror of
https://github.com/ansible/awx.git
synced 2026-05-22 08:17:39 -02:30
Merge pull request #2533 from jlmitch5/schDatePicker
use bootstrap date picker and fix for locales
This commit is contained in:
jlmitch5
GitHub
@@ -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;
|
||||
};
|
||||
|
||||
@@ -42,26 +42,9 @@
|
||||
(mm/dd/yyyy)
|
||||
</span>
|
||||
</label>
|
||||
<div class="input-group Form-inputGroup">
|
||||
<input type="text"
|
||||
class="form-control input-sm
|
||||
Form-textInput"
|
||||
name="schedulerStartDt"
|
||||
id="schedulerStartDt"
|
||||
ng-model="schedulerStartDt"
|
||||
sch-date-picker
|
||||
placeholder="mm/dd/yyyy"
|
||||
required
|
||||
ng-change="scheduleTimeChange()" >
|
||||
<span class="input-group-btn">
|
||||
<button
|
||||
class="btn btn-default btn-sm
|
||||
Form-inputButton Form-lookupButton"
|
||||
type="button"
|
||||
ng-click="showCalendar('schedulerStartDt')">
|
||||
<i class="fa fa-calendar"></i>
|
||||
</button>
|
||||
</span>
|
||||
<div class="input-group Form-inputGroup SchedulerForm-inputGroup--date">
|
||||
<scheduler-date-picker date="schedulerStartDt">
|
||||
</scheduler-date-picker>
|
||||
</div>
|
||||
<div class="error"
|
||||
ng-show="scheduler_form_schedulerStartDt_error"
|
||||
@@ -508,26 +491,9 @@
|
||||
(mm/dd/yyyy)
|
||||
</span>
|
||||
</label>
|
||||
<div class="input-group Form-inputGroup">
|
||||
<input type="text"
|
||||
name="schedulerEndDt"
|
||||
id="schedulerEndDt"
|
||||
class="form-control input-sm
|
||||
Form-textInput"
|
||||
ng-model="$parent.schedulerEndDt"
|
||||
sch-date-picker
|
||||
data-min-today="true"
|
||||
placeholder="mm/dd/yyyy"
|
||||
ng-change="$parent.resetError('scheduler_endDt_error')">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default btn-sm
|
||||
Form-inputButton Form-lookupButton"
|
||||
type="button"
|
||||
ng-click="showCalendar('schedulerEndDt')"
|
||||
>
|
||||
<i class="fa fa-calendar"></i>
|
||||
</button>
|
||||
</span>
|
||||
<div class="input-group Form-inputGroup SchedulerForm-inputGroup--date">
|
||||
<scheduler-date-picker date="$parent.schedulerEndDt">
|
||||
</scheduler-date-picker>
|
||||
</div>
|
||||
<div class="error"
|
||||
ng-show="$parent.scheduler_endDt_error">
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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') {
|
||||
|
||||
92
awx/ui/client/src/scheduler/schedulerDatePicker.directive.js
Normal file
92
awx/ui/client/src/scheduler/schedulerDatePicker.directive.js
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
];
|
||||
@@ -0,0 +1,9 @@
|
||||
<div class="DatePicker">
|
||||
<button class="DatePicker-icon"><i class="fa fa-calendar"></i></button>
|
||||
<input
|
||||
class="DatePicker-input"
|
||||
type="text"
|
||||
readonly
|
||||
ng-model="dateValue"
|
||||
ng-class="inputClass()">
|
||||
</div>
|
||||
@@ -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;
|
||||
|
||||
@@ -42,26 +42,9 @@
|
||||
(mm/dd/yyyy)
|
||||
</span>
|
||||
</label>
|
||||
<div class="input-group Form-inputGroup">
|
||||
<input type="text"
|
||||
class="form-control input-sm
|
||||
Form-textInput"
|
||||
name="schedulerStartDt"
|
||||
id="schedulerStartDt"
|
||||
ng-model="schedulerStartDt"
|
||||
sch-date-picker
|
||||
placeholder="mm/dd/yyyy"
|
||||
required
|
||||
ng-change="scheduleTimeChange(processSchedulerEndDt)" >
|
||||
<span class="input-group-btn">
|
||||
<button
|
||||
class="btn btn-default btn-sm
|
||||
Form-inputButton Form-lookupButton"
|
||||
type="button"
|
||||
ng-click="showCalendar('schedulerStartDt')">
|
||||
<i class="fa fa-calendar"></i>
|
||||
</button>
|
||||
</span>
|
||||
<div class="input-group Form-inputGroup SchedulerForm-inputGroup--date">
|
||||
<scheduler-date-picker date="schedulerStartDt">
|
||||
</scheduler-date-picker>
|
||||
</div>
|
||||
<div class="error"
|
||||
ng-show="scheduler_form_schedulerStartDt_error"
|
||||
@@ -490,26 +473,9 @@
|
||||
(mm/dd/yyyy)
|
||||
</span>
|
||||
</label>
|
||||
<div class="input-group Form-inputGroup">
|
||||
<input type="text"
|
||||
name="schedulerEndDt"
|
||||
id="schedulerEndDt"
|
||||
class="form-control input-sm
|
||||
Form-textInput"
|
||||
ng-model="$parent.schedulerEndDt"
|
||||
sch-date-picker
|
||||
data-min-today="true"
|
||||
placeholder="mm/dd/yyyy"
|
||||
ng-change="$parent.resetError('scheduler_endDt_error')">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default btn-sm
|
||||
Form-inputButton Form-lookupButton"
|
||||
type="button"
|
||||
ng-click="showCalendar('schedulerEndDt')"
|
||||
>
|
||||
<i class="fa fa-calendar"></i>
|
||||
</button>
|
||||
</span>
|
||||
<div class="input-group Form-inputGroup SchedulerForm-inputGroup--date">
|
||||
<scheduler-date-picker date="$parent.schedulerEndDt">
|
||||
</scheduler-date-picker>
|
||||
</div>
|
||||
<div class="error"
|
||||
ng-show="$parent.scheduler_endDt_error">
|
||||
|
||||
Reference in New Issue
Block a user