Completed device association with groups

modules/distribution/src/repository/jaggeryapps/iotserver/api/group-api.jag

@@ -231,7 +231,7 @@ if (uriMatcher.match("/{context}/api/group/add")) {
 	data = {"username": user.username};
 	result = get(endPoint, data, "json");
 
-} else if (uriMatcher.match("/{context}/api/group/id/{groupId}/device/assign")) {
+} else if (uriMatcher.match("/{context}/api/group/id/{groupId}/assign")) {
 
 	groupId = uriMatcher.elements().groupId;
 	var deviceId = request.getContent()["deviceId"];

modules/distribution/src/repository/jaggeryapps/iotserver/units/device-listing/device-listing.hbs

@@ -1,5 +1,6 @@
 {{#zone "main"}}
     <span id="permission" data-permission="{{permissions}}"></span>
+    <span id="request-group-id" data-groupId="{{groupId}}"></span>
     <!-- form content placeholder -->
     <div id="ast-container" class="ast-container list-view">
         <!-- no devices found -->
@@ -16,6 +17,7 @@
         <div class="container-fluid wr-content-alt">
             <div class="ctrl-info-panel col-md-6 col-centered">
                 <h2>You don't have any Devices registered at the moment.</h2>
+
                 <p>
                     </a><a href="/iotserver/devices/add-device" class="cu-btn">
                     <span class="fw-stack">
@@ -30,11 +32,32 @@
         <!-- /no devices found -->
     </div>
 
+    <div id="no-grouped-devices-div-content" class="hide">
+        <!-- no devices found -->
+        <div class="container-fluid wr-content-alt">
+            <div class="ctrl-info-panel col-md-6 col-centered">
+                <h2>You don't have any associated devices with this group.</h2>
+
+                <p>
+                    </a><a href="/iotserver/devices" class="cu-btn">
+                    <span class="fw-stack">
+                        <i class="fw fw-ring fw-stack-2x"></i>
+                        <i class="fw fw-add fw-stack-1x"></i>
+                    </span>
+                    Associate Existing Device
+                </a>
+                </p>
+            </div>
+        </div>
+        <!-- /no devices found -->
+    </div>
+
     <div id="remove-device-modal-content" class="hide">
         <div class="content">
             <div class="row">
                 <div class="col-lg-5 col-md-6 col-centered">
                     <h3>Do you really want to remove this device from your Devices List?</h3>
+
                     <div class="buttons">
                         <a href="#" id="remove-device-yes-link" class="btn-operations">
                             &nbsp;&nbsp;&nbsp;&nbsp;Yes&nbsp;&nbsp;&nbsp;&nbsp;
@@ -54,6 +77,7 @@
             <div class="row">
                 <div class="col-lg-5 col-md-6 col-centered">
                     <h3>Device was successfully removed.</h3>
+
                     <div class="buttons">
                         <a href="#" id="remove-device-200-link" class="btn-operations">
                             &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
@@ -70,8 +94,10 @@
                 <div class="col-lg-5 col-md-6 col-centered">
                     <h3>Please enter new name for the device?</h3>
                     <br/>
+
                     <div>
-                        <input id="edit-device-name" style="color:#3f3f3f;padding:5px" type="text" value="" placeholder="Type here" size="60">
+                        <input id="edit-device-name" style="color:#3f3f3f;padding:5px" type="text" value=""
+                               placeholder="Type here" size="60">
                     </div>
                     <div class="buttons">
                         <a href="#" id="edit-device-yes-link" class="btn-operations">
@@ -92,6 +118,7 @@
             <div class="row">
                 <div class="col-lg-5 col-md-6 col-centered">
                     <h3>Device was successfully updated.</h3>
+
                     <div class="buttons">
                         <a href="#" id="edit-device-200-link" class="btn-operations">
                             &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
@@ -102,11 +129,66 @@
         </div>
     </div>
 
+    <div id="group-device-modal-content" class="hide">
+        <div class="content">
+            <div class="row">
+                <div class="col-lg-5 col-md-6 col-centered">
+                    <h3>Please select group</h3>
+                    <br/>
+
+                    <div id="user-groups">Loading...</div>
+                    <div class="buttons">
+                        <a href="#" id="group-device-cancel-link" class="btn-operations">
+                            &nbsp;&nbsp;&nbsp;&nbsp;Cancel&nbsp;&nbsp;&nbsp;&nbsp;
+                        </a>
+                        &nbsp;&nbsp;
+                        <a href="#" id="group-device-yes-link" class="btn-operations">
+                            &nbsp;&nbsp;&nbsp;&nbsp;Assign&nbsp;&nbsp;&nbsp;&nbsp;
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="group-associate-device-200-content" class="hide">
+        <div class="content">
+            <div class="row">
+                <div class="col-lg-5 col-md-6 col-centered">
+                    <h3>Device was successfully associated with group.</h3>
+
+                    <div class="buttons">
+                        <a href="#" id="group-associate-device-200-link" class="btn-operations">
+                            &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="group-deassociate-device-200-content" class="hide">
+        <div class="content">
+            <div class="row">
+                <div class="col-lg-5 col-md-6 col-centered">
+                    <h3>Device was successfully removed from group.</h3>
+
+                    <div class="buttons">
+                        <a href="#" id="group-deassociate-device-200-link" class="btn-operations">
+                            &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <div id="device-400-content" class="hide">
         <div class="content">
             <div class="row">
                 <div class="col-lg-5 col-md-6 col-centered">
                     <h3>Exception at backend. Try Later.</h3>
+
                     <div class="buttons">
                         <a href="#" id="remove-user-400-link" class="btn-operations">
                             &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
@@ -122,6 +204,7 @@
             <div class="row">
                 <div class="col-lg-5 col-md-6 col-centered">
                     <h3>Action not permitted.</h3>
+
                     <div class="buttons">
                         <a href="#" id="remove-device-403-link" class="btn-operations">
                             &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
@@ -137,6 +220,7 @@
             <div class="row">
                 <div class="col-lg-5 col-md-6 col-centered">
                     <h3>Device does not exist.</h3>
+
                     <div class="buttons">
                         <a href="#" id="remove-device-409-link" class="btn-operations">
                             &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
@@ -152,6 +236,7 @@
             <div class="row">
                 <div class="col-lg-5 col-md-6 col-centered">
                     <h3>Device does not exist.</h3>
+
                     <div class="buttons">
                         <a href="#" id="remove-device-unexpected-error-link" class="btn-operations">
                             &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
@@ -163,6 +248,7 @@
     </div>
 {{/zone}}
 {{#zone "bottomJs"}}
-    <script id="device-listing" data-image-resource="{{self.publicURL}}/images/" src="{{self.publicURL}}/templates/device-listing.hbs" type="text/x-handlebars-template" ></script>
+    <script id="device-listing" data-image-resource="{{self.publicURL}}/images/"
+            src="{{self.publicURL}}/templates/device-listing.hbs" type="text/x-handlebars-template"></script>
     <script src="{{self.publicURL}}/js/device-listing.js"></script>
 {{/zone}}

modules/distribution/src/repository/jaggeryapps/iotserver/units/device-listing/device-listing.js

@@ -12,5 +12,13 @@ function onRequest(context){
     }
     permissions.push("LIST_OWN_DEVICES");
     context.permissions = stringify(permissions);
+
+    var groupId = request.getParameter("groupId");
+    if (groupId){
+        context.groupId = groupId;
+    }else{
+        context.groupId = 0;
+    }
+
     return context;
 }

modules/distribution/src/repository/jaggeryapps/iotserver/units/device-listing/public/js/device-listing.js

@@ -53,6 +53,7 @@ var assetContainer = "#ast-container";
 /*
  * DOM ready functions.
  */
+var groupId;
 $(document).ready(function () {
     /* Adding selected class for selected devices */
     $(deviceCheckbox).each(function () {
@@ -72,6 +73,9 @@ $(document).ready(function () {
             return $("#content-filter-types").html();
         }
     });
+
+    groupId = $("#request-group-id").data("groupid");
+    loadDevices();
 });
 
 /*
@@ -134,10 +138,18 @@ function loadDevices(searchType, searchParam) {
     $.template("device-listing", deviceListingSrc, function (template) {
         var serviceURL;
         if ($.hasPermission("LIST_DEVICES")) {
-            serviceURL = "/iotserver/api/devices/all";
+            if (groupId && groupId != "0") {
+                serviceURL = "/iotserver/api/group/id/" + groupId + "/device/all";
+            } else {
+                serviceURL = "/iotserver/api/devices/all";
+            }
         } else if ($.hasPermission("LIST_OWN_DEVICES")) {
             //Get authenticated users devices
-            serviceURL = "/iotserver/api/devices/all";
+            if (groupId && groupId != "0") {
+                serviceURL = "/iotserver/api/group/id/" + groupId + "/device/all";
+            } else {
+                serviceURL = "/iotserver/api/devices/all";
+            }
         } else {
             $("#ast-container").html("Permission denied");
             return;
@@ -154,10 +166,17 @@ function loadDevices(searchType, searchParam) {
         var successCallback = function (data) {
             data = JSON.parse(data);
             var viewModel = {};
+            if (groupId && groupId != "0") {
+                data.data = data;
+            }
             viewModel.devices = data.data;
             viewModel.imageLocation = imageResource;
-            if(!data.data || data.data.length <= 0){
+            if (!data.data || data.data.length <= 0) {
-                $("#ast-container").html($("#no-devices-div-content").html());
+                if (groupId && groupId != "0") {
+                    $("#ast-container").html($("#no-grouped-devices-div-content").html());
+                } else {
+                    $("#ast-container").html($("#no-devices-div-content").html());
+                }
             } else {
                 var content = template(viewModel);
                 $("#ast-container").html(content);
@@ -177,12 +196,9 @@ function loadDevices(searchType, searchParam) {
             });
     });
 }
-$(document).ready(function () {
-    loadDevices();
-});
 
-function formatDates(){
+function formatDates() {
-    $(".formatDate").each(function(){
+    $(".formatDate").each(function () {
         var timeStamp = $(this).html();
         $(this).html(new Date(parseInt(timeStamp)).toUTCString());
     });
@@ -253,12 +269,12 @@ function attachEvents() {
         $("a#remove-device-yes-link").click(function () {
             invokerUtil.get(
                 removeDeviceAPI,
-                function (data,txtStatus,jqxhr) {
+                function (data, txtStatus, jqxhr) {
-		    var status = jqxhr.status;
+                    var status = jqxhr.status;
                     if (status == 200) {
                         $(modalPopupContent).html($('#remove-device-200-content').html());
-                        $('div[data-deviceid="' + deviceId  + '"]').remove();
+                        $('div[data-deviceid="' + deviceId + '"]').remove();
-			$("a#remove-device-200-link").click(function () {
+                        $("a#remove-device-200-link").click(function () {
                             hidePopup();
                         });
                     } else if (status == 400) {
@@ -310,38 +326,38 @@ function attachEvents() {
 
         $("a#edit-device-yes-link").click(function () {
             var newDeviceName = $('#edit-device-name').val();
-	    var device={"device":{"name" : newDeviceName}};
+            var device = {"device": {"name": newDeviceName}};
             invokerUtil.post(
                 editDeviceAPI,
                 device,
-                function (data,txtStatus,jqxhr) {
+                function (data, txtStatus, jqxhr) {
                     var status = jqxhr.status;
                     if (status == 200) {
                         $(modalPopupContent).html($('#edit-device-200-content').html());
-			            $("div[data-deviceid='"+deviceId+"'] .ast-name").html(newDeviceName);
+                        $("div[data-deviceid='" + deviceId + "'] .ast-name").html(newDeviceName);
                         $("a#edit-device-200-link").click(function () {
                             hidePopup();
                         });
                     } else if (status == 400) {
-                        $(modalPopupContent).html($('#edit-device-400-content').html());
+                        $(modalPopupContent).html($('#device-400-content').html());
-                        $("a#edit-device-400-link").click(function () {
+                        $("a#device-400-link").click(function () {
                             hidePopup();
                         });
                     } else if (status == 403) {
-                        $(modalPopupContent).html($('#edit-device-403-content').html());
+                        $(modalPopupContent).html($('#device-403-content').html());
-                        $("a#edit-device-403-link").click(function () {
+                        $("a#device-403-link").click(function () {
                             hidePopup();
                         });
                     } else if (status == 409) {
-                        $(modalPopupContent).html($('#edit-device-409-content').html());
+                        $(modalPopupContent).html($('#device-409-content').html());
-                        $("a#edit-device-409-link").click(function () {
+                        $("a#device-409-link").click(function () {
                             hidePopup();
                         });
                     }
                 },
                 function () {
-                    $(modalPopupContent).html($('#edit-device-unexpected-error-content').html());
+                    $(modalPopupContent).html($('#device-unexpected-error-content').html());
-                    $("a#edit-device-unexpected-error-link").click(function () {
+                    $("a#device-unexpected-error-link").click(function () {
                         hidePopup();
                     });
                 }
@@ -352,4 +368,87 @@ function attachEvents() {
             hidePopup();
         });
     });
+
+    /**
+     * Following click function would execute
+     * when a user clicks on "Group" link
+     * on Device Management page in WSO2 MDM Console.
+     */
+    $("a.group-device-link").click(function () {
+        var deviceId = $(this).data("deviceid");
+        var deviceType = $(this).data("devicetype");
+        var endPoint = "/iotserver/api/group/all";
+
+        $(modalPopupContent).html($('#group-device-modal-content').html());
+        $('#user-groups').html("Loading...");
+        $("a#group-device-yes-link").hide();
+        showPopup();
+
+        invokerUtil.get(endPoint,
+            function (data, txtStatus, jqxhr) {
+                var groups = JSON.parse(data);
+                var status = jqxhr.status;
+                if (status == 200) {
+                    if (groups.length <= 0) {
+                        $('#user-groups').html("There is no any groups available");
+                        return;
+                    }
+                    var str = '<br /><select id="assign-group-selector" style="color:#3f3f3f;padding:5px;width:250px;">';
+                    for (var group in groups) {
+                        str += '<option value="' + groups[group].id + '">' + groups[group].name + '</option>';
+                    }
+                    str += '</select>';
+                    $('#user-groups').html(str);
+                    $("a#group-device-yes-link").show();
+                    $("a#group-device-yes-link").click(function () {
+                        var selectedGroupId = $('#assign-group-selector').val();
+                        endPoint = "/iotserver/api/group/id/" + selectedGroupId + "/assign";
+                        var device = {"deviceId": deviceId, "deviceType": deviceType};
+                        invokerUtil.post(
+                            endPoint,
+                            device,
+                            function (data, txtStatus, jqxhr) {
+                                var status = jqxhr.status;
+                                if (status == 200) {
+                                    $(modalPopupContent).html($('#group-associate-device-200-content').html());
+                                    $("a#group-associate-device-200-link").click(function () {
+                                        hidePopup();
+                                    });
+                                } else if (status == 400) {
+                                    $(modalPopupContent).html($('#device-400-content').html());
+                                    $("a#device-400-link").click(function () {
+                                        hidePopup();
+                                    });
+                                } else if (status == 403) {
+                                    $(modalPopupContent).html($('#device-403-content').html());
+                                    $("a#device-403-link").click(function () {
+                                        hidePopup();
+                                    });
+                                } else if (status == 409) {
+                                    $(modalPopupContent).html($('#device-409-content').html());
+                                    $("a#device-409-link").click(function () {
+                                        hidePopup();
+                                    });
+                                }
+                            },
+                            function () {
+                                $(modalPopupContent).html($('#device-unexpected-error-content').html());
+                                $("a#device-unexpected-error-link").click(function () {
+                                    hidePopup();
+                                });
+                            });
+                    });
+                }
+            },
+            function () {
+                $(modalPopupContent).html($('#device-unexpected-error-content').html());
+                $("a#device-unexpected-error-link").click(function () {
+                    hidePopup();
+                });
+            });
+
+        $("a#group-device-cancel-link").click(function () {
+            hidePopup();
+        });
+    });
 }

modules/distribution/src/repository/jaggeryapps/iotserver/units/device-listing/public/templates/device-listing.hbs

@@ -28,6 +28,13 @@
 											</span>
                                 <span class="lbl-action">View</span>
                             </a>
+                            <a href="#" class="group-device-link" data-deviceid="{{deviceIdentifier}}" data-devicetype="{{type}}" data-devicename="{{name}}">
+											<span class="fw-stack">
+												<i class="fw fw-ring fw-stack-2x"></i>
+												<i class="fw fw-group fw-stack-1x"></i>
+											</span>
+                                <span class="lbl-action">Group</span>
+                            </a>
                             <a href="#" class="edit-device-link" data-deviceid="{{deviceIdentifier}}" data-devicetype="{{type}}" data-devicename="{{name}}">
 											<span class="fw-stack">
 												<i class="fw fw-ring fw-stack-2x"></i>

modules/distribution/src/repository/jaggeryapps/iotserver/units/group-detail/group-detail.hbs

@@ -69,7 +69,7 @@
                                 <div id="collapseFour" class="panel-collapse collapse" role="tabpanel"
                                      aria-labelledby="headingFour">
                                     <div class="panel-body">
-                                        <a href="../../groups/analytics?id={{group.id}}"><i class="fw fw-charts"></i>
+                                        <a href="/iotserver/groups/analytics?groupId={{group.id}}"><i class="fw fw-charts"></i>
                                             Show Statistics</a>
                                     </div>
                                 </div>
@@ -92,7 +92,7 @@
                                 <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel"
                                      aria-labelledby="headingTwo">
                                     <div class="panel-body">
-                                        <a href="../../device?id={{group.id}}"><i class="fw fw-charts"></i> Show Devices
+                                        <a href="/iotserver/devices?groupId={{group.id}}"><i class="fw fw-charts"></i> Show Devices
                                             in Group</a>
                                     </div>
                                 </div>

modules/distribution/src/repository/jaggeryapps/iotserver/units/group-listing/public/js/group-listing.js

@@ -331,6 +331,7 @@ function attachEvents() {
                     str += '</select>';
                     if (!hasUsers) {
                         str = "There is no any other users registered";
+                        $('#user-names').html(str);
                         return;
                     }
                     $('#user-names').html(str);