Skip to content

A
atlas
Commit ff55b0a1 by prasad pawar Committed by nixonrodrigues
Options

Atlas-4062: UI:- Classification Daterange Picker Datetime format fix.

parent 10b6d142
Showing with 138 additions and 38 deletions
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;
......
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;">
......
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;
......
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()));
});
}
});
......
dashboardv3/public/css/scss/override.scss
......@@ -525,6 +525,14 @@ div.columnmanager-dropdown-container {
}
}
.modal {
position: absolute;
}
.modal-open {
overflow-y: auto;
}
.daterangepicker {
.ranges {
......
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;">
......
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;
......
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()));
});
}
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment