mirror of
https://repository.entgra.net/community/device-mgt-plugins.git
synced 2025-09-16 23:42:15 +00:00
Merge pull request #634 from Kamidu/cloud-3.1.0
android enrollment ui fixes and operation in progress animation fix
This commit is contained in:
commit
96c1d033eb
@ -65,7 +65,9 @@
|
|||||||
{{description}}
|
{{description}}
|
||||||
<br>
|
<br>
|
||||||
</h4>
|
</h4>
|
||||||
|
<div style="height:200px" class="hidden" data-toggle="loading" data-loading-inverse="false"
|
||||||
|
data-loading-text="Sending to device"></div>
|
||||||
|
<div id="operation-form">
|
||||||
<form action="{{params.0.uri}}" method="{{params.0.method}}"
|
<form action="{{params.0.uri}}" method="{{params.0.method}}"
|
||||||
style="padding-bottom: 20px;"
|
style="padding-bottom: 20px;"
|
||||||
data-payload="{{payload}}" id="form-{{operation}}"
|
data-payload="{{payload}}" id="form-{{operation}}"
|
||||||
@ -73,15 +75,18 @@
|
|||||||
data-content-type="{{params.0.contentType}}"
|
data-content-type="{{params.0.contentType}}"
|
||||||
data-operation-code="{{operation}}">
|
data-operation-code="{{operation}}">
|
||||||
{{#each params.0.pathParams}}
|
{{#each params.0.pathParams}}
|
||||||
<input type="{{type}}" id="{{name}}" placeholder="{{name}}" class="form-control" data-param-type="path" value="{{value}}" />
|
<input type="{{type}}" id="{{name}}" placeholder="{{name}}" class="form-control"
|
||||||
|
data-param-type="path" value="{{value}}"/>
|
||||||
<br/>
|
<br/>
|
||||||
{{/each}}
|
{{/each}}
|
||||||
{{#each params.0.formParams}}
|
{{#each params.0.formParams}}
|
||||||
<input type="{{type}}" id="{{name}}" name="{{name}}" placeholder="{{name}}" class="form-control" data-param-type="form" value="{{value}}" />
|
<input type="{{type}}" id="{{name}}" name="{{name}}" placeholder="{{name}}"
|
||||||
|
class="form-control" data-param-type="form" value="{{value}}"/>
|
||||||
<br/>
|
<br/>
|
||||||
{{/each}}
|
{{/each}}
|
||||||
{{#each params.0.queryParams}}
|
{{#each params.0.queryParams}}
|
||||||
<input type="{{type}}" id="{{name}}" placeholder="{{name}}" class="form-control" data-param-type="query" value="{{value}}" />
|
<input type="{{type}}" id="{{name}}" placeholder="{{name}}" class="form-control"
|
||||||
|
data-param-type="query" value="{{value}}"/>
|
||||||
<br/>
|
<br/>
|
||||||
{{/each}}
|
{{/each}}
|
||||||
{{#each uiParams}}
|
{{#each uiParams}}
|
||||||
@ -100,7 +105,8 @@
|
|||||||
<br/>
|
<br/>
|
||||||
{{/equal}}
|
{{/equal}}
|
||||||
{{/each}}
|
{{/each}}
|
||||||
<button id="btnSend" type="button" onclick="submitForm('form-{{operation}}')" class="btn btn-default"> Send
|
<button id="btnSend" type="button" onclick="submitForm('form-{{operation}}')"
|
||||||
|
class="btn btn-default"> Send
|
||||||
to Device </button>
|
to Device </button>
|
||||||
<label id="lblSending" class="wr-input-label hidden"><i
|
<label id="lblSending" class="wr-input-label hidden"><i
|
||||||
class="fw fw-lifecycle fw-spin fw-2x"></i> Sending..</label>
|
class="fw fw-lifecycle fw-spin fw-2x"></i> Sending..</label>
|
||||||
@ -111,6 +117,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{{/each}}
|
{{/each}}
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|||||||
@ -28,6 +28,10 @@ function operationSelect(selection) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function submitForm(formId) {
|
function submitForm(formId) {
|
||||||
|
$("#operation-form").addClass("hidden");
|
||||||
|
$('[data-toggle="loading"]').removeClass("hidden");
|
||||||
|
$('[data-toggle="loading"]').loading('show');
|
||||||
|
|
||||||
var form = $("#" + formId);
|
var form = $("#" + formId);
|
||||||
var uri = form.attr("action");
|
var uri = form.attr("action");
|
||||||
var deviceId = form.data("device-id");
|
var deviceId = form.data("device-id");
|
||||||
@ -69,6 +73,12 @@ function submitForm(formId) {
|
|||||||
var statusIcon = content.find("#status-icon");
|
var statusIcon = content.find("#status-icon");
|
||||||
var description = content.find("#description");
|
var description = content.find("#description");
|
||||||
description.html("");
|
description.html("");
|
||||||
|
|
||||||
|
var resetLoader = function () {
|
||||||
|
$("#operation-form").removeClass("hidden");
|
||||||
|
$('[data-toggle="loading"]').addClass("hidden");
|
||||||
|
};
|
||||||
|
|
||||||
var successCallBack = function (response) {
|
var successCallBack = function (response) {
|
||||||
var res = response;
|
var res = response;
|
||||||
try {
|
try {
|
||||||
@ -79,11 +89,12 @@ function submitForm(formId) {
|
|||||||
title.html("Operation Triggered!");
|
title.html("Operation Triggered!");
|
||||||
statusIcon.attr("class", defaultStatusClasses + " fw-check");
|
statusIcon.attr("class", defaultStatusClasses + " fw-check");
|
||||||
description.html(res);
|
description.html(res);
|
||||||
console.log("success!");
|
// console.log("success!");
|
||||||
|
resetLoader();
|
||||||
$(modalPopupContent).html(content.html());
|
$(modalPopupContent).html(content.html());
|
||||||
};
|
};
|
||||||
var errorCallBack = function (response) {
|
var errorCallBack = function (response) {
|
||||||
console.log(response);
|
// console.log(response);
|
||||||
title.html("An Error Occurred!");
|
title.html("An Error Occurred!");
|
||||||
statusIcon.attr("class", defaultStatusClasses + " fw-error");
|
statusIcon.attr("class", defaultStatusClasses + " fw-error");
|
||||||
var reason = (response.responseText == "null")?response.statusText:response.responseText;
|
var reason = (response.responseText == "null")?response.statusText:response.responseText;
|
||||||
@ -93,7 +104,8 @@ function submitForm(formId) {
|
|||||||
//do nothing
|
//do nothing
|
||||||
}
|
}
|
||||||
description.html(reason);
|
description.html(reason);
|
||||||
console.log("Error!");
|
// console.log("Error!");
|
||||||
|
resetLoader();
|
||||||
$(modalPopupContent).html(content.html());
|
$(modalPopupContent).html(content.html());
|
||||||
};
|
};
|
||||||
//executing http request
|
//executing http request
|
||||||
@ -111,12 +123,12 @@ function submitForm(formId) {
|
|||||||
title.html("An Error Occurred!");
|
title.html("An Error Occurred!");
|
||||||
statusIcon.attr("class", defaultStatusClasses + " fw-error");
|
statusIcon.attr("class", defaultStatusClasses + " fw-error");
|
||||||
description.html("This operation requires http method: " + httpMethod + " which is not supported yet!");
|
description.html("This operation requires http method: " + httpMethod + " which is not supported yet!");
|
||||||
|
resetLoader();
|
||||||
$(modalPopupContent).html(content.html());
|
$(modalPopupContent).html(content.html());
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$(document).on('submit', 'form', function (e) {
|
$(document).on('submit', 'form', function (e) {
|
||||||
cosole.log("darn!!");
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
var postOperationRequest = $.ajax({
|
var postOperationRequest = $.ajax({
|
||||||
url: $(this).attr("action") + '&' + $(this).serialize(),
|
url: $(this).attr("action") + '&' + $(this).serialize(),
|
||||||
|
|||||||
@ -19,11 +19,13 @@
|
|||||||
</div>-->
|
</div>-->
|
||||||
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 add-padding-top-2x add-padding-bottom-2x">
|
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 add-padding-top-2x add-padding-bottom-2x">
|
||||||
{{#if isVirtual}}
|
{{#if isVirtual}}
|
||||||
<h3 class="text-center add-padding-bottom-4x">Download our Android-try-it emulator, enroll it with WSO2 Device Cloud and try it out!</h3>
|
<h3 class="text-center add-padding-bottom-4x">Download our virtual Android device, enroll it with WSO2
|
||||||
|
Device Cloud and try it out!</h3>
|
||||||
<div class="text-center"><a
|
<div class="text-center"><a
|
||||||
href="{{@unit.publicUri}}/assets/android-tryit.ZIP"
|
href="{{@unit.publicUri}}/assets/android-tryit.ZIP"
|
||||||
class="btn-operations remove-margin download_agent">
|
class="btn-operations remove-margin download_agent">
|
||||||
<i class="fw fw-download fw-inverse fw-lg add-margin-1x"></i>Download the android-try-it Emulator</a></div>
|
<i class="fw fw-download fw-inverse fw-lg add-margin-1x"></i>Download the virtual Android device</a>
|
||||||
|
</div>
|
||||||
{{else}}
|
{{else}}
|
||||||
<h3 class="text-center">Scan to get the Android Agent.</h3>
|
<h3 class="text-center">Scan to get the Android Agent.</h3>
|
||||||
<div class="enrollment-qr-container text-center"></div>
|
<div class="enrollment-qr-container text-center"></div>
|
||||||
@ -80,12 +82,12 @@
|
|||||||
{{#if isCloud}}
|
{{#if isCloud}}
|
||||||
<div class="row grey-bg">
|
<div class="row grey-bg">
|
||||||
{{#if isVirtual}}
|
{{#if isVirtual}}
|
||||||
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-4 col-md-offset-1 col-lg-offset-1 add-padding-top-2x add-padding-bottom-2x">
|
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 add-padding-top-2x add-padding-bottom-2x">
|
||||||
<h5><strong>Step 1</strong></h5>
|
<h5><strong>Step 1</strong></h5>
|
||||||
<div class="add-min-height">
|
<div class="add-min-height">
|
||||||
<ol>
|
<ol>
|
||||||
<li>Unzip the 'android-tryit.zip file and run the 'start' script on your terminal.</li>
|
<li>Unzip the 'android-tryit.zip file and run the 'start' script on your terminal.</li>
|
||||||
<li>Download and install the Android SDK.
|
<li>Download and install the Android SDK:
|
||||||
<ul>
|
<ul>
|
||||||
<li>If you already have an Android SDK on your computer, please provide the location of
|
<li>If you already have an Android SDK on your computer, please provide the location of
|
||||||
the SDK.
|
the SDK.
|
||||||
@ -107,7 +109,7 @@
|
|||||||
<img src="{{@unit.publicUri}}/images/android-tryit.png" class="img-responsive">
|
<img src="{{@unit.publicUri}}/images/android-tryit.png" class="img-responsive">
|
||||||
</div>
|
</div>
|
||||||
{{else}}
|
{{else}}
|
||||||
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 col-md-offset-1 col-lg-offset-1 add-padding-top-2x add-padding-bottom-2x">
|
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 add-padding-top-2x add-padding-bottom-2x">
|
||||||
<h5><strong>Step 1</strong></h5>
|
<h5><strong>Step 1</strong></h5>
|
||||||
<div class="add-min-height">
|
<div class="add-min-height">
|
||||||
<p>Let's start by opening the Android agent on your device.
|
<p>Let's start by opening the Android agent on your device.
|
||||||
@ -117,7 +119,7 @@
|
|||||||
<img src="{{@unit.publicUri}}/images/launch_agent.png" class="img-responsive">
|
<img src="{{@unit.publicUri}}/images/launch_agent.png" class="img-responsive">
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2 col-md-offset-1 col-lg-offset-1 add-padding-top-2x add-padding-bottom-2x">
|
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 col-md-offset-1 col-lg-offset-1 add-padding-top-2x add-padding-bottom-2x">
|
||||||
<h5><strong>Step 2</strong></h5>
|
<h5><strong>Step 2</strong></h5>
|
||||||
<div class="add-min-height">
|
<div class="add-min-height">
|
||||||
<p>Enter your :
|
<p>Enter your :
|
||||||
@ -130,7 +132,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<img src="{{@unit.publicUri}}/images/register.png" class="img-responsive">
|
<img src="{{@unit.publicUri}}/images/register.png" class="img-responsive">
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2 col-md-offset-1 col-lg-offset-1 add-padding-top-2x add-padding-bottom-2x">
|
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 col-md-offset-1 col-lg-offset-1 add-padding-top-2x add-padding-bottom-2x">
|
||||||
<h5><strong>Step 3</strong></h5>
|
<h5><strong>Step 3</strong></h5>
|
||||||
<div class="add-min-height">
|
<div class="add-min-height">
|
||||||
<p>To successfully register the virtual device,</p>
|
<p>To successfully register the virtual device,</p>
|
||||||
@ -149,9 +151,13 @@
|
|||||||
<li>Unzip the 'android-tryit.zip file and run the 'start' script on your terminal.</li>
|
<li>Unzip the 'android-tryit.zip file and run the 'start' script on your terminal.</li>
|
||||||
<li>Download and install the Android SDK.
|
<li>Download and install the Android SDK.
|
||||||
<ul>
|
<ul>
|
||||||
<li>If you already have an Android SDK on your computer, please provide the location of the SDK.</li>
|
<li>If you already have an Android SDK on your computer, please provide the location of the
|
||||||
<li>Else, this tool will download and install the minimum SDK components required to run the emulator.
|
SDK.
|
||||||
This is a one-time process.</li>
|
</li>
|
||||||
|
<li>Else, this tool will download and install the minimum SDK components required to run the
|
||||||
|
emulator.
|
||||||
|
This is a one-time process.
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li>Next, you will be asked to create an AVD:
|
<li>Next, you will be asked to create an AVD:
|
||||||
@ -194,63 +200,6 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--<div class="row">
|
|
||||||
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-12 padding-double ">
|
|
||||||
<h3 class="uppercase">What You Need</h3>
|
|
||||||
<hr>
|
|
||||||
<ul class="list-unstyled">
|
|
||||||
<li class="padding-top-double"><span class="badge">STEP 01</span> Android
|
|
||||||
Mobile.
|
|
||||||
</li>
|
|
||||||
<li><span class="badge">STEP 02</span> Go ahead
|
|
||||||
and click [Enroll Device].
|
|
||||||
</li>
|
|
||||||
<li><span class="badge">STEP 03</span> Proceed
|
|
||||||
to the [Prepare] section.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<br>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-xs-12 col-sm-8 col-md-9 col-lg-9">
|
|
||||||
|
|
||||||
<h3 class="uppercase">What it Does</h3>
|
|
||||||
<hr>
|
|
||||||
<p class="grey margin-top">Connect and manage your Android device with WSO2 IoT Server.</p>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<a href="javascript:toggleEnrollment()" class="download-link btn-operations"><i class="fw fw-mobile fw-inverse fw-lg add-margin-1x"></i> Enroll Device</a>
|
|
||||||
<a href="{{host}}/android-web-agent/public/mdm.page.enrollments.android.download-agent/asset/android-agent.apk" class="btn-operations"><i class="fw fw-download fw-inverse fw-lg add-margin-1x"></i> Download APK</a>
|
|
||||||
<a href="javascript:toggleEmailInvite()" class="btn-operations"><i class="fw fw-mail fw-inverse fw-lg add-margin-1x"></i> Invite by Email</a>
|
|
||||||
|
|
||||||
|
|
||||||
<p class="doc-link">Click <a href="https://docs.wso2.com/display/IoTS300/Android" target="_blank">here</a> for further instructions and troubleshooting.</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-12 padding-double grey-bg">
|
|
||||||
<h3 class="uppercase">Prepare</h3><hr>
|
|
||||||
<ul class="list-unstyled">
|
|
||||||
<li class="padding-top-double"><span class="badge">01</span> Download Device Agent into your Android Mobile.</li>
|
|
||||||
<li><span class="badge">02</span> Install Agent APK file.</li>
|
|
||||||
<li><span class="badge">03</span> Configure Agent App</li>
|
|
||||||
</ul>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
</div>-->
|
|
||||||
|
|
||||||
<!--<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding-double">
|
|
||||||
<p class="grey margin-top">Click on the image to zoom</p>
|
|
||||||
<center>
|
|
||||||
<a href="{{@unit.publicUri}}/images/android_device.png" target="_blank">
|
|
||||||
<img src="{{@unit.publicUri}}/images/android_device.png" class="img-responsive">
|
|
||||||
</a>
|
|
||||||
</center>
|
|
||||||
</div>-->
|
|
||||||
|
|
||||||
{{#zone "topCss"}}
|
{{#zone "topCss"}}
|
||||||
{{css "css/styles.css"}}
|
{{css "css/styles.css"}}
|
||||||
{{/zone}}
|
{{/zone}}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user