ravindu
/
device-mgt-plugins
forked from community/device-mgt-plugins
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

android enrollment ui fixes and operation in progress animation fix

Browse Source
revert-dabc3590
kamidu 8 years ago
parent 7fa517f81b
commit 9ad8cb21ae
3 changed files with 126 additions and 158 deletions
Show Stats Download Patch File Download Diff File

87
components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.operation-bar/operation-bar.hbs
Unescape View File

@ -65,48 +65,55 @@
{{description}} {{description}}
<br> <br>
</h4> </h4>
<div style="height:200px" class="hidden" data-toggle="loading" data-loading-inverse="false"
<form action="{{params.0.uri}}" method="{{params.0.method}}" data-loading-text="Sending to device"></div>
style="padding-bottom: 20px;" <div id="operation-form">
data-payload="{{payload}}" id="form-{{operation}}" <form action="{{params.0.uri}}" method="{{params.0.method}}"
data-device-id="{{../device.deviceIdentifier}}" style="padding-bottom: 20px;"
data-content-type="{{params.0.contentType}}" data-payload="{{payload}}" id="form-{{operation}}"
data-operation-code="{{operation}}"> data-device-id="{{../device.deviceIdentifier}}"
{{#each params.0.pathParams}} data-content-type="{{params.0.contentType}}"
<input type="{{type}}" id="{{name}}" placeholder="{{name}}" class="form-control" data-param-type="path" value="{{value}}" /> data-operation-code="{{operation}}">
<br /> {{#each params.0.pathParams}}
{{/each}} <input type="{{type}}" id="{{name}}" placeholder="{{name}}" class="form-control"
{{#each params.0.formParams}} data-param-type="path" 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.formParams}}
{{#each params.0.queryParams}} <input type="{{type}}" id="{{name}}" name="{{name}}" placeholder="{{name}}"
<input type="{{type}}" id="{{name}}" placeholder="{{name}}" class="form-control" data-param-type="query" value="{{value}}" /> class="form-control" data-param-type="form" value="{{value}}"/>
<br />
{{/each}}
{{#each uiParams}}
{{#equal this.type "checkbox"}}
<input type="{{this.type}}" id="{{this.id}}"
class="checkbox"
placeholder="{{this.label}}"
data-param-type="form"/>
{{this.label}}
<br/> <br/>
{{/equal}} {{/each}}
{{#equal this.type "text"}} {{#each params.0.queryParams}}
<input type="{{this.type}}" id="{{this.id}}" <input type="{{type}}" id="{{name}}" placeholder="{{name}}" class="form-control"
placeholder="{{this.label}}" class="form-control" data-param-type="query" value="{{value}}"/>
data-param-type="form" value=""/>
<br/> <br/>
{{/equal}} {{/each}}
{{/each}} {{#each uiParams}}
<button id="btnSend" type="button" onclick="submitForm('form-{{operation}}')" class="btn btn-default">&nbsp;&nbsp;&nbsp;&nbsp;Send {{#equal this.type "checkbox"}}
to Device&nbsp;&nbsp;&nbsp;&nbsp;</button> <input type="{{this.type}}" id="{{this.id}}"
<label id="lblSending" class="wr-input-label hidden"><i class="checkbox"
class="fw fw-lifecycle fw-spin fw-2x"></i> Sending..</label> placeholder="{{this.label}}"
<label id="lblSent" class="wr-input-label hidden"><i data-param-type="form"/>
class="fw fw-check fw-2x"></i> Sent</label> {{this.label}}
</form> <br/>
{{/equal}}
{{#equal this.type "text"}}
<input type="{{this.type}}" id="{{this.id}}"
placeholder="{{this.label}}" class="form-control"
data-param-type="form" value=""/>
<br/>
{{/equal}}
{{/each}}
<button id="btnSend" type="button" onclick="submitForm('form-{{operation}}')"
class="btn btn-default">&nbsp;&nbsp;&nbsp;&nbsp;Send
to Device&nbsp;&nbsp;&nbsp;&nbsp;</button>
<label id="lblSending" class="wr-input-label hidden"><i
class="fw fw-lifecycle fw-spin fw-2x"></i> Sending..</label>
<label id="lblSent" class="wr-input-label hidden"><i
class="fw fw-check fw-2x"></i> Sent</label>
</form>
</div>
</div> </div>
</div> </div>
</div> </div>

20
components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.operation-bar/public/js/operation-bar.js
Unescape View File

@ -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(),

177
components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.type-view/type-view.hbs
Unescape View File

@ -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>
@ -31,7 +33,7 @@
{{#if isCloud}} {{#if isCloud}}
<div class="text-center"> <div class="text-center">
<a href='https://play.google.com/store/apps/details?id=org.wso2.iot.agent&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1' <a href='https://play.google.com/store/apps/details?id=org.wso2.iot.agent&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'
target="_blank"> target="_blank">
<img alt='Get it on Google Play' <img alt='Get it on Google Play'
src='{{@unit.publicUri}}/images/en_badge_web_generic_export.png'/> src='{{@unit.publicUri}}/images/en_badge_web_generic_export.png'/>
</a> </a>
@ -39,7 +41,7 @@
{{else}} {{else}}
<div class="text-center"> <div class="text-center">
<a href="{{host}}/android-web-agent/public/mdm.page.enrollments.android.download-agent/asset/android-agent.apk" <a href="{{host}}/android-web-agent/public/mdm.page.enrollments.android.download-agent/asset/android-agent.apk"
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 APK</a> <i class="fw fw-download fw-inverse fw-lg add-margin-1x"></i> Download APK</a>
</div> </div>
{{/if}} {{/if}}
@ -50,20 +52,20 @@
to save it to your computer.</p> to save it to your computer.</p>
<p class="doc-link">For further instructions and troubleshooting please visit the following <a href="https://docs.wso2.com/display/IoTS300/Android" <p class="doc-link">For further instructions and troubleshooting please visit the following <a href="https://docs.wso2.com/display/IoTS300/Android"
target="_blank">link</a>.</p>--> target="_blank">link</a>.</p>-->
{{#if isCloud}} {{#if isCloud}}
<p class="doc-link text-center">Need help? Read <a <p class="doc-link text-center">Need help? Read <a
{{#if isVirtual}} {{#if isVirtual}}
href="https://docs.wso2.com/display/DeviceCloud/Quick+Start+Guide" href="https://docs.wso2.com/display/DeviceCloud/Quick+Start+Guide"
{{else}} {{else}}
href="https://docs.wso2.com/display/DeviceCloud/Enrolling+an+Android+Device" href="https://docs.wso2.com/display/DeviceCloud/Enrolling+an+Android+Device"
{{/if}} {{/if}}
target="_blank">WSO2 Device Cloud documentation.</a> target="_blank">WSO2 Device Cloud documentation.</a>
</p> </p>
{{else}} {{else}}
<p class="doc-link text-center">Need help? Read <a <p class="doc-link text-center">Need help? Read <a
href="https://docs.wso2.com/display/IoTS310/Android" target="_blank">WSO2 href="https://docs.wso2.com/display/IoTS310/Android" target="_blank">WSO2
IoT Server documentation.</a></p> IoT Server documentation.</a></p>
{{/if}} {{/if}}
</div> </div>
<div class="row"> <div class="row">
@ -80,47 +82,47 @@
{{#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.
</li> </li>
<li>Else, this tool will download and install the minimum SDK components required to run <li>Else, this tool will download and install the minimum SDK components required to run
the emulator. the emulator.
This is a one-time process. This is a one-time process.
</li> </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:
<ul> <ul>
<li>If you don't have one, the WSO2_AVD will be created for you.</li> <li>If you don't have one, the WSO2_AVD will be created for you.</li>
<li>Else, you can use an existing AVD to try out IoT Android agent.</li> <li>Else, you can use an existing AVD to try out IoT Android agent.</li>
</ul> </ul>
</li> </li>
</ol> </ol>
</div>
<img src="{{@unit.publicUri}}/images/android-tryit.png" class="img-responsive">
</div> </div>
<img src="{{@unit.publicUri}}/images/android-tryit.png" class="img-responsive">
</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.
<br/>Tap on <b>WSO2 Device Management Agent</b>. <br/>Tap on <b>WSO2 Device Management Agent</b>.
</p> </p>
</div>
<img src="{{@unit.publicUri}}/images/launch_agent.png" class="img-responsive">
</div> </div>
<img src="{{@unit.publicUri}}/images/launch_agent.png" class="img-responsive">
</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 :
<p> <p>
<ul> <ul>
<li>Organization: <b>{{@user.domain}}</b></li> <li>Organization: <b>{{@user.domain}}</b></li>
@ -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}}

Write Preview
Loading…
Cancel
Save