Merge pull request #78 from charithag/IoTS-1.0.0-M1

Update device operations

features/device-mgt-iot-arduino-feature/org.wso2.carbon.device.mgt.iot.arduino.feature/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.arduino.device-view/device-view.hbs

@@ -15,7 +15,7 @@
         Operations
     </div>
     <div class="add-margin-top-4x">
-        {{unit "iot.unit.device.operation" device=device}}
+        {{unit "iot.unit.device.operation-bar" device=device}}
     </div>
 {{/zone}}
 

features/device-mgt-iot-digitaldisplay-feature/org.wso2.carbon.device.mgt.iot.digitaldisplay.feature/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.digital_display.device-view/device-view.hbs

@@ -15,7 +15,7 @@
         Operations
     </div>
     <div class="add-margin-top-4x">
-        {{unit "iot.unit.device.operation" device=device}}
+        {{unit "iot.unit.device.operation-bar" device=device}}
     </div>
 {{/zone}}
 

features/device-mgt-iot-droneanalyzer-feature/org.wso2.carbon.device.mgt.iot.droneanalyzer.feature/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.drone_analyzer.device-view/device-view.hbs

@@ -6,7 +6,7 @@
         Operations
     </div>
     <div class="add-margin-top-4x">
-        {{unit "iot.unit.device.operation" device=device}}
+        {{unit "iot.unit.device.operation-bar" device=device}}
     </div>
 {{/zone}}
 {{#zone "device-detail-properties"}}

features/device-mgt-iot-feature/org.wso2.carbon.device.mgt.iot.feature/src/main/resources/jaggeryapps/devicemgt/app/units/iot.unit.device.operation-bar/operation-bar.hbs

@@ -1,7 +1,66 @@
-<div class="wr-operations"></div>
+{{#if control_operations}}
+    <div class="wr-operations" style="height: 87px; display: block;">
+        <style>
+            ::-webkit-input-placeholder {
+                color: #B8B8B8;
+            }
+
+            ::-moz-placeholder {
+                color: #B8B8B8;
+            }
+
+            :-ms-input-placeholder {
+                color: #B8B8B8;
+            }
+
+            input:-moz-placeholder {
+                color: #B8B8B8;
+            }
+        </style>
+        {{#each control_operations}}
+            <a href="javascript:operationSelect('{{operation}}')">
+                <i class="fw fw-service"></i>
+                <span>{{name}}</span>
+            </a>
+
+            <div class="operation" data-operation-code="{{operation}}">
+                <div class="content">
+                    <div class="row">
+                        <div class="col-lg-5 col-md-6 col-centered">
+                            <h3>
+                        <span class="fw-stack">
+                            <i class="fw fw-ring fw-stack-2x"></i>
+                            <i class="fw fw-service fw-stack-1x"></i>
+                        </span>
+                                {{name}}
+                                <br>
+                            </h3>
+                            <h4>
+                                {{description}}
+                                <br>
+                            </h4>
+
+                            <form action="{{@app.context}}/api/operations/{{../device.type}}/{{operation}}?deviceId={{../device.deviceIdentifier}}"
+                                  method="post" style="padding-bottom: 20px;">
+                                {{#each params}}
+                                    <input type="text" name="{{this}}" placeholder="{{this}}" class="form-control">
+                                    <br />
+                                {{/each}}
+                                <button id="btnSend" type="submit" 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>
+        {{/each}}
+    </div>
+{{/if}}
 
 {{#zone "bottomJs"}}
-    <script id="operations-bar" src="{{@unit.publicUri}}/templates/operations.hbs"
+    {{js "js/operation-bar.js"}}
-            type="text/x-handlebars-template"></script>
+{{/zone}}
-	{{js "js/operation-bar.js"}}
-{{/zone}}

features/device-mgt-iot-feature/org.wso2.carbon.device.mgt.iot.feature/src/main/resources/jaggeryapps/devicemgt/app/units/iot.unit.device.operation-bar/operation-bar.js

@@ -1,4 +1,26 @@
-function onRequest (context) {
+/*
-    // var log = new Log("operation-bar.js");
+ * Copyright (c) 2015, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
-    return context;
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+function onRequest(context) {
+    var log = new Log("operation.js");
+    var operationModule = require("/app/modules/operation.js").operationModule;
+    var device = context.unit.params.device;
+    log.info(device);
+    var control_operations = operationModule.getControlOperations(device.type);
+    return {"control_operations": control_operations, "device": device};
 }

features/device-mgt-iot-feature/org.wso2.carbon.device.mgt.iot.feature/src/main/resources/jaggeryapps/devicemgt/app/units/iot.unit.device.operation-bar/operation-bar.json

@@ -1,4 +1,3 @@
 {
-  "version": "1.0.0",
+  "version": "1.0.0"
-  "extends": "cdmf.unit.device.operation-bar"
 }

features/device-mgt-iot-feature/org.wso2.carbon.device.mgt.iot.feature/src/main/resources/jaggeryapps/devicemgt/app/units/iot.unit.device.operation-bar/public/js/operation-bar.js

@@ -16,283 +16,41 @@
  * under the License.
  */
 
-/*
- * Setting-up global variables.
- */
-
-var operations = '.wr-operations',
-    modalPopup = '.wr-modalpopup',
-    modalPopupContainer = modalPopup + ' .modalpopup-container',
-    modalPopupContent = modalPopup + ' .modalpopup-content',
-    // deviceCheckbox = '#ast-container .ctrl-wr-asset .itm-select input[type="checkbox"]',
-    // showOperationsBtn = '#showOperationsBtn',
-    navHeight = $('#nav').height(),
-    headerHeight = $('header').height(),
-    offset = (headerHeight + navHeight),
-    // maxOperationsLimit = 15,
-    // hiddenOperation = '.wr-hidden-operations-content > div',
-    deviceSelection = '.device-select',
-    dataTableSelection = '.DTTT_selected',
-    currentOperationList = [];
-
-/*
-* On window resize functions.
-*/
-//$(window).resize(function(){
-//    toggleMoreOperationsHeight();
-//});
-
-/*
- * On main div.container resize functions.
- * @required  jquery.resize.js
- */
-//$('.container').resize(function(){
-//    toggleMoreOperationsHeight();
-//});
-
-/*
- * On Show Operations click operation show toggling function.
- */
-//function showOperations(){
-//    $(operations).toggle('slide');
-//}
-
-/*
- * Function to get selected devices ID's
- */
-function getSelectedDeviceIds() {
-    var deviceIdentifierList = [];
-    $(deviceSelection).each(function (index) {
-        var device = $(this);
-        var deviceId = device.data('deviceid');
-        var deviceType = device.data('type');
-        deviceIdentifierList.push({
-            "id" : deviceId,
-            "type" : deviceType
-        });
-    });
-    if(deviceIdentifierList.length == 0) {
-        var thisTable = $(".DTTT_selected").closest('.dataTables_wrapper').find('.dataTable').dataTable();
-        thisTable.api().rows().every(function () {
-            if ($(this.node()).hasClass('DTTT_selected')) {
-                var deviceId = $(thisTable.api().row(this).node()).data('deviceid');
-                var deviceType = $(thisTable.api().row(this).node()).data('devicetype');
-                deviceIdentifierList.push({
-                    "id": deviceId,
-                    "type": deviceType
-                });
-            }
-        });
-    }
-
-    return deviceIdentifierList;
-}
-
 /*
  * On operation click function.
  * @param selection: Selected operation
  */
 function operationSelect (selection) {
-    var deviceIdList = getSelectedDeviceIds();
+    $(modalPopupContent).addClass("operation-data");
-    if (deviceIdList == 0) {
+    $(modalPopupContent).html($(" .operation[data-operation-code=" + selection + "]").html());
-        $(modalPopupContent).html($("#errorOperations").html());
+    $(modalPopupContent).data("operation-code", selection);
-    } else {
-        $(modalPopupContent).addClass("operation-data");
-        $(modalPopupContent).html($(operations + " .operation[data-operation-code=" + selection + "]").html());
-        $(modalPopupContent).data("operation-code", selection);
-    }
     showPopup();
 }
 
-/*
+$(document).on('submit', 'form', function (e) {
- * Function to open hidden device operations list
+    e.preventDefault();
- */
+    var postOperationRequest = $.ajax({
-//function toggleMoreOperations(){
+        url: $(this).attr("action") + '&' + $(this).serialize(),
-//    $('.wr-hidden-operations, .wr-page-content').toggleClass('toggled');
+        method: "post"
-//    $(showOperationsBtn).toggleClass('selected');
+    });
-//    //$('.footer').toggleClass('wr-hidden-operations-toggled');
-//}
 
-/*
+    var btnSubmit = $('#btnSend', this);
- * Function to fit hidden device operation window height with the screen
+    btnSubmit.addClass('hidden');
- */
-//function toggleMoreOperationsHeight(){
-//    $('.wr-hidden-operations').css('min-height', $('html').height() - (offset+140));
-//}
 
-/*
+    var lblSending = $('#lblSending', this);
- * Advance operations sub categories show/hide toggle function
+    lblSending.removeClass('hidden');
- */
-//function showAdvanceOperation(operation, button){
-//    $(button).addClass('selected');
-//    $(button).siblings().removeClass('selected');
-//    $(hiddenOperation + '[data-operation-code="' + operation + '"]').show();
-//    $(hiddenOperation + '[data-operation-code="' + operation + '"]').siblings().hide();
-//}
 
-function getDevicesByTypes (deviceList) {
+    var lblSent = $('#lblSent', this);
-    var deviceTypes = {};
+    postOperationRequest.done(function (data) {
-    $.each(deviceList, function (index, item) {
+        lblSending.addClass('hidden');
-        deviceTypes[item.type] = [];
+        lblSent.removeClass('hidden');
-        if (item.type == "android" || item.type == "ios" || item.type == "windows") {
+        setTimeout(function () {
-            deviceTypes[item.type].push(item.id);
+            hidePopup();
-        }
+        }, 3000);
-//        if(item.type == "TemperatureController"){
-//            deviceTypes[item.type].push(item.id);
-//        }
     });
-    return deviceTypes;
-}
-
-function unloadOperationBar(){
-    $("#showOperationsBtn").addClass("hidden");
-    $(".wr-operations").html("");
-}
 
-function loadOperationBar (deviceType) {
+    postOperationRequest.fail(function (jqXHR, textStatus) {
-    var operationBar = $("#operations-bar");
+        lblSending.addClass('hidden');
-    var operationBarSrc = operationBar.attr("src");
+        lblSent.addClass('hidden');
-    var platformType = deviceType;
-    $.template("operations-bar", operationBarSrc, function (template) {
-        var serviceURL = "/devicemgt_admin/features/" + platformType;
-//        if (deviceType == "TemperatureController") {
-//            serviceURL = "/devicemgt_admin/features/android";
-//        }
-        var successCallback = function (data) {
-            var viewModel = {};
-            // var iconMap = {};
-//            if (deviceType == "TemperatureController") {
-//                data = [{
-//                    "id": 0,
-//                    "code": "BUZZER",
-//                    "name": "Buzz",
-//                    "description": "Buzz the device",
-//                    "deviceType": "TemperatureController",
-//                    "metadataEntries": null
-//                }];
-//                currentOperationList = viewModel.features = data.reduce(function (total, current) {
-//                    total[current.code] = current;
-//                    return total;
-//                }, {});
-//            }
-            data = JSON.parse(data).filter(function (current) {
-                var iconName;
-                if (deviceType == "android"){
-                    iconName = operationModule.getAndroidIconForFeature(current.code);
-                    current.type = deviceType;
-                } if (deviceType == "windows"){
-                    iconName = operationModule.getWindowsIconForFeature(current.code);
-                } else if (deviceType == "ios"){
-                    iconName = operationModule.getIOSIconForFeature(current.code);
-                }
-                if (iconName){
-                    current.icon = iconName;
-                    return current;
-                }
-            });
-            viewModel.features = data;
-            var content = template(viewModel);
-            $(".wr-operations").html(content);
-        };
-        invokerUtil.get(serviceURL,
-            successCallback, function(message){
-                console.log(message);
-            });
     });
-    // var hiddenOperationBar = $("#hidden-operations-bar-" + deviceType);
+});
-    // var hiddenOperationBarSrc = hiddenOperationBar.attr("src");
-//    if (hiddenOperationBarSrc){
-//        $.template("hidden-operations-bar-" + deviceType, hiddenOperationBarSrc, function (template) {
-//            var serviceURL = "/devicemgt_admin/features/" + platformType;
-//            var successCallback = function (data) {
-//                var viewModel = {};
-//                viewModel.features = data.reduce(function (total, current) {
-//                    total[current.code] = current;
-//                    return total;
-//                }, {});
-//                currentOperationList = viewModel.features;
-//                var content = template(viewModel);
-//                $(".wr-hidden-operations").html(content);
-//            };
-//            invokerUtil.get(serviceURL,
-//                successCallback, function(message){
-//                    console.log(message);
-//                });
-//        });
-//        $("#showOperationsBtn").removeClass("hidden");
-//    }
-
-}
-
-function runOperation (operationName) {
-    var deviceIdList = getSelectedDeviceIds();
-    var list = getDevicesByTypes(deviceIdList);
-
-    var notificationBubble = ".wr-notification-bubble";
-    var successCallback = function (data) {
-        console.log(data);
-//        $(".wr-notification-bar").append('<div class="wr-notification-desc new"><div ' +
-//        'class="wr-notification-operation">' + currentOperationList[operationName].name +
-//        '- Operation Successful!</div><hr /></div>');
-        /*var notificationCount = parseInt($(notificationBubble).html());
-        notificationCount++;
-        $(notificationBubble).html(notificationCount);*/
-        if(operationName == "NOTIFICATION"){
-            $(modalPopupContent).html($("#messageSuccess").html());
-        }else {
-            $(modalPopupContent).html($("#operationSuccess").html());
-        }
-        showPopup();
-    };
-
-    var payload, serviceEndPoint;
-    if(list["ios"]){
-        payload = operationModule.generatePayload("ios", operationName, list["ios"]);
-        serviceEndPoint = operationModule.getIOSServiceEndpoint(operationName);
-    }
-    if(list["android"]){
-        payload = operationModule.generatePayload("android", operationName, list["android"]);
-        serviceEndPoint = operationModule.getAndroidServiceEndpoint(operationName);
-    }
-    if(list["windows"]){
-        payload = operationModule.generatePayload("windows", operationName, list["windows"]);
-        serviceEndPoint = operationModule.getWindowsServiceEndpoint(operationName);
-    }
-//    if(list["TemperatureController"]){
-//        payload = operationModule.generatePayload("TemperatureController", operationName, list["TemperatureController"]);
-//        serviceEndPoint = operationModule.getTemperatureControllerServiceEndpoint(operationName);
-//    }
-    console.log(payload);
-    invokerUtil.post(serviceEndPoint, payload,
-        successCallback, function(jqXHR, textStatus, errorThrown){
-            console.log(textStatus);
-        });
-    $(modalPopupContent).removeData();
-    hidePopup();
-}
-
-/*
- * DOM ready functions.
- */
-$(document).ready(function(){
-//    if($(operations + "> a").length > maxOperationsLimit){
-//        $(showOperationsBtn).show();
-//    }
-//    else{
-//        $(operations).show();
-//    }
-    $(operations).show();
-    // toggleMoreOperationsHeight();
-    //loadOperationBar("ios");
-    /**
-     * Android App type javascript
-     */
-//    $(".wr-modalpopup").on("click", ".appTypesInput", function(){
-//        var appType = $(".appTypesInput").val();
-//        if (appType == "Public") {
-//            $('.appURLInput').prop( "disabled", true );
-//        }else if (appType == "Enterprise"){
-//            $('.appURLInput').prop( "disabled", false );
-//        }
-//    }).trigger("change");
-});

features/device-mgt-iot-feature/org.wso2.carbon.device.mgt.iot.feature/src/main/resources/jaggeryapps/devicemgt/app/units/iot.unit.device.operation-bar/public/templates/hidden-operations-ios.hbs

@@ -1,366 +0,0 @@
-<div class="row no-gutter">
-    <div class="wr-hidden-operations-nav col-lg-4">
-        <a href="javascript:void(0)" onclick="showAdvanceOperation('{{features.WIFI.code}}', this)" class="selected">
-                <span class="wr-hidden-operations-icon fw-stack">
-                    <i class="fw fw-wifi fw-stack-2x"></i>
-                </span>
-            Wi-fi
-        </a>
-        <a href="javascript:void(0)" onclick="showAdvanceOperation('application', this)" >
-                    <span class="wr-hidden-operations-icon fw-stack">
-                        <i class="fw fw-padlock fw-stack-2x"></i>
-                    </span>
-            Applications
-        </a>
-        <a href="javascript:void(0)" onclick="showAdvanceOperation('{{features.RESTRICTION.code}}', this)">
-                <span class="wr-hidden-operations-icon fw-stack">
-                    <i class="fw fw-settings fw-stack-2x"></i>
-                </span>
-            Restrictions
-        </a>
-        <a href="javascript:void(0)" onclick="showAdvanceOperation('mail', this)">
-                    <span class="wr-hidden-operations-icon fw-stack">
-                        <i class="fw fw-message fw-stack-2x"></i>
-                    </span>
-            Mail
-        </a>
-        <a href="javascript:void(0)" onclick="showAdvanceOperation('{{features.AIR_PLAY.code}}', this)">
-                    <span class="wr-hidden-operations-icon fw-stack">
-                        <i class="fw fw-service-provider fw-stack-2x"></i>
-                    </span>
-            Air Play
-        </a>
-    </div>
-    <div class="wr-hidden-operations-content col-lg-8">
-
-        <!-- application -->
-        <div class="wr-hidden-operation" data-operation="application"  style="display: block">
-            <div class="panel panel-default operation-data" data-operation="{{features.INSTALL_STORE_APPLICATION.code}}">
-                <div class="panel-heading" role="tab">
-                    <h2 class="sub-title panel-title">
-                        <a data-toggle="collapse" data-parent="#accordion" href="#installPublicAppiOS" aria-expanded="true" aria-controls="installPublicAppiOS">
-                                    <span class="fw-stack">
-                                        <i class="fw fw-ring fw-stack-2x"></i>
-                                        <i class="fw fw-arrow fw-down-arrow fw-stack-1x"></i>
-                                    </span>
-                            Install Public App
-                        </a>
-                    </h2>
-                </div>
-                <div id="installPublicAppiOS" class="panel-collapse panel-body collapse in" role="tabpanel" aria-labelledby="installPublicAppiOS">
-                    <label class="wr-input-label" for="appIdentifier">App identifier</label>
-                    <div class="wr-input-control">
-                        <input type="text" class="form-control operationDataKeys" id="appIdentifier" data-key="appIdentifier" placeholder="Enter App Identifier">
-                    </div>
-                    <label class="wr-input-label col-sm-4" for="ituneID">iTunes store ID</label>
-                    <div class="wr-input-control">
-                        <input type="text" class="form-control operationDataKeys" id="ituneID" data-key="ituneID" placeholder="Enter iTunes store ID">
-                    </div>
-
-                    <label class="wr-input-label col-sm-4" for="bundleId">Bundle ID</label>
-                    <div class="wr-input-control">
-                        <input type="text" class="form-control operationDataKeys" id="bundleId" data-key="bundleId" placeholder="Enter Bundle ID">
-                    </div>
-                    <div class="wr-input-control">
-                        <label class="wr-input-control checkbox">
-                            <input type="checkbox" class="operationDataKeys" id="appRemoval" data-key="appRemoval"  checked />
-                            <span class="helper" title="Remove App upon dis-enrollment">Remove App upon dis-enrollment<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
-                        </label>
-                        <!--span>Enable if target network is not open or broadcasting</span-->
-                    </div>
-                    <div class="wr-input-control">
-                        <label class="wr-input-control checkbox">
-                            <input type="checkbox" class="operationDataKeys" id="backupData" data-key="backupData" checked />
-                            <span class="helper" title="Prevent backup of App data">Prevent backup of App data<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
-                        </label>
-                        <!--span>Enable if target network is not open or broadcasting</span-->
-                    </div>
-                    <a href="javascript:runOperation('{{features.INSTALL_STORE_APPLICATION.code}}')" class="btn-operations">Install</a>
-                </div>
-
-            </div>
-            <div class="panel panel-default operation-data" data-operation="{{features.INSTALL_ENTERPRISE_APPLICATION.code}}">
-                <div class="panel-heading" role="tab">
-                    <h2 class="sub-title panel-title">
-                        <a data-toggle="collapse" data-parent="#accordion" href="#installEnterpriseAppiOS" aria-expanded="true" aria-controls="installPublicAppiOS" class="collapsed">
-                                    <span class="fw-stack">
-                                        <i class="fw fw-ring fw-stack-2x"></i>
-                                        <i class="fw fw-arrow fw-down-arrow fw-stack-1x"></i>
-                                    </span>
-                            Install Enterprise App
-                        </a>
-                    </h2>
-                </div>
-                <div id="installEnterpriseAppiOS" class="panel-collapse panel-body collapse" role="tabpanel" aria-labelledby="installEnterpriseAppiOS">
-                    <label class="wr-input-label" for="appIdentifier">App identifier</label>
-                    <div class="wr-input-control">
-                        <input type="text" class="form-control operationDataKeys" id="appIdentifier" data-key="appIdentifier" placeholder="Enter App Identifier">
-                    </div>
-                    <label class="wr-input-label col-sm-4" for="manifestURL">Manifest URL</label>
-                    <div class="wr-input-control">
-                        <input type="text" class="form-control operationDataKeys" id="manifestURL" data-key="manifestURL" placeholder="Enter manifest URL">
-                    </div>
-
-                    <label class="wr-input-label col-sm-4" for="bundleId">Bundle ID</label>
-                    <div class="wr-input-control">
-                        <input type="text" class="form-control operationDataKeys" id="bundleId" data-key="bundleId" placeholder="Enter Bundle ID">
-                    </div>
-                    <div class="wr-input-control">
-                        <label class="wr-input-control checkbox">
-                            <input type="checkbox" class="operationDataKeys" id="appRemoval" data-key="appRemoval"  checked />
-                            <span class="helper" title="Remove App upon dis-enrollment">Remove App upon dis-enrollment<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
-                        </label>
-                        <!--span>Enable if target network is not open or broadcasting</span-->
-                    </div>
-                    <div class="wr-input-control">
-                        <label class="wr-input-control checkbox">
-                            <input type="checkbox" class="operationDataKeys" id="backupData" data-key="backupData" checked />
-                            <span class="helper" title="Prevent backup of App data">Prevent backup of App data<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
-                        </label>
-                        <!--span>Enable if target network is not open or broadcasting</span-->
-                    </div>
-                    <a href="javascript:runOperation('{{features.INSTALL_ENTERPRISE_APPLICATION.code}}')" class="btn-operations">Install</a>
-                </div>
-            </div>
-            <div class="panel panel-default operation-data" data-operation="{{features.REMOVE_APPLICATION.code}}">
-                <div class="panel-heading" role="tab">
-                    <h2 class="sub-title panel-title">
-                        <a data-toggle="collapse" data-parent="#accordion" href="#removeApplication" aria-expanded="true" aria-controls="removeApplication" class="collapsed">
-                                    <span class="fw-stack">
-                                        <i class="fw fw-ring fw-stack-2x"></i>
-                                        <i class="fw fw-arrow fw-down-arrow fw-stack-1x"></i>
-                                    </span>
-                            Uninstall App
-                        </a>
-                    </h2>
-                </div>
-                <div id="removeApplication" class="panel-collapse panel-body collapse" role="tabpanel" aria-labelledby="removeApplication">
-                    <label class="wr-input-label col-sm-4" for="bundleId">Bundle ID</label>
-                    <div class="wr-input-control">
-                        <input type="text" class="form-control operationDataKeys" id="bundleId" data-key="bundleId" placeholder="Enter Bundle ID">
-                    </div>
-                    <a href="javascript:runOperation('{{features.REMOVE_APPLICATION.code}}')" class="btn-operations">Uninstall</a>
-                </div>
-            </div>
-        </div>
-        <!-- /application -->
-
-        <!-- wi-fi -->
-        <div class="wr-hidden-operation panel-body operation-data" data-operation="{{features.WIFI.code}}">
-            <label class="wr-input-label" title="Identification of the wireless network to connect to">Service Set Identifier<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
-            <!--span>Identification of the wireless network to connect to</span-->
-            <div class="wr-input-control">
-                <input type="text" class="form-control operationDataKeys" id="ssid" data-key="ssid" placeholder="Enter SSID" />
-            </div>
-
-            <div class="wr-input-control">
-                <label class="wr-input-control checkbox">
-                    <input type="checkbox" class="operationDataKeys" id="hiddenNetwork" data-key="hiddenNetwork" checked />
-                    <span class="helper" title="Enable if target network is not open or broadcasting">Hidden Network<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
-                </label>
-                <!--span>Enable if target network is not open or broadcasting</span-->
-            </div>
-
-            <div class="wr-input-control">
-                <label class="wr-input-control checkbox">
-                    <input type="checkbox" class="operationDataKeys" id="autoJoin" data-key="autoJoin"  checked />
-                    <span class="helper" title="Automatically join this wireless network">Auto Join<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
-                </label>
-                <!--span>Automatically join this wireless network</span-->
-            </div>
-
-            <label class="wr-input-label" title="Configures proxies to be used with this network">Proxy Setup<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
-            <!--span>Configures proxies to be used with this network</span-->
-            <div class="wr-input-control">
-                <select class="form-control">
-                    <option>None</option>
-                </select>
-            </div>
-
-            <label class="wr-input-label" title="Wireless network encryption to use when connecting">Security Type<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
-            <!--span>Wireless network encryption to use when connecting</span-->
-            <div class="wr-input-control">
-                <select class="form-control operationDataKeys" id="encryptionType" data-key="encryptionType">
-                    <option data-id="WPA">WPA/WPA2 Personal</option>
-                </select>
-            </div>
-
-            <label class="wr-input-label" title="Password for the wireless network">Password<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
-            <!--span>Password for the wireless network</span-->
-            <div class="wr-input-control">
-                <input type="password" value="" class="operationDataKeys" id="password" data-key="password" placeholder="input text"/>
-            </div>
-
-            <label class="wr-input-label" title="Configures network to appear as legacy or Passport">Network Type<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
-            <!--span>Configures network to appear as legacy or Passport</span-->
-            <div class="wr-input-control">
-                <select class="form-control">
-                    <option>Standard</option>
-                </select>
-            </div>
-            <a href="javascript:runOperation('{{features.WIFI.code}}')" class="btn-operations">Configure</a>
-        </div>
-        <!-- /wi-fi -->
-
-        <!-- mail -->
-        <div class="wr-hidden-operation panel-body" data-operation="mail">
-            <label class="wr-input-label" title="The display name of the account">Account Description<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
-            <!--span>Identification of the wireless network to connect to</span-->
-            <div class="wr-input-control">
-                <input type="text" value="" placeholder="input text"/>
-            </div>
-
-            <label class="wr-input-label" title="The protocol for accessing the email account">Account Type<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
-            <!--span>Configures proxies to be used with this network</span-->
-            <div class="wr-input-control">
-                <div class="cus-col-25">
-                    <select class="form-control">
-                        <option>IMAP</option>
-                    </select>
-                </div>
-                <div class="cus-col-50">
-                    <span>Path Prefix</span> <input type="text" value="" placeholder="input text" />
-                </div>
-                <br class="c-both" />
-            </div>
-
-            <label class="wr-input-label" title="The display name of the user">User Display Name<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
-            <!--span>Identification of the wireless network to connect to</span-->
-            <div class="wr-input-control">
-                <input type="text" value="" placeholder="input text"/>
-            </div>
-
-            <label class="wr-input-label" title="The address of the account">Email Address<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
-            <!--span>Identification of the wireless network to connect to</span-->
-            <div class="wr-input-control">
-                <input type="text" value="" placeholder="input text"/>
-            </div>
-
-            <div class="wr-input-control">
-                <label class="wr-input-control checkbox">
-                    <input type="checkbox" checked />
-                    <span class="helper" title="Messages can be moved from this account to another">Allow user to move messages from this account<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
-                </label>
-                <!--span>Enable if target network is not open or broadcasting</span-->
-            </div>
-
-            <div class="wr-input-control">
-                <label class="wr-input-control checkbox">
-                    <input type="checkbox" checked />
-                    <span class="helper" title="Include this account in recent address syncing">Allow Recent Address syncing<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
-                </label>
-                <!--span>Enable if target network is not open or broadcasting</span-->
-            </div>
-
-            <div class="wr-input-control">
-                <label class="wr-input-control checkbox">
-                    <input type="checkbox" checked />
-                    <span class="helper" title="Send outgoing mail from this account only from Mail app">Use Only in Mail<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
-                </label>
-                <!--span>Send outgoing mail from this account only from Mail app</span-->
-            </div>
-
-            <div class="wr-input-control">
-                <label class="wr-input-control checkbox">
-                    <input type="checkbox" checked />
-                    <span class="helper" title="Support S/MIME for this account">Enable S/MIME<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
-                </label>
-                <!--span>Support S/MIME for this account</span-->
-            </div>
-
-            <label class="wr-input-label" title="The protocol for accessing the email account">Mail Server and Port<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
-            <!--span>The protocol for accessing the email account</span-->
-            <div class="wr-input-control">
-                <div class="cus-col-70">
-                    <input type="text" value="" placeholder="input text"/>
-                </div>
-                <div class="cus-col-25">
-                    <span> : </span><input type="text" value="993" placeholder="input text" />
-                </div>
-                <br class="c-both" />
-            </div>
-
-            <label class="wr-input-label" title="The username used to connect to the server for incoming mail">Username<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
-            <!--span>The Username used to connect to the server for incoming mail</span-->
-            <div class="wr-input-control">
-                <input type="text" value="" placeholder="input text"/>
-            </div>
-
-            <label class="wr-input-label" title="The autyentication method for the incoming mail server">Authentication Type<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
-            <!--span>Wireless network encryption to use when connecting</span-->
-            <div class="wr-input-control">
-                <select class="form-control">
-                    <option>Password</option>
-                </select>
-            </div>
-
-            <label class="wr-input-label" title="The password for the incoming mail server">Password<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
-            <!--span>The Username used to connect to the server for incoming mail</span-->
-            <div class="wr-input-control">
-                <input type="text" value="" placeholder="input text"/>
-            </div>
-
-            <div class="wr-input-control">
-                <label class="wr-input-control checkbox">
-                    <input type="checkbox" checked />
-                    <span class="helper" title="Retrieve incoming mail through secure socket layer">Use SSL<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
-                </label>
-                <!--span>Enable if target network is not open or broadcasting</span-->
-            </div>
-        </div>
-        <!-- /mail -->
-
-        <!-- general -->
-        <div class="wr-hidden-operation panel-body operation-data" data-operation="{{features.RESTRICTION.code}}">
-            <div class="wr-input-control">
-                <label class="wr-input-control checkbox">
-                    <input type="checkbox" class="operationDataKeys" id="allowCamera" data-key="allowCamera" checked />
-                    <span class="helper" title="Allow Camera">Allow Camera<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
-                </label>
-            </div>
-            <div class="wr-input-control">
-                <label class="wr-input-control checkbox">
-                    <input type="checkbox" class="operationDataKeys" id="allowCloudBackup" data-key="allowCloudBackup" checked/>
-                    <span class="helper" title="Allow Cloud Backup">Allow Cloud Backup<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
-                </label>
-            </div>
-            <div class="wr-input-control">
-                <label class="wr-input-control checkbox">
-                    <input type="checkbox" class="operationDataKeys" id="allowScreenShot" data-key="allowScreenShot" checked/>
-                    <span class="helper" title="Allow Screenshots">Allow Screenshots<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
-                </label>
-            </div>
-            <div class="wr-input-control">
-                <label class="wr-input-control checkbox">
-                    <input type="checkbox" class="operationDataKeys" id="allowSafari" data-key="allowSafari" checked />
-                    <span class="helper" title="Allow Safari Browser">Allow Safari Browser<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
-                </label>
-            </div>
-            <div class="wr-input-control">
-                <label class="wr-input-control checkbox">
-                    <input type="checkbox" class="operationDataKeys" id="allowAirDrop" data-key="allowAirDrop" checked />
-                    <span class="helper" title="Allow AirDrop">Allow AirDrop<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
-                </label>
-            </div>
-            <a href="javascript:runOperation('{{features.RESTRICTION.code}}')" class="btn-operations">Configure</a>
-        </div>
-        <!-- /general -->
-        <!-- air play -->
-        <div class="wr-hidden-operation panel-body operation-data" data-operation="{{features.AIR_PLAY.code}}">
-            <label class="wr-input-label col-sm-4" for="airPlayLocation">Location</label>
-            <div class="wr-input-control">
-                <input type="text" class="form-control operationDataKeys" id="airPlayLocation" data-key="location" placeholder="Enter location" />
-            </div>
-            <label class="wr-input-label col-sm-4" for="airPlayDeviceName">Device Name</label>
-            <div class="wr-input-control">
-                <input type="text" class="form-control operationDataKeys" id="airPlayDeviceName" data-key="deviceName" placeholder="Enter Device Name" />
-            </div
-            <label class="wr-input-label col-sm-4" for="airPlayPassword">AirPlay password</label>
-            <div class="wr-input-control">
-                <input type="password" class="form-control operationDataKeys" id="airPlayPassword" data-key="password" placeholder="Password" />
-            </div>
-            <a href="javascript:runOperation('{{features.AIR_PLAY.code}}')" class="btn-operations">Configure</a>
-        </div>
-        <!-- /air play -->
-    </div>
-</div>

features/device-mgt-iot-feature/org.wso2.carbon.device.mgt.iot.feature/src/main/resources/jaggeryapps/devicemgt/app/units/iot.unit.device.operation-bar/public/templates/operations.hbs

@@ -1,130 +0,0 @@
-<div id="errorOperations" class="operation">
-    <div class="content">
-        <div class="row">
-            <div class="col-lg-5 col-md-6 col-centered">
-                <h3>
-                    <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>
-                <h4>
-                    Please select a device or a list of devices to perform an operation.
-                </h4>
-                <div class="buttons">
-                    <a href="javascript:hidePopup()" class="btn-operations">
-                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                    </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>
-                    <span class="fw-stack">
-                        <i class="fw fw-ring fw-stack-2x"></i>
-                        <i class="fw fw-check fw-stack-1x"></i>
-                    </span>
-                    Operation performed successfully !
-                </h3>
-                <h4>
-                    Operation has been queued to be sent to the device.
-                </h4>
-                <div class="buttons">
-                    <a href="javascript:hidePopup()" class="btn-operations">
-                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div id="messageSuccess" class="operation">
-    <div class="content">
-        <div class="row">
-            <div class="col-lg-5 col-md-6 col-centered">
-                <h3>
-                    <span class="fw-stack">
-                        <i class="fw fw-ring fw-stack-2x"></i>
-                        <i class="fw fw-check fw-stack-1x"></i>
-                    </span>
-                    Message sent successfully !
-                </h3>
-                <h4>
-                    Message has been queued to be sent to the device.
-                </h4>
-                <div class="buttons">
-                    <a href="javascript:hidePopup()" class="btn-operations">
-                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-{{#each features}}
-    <a href="javascript:operationSelect('{{code}}')">
-        <i class="fw {{icon}}"></i>
-        <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>
-                        <span class="fw-stack">
-                            <i class="fw fw-ring fw-stack-2x"></i>
-                            <i class="fw {{icon}} fw-stack-1x"></i>
-                        </span>
-                        {{name}}
-                        <br>
-                    </h3>
-                    <h4>
-                        {{#equal code "WIPE_DATA"}}
-                            {{#equal type "android"}}
-                                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"></textarea>
-                                </div>
-                                <br>
-                            {{/equal}}
-                        {{/equal}}
-                        {{#equal code "NOTIFICATION"}}
-                            Type your message below.
-                            <br><br>
-                            <div>
-                                <textarea class="form-control modal-input operationDataKeys" id="message" data-key="message"></textarea>
-                            </div>
-                            <br>
-                        {{/equal}}
-                        {{#equal code "CHANGE_LOCK_CODE"}}
-                            Type new lock-code below.
-                            <br><br>
-                            <input type="text" class="form-control modal-input operationDataKeys" id="lockcode" data-key="lockCode" placeholder="Enter Lockcode" />
-                            <br>
-                        {{/equal}}
-                        Do you want to perform this operation on selected device(s) ?
-                        <br>
-                    </h4>
-                    <div class="buttons">
-                        <a href="javascript:runOperation('{{code}}')" class="btn-operations">
-                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Yes&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                        </a>
-                        &nbsp;&nbsp;&nbsp;&nbsp;
-                        <a href="javascript:hidePopup()" class="btn-operations">
-                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cancel&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-{{/each}}
-<br class="c-both" />

features/device-mgt-iot-feature/org.wso2.carbon.device.mgt.iot.feature/src/main/resources/jaggeryapps/devicemgt/app/units/iot.unit.device.operation/operation.hbs

@@ -1,40 +0,0 @@
-{{#if control_operations}}
-    <style>
-        ::-webkit-input-placeholder {
-            color: #B8B8B8;
-        }
-
-        ::-moz-placeholder {
-            color: #B8B8B8;
-        }
-
-        :-ms-input-placeholder {
-            color: #B8B8B8;
-        }
-
-        input:-moz-placeholder {
-            color: #B8B8B8;
-        }
-    </style>
-    {{#each control_operations}}
-        <form action="{{@app.context}}/api/operations/{{../device.type}}/{{operation}}?deviceId={{../device.deviceIdentifier}}"
-              method="post" class="form-inline" style="padding-bottom: 20px;">
-            <label class="wr-input-label">{{name}}</label>
-            {{#each params}}
-                <input type="text" name="{{this}}" placeholder="{{this}}">
-            {{/each}}
-            <button class="wr-btn">&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>
-            <label id="lblLastState"
-                   class="wr-input-label wr-input-label-status"></label>
-        </form>
-    {{/each}}
-{{/if}}
-
-{{#zone "bottomJs"}}
-    {{js "js/operation.js"}}
-{{/zone}}

features/device-mgt-iot-feature/org.wso2.carbon.device.mgt.iot.feature/src/main/resources/jaggeryapps/devicemgt/app/units/iot.unit.device.operation/operation.js

@@ -1,8 +0,0 @@
-function onRequest(context) {
-    var log = new Log("operation.js");
-    var operationModule = require("/app/modules/operation.js").operationModule;
-    var device = context.unit.params.device;
-    log.info(device);
-    var control_operations = operationModule.getControlOperations(device.type);
-    return {"control_operations": control_operations, "device": device};
-}

features/device-mgt-iot-feature/org.wso2.carbon.device.mgt.iot.feature/src/main/resources/jaggeryapps/devicemgt/app/units/iot.unit.device.operation/operation.json

@@ -1,3 +0,0 @@
-{
-  "version": "1.0.0"
-}

features/device-mgt-iot-feature/org.wso2.carbon.device.mgt.iot.feature/src/main/resources/jaggeryapps/devicemgt/app/units/iot.unit.device.operation/public/js/operation.js

@@ -1,42 +0,0 @@
-/*
- * Copyright (c) 2015, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
- *
- * WSO2 Inc. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-$("form").on('submit', function (e) {
-    var postOperationRequest = $.ajax({
-        url: $(this).attr("action") + '&' + $(this).serialize(),
-        method: "post"
-    });
-
-    var lblSending = $('#lblSending', this);
-    lblSending.removeClass('hidden');
-
-    var lblSent = $('#lblSent', this);
-    postOperationRequest.done(function (data) {
-        lblSending.addClass('hidden');
-        lblSent.removeClass('hidden');
-        setTimeout(function () {
-            lblSent.addClass('hidden');
-        }, 3000);
-    });
-
-    postOperationRequest.fail(function (jqXHR, textStatus) {
-        lblSending.addClass('hidden');
-        lblSent.addClass('hidden');
-    });
-    e.preventDefault();
-});

features/device-mgt-iot-raspberrypi-feature/org.wso2.carbon.device.mgt.iot.raspberrypi.feature/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.raspberrypi.device-view/device-view.hbs

@@ -15,7 +15,7 @@
         Operations
     </div>
     <div class="add-margin-top-4x">
-        {{unit "iot.unit.device.operation" device=device}}
+        {{unit "iot.unit.device.operation-bar" device=device}}
     </div>
 {{/zone}}
 

features/device-mgt-iot-virtualfirealarm-feature/org.wso2.carbon.device.mgt.iot.virtualfirealarm.feature/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.virtual_firealarm.device-view/device-view.hbs

@@ -15,7 +15,7 @@
         Operations
     </div>
     <div class="add-margin-top-4x">
-        {{unit "iot.unit.device.operation" device=device}}
+        {{unit "iot.unit.device.operation-bar" device=device}}
     </div>
 {{/zone}}
 

features/device-mgt-mdm-feature/org.wso2.carbon.device.mgt.mobile.feature/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.device.operation-bar/operation-bar.hbs

@@ -1,4 +1,4 @@
-<div class="wr-operations"></div>
+<div class="wr-operations" style="height: 87px;"></div>
 
 {{#zone "bottomJs"}}
     <script id="operations-bar" src="{{@unit.publicUri}}/templates/operations.hbs"

features/device-mgt-mdm-feature/org.wso2.carbon.device.mgt.mobile.feature/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.device.operation-bar/operation-bar.js

@@ -1,4 +0,0 @@
-function onRequest (context) {
-    // var log = new Log("operation-bar.js");
-    return context;
-}