You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@atlas.apache.org by ni...@apache.org on 2020/12/10 12:12:45 UTC
[atlas] branch branch-2.0 updated: Atlas-4062: UI:- Classification
Daterange Picker Datetime format fix.
This is an automated email from the ASF dual-hosted git repository.
nixon pushed a commit to branch branch-2.0
in repository https://gitbox.apache.org/repos/asf/atlas.git
The following commit(s) were added to refs/heads/branch-2.0 by this push:
new d9f8c88 Atlas-4062: UI:- Classification Daterange Picker Datetime format fix.
d9f8c88 is described below
commit d9f8c887828d0fc0b94304135eb43bfd9862e2e8
Author: prasad pawar <pr...@freestoneinfotech.com>
AuthorDate: Thu Dec 10 12:26:31 2020 +0530
Atlas-4062: UI:- Classification Daterange Picker Datetime format fix.
(cherry picked from commit ff55b0a155bc1c6a0f150477998084de90da6cec)
---
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()));
});
}
});