android enrollment ui fixes and operation in progress animation fix

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

@@ -65,7 +65,9 @@
                                 {{description}}
                                 <br>
                             </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}}"
                                       style="padding-bottom: 20px;"
                                       data-payload="{{payload}}" id="form-{{operation}}"
@@ -73,15 +75,18 @@
                                       data-content-type="{{params.0.contentType}}"
                                       data-operation-code="{{operation}}">
                                     {{#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/>
                                     {{/each}}
                                     {{#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/>
                                     {{/each}}
                                     {{#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/>
                                     {{/each}}
                                     {{#each uiParams}}
@@ -100,7 +105,8 @@
                                             <br/>
                                         {{/equal}}
                                     {{/each}}
-                                <button id="btnSend" type="button" onclick="submitForm('form-{{operation}}')" class="btn btn-default">&nbsp;&nbsp;&nbsp;&nbsp;Send
+                                    <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>
@@ -111,6 +117,7 @@
                         </div>
                     </div>
                 </div>
+            </div>
         {{/each}}
     </div>
 {{/if}}

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

@@ -28,6 +28,10 @@ function operationSelect(selection) {
 }
 
 function submitForm(formId) {
+    $("#operation-form").addClass("hidden");
+    $('[data-toggle="loading"]').removeClass("hidden");
+    $('[data-toggle="loading"]').loading('show');
+
     var form = $("#" + formId);
     var uri = form.attr("action");
     var deviceId = form.data("device-id");
@@ -69,6 +73,12 @@ function submitForm(formId) {
     var statusIcon = content.find("#status-icon");
     var description = content.find("#description");
     description.html("");
+
+    var resetLoader = function () {
+        $("#operation-form").removeClass("hidden");
+        $('[data-toggle="loading"]').addClass("hidden");
+    };
+
     var successCallBack = function (response) {
         var res = response;
         try {
@@ -79,11 +89,12 @@ function submitForm(formId) {
         title.html("Operation Triggered!");
         statusIcon.attr("class", defaultStatusClasses + " fw-check");
         description.html(res);
-        console.log("success!");
+        // console.log("success!");
+        resetLoader();
         $(modalPopupContent).html(content.html());
     };
     var errorCallBack = function (response) {
-        console.log(response);
+        // console.log(response);
         title.html("An Error Occurred!");
         statusIcon.attr("class", defaultStatusClasses + " fw-error");
         var reason = (response.responseText == "null")?response.statusText:response.responseText;
@@ -93,7 +104,8 @@ function submitForm(formId) {
             //do nothing
         }
         description.html(reason);
-        console.log("Error!");
+        // console.log("Error!");
+        resetLoader();
         $(modalPopupContent).html(content.html());
     };
     //executing http request
@@ -111,12 +123,12 @@ function submitForm(formId) {
         title.html("An Error Occurred!");
         statusIcon.attr("class", defaultStatusClasses + " fw-error");
         description.html("This operation requires http method: " + httpMethod + " which is not supported yet!");
+        resetLoader();
         $(modalPopupContent).html(content.html());
     }
 }
 
 $(document).on('submit', 'form', function (e) {
-    cosole.log("darn!!");
     e.preventDefault();
     var postOperationRequest = $.ajax({
         url: $(this).attr("action") + '&' + $(this).serialize(),

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

@@ -19,11 +19,13 @@
     </div>-->
     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 add-padding-top-2x add-padding-bottom-2x">
         {{#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
                     href="{{@unit.publicUri}}/assets/android-tryit.ZIP"
                     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}}
             <h3 class="text-center">Scan to get the Android Agent.</h3>
             <div class="enrollment-qr-container text-center"></div>
@@ -80,12 +82,12 @@
 {{#if isCloud}}
     <div class="row grey-bg">
     {{#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>
                 <div class="add-min-height">
                     <ol>
                         <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>
                                 <li>If you already have an Android SDK on your computer, please provide the location of
                                     the SDK.
@@ -107,7 +109,7 @@
                 <img src="{{@unit.publicUri}}/images/android-tryit.png" class="img-responsive">
             </div>
     {{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>
                 <div class="add-min-height">
                     <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">
             </div>
     {{/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>
             <div class="add-min-height">
                 <p>Enter your :
@@ -130,7 +132,7 @@
             </div>
             <img src="{{@unit.publicUri}}/images/register.png" class="img-responsive">
         </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>
             <div class="add-min-height">
                 <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>Download and install the Android SDK.
                         <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>
                     </li>
                     <li>Next, you will be asked to create an AVD:
@@ -194,63 +200,6 @@
 
 </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"}}
     {{css "css/styles.css"}}
 {{/zone}}