diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 4d15da32ff8c..335fa47c2e44 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -50,6 +50,7 @@ //= require bootstrap-select //= require bootstrap-hover-dropdown //= require bootstrap-switch +//= require bootstrap-touchspin //= require angular-bootstrap-switch //= require angular-ui-codemirror //= require patternfly-bootstrap-treeview diff --git a/app/assets/javascripts/components/datetime-delay-picker.js b/app/assets/javascripts/components/datetime-delay-picker.js new file mode 100644 index 000000000000..8c4de1ea929b --- /dev/null +++ b/app/assets/javascripts/components/datetime-delay-picker.js @@ -0,0 +1,59 @@ +ManageIQ.angular.app.component('datetimeDelayPicker', { + bindings: { + model: '=', + start_date: '<', + }, + + controllerAs: 'vm', + + controller: ['$scope', '$element', function($scope, $element) { + $scope.__ = __; + + this.months = 0; + this.weeks = 0; + this.days = 0; + this.hours = 0; + + this.setRetirementDate = function() { + this.model = moment(this.start_date) + .add(this.months, 'month') + .add(this.weeks, 'week') + .add(this.days, 'day') + .add(this.hours, 'hour') + .toDate(); + }; + + this.$onInit = function() { + if (! this.start_date) { + this.start_date = new Date(); + } + }; + + this.$postLink = function() { + var commonAttrs = {min: 0, verticalbuttons: true, buttondown_class: "btn btn-link", buttonup_class: "btn btn-link"}; + var attrs = {months: __('Months'), weeks: __('Weeks'), days: __('Days'), hours: __('Hours')} + + for (var key in attrs) { + $element.find('input[name=' + key + ']').TouchSpin(Object.assign({}, commonAttrs, {'prefix': attrs[key]})); + } + }; + }], + + template: [ + '
', + ' ', + '
', + ' ', + '
', + '
', + ' ', + '
', + '
', + ' ', + '
', + '
', + ' ', + '
', + '
', + ].join('\n'), +}); diff --git a/app/views/shared/views/_retire.html.haml b/app/views/shared/views/_retire.html.haml index 4028f9b5fa01..a30e758d3c4b 100644 --- a/app/views/shared/views/_retire.html.haml +++ b/app/views/shared/views/_retire.html.haml @@ -10,15 +10,29 @@ = _('Set/Remove Retirement Date') %tbody .form-group + %label.col-md-2.control-label + = _('Enter Retirement Date as') + .col-md-4{"ng-init" => "formMode = 'date'"} + = select_tag("formMode", + options_for_select(_("Specific Date and Time") => 'date', _("Time Delay from Now") => 'delay'), + "ng-model" => "formMode", + "pf-select" => true) + .form-group{"ng-if" => "formMode == 'date'"} %label.col-md-2.control-label = _('Retirement Date and Time') .col-md-4#retirement_date_div - .form-group - = datetimepicker_input_tag('retirement_date', nil, - 'id' => 'retirement_date', - 'class' => 'form-control', - 'ng-model' => 'vm.retirementInfo.retirementDate', - 'start-date' => 'vm.datepickerStartDate') + = datetimepicker_input_tag('retirement_date_datepicker', nil, + 'class' => 'form-control', + 'ng-model' => 'vm.retirementInfo.retirementDate', + 'start-date' => 'vm.datepickerStartDate') + %datetime-delay-picker{'ng-if' => "formMode == 'delay'", + 'model' => 'vm.retirementInfo.retirementDate', + 'start-date' => 'vm.datepickerStartDate'} + .form-group{"ng-if" => "formMode == 'delay'"} + %label.col-md-2.control-label + = _('Retirement Date and Time') + .col-md-4#retirement_date_result_div + %input.form-control#retirement_date{'readonly' => true, 'ng-model' => 'vm.retirementInfo.retirementDate'} .form-group %label.col-md-2.control-label = _('Retirement Warning') @@ -35,7 +49,8 @@ "pf-select" => true) :javascript miqInitSelectPicker(); - = _('* Saving a blank date will remove all retirement dates') + %div{"ng-if" => "formMode == 'date'"} + = _('* Saving a blank date will remove all retirement dates') %hr %h3