adding modal changes

revert-dabc3590
Imesh Chandrasiri 8 years ago
parent dcc062faad
commit bbe9dfecd2

@ -61,9 +61,9 @@ function InitiateViewOption() {
* Modal related stuff are as follows. * Modal related stuff are as follows.
*/ */
var modalPopup = ".wr-modalpopup"; var modalPopup = ".modal";
var modalPopupContainer = modalPopup + " .modalpopup-container"; var modalPopupContainer = modalPopup + " .modal-content";
var modalPopupContent = modalPopup + " .modalpopup-content"; var modalPopupContent = modalPopup + " .modal-content";
var body = "body"; var body = "body";
/* /*
@ -81,8 +81,8 @@ function setPopupMaxHeight() {
* show popup function. * show popup function.
*/ */
function showPopup() { function showPopup() {
$(modalPopup).show(); $(modalPopup).modal('show');
setPopupMaxHeight(); //setPopupMaxHeight();
} }
/* /*
@ -90,7 +90,9 @@ function showPopup() {
*/ */
function hidePopup() { function hidePopup() {
$(modalPopupContent).html(''); $(modalPopupContent).html('');
$(modalPopup).hide(); $(modalPopup).modal('hide');
$('body').removeClass('modal-open').css('padding-right','0px');
$('.modal-backdrop').remove();
} }
/* /*

@ -21,8 +21,8 @@
*/ */
var operations = '.wr-operations', var operations = '.wr-operations',
modalPopup = '.wr-modalpopup', modalPopup = '.modal',
modalPopupContent = modalPopup + ' .modalpopup-content', modalPopupContent = modalPopup + ' .modal-content',
navHeight = $('#nav').height(), navHeight = $('#nav').height(),
headerHeight = $('header').height(), headerHeight = $('header').height(),
offset = (headerHeight + navHeight), offset = (headerHeight + navHeight),

@ -1,63 +1,66 @@
<div id="errorOperations" class="operation"> <div id="errorOperations" class="operation">
<div class="content"> <div class="modal-header">
<div class="row"> <h3 class="pull-left modal-title">
<div class="col-lg-5 col-md-6 col-centered"> <span class="fw-stack">
<h3> <i class="fw fw-ring fw-stack-2x"></i>
<span class="fw-stack"> <i class="fw fw-error fw-stack-1x"></i>
<i class="fw fw-ring fw-stack-2x"></i> </span>
<i class="fw fw-error fw-stack-1x"></i> Operation cannot be performed !
</span> </h3>
Operation cannot be performed ! <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
</h3> </div>
<h4> <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
Please select a device or a list of devices to perform an operation. <h4>
</h4> Please select a device or a list of devices to perform an operation.
<div class="buttons"> </h4>
<a href="javascript:hidePopup()" class="btn-operations">Ok</a> </div>
</div> <div class="modal-footer">
</div> <div class="buttons">
<a href="javascript:hidePopup()" class="btn-operations">Ok</a>
</div> </div>
</div> </div>
</div> </div>
<div id="errorOperationUnexpected" class="operation"> <div id="errorOperationUnexpected" class="operation">
<div class="content"> <div class="modal-header">
<div class="row"> <h3 class="pull-left modal-title">
<div class="col-lg-5 col-md-6 col-centered"> <span class="fw-stack">
<h3> <i class="fw fw-ring fw-stack-2x"></i>
<span class="fw-stack"> <i class="fw fw-error fw-stack-1x"></i>
<i class="fw fw-ring fw-stack-2x"></i> </span>
<i class="fw fw-error fw-stack-1x"></i> Operation cannot be performed !
</span> </h3>
Operation cannot be performed ! <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
</h3> </div>
<h4> <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
Unexpected error occurred. Please Try again later. <h4>
</h4> Unexpected error occurred. Please Try again later.
<div class="buttons"> </h4>
<a href="javascript:hidePopup()" class="btn-operations">Ok</a> </div>
</div> <div class="modal-footer">
</div> <div class="buttons">
<a href="javascript:hidePopup()" class="btn-operations">Ok</a>
</div> </div>
</div> </div>
</div> </div>
<div id="operationSuccess" class="operation"> <div id="operationSuccess" class="operation">
<div class="content"> <div class="modal-header">
<div class="row"> <h3 class="pull-left modal-title">
<div class="col-lg-5 col-md-6 col-centered"> <span class="fw-stack">
<h3> <i class="fw fw-ring fw-stack-2x"></i>
<span class="fw-stack"> <i class="fw fw-check fw-stack-1x"></i>
<i class="fw fw-ring fw-stack-2x"></i> </span>
<i class="fw fw-check fw-stack-1x"></i> Operation queued successfully !
</span> </h3>
Operation queued successfully ! <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
</h3> </div>
<h4> <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
Operation has been queued successfully to be sent to the device. <h4>
</h4> Operation has been queued successfully to be sent to the device.
<div class="buttons"> </h4>
<a href="javascript:hidePopup()" class="btn-operations">Ok</a> </div>
</div> <div class="modal-footer">
</div> <div class="buttons">
<a href="javascript:hidePopup()" class="btn-operations">Ok</a>
</div> </div>
</div> </div>
</div> </div>
@ -76,6 +79,7 @@
<h4> <h4>
Message has been queued to be sent to the device. Message has been queued to be sent to the device.
</h4> </h4>
<div class="buttons"> <div class="buttons">
<a href="javascript:hidePopup()" class="btn-operations">Ok</a> <a href="javascript:hidePopup()" class="btn-operations">Ok</a>
</div> </div>
@ -89,150 +93,69 @@
<span>{{name}}</span> <span>{{name}}</span>
</a> </a>
<div class="operation" data-operation-code="{{code}}"> <div class="operation" data-operation-code="{{code}}">
<div class="content">
<div class="row"> <div class="modal-content clearfix">
<div class="col-lg-5 col-md-6 col-centered"> <div class="modal-header">
<h3> <h3 class="pull-left modal-title">
<span class="fw-stack"> <span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i> <i class="fw fw-ring fw-stack-2x"></i>
<i class="fw {{icon}} fw-stack-1x"></i> <i class="fw {{icon}} fw-stack-1x"></i>
</span> </span>
{{name}} {{name}}
<br> <br>
</h3> </h3>
<h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
{{#equal code "WIPE_DATA"}} </div>
{{#equal type "android"}} <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
Enter PIN code (Optional - This is required only if the device type is BYOD). <h4>
<br><br> {{#equal code "WIPE_DATA"}}
<div> {{#equal type "android"}}
<input type="password" class="form-control modal-input operationDataKeys" id="pin" Enter PIN code (Optional - This is required only if the device type
data-key="pin"> is BYOD).
</div>
<br>
{{/equal}}
{{/equal}}
{{#equal code "NOTIFICATION"}}
Type your message below.
<br><br> <br><br>
<div id="notification-error-msg" class="alert alert-danger hidden" role="alert">
<i class="icon fw fw-error"></i><span></span> <div>
</div> <input type="password"
<div class="form-group"> class="form-control modal-input operationDataKeys"
<input class="form-control modal-input operationDataKeys" id="pin" data-key="pin"></textarea>
id="messageTitle" data-key="messageTitle" placeholder="Title here..." />
</div>
<div class="form-group">
<textarea class="form-control modal-input operationDataKeys"
id="messageText" data-key="messageText" placeholder="Message here..."></textarea>
</div> </div>
<br> <br>
{{/equal}} {{/equal}}
{{#equal code "CHANGE_LOCK_CODE"}} {{/equal}}
Type new lock-code below. {{#equal code "NOTIFICATION"}}
<br><br> Type your message below.
<input type="password" class="form-control modal-input operationDataKeys" id="lockcode" <br><br>
data-key="lockCode" placeholder="Enter Lockcode"/>
<br>
{{/equal}}
{{#equal code "DEVICE_LOCK"}}
{{#equal type "android"}}
Type your message to be shown in the lock screen (Optional).
<br><br>
<div>
<textarea class="form-control modal-input operationDataKeys" id="lock-message"
data-key="lock-message"></textarea>
</div>
<br>
<label class="wr-input-control checkbox">
<input id="hard-lock" type="checkbox" class="form-control operationDataKeys"
data-key="hard-lock"/>
<span class="helper" title="Once it enables, device will be blocked permanently.">
&nbsp;&nbsp;&nbsp;Enable Permanent Lock
<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
</span>
</label>
{{/equal}}
{{/equal}}
{{#equal code "UPGRADE_FIRMWARE"}}
{{#equal type "android"}}
Enter firmware upgrade scheduling information.
<br><br>
<label class="wr-input-control checkbox">
<input id="instant-upgrade" type="checkbox" class="form-control operationDataKeys"
data-key="instant-upgrade"/>
<span class="helper"
title="Once enabled, device firmware upgrade process will start instantly.">
&nbsp;&nbsp;&nbsp;Instant Upgrade
<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
</span>
</label>
<br><br>
<div class='input-group date' id='dateTimePicker'>
Enter the date and time to schedule firmware upgrade.
<br><br>
<div id="firmware-error-msg" class="alert alert-danger hidden" role="alert">
<i class="icon fw fw-error"></i><span></span>
</div>
<input type='text' class="form-control modal-input operationDataKeys"
style="z-index : 900;" name="daterange" id="schedule" data-key="schedule"/>
</div>
<br><br>
<div class='wr-input-control' id='firmwareServerInfo'>
Enter firmware upgrade server URL (ie. http://abc.com or http://abc.com/ota)
(Optional).
<br><br>
<input type='text' class="form-control modal-input operationDataKeys" id="server"
data-key="server"/>
</div>
<script type="text/javascript">
$(function () {
$('.modalpopup-bg').css('z-index', '1000');
$('.modalpopup-container').css('z-index', '1200');
$('input[name="daterange"]').daterangepicker({
singleDatePicker: true,
timePicker: true,
showDropdowns: true,
timePickerIncrement: 1,
locale: {
format: 'MM-DD-YYYY hh:mm a'
}
});
});
$('#instant-upgrade').change(function () {
if ($(this).is(":checked")) {
$('#dateTimePicker').addClass("hidden");
$("#schedule").val('');
} else { <div id="notification-error-msg" class="alert alert-danger hidden"
$('#dateTimePicker').removeClass("hidden"); role="alert">
$('input[name="daterange"]').daterangepicker({ <i class="icon fw fw-error"></i><span></span>
singleDatePicker: true, </div>
timePicker: true, <div>
showDropdowns: true, <textarea class="form-control modal-input operationDataKeys"
timePickerIncrement: 1, id="message" data-key="message"></textarea>
locale: { </div>
format: 'MM-DD-YYYY hh:mm a' <br>
} {{/equal}}
}); {{#equal code "CHANGE_LOCK_CODE"}}
} Type new lock-code below.
});
</script>
<br>
{{/equal}}
{{/equal}}
<br><br> <br><br>
Do you want to perform this operation on selected device(s) ? <input type="password"
class="form-control modal-input operationDataKeys" id="lockcode"
data-key="lockCode" placeholder="Enter Lockcode"/>
<br> <br>
</h4> {{/equal}}
<div class="buttons"> Do you want to perform this operation on selected device(s) ?
<a href="javascript:runOperation('{{code}}')" class="btn-operations">Yes</a> <br>
<a href="javascript:hidePopup()" class="btn-operations">No</a> </h4>
</div> </div>
<div class="modal-footer">
<div class="buttons">
<a href="javascript:runOperation('{{code}}')" class="btn-operations">Yes</a>
<a href="javascript:hidePopup()" class="btn-operations">No</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{{/each}} {{/each}}
<br class="c-both"/> <br class="c-both"/>

@ -16,9 +16,9 @@
* under the License. * under the License.
*/ */
var modalPopup = ".wr-modalpopup", var modalPopup = ".modal",
modalPopupContainer = modalPopup + " .modalpopup-container", modalPopupContainer = modalPopup + " .modal-content",
modalPopupContent = modalPopup + " .modalpopup-content"; modalPopupContent = modalPopup + " .modal-content";
var emmAdminBasePath = "/api/device-mgt/v1.0"; var emmAdminBasePath = "/api/device-mgt/v1.0";
@ -46,8 +46,8 @@ function setPopupMaxHeight() {
* show popup function. * show popup function.
*/ */
function showPopup() { function showPopup() {
$(modalPopup).show(); $(modalPopup).modal('show');
setPopupMaxHeight(); //setPopupMaxHeight();
} }
/* /*
@ -56,7 +56,9 @@ function showPopup() {
function hidePopup() { function hidePopup() {
$(modalPopupContent).html(""); $(modalPopupContent).html("");
$(modalPopupContent).removeClass("operation-data"); $(modalPopupContent).removeClass("operation-data");
$(modalPopup).hide(); $(modalPopup).modal('hide');
$('body').removeClass('modal-open').css('padding-right','0px');
$('.modal-backdrop').remove();
} }
/* /*
@ -72,8 +74,8 @@ function generateQRCode(qrCodeClass) {
} }
function toggleEnrollment() { function toggleEnrollment() {
$(".modalpopup-content").html($("#qr-code-modal").html()); $(".modal-body").html($("#qr-code-modal").html());
generateQRCode(".modalpopup-content .qr-code"); generateQRCode(".modal-body .qr-code");
showPopup(); showPopup();
} }

Loading…
Cancel
Save