Skip to content

A
atlas
Commit 5f71cad0 by pratik24mac Committed by nixonrodrigues
Options

ATLAS-2484 : UI - Need validation for Start Date and End Date while applying validity period

Signed-off-by: 's avatarnixonrodrigues <nixon@apache.org>
parent 3b074d9c
master
No related merge requests found
Showing with 46 additions and 52 deletions
dashboardv2/public/js/templates/tag/AddTagModalView_tmpl.html
...@@ -16,26 +16,24 @@ ...@@ -16,26 +16,24 @@
--> -->
<div> <div>
<div class="form-group hide"> <div class="form-group hide">
{{#if tagModel}}
<h4>{{tagModel.typeName}}</h4> {{else}}
<div class="row modalHeight"> <div class="row modalHeight">
<div class="col-md-8"> <div class="col-md-7">
{{#if tagModel}}
<h4>{{tagModel.typeName}}</h4> </div>{{else}}
<select class="form-control row-margin-bottom" data-id="addTagOptions" required> <select class="form-control row-margin-bottom" data-id="addTagOptions" required>
</select> </select>
</div> </div>
{{/if}} {{/if}}
<div class="col-sm-2"> <div class="col-md-2">
<div class="inline"> <div class="inline">
<label class="checkbox-inline btn"> <label class="checkbox-inline btn">
<input type="checkbox" data-id="checkModalTagProperty" class="input" checked /> Propagate</label> <input type="checkbox" data-id="checkModalTagProperty" class="input" checked /> Propagate</label>
</div> </div>
</div> </div>
<div class="col-sm-2"> <div class="col-md-3">
<div class="inline-content-fr table-action-btn"> <div class="inline">
<div class="inline"> <label class="checkbox-inline btn">
<label class="checkbox-inline btn"> <input type="checkbox" data-id="checkTimezoneProperty" class="input" /> Apply Validity Period</label>
<input type="checkbox" data-id="checkTimezoneProperty" class="input" /> Apply Validity Period</label>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -60,7 +58,7 @@ ...@@ -60,7 +58,7 @@
</div> </div>
<div class="col-sm-12" style="display:none"> <div class="col-sm-12" style="display:none">
<p>Classification Attributes(optional)</p> <p>Classification Attributes(optional)</p>
<p class="text-gray">Add attribute values for this tag</p> <p class="text-gray">Add attribute values for this classification</p>
<div data-id="tagAttribute"></div> <div data-id="tagAttribute"></div>
</div> </div>
</div> </div>
......
dashboardv2/public/js/templates/tag/AddTimezoneView_tmpl.html
...@@ -15,20 +15,16 @@ ...@@ -15,20 +15,16 @@
* limitations under the License. * limitations under the License.
--> -->
<div class="form-group clearfix"> <div class="form-group clearfix">
<div class="col-sm-4"> <div class="col-sm-8">
<label for="">Start Time</label> <label for="">Start Time - End Time</label>
<input type="text" class="form-control" name="startTime" data-id="startTime" /> <input type="text" class="form-control" name="timeInterval" data-id="timeInterval" readonly="true" />
</div>
<div class="col-sm-4">
<label for="">End Time</label>
<input type="text" class="form-control" name="endTime" data-id="endTime" />
</div> </div>
<div class="col-sm-3"> <div class="col-sm-3">
<label for="">TimeZone</label> <label for="">TimeZone</label>
<select class="form-control row-margin-bottom" data-id="timeZone" required> <select class="form-control row-margin-bottom" data-id="timeZone" required>
</select> </select>
</div> </div>
<div class="col-sm-1 attributePlusData" align="right"> <div class="col-sm-1 attributePlusData" align="right" style="margin-top: 25px;">
<button type="button" class="btn btn-danger btn-sm closeInput" data-id="close"><i class="fa fa-times"></i></button> <button type="button" class="btn btn-danger btn-sm closeInput" data-id="close"><i class="fa fa-times"></i></button>
</div> </div>
</div> </div>
\ No newline at end of file
dashboardv2/public/js/views/tag/AddTagModalView.js
...@@ -63,6 +63,9 @@ define(['require', ...@@ -63,6 +63,9 @@ define(['require',
var events = {}; var events = {};
events["change " + this.ui.addTagOptions] = 'onChangeTagDefination'; events["change " + this.ui.addTagOptions] = 'onChangeTagDefination';
events["change " + this.ui.checkTimeZone] = function(e) { events["change " + this.ui.checkTimeZone] = function(e) {
if(this.tagModel){
this.buttonActive({isButtonActive: true});
}
if (e.target.checked) { if (e.target.checked) {
this.ui.timeZoneDiv.show(); this.ui.timeZoneDiv.show();
this.ui.validityPeriodBody.show(); this.ui.validityPeriodBody.show();
...@@ -311,7 +314,7 @@ define(['require', ...@@ -311,7 +314,7 @@ define(['require',
}); });
}, },
buttonActive: function(option) { buttonActive: function(option) {
if (option && option.isButtonActive) { if (option) {
var isButton = option.isButtonActive; var isButton = option.isButtonActive;
this.modal.$el.find('button.ok').attr("disabled", isButton === true ? false : true); this.modal.$el.find('button.ok').attr("disabled", isButton === true ? false : true);
} }
......
dashboardv2/public/js/views/tag/AddTimezoneItemView.js
...@@ -36,19 +36,14 @@ define(['require', ...@@ -36,19 +36,14 @@ define(['require',
/** ui selector cache */ /** ui selector cache */
ui: { ui: {
close: "[data-id='close']", close: "[data-id='close']",
startTime: 'input[name="startTime"]', timeInterval: 'input[name="timeInterval"]',
endTime: 'input[name="endTime"]',
timeZone: '[data-id="timeZone"]' timeZone: '[data-id="timeZone"]'
}, },
/** ui events hash */ /** ui events hash */
events: function() { events: function() {
var events = {}; var events = {},
events["change " + this.ui.startTime] = function(e) { that = this;
this.model.set({ "startTime": this.ui.startTime.val() }); events["change " + this.ui.timeInterval] = function(e) {
this.buttonActive({ isButtonActive: true });
};
events["change " + this.ui.endTime] = function(e) {
this.model.set({ "endTime": this.ui.endTime.val() });
this.buttonActive({ isButtonActive: true }); this.buttonActive({ isButtonActive: true });
}; };
events["change " + this.ui.timeZone] = function(e) { events["change " + this.ui.timeZone] = function(e) {
...@@ -68,46 +63,45 @@ define(['require', ...@@ -68,46 +63,45 @@ define(['require',
}, },
onRender: function() { onRender: function() {
var that = this, var that = this,
minDate = new Date(),
dateObj = { dateObj = {
"singleDatePicker": true,
"showDropdowns": true, "showDropdowns": true,
"timePicker": true, "timePicker": true,
"timePicker24Hour": true,
"startDate": new Date(), "startDate": new Date(),
"timePickerIncrement": 30,
"locale": { "locale": {
format: 'YYYY/MM/DD HH:MM:SS' format: 'YYYY/MM/DD h:mm A'
} },
"alwaysShowCalendars": true
}, },
tzstr = '<option selected="selected" disabled="disabled">-- Select Timezone --</option>'; tzstr = '<option selected="selected" disabled="disabled">-- Select Timezone --</option>';
if (this.model.get('startTime') !== "") { if (this.model.get('startTime') !== "") {
this.ui.startTime.daterangepicker({ this.ui.timeInterval.daterangepicker({
"singleDatePicker": true,
"showDropdowns": true, "showDropdowns": true,
"timePicker": true, "timePicker": true,
"timePicker24Hour": true,
"startDate": this.model.get('startTime'), "startDate": this.model.get('startTime'),
"timePickerIncrement": 30, "endDate": this.model.get('endTime'),
"locale": { "locale": {
format: 'YYYY/MM/DD HH:MM:SS' format: 'YYYY/MM/DD h:mm A'
} },
}); "alwaysShowCalendars": true
this.ui.endTime.daterangepicker({ }).on('apply.daterangepicker', function(fullDate) {
"singleDatePicker": true, var val = fullDate.currentTarget.value.split(' - ');
"showDropdowns": true, that.model.set('startTime', val[0]);
"timePicker": true, that.model.set('endTime', val[1]);
"startDate": this.model.get('endTime'),
"timePickerIncrement": 30,
"locale": {
format: 'YYYY/MM/DD HH:MM:SS'
}
}); });
this.ui.timeZone.select2({ this.ui.timeZone.select2({
data: moment.tz.names() data: moment.tz.names()
}); });
this.ui.timeZone.val(this.model.get('timeZone')).trigger("change", { 'manual': true }); this.ui.timeZone.val(this.model.get('timeZone')).trigger("change", { 'manual': true });
} else { } else {
this.ui.startTime.daterangepicker(dateObj); this.ui.timeInterval.daterangepicker(dateObj).on('apply.daterangepicker', function(fullDate) {
this.ui.endTime.daterangepicker(dateObj); var val = fullDate.currentTarget.value.split(' - ');
that.model.set('startTime', val[0]);
that.model.set('endTime', val[1]);
});
this.ui.timeZone.html(tzstr); this.ui.timeZone.html(tzstr);
this.ui.timeZone.select2({ this.ui.timeZone.select2({
placeholder: "Select TimeZone", placeholder: "Select TimeZone",
...@@ -115,6 +109,8 @@ define(['require', ...@@ -115,6 +109,8 @@ define(['require',
data: moment.tz.names() data: moment.tz.names()
}); });
} }
$('[name="daterangepicker_start"]').attr('readonly', true); +
$('[name="daterangepicker_end"]').attr('readonly', true);
}, },
buttonActive: function(option) { buttonActive: function(option) {
var that = this; var that = this;
...@@ -129,8 +125,8 @@ define(['require', ...@@ -129,8 +125,8 @@ define(['require',
} }
if (this.parentView.collection.models.length <= 0) { if (this.parentView.collection.models.length <= 0) {
this.parentView.ui.timeZoneDiv.hide(); this.parentView.ui.timeZoneDiv.hide();
this.parentView.ui.checkTimeZone.prop('checked',false); this.parentView.ui.checkTimeZone.prop('checked', false);
this.parentView.modal.$el.find('button.ok').attr("disabled",true); this.parentView.modal.$el.find('button.ok').attr("disabled", true);
} }
} }
}); });
......
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