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