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.
*/
var modalPopup = ".wr-modalpopup";
var modalPopupContainer = modalPopup + " .modalpopup-container";
var modalPopupContent = modalPopup + " .modalpopup-content";
var modalPopup = ".modal";
var modalPopupContainer = modalPopup + " .modal-content";
var modalPopupContent = modalPopup + " .modal-content";
var body = "body";
/*
@ -81,8 +81,8 @@ function setPopupMaxHeight() {
* show popup function.
*/
function showPopup() {
$(modalPopup).show();
setPopupMaxHeight();
$(modalPopup).modal('show');
//setPopupMaxHeight();
}
/*
@ -90,7 +90,9 @@ function showPopup() {
*/
function hidePopup() {
$(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',
modalPopup = '.wr-modalpopup',
modalPopupContent = modalPopup + ' .modalpopup-content',
modalPopup = '.modal',
modalPopupContent = modalPopup + ' .modal-content',
navHeight = $('#nav').height(),
headerHeight = $('header').height(),
offset = (headerHeight + navHeight),

@ -1,65 +1,68 @@
<div id="errorOperations" class="operation">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>
<div class="modal-header">
<h3 class="pull-left modal-title">
<span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-error fw-stack-1x"></i>
</span>
Operation cannot be performed !
</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
</div>
<div class="modal-body add-margin-top-2x add-margin-bottom-2x">
<h4>
Please select a device or a list of devices to perform an operation.
</h4>
</div>
<div class="modal-footer">
<div class="buttons">
<a href="javascript:hidePopup()" class="btn-operations">Ok</a>
</div>
</div>
</div>
</div>
</div>
<div id="errorOperationUnexpected" class="operation">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>
<div class="modal-header">
<h3 class="pull-left modal-title">
<span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-error fw-stack-1x"></i>
</span>
Operation cannot be performed !
</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
</div>
<div class="modal-body add-margin-top-2x add-margin-bottom-2x">
<h4>
Unexpected error occurred. Please Try again later.
</h4>
</div>
<div class="modal-footer">
<div class="buttons">
<a href="javascript:hidePopup()" class="btn-operations">Ok</a>
</div>
</div>
</div>
</div>
</div>
<div id="operationSuccess" class="operation">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>
<div class="modal-header">
<h3 class="pull-left modal-title">
<span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-check fw-stack-1x"></i>
</span>
Operation queued successfully !
</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
</div>
<div class="modal-body add-margin-top-2x add-margin-bottom-2x">
<h4>
Operation has been queued successfully to be sent to the device.
</h4>
</div>
<div class="modal-footer">
<div class="buttons">
<a href="javascript:hidePopup()" class="btn-operations">Ok</a>
</div>
</div>
</div>
</div>
</div>
<div id="messageSuccess" class="operation">
@ -76,6 +79,7 @@
<h4>
Message has been queued to be sent to the device.
</h4>
<div class="buttons">
<a href="javascript:hidePopup()" class="btn-operations">Ok</a>
</div>
@ -89,10 +93,10 @@
<span>{{name}}</span>
</a>
<div class="operation" data-operation-code="{{code}}">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>
<div class="modal-content clearfix">
<div class="modal-header">
<h3 class="pull-left modal-title">
<span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw {{icon}} fw-stack-1x"></i>
@ -100,14 +104,20 @@
{{name}}
<br>
</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
</div>
<div class="modal-body add-margin-top-2x add-margin-bottom-2x">
<h4>
{{#equal code "WIPE_DATA"}}
{{#equal type "android"}}
Enter PIN code (Optional - This is required only if the device type is BYOD).
Enter PIN code (Optional - This is required only if the device type
is BYOD).
<br><br>
<div>
<input type="password" class="form-control modal-input operationDataKeys" id="pin"
data-key="pin">
<input type="password"
class="form-control modal-input operationDataKeys"
id="pin" data-key="pin"></textarea>
</div>
<br>
{{/equal}}
@ -115,124 +125,37 @@
{{#equal code "NOTIFICATION"}}
Type your message below.
<br><br>
<div id="notification-error-msg" class="alert alert-danger hidden" role="alert">
<div id="notification-error-msg" class="alert alert-danger hidden"
role="alert">
<i class="icon fw fw-error"></i><span></span>
</div>
<div class="form-group">
<input class="form-control modal-input operationDataKeys"
id="messageTitle" data-key="messageTitle" placeholder="Title here..." />
</div>
<div class="form-group">
<div>
<textarea class="form-control modal-input operationDataKeys"
id="messageText" data-key="messageText" placeholder="Message here..."></textarea>
id="message" data-key="message"></textarea>
</div>
<br>
{{/equal}}
{{#equal code "CHANGE_LOCK_CODE"}}
Type new lock-code below.
<br><br>
<input type="password" class="form-control modal-input operationDataKeys" id="lockcode"
<input type="password"
class="form-control modal-input operationDataKeys" id="lockcode"
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 {
$('#dateTimePicker').removeClass("hidden");
$('input[name="daterange"]').daterangepicker({
singleDatePicker: true,
timePicker: true,
showDropdowns: true,
timePickerIncrement: 1,
locale: {
format: 'MM-DD-YYYY hh:mm a'
}
});
}
});
</script>
<br>
{{/equal}}
{{/equal}}
<br><br>
Do you want to perform this operation on selected device(s) ?
<br>
</h4>
</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>
{{/each}}
<br class="c-both"/>

@ -16,9 +16,9 @@
* under the License.
*/
var modalPopup = ".wr-modalpopup",
modalPopupContainer = modalPopup + " .modalpopup-container",
modalPopupContent = modalPopup + " .modalpopup-content";
var modalPopup = ".modal",
modalPopupContainer = modalPopup + " .modal-content",
modalPopupContent = modalPopup + " .modal-content";
var emmAdminBasePath = "/api/device-mgt/v1.0";
@ -46,8 +46,8 @@ function setPopupMaxHeight() {
* show popup function.
*/
function showPopup() {
$(modalPopup).show();
setPopupMaxHeight();
$(modalPopup).modal('show');
//setPopupMaxHeight();
}
/*
@ -56,7 +56,9 @@ function showPopup() {
function hidePopup() {
$(modalPopupContent).html("");
$(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() {
$(".modalpopup-content").html($("#qr-code-modal").html());
generateQRCode(".modalpopup-content .qr-code");
$(".modal-body").html($("#qr-code-modal").html());
generateQRCode(".modal-body .qr-code");
showPopup();
}

Loading…
Cancel
Save