This is an automated email from the ASF dual-hosted git repository. nixon pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/atlas.git
The following commit(s) were added to refs/heads/master by this push: new ff55b0a Atlas-4062: UI:- Classification Daterange Picker Datetime format fix. ff55b0a is described below commit ff55b0a155bc1c6a0f150477998084de90da6cec Author: prasad pawar <prasad.pa...@freestoneinfotech.com> AuthorDate: Thu Dec 10 12:26:31 2020 +0530 Atlas-4062: UI:- Classification Daterange Picker Datetime format fix. --- dashboardv2/public/css/scss/override.scss | 8 +++++ .../js/templates/tag/AddTimezoneView_tmpl.html | 12 ++++---- dashboardv2/public/js/views/tag/AddTagModalView.js | 33 ++++++++++++++++++++ .../public/js/views/tag/AddTimezoneItemView.js | 35 ++++++++++++++-------- dashboardv3/public/css/scss/override.scss | 8 +++++ .../js/templates/tag/AddTimezoneView_tmpl.html | 12 ++++---- dashboardv3/public/js/views/tag/AddTagModalView.js | 33 ++++++++++++++++++++ .../public/js/views/tag/AddTimezoneItemView.js | 35 ++++++++++++++-------- 8 files changed, 138 insertions(+), 38 deletions(-) diff --git a/dashboardv2/public/css/scss/override.scss b/dashboardv2/public/css/scss/override.scss index d9bb429..188ac1a 100644 --- a/dashboardv2/public/css/scss/override.scss +++ b/dashboardv2/public/css/scss/override.scss @@ -521,6 +521,14 @@ div.columnmanager-dropdown-container { } } +.modal { + position: absolute; +} + +.modal-open { + overflow-y: auto; +} + .daterangepicker { max-height: 400px; overflow-y: scroll; diff --git a/dashboardv2/public/js/templates/tag/AddTimezoneView_tmpl.html b/dashboardv2/public/js/templates/tag/AddTimezoneView_tmpl.html index 3fde3d0..08667ef 100644 --- a/dashboardv2/public/js/templates/tag/AddTimezoneView_tmpl.html +++ b/dashboardv2/public/js/templates/tag/AddTimezoneView_tmpl.html @@ -16,16 +16,16 @@ --> <div class="form-group clearfix"> <div class="col-sm-4"> - <label for="">Start Time</label> - <input type="text" class="form-control" name="startTime" data-id="startTime" readonly /> + <label class="col-sm-12 required" for="">Start Time</label> + <input type="text" class="form-control start-time" name="startTime" data-id="startTime" readonly /> </div> <div class="col-sm-4"> - <label for="">End Time</label> - <input type="text" class="form-control" name="endTime" data-id="endTime" readonly /> + <label class="col-sm-12 required" for="">End Time</label> + <input type="text" class="form-control end-time" name="endTime" data-id="endTime" readonly /> </div> <div class="col-sm-3"> - <label for="">TimeZone</label> - <select class="form-control row-margin-bottom" data-id="timeZone" required> + <label class="col-sm-12 required" for="">TimeZone</label> + <select class="form-control row-margin-bottom time-zone" data-id="timeZone" required> </select> </div> <div class="col-sm-1 attributePlusData" align="right" style="margin-top: 25px;"> diff --git a/dashboardv2/public/js/views/tag/AddTagModalView.js b/dashboardv2/public/js/views/tag/AddTagModalView.js index 3da33e5..b623936 100644 --- a/dashboardv2/public/js/views/tag/AddTagModalView.js +++ b/dashboardv2/public/js/views/tag/AddTagModalView.js @@ -136,6 +136,12 @@ define(['require', this.modal.open(); this.modal.$el.find('button.ok').attr("disabled", true); this.on('ok', function() { + if (this.validateValues()) { + if (this.hideLoader) { + this.hideLoader(); + }; + return; + }; that.modal.$el.find('button.ok').showButtonLoader(); var tagName = this.tagModel ? this.tagModel.typeName : this.ui.addTagOptions.val(), tagAttributes = {}, @@ -247,6 +253,33 @@ define(['require', }); this.bindEvents(); }, + validateValues: function(attributeDefs) { + var isValidate = true, + applyErrorClass = function(scope) { + if (this.value == '' || this.value == null || this.value.indexOf('Select Timezone') > -1) { + $(this).addClass('errorValidate'); + if (isValidate) { isValidate = false; } + } else { + $(this).removeClass('errorValidate'); + } + }; + + this.$el.find('.start-time').each(function(element) { + applyErrorClass.call(this); + }); + this.$el.find('.end-time').each(function(element) { + applyErrorClass.call(this); + }); + this.$el.find('.time-zone').each(function(element) { + applyErrorClass.call(this); + }); + if (!isValidate) { + Utils.notifyInfo({ + content: "Please fill the details" + }); + return true; + } + }, onRender: function() { var that = this; diff --git a/dashboardv2/public/js/views/tag/AddTimezoneItemView.js b/dashboardv2/public/js/views/tag/AddTimezoneItemView.js index f6899aa..c07eecf 100644 --- a/dashboardv2/public/js/views/tag/AddTimezoneItemView.js +++ b/dashboardv2/public/js/views/tag/AddTimezoneItemView.js @@ -47,11 +47,11 @@ define(['require', var events = {}, that = this; events["change " + this.ui.startTime] = function(e) { - this.model.set({ "startTime": this.ui.startTime.val() }); + this.model.set({ "startTime": that.getDateFormat(this.ui.startTime.val()) }); this.buttonActive({ isButtonActive: true }); }; events["change " + this.ui.endTime] = function(e) { - this.model.set({ "endTime": this.ui.endTime.val() }); + this.model.set({ "endTime": that.getDateFormat(this.ui.endTime.val()) }); this.buttonActive({ isButtonActive: true }); }; events["change " + this.ui.timeZone] = function(e) { @@ -76,7 +76,7 @@ define(['require', "singleDatePicker": true, "showDropdowns": true, "timePicker": true, - "timePicker24Hour": true, + "timePicker24Hour": Globals.dateTimeFormat.indexOf("hh") > -1 ? false : true, "timePickerSeconds": true, "startDate": new Date(), "autoApply": true, @@ -99,38 +99,47 @@ define(['require', startDateObj["autoUpdateInput"] = false; } else { startDateObj["autoUpdateInput"] = true; - startDateObj["startDate"] = this.model.get('startTime'); + startDateObj["startDate"] = Utils.formatDate({ date: Date.parse(this.model.get('startTime')), zone: false }); } if (_.isEmpty(this.model.get('endTime'))) { endDateObj["autoUpdateInput"] = false; - endDateObj["minDate"] = this.model.get('startTime'); + endDateObj["minDate"] = Utils.formatDate({ date: Date.parse(this.model.get('startTime')), zone: false }); } else { endDateObj["autoUpdateInput"] = true; - endDateObj["minDate"] = this.model.get('startTime'); - endDateObj["startDate"] = this.model.get('endTime'); + endDateObj["minDate"] = Utils.formatDate({ date: Date.parse(this.model.get('startTime')), zone: false }); + endDateObj["startDate"] = Utils.formatDate({ date: Date.parse(this.model.get('endTime')), zone: false }); } if (!_.isEmpty(this.model.get('timeZone'))) { this.ui.timeZone.val(this.model.get('timeZone')).trigger("change", { 'manual': true }); } } else { - this.model.set('startTime', that.ui.startTime.val()); - this.model.set('endTime', that.ui.endTime.val()); + this.model.set('startTime', that.getDateFormat(that.ui.startTime.val())); + this.model.set('endTime', that.getDateFormat(that.ui.endTime.val())); } this.ui.startTime.daterangepicker(startDateObj).on('apply.daterangepicker', function(ev, picker) { that.ui.startTime.val(Utils.formatDate({ date: picker.startDate, zone: false })); _.extend(endDateObj, { "minDate": that.ui.startTime.val() }) that.endDateInitialize(endDateObj); - that.model.set('startTime', that.ui.startTime.val()); + that.model.set('startTime', that.getDateFormat(that.ui.startTime.val())); that.buttonActive({ isButtonActive: true }); }).on('cancel.daterangepicker', function(ev, picker) { that.ui.startTime.val(''); delete endDateObj.minDate; that.endDateInitialize(endDateObj); - that.model.set('startTime', that.ui.startTime.val()); + that.model.set('startTime', that.getDateFormat(that.ui.startTime.val())); }); this.endDateInitialize(endDateObj); this.buttonActive({ isButtonActive: true }); }, + getDateFormat: function(option) { + if (option && option.length) { + if (Globals.dateTimeFormat.indexOf("HH") > -1) { + option = option.slice(0, -3); // remove AM/PM from 24hr format + } + return moment(Date.parse(option)).format('YYYY/MM/DD HH:mm:ss'); + } + return ""; + }, buttonActive: function(option) { var that = this; if (option && option.isButtonActive && that.tagModel) { @@ -154,11 +163,11 @@ define(['require', var that = this; this.ui.endTime.daterangepicker(option).on('apply.daterangepicker', function(ev, picker) { that.ui.endTime.val(Utils.formatDate({ date: picker.startDate, zone: false })); - that.model.set('endTime', that.ui.endTime.val()); + that.model.set('endTime', that.getDateFormat(that.ui.endTime.val())); that.buttonActive({ isButtonActive: true }); }).on('cancel.daterangepicker', function(ev, picker) { that.ui.endTime.val(''); - that.model.set('endTime', that.ui.endTime.val()); + that.model.set('endTime', that.getDateFormat(that.ui.endTime.val())); }); } }); diff --git a/dashboardv3/public/css/scss/override.scss b/dashboardv3/public/css/scss/override.scss index 2bf2367..2003bf0 100644 --- a/dashboardv3/public/css/scss/override.scss +++ b/dashboardv3/public/css/scss/override.scss @@ -525,6 +525,14 @@ div.columnmanager-dropdown-container { } } +.modal { + position: absolute; +} + +.modal-open { + overflow-y: auto; +} + .daterangepicker { .ranges { diff --git a/dashboardv3/public/js/templates/tag/AddTimezoneView_tmpl.html b/dashboardv3/public/js/templates/tag/AddTimezoneView_tmpl.html index 3fde3d0..08667ef 100644 --- a/dashboardv3/public/js/templates/tag/AddTimezoneView_tmpl.html +++ b/dashboardv3/public/js/templates/tag/AddTimezoneView_tmpl.html @@ -16,16 +16,16 @@ --> <div class="form-group clearfix"> <div class="col-sm-4"> - <label for="">Start Time</label> - <input type="text" class="form-control" name="startTime" data-id="startTime" readonly /> + <label class="col-sm-12 required" for="">Start Time</label> + <input type="text" class="form-control start-time" name="startTime" data-id="startTime" readonly /> </div> <div class="col-sm-4"> - <label for="">End Time</label> - <input type="text" class="form-control" name="endTime" data-id="endTime" readonly /> + <label class="col-sm-12 required" for="">End Time</label> + <input type="text" class="form-control end-time" name="endTime" data-id="endTime" readonly /> </div> <div class="col-sm-3"> - <label for="">TimeZone</label> - <select class="form-control row-margin-bottom" data-id="timeZone" required> + <label class="col-sm-12 required" for="">TimeZone</label> + <select class="form-control row-margin-bottom time-zone" data-id="timeZone" required> </select> </div> <div class="col-sm-1 attributePlusData" align="right" style="margin-top: 25px;"> diff --git a/dashboardv3/public/js/views/tag/AddTagModalView.js b/dashboardv3/public/js/views/tag/AddTagModalView.js index 3da33e5..b623936 100644 --- a/dashboardv3/public/js/views/tag/AddTagModalView.js +++ b/dashboardv3/public/js/views/tag/AddTagModalView.js @@ -136,6 +136,12 @@ define(['require', this.modal.open(); this.modal.$el.find('button.ok').attr("disabled", true); this.on('ok', function() { + if (this.validateValues()) { + if (this.hideLoader) { + this.hideLoader(); + }; + return; + }; that.modal.$el.find('button.ok').showButtonLoader(); var tagName = this.tagModel ? this.tagModel.typeName : this.ui.addTagOptions.val(), tagAttributes = {}, @@ -247,6 +253,33 @@ define(['require', }); this.bindEvents(); }, + validateValues: function(attributeDefs) { + var isValidate = true, + applyErrorClass = function(scope) { + if (this.value == '' || this.value == null || this.value.indexOf('Select Timezone') > -1) { + $(this).addClass('errorValidate'); + if (isValidate) { isValidate = false; } + } else { + $(this).removeClass('errorValidate'); + } + }; + + this.$el.find('.start-time').each(function(element) { + applyErrorClass.call(this); + }); + this.$el.find('.end-time').each(function(element) { + applyErrorClass.call(this); + }); + this.$el.find('.time-zone').each(function(element) { + applyErrorClass.call(this); + }); + if (!isValidate) { + Utils.notifyInfo({ + content: "Please fill the details" + }); + return true; + } + }, onRender: function() { var that = this; diff --git a/dashboardv3/public/js/views/tag/AddTimezoneItemView.js b/dashboardv3/public/js/views/tag/AddTimezoneItemView.js index f6899aa..c07eecf 100644 --- a/dashboardv3/public/js/views/tag/AddTimezoneItemView.js +++ b/dashboardv3/public/js/views/tag/AddTimezoneItemView.js @@ -47,11 +47,11 @@ define(['require', var events = {}, that = this; events["change " + this.ui.startTime] = function(e) { - this.model.set({ "startTime": this.ui.startTime.val() }); + this.model.set({ "startTime": that.getDateFormat(this.ui.startTime.val()) }); this.buttonActive({ isButtonActive: true }); }; events["change " + this.ui.endTime] = function(e) { - this.model.set({ "endTime": this.ui.endTime.val() }); + this.model.set({ "endTime": that.getDateFormat(this.ui.endTime.val()) }); this.buttonActive({ isButtonActive: true }); }; events["change " + this.ui.timeZone] = function(e) { @@ -76,7 +76,7 @@ define(['require', "singleDatePicker": true, "showDropdowns": true, "timePicker": true, - "timePicker24Hour": true, + "timePicker24Hour": Globals.dateTimeFormat.indexOf("hh") > -1 ? false : true, "timePickerSeconds": true, "startDate": new Date(), "autoApply": true, @@ -99,38 +99,47 @@ define(['require', startDateObj["autoUpdateInput"] = false; } else { startDateObj["autoUpdateInput"] = true; - startDateObj["startDate"] = this.model.get('startTime'); + startDateObj["startDate"] = Utils.formatDate({ date: Date.parse(this.model.get('startTime')), zone: false }); } if (_.isEmpty(this.model.get('endTime'))) { endDateObj["autoUpdateInput"] = false; - endDateObj["minDate"] = this.model.get('startTime'); + endDateObj["minDate"] = Utils.formatDate({ date: Date.parse(this.model.get('startTime')), zone: false }); } else { endDateObj["autoUpdateInput"] = true; - endDateObj["minDate"] = this.model.get('startTime'); - endDateObj["startDate"] = this.model.get('endTime'); + endDateObj["minDate"] = Utils.formatDate({ date: Date.parse(this.model.get('startTime')), zone: false }); + endDateObj["startDate"] = Utils.formatDate({ date: Date.parse(this.model.get('endTime')), zone: false }); } if (!_.isEmpty(this.model.get('timeZone'))) { this.ui.timeZone.val(this.model.get('timeZone')).trigger("change", { 'manual': true }); } } else { - this.model.set('startTime', that.ui.startTime.val()); - this.model.set('endTime', that.ui.endTime.val()); + this.model.set('startTime', that.getDateFormat(that.ui.startTime.val())); + this.model.set('endTime', that.getDateFormat(that.ui.endTime.val())); } this.ui.startTime.daterangepicker(startDateObj).on('apply.daterangepicker', function(ev, picker) { that.ui.startTime.val(Utils.formatDate({ date: picker.startDate, zone: false })); _.extend(endDateObj, { "minDate": that.ui.startTime.val() }) that.endDateInitialize(endDateObj); - that.model.set('startTime', that.ui.startTime.val()); + that.model.set('startTime', that.getDateFormat(that.ui.startTime.val())); that.buttonActive({ isButtonActive: true }); }).on('cancel.daterangepicker', function(ev, picker) { that.ui.startTime.val(''); delete endDateObj.minDate; that.endDateInitialize(endDateObj); - that.model.set('startTime', that.ui.startTime.val()); + that.model.set('startTime', that.getDateFormat(that.ui.startTime.val())); }); this.endDateInitialize(endDateObj); this.buttonActive({ isButtonActive: true }); }, + getDateFormat: function(option) { + if (option && option.length) { + if (Globals.dateTimeFormat.indexOf("HH") > -1) { + option = option.slice(0, -3); // remove AM/PM from 24hr format + } + return moment(Date.parse(option)).format('YYYY/MM/DD HH:mm:ss'); + } + return ""; + }, buttonActive: function(option) { var that = this; if (option && option.isButtonActive && that.tagModel) { @@ -154,11 +163,11 @@ define(['require', var that = this; this.ui.endTime.daterangepicker(option).on('apply.daterangepicker', function(ev, picker) { that.ui.endTime.val(Utils.formatDate({ date: picker.startDate, zone: false })); - that.model.set('endTime', that.ui.endTime.val()); + that.model.set('endTime', that.getDateFormat(that.ui.endTime.val())); that.buttonActive({ isButtonActive: true }); }).on('cancel.daterangepicker', function(ev, picker) { that.ui.endTime.val(''); - that.model.set('endTime', that.ui.endTime.val()); + that.model.set('endTime', that.getDateFormat(that.ui.endTime.val())); }); } });