community
/
product-iots
10
0
Fork 4
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add grouping functionality to device listing

Browse Source
merge-requests/1/head
charithag 9 years ago
parent 684d66f3f7
commit 7bf94fab00
4 changed files with 579 additions and 18 deletions
Show Stats Download Patch File Download Diff File

6
modules/distribution/src/repository/jaggeryapps/iotserver/units/appbar/appbar.js
Unescape View File

@ -86,6 +86,12 @@ function onRequest(context) {
icon: "fw-add", icon: "fw-add",
url: "/iotserver/devices/add-device" url: "/iotserver/devices/add-device"
}); });
links["device-mgt"].push({
title: "Add Group",
icon: "fw-add",
url: "#",
class: "add-group-link"
});
} }
if (permissions.ADD_DEVICE) { if (permissions.ADD_DEVICE) {
links["group-mgt"].push({ links["group-mgt"].push({

230
modules/distribution/src/repository/jaggeryapps/iotserver/units/device-listing/device-listing.hbs
Unescape View File

@ -2,7 +2,7 @@
<span id="permission" data-user="{{user}}" data-permission="{{permissions}}"></span> <span id="permission" data-user="{{user}}" data-permission="{{permissions}}"></span>
<span id="request-group-id" data-groupid="{{groupId}}"></span> <span id="request-group-id" data-groupid="{{groupId}}"></span>
<!-- form content placeholder --> <!-- form content placeholder -->
<div id="ast-container-parent" class="ast-container list-view"> <div id="ast-container-parent" class="ast-container">
<!-- no devices found --> <!-- no devices found -->
<div class="container-fluid wr-content-alt"> <div class="container-fluid wr-content-alt">
<div class="ctrl-info-panel col-md-6 col-centered"> <div class="ctrl-info-panel col-md-6 col-centered">
@ -232,6 +232,234 @@
</div> </div>
</div> </div>
</div> </div>
<div id="share-group-w1-modal-content" class="hide">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>Select user to manage group sharing</h3>
<div id="user-names">Loading...</div>
<div class="buttons">
<a href="#" id="share-group-next-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Next&nbsp;&nbsp;&nbsp;&nbsp;
</a>
&nbsp;&nbsp;
<a href="#" id="share-group-w1-cancel-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Cancel&nbsp;&nbsp;&nbsp;&nbsp;
</a>
</div>
</div>
</div>
</div>
</div>
<div id="share-group-w2-modal-content" class="hide">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>Select sharing roles</h3>
<br />
<div id="user-roles">Loading...</div>
<div class="buttons">
<a href="#" id="share-group-yes-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;OK&nbsp;&nbsp;&nbsp;&nbsp;
</a>
&nbsp;&nbsp;
<a href="#" id="share-group-w2-cancel-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Cancel&nbsp;&nbsp;&nbsp;&nbsp;
</a>
</div>
</div>
</div>
</div>
</div>
<div id="share-group-200-content" class="hide">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>Group sharing updated successfully.</h3>
</div>
</div>
</div>
</div>
<div id="remove-group-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 group from your Group List?</h3>
<div class="buttons">
<a href="#" id="remove-group-yes-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Yes&nbsp;&nbsp;&nbsp;&nbsp;
</a>
&nbsp;&nbsp;
<a href="#" id="remove-group-cancel-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Cancel&nbsp;&nbsp;&nbsp;&nbsp;
</a>
</div>
</div>
</div>
</div>
</div>
<div id="remove-group-200-content" class="hide">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>Group was successfully removed.</h3>
</div>
</div>
</div>
</div>
<div id="add-group-modal-content" class="hide">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>Please enter name and description for new group</h3>
<br/>
<div>
<input id="add-group-name" style="color:#3f3f3f;padding:5px" type="text" value=""
placeholder="Group Name" size="60">
</div>
<br/>
<div>
<input id="add-group-description" style="color:#3f3f3f;padding:5px" type="text" value=""
placeholder="Group Description" size="60">
</div>
<div class="buttons">
<a href="#" id="add-group-yes-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Add Group&nbsp;&nbsp;&nbsp;&nbsp;
</a>
&nbsp;&nbsp;
<a href="#" id="add-group-cancel-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Cancel&nbsp;&nbsp;&nbsp;&nbsp;
</a>
</div>
</div>
</div>
</div>
</div>
<div id="add-group-200-content" class="hide">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>Group successfully added.</h3>
</div>
</div>
</div>
</div>
<div id="edit-group-modal-content" class="hide">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>Please enter new name and description for the group</h3>
<br/>
<div>
<input id="edit-group-name" style="color:#3f3f3f;padding:5px" type="text" value=""
placeholder="Group Name" size="60">
</div>
<br/>
<div>
<input id="edit-group-description" style="color:#3f3f3f;padding:5px" type="text" value=""
placeholder="Group Description" size="60">
</div>
<div class="buttons">
<a href="#" id="edit-group-yes-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Update&nbsp;&nbsp;&nbsp;&nbsp;
</a>
&nbsp;&nbsp;
<a href="#" id="edit-group-cancel-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Cancel&nbsp;&nbsp;&nbsp;&nbsp;
</a>
</div>
</div>
</div>
</div>
</div>
<div id="edit-group-200-content" class="hide">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>Group was successfully updated.</h3>
</div>
</div>
</div>
</div>
<div id="group-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="group-400-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
</a>
</div>
</div>
</div>
</div>
</div>
<div id="group-403-content" class="hide">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>Action not permitted.</h3>
<div class="buttons">
<a href="#" id="group-403-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
</a>
</div>
</div>
</div>
</div>
</div>
<div id="group-409-content" class="hide">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>Group does not exist.</h3>
<div class="buttons">
<a href="#" id="group-409-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
</a>
</div>
</div>
</div>
</div>
</div>
<div id="group-unexpected-error-content" class="hide">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>Group does not exist.</h3>
<div class="buttons">
<a href="#" id="group-unexpected-error-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
</a>
</div>
</div>
</div>
</div>
</div>
{{/zone}} {{/zone}}
{{#zone "bottomJs"}} {{#zone "bottomJs"}}
<script id="group-listing" src="{{self.publicURL}}/templates/group-listing.hbs" <script id="group-listing" src="{{self.publicURL}}/templates/group-listing.hbs"

302
modules/distribution/src/repository/jaggeryapps/iotserver/units/device-listing/public/js/device-listing.js
Unescape View File

@ -16,7 +16,7 @@
* under the License. * under the License.
*/ */
var groupId, user; var groupId, username;
(function () { (function () {
var cache = {}; var cache = {};
@ -39,7 +39,7 @@ var groupId, user;
} }
}); });
Handlebars.registerHelper("if_owner", function (owner, opts) { Handlebars.registerHelper("if_owner", function (owner, opts) {
if (owner == user) { if (owner == username) {
return opts.fn(this); return opts.fn(this);
} else { } else {
opts.inverse(this); opts.inverse(this);
@ -72,7 +72,7 @@ $(document).ready(function () {
}); });
var i; var i;
user = $("#permission").data("user"); username = $("#permission").data("user");
var permissionList = $("#permission").data("permission"); var permissionList = $("#permission").data("permission");
for (i = 0; i < permissionList.length; i++) { for (i = 0; i < permissionList.length; i++) {
$.setPermission(permissionList[i]); $.setPermission(permissionList[i]);
@ -88,6 +88,7 @@ $(document).ready(function () {
groupId = $("#request-group-id").data("groupid"); groupId = $("#request-group-id").data("groupid");
loadDevices(); loadDevices();
attachGroupAdding();
}); });
/* /*
@ -125,9 +126,9 @@ function changeDeviceView(view, selection) {
}); });
$(selection).addClass("selected"); $(selection).addClass("selected");
if (view == "list") { if (view == "list") {
$(assetContainerParent).addClass("list-view"); $(".ast-container .devices-set").addClass("list-view");
} else { } else {
$(assetContainerParent).removeClass("list-view"); $(".ast-container .devices-set").removeClass("list-view");
} }
} }
@ -463,3 +464,294 @@ function attachEvents() {
} }
} }
var errorHandler = function () {
$(modalPopupContent).html($('#add-group-unexpected-error-content').html());
$("a#group-unexpected-error-link").click(function () {
hidePopup();
});
};
function attachGroupAdding() {
/**
* Following click function would execute
* when a user clicks on "Remove" link
* on Group Management page in WSO2 IoT Server Console.
*/
$("a.add-group-link").click(function () {
var addGroupApi = "/iotserver/api/group/add";
$(modalPopupContent).html($('#add-group-modal-content').html());
showPopup();
$("a#add-group-yes-link").click(function () {
var newGroupName = $('#add-group-name').val();
var newGroupDescription = $('#add-group-description').val();
var group = {"name": newGroupName, "description": newGroupDescription};
invokerUtil.post(
addGroupApi,
group,
function (data, txtStatus, jqxhr) {
var status = jqxhr.status;
if (status == 200) {
if (data != "false") {
$(modalPopupContent).html($('#add-group-200-content').html());
loadDevices();
setTimeout(function () {
hidePopup();
}, 2000);
} else {
$(modalPopupContent).html($('#group-400-content').html());
$("a#group-400-link").click(function () {
hidePopup();
});
}
} else if (status == 400) {
$(modalPopupContent).html($('#group-400-content').html());
$("a#group-400-link").click(function () {
hidePopup();
});
} else if (status == 403) {
$(modalPopupContent).html($('#agroup-403-content').html());
$("a#group-403-link").click(function () {
hidePopup();
});
} else if (status == 409) {
$(modalPopupContent).html($('#group-409-content').html());
$("a#group-409-link").click(function () {
hidePopup();
});
}
}, errorHandler
);
});
$("a#add-group-cancel-link").click(function () {
hidePopup();
});
});
}
/**
* Following functions should be triggered after AJAX request is made.
*/
function attachEvents() {
/**
* Following click function would execute
* when a user clicks on "Share" link
* on Group Management page in WSO2 IoT Server Console.
*/
$("a.share-group-link").click(function () {
var groupId = $(this).data("groupid");
$(modalPopupContent).html($('#share-group-w1-modal-content').html());
$('#user-names').html('Loading...');
showPopup();
$("a#share-group-next-link").hide();
invokerUtil.get("/iotserver/api/users",
function (data, txtStatus, jqxhr) {
var users = JSON.parse(data);
var status = jqxhr.status;
if (status == 200) {
var str = '<br /><select id="share-user-selector" style="color:#3f3f3f;padding:5px;width:250px;">';
var hasUsers = false;
for (var user in users) {
if (users[user].username != username) {
str += '<option value="' + users[user].username + '">' + users[user].username + '</option>';
hasUsers = true;
}
}
str += '</select>';
if (!hasUsers) {
str = "There is no any other users registered";
$('#user-names').html(str);
return;
}
$('#user-names').html(str);
$("a#share-group-next-link").show();
$("a#share-group-next-link").click(function () {
var selectedUser = $('#share-user-selector').val();
$(modalPopupContent).html($('#share-group-w2-modal-content').html());
$('#user-roles').html('Loading...');
$("a#share-group-yes-link").hide();
invokerUtil.get("/iotserver/api/group/id/" + groupId + "/" + selectedUser + "/rolemapping",
function (data, txtStatus, jqxhr) {
var roleMap = JSON.parse(data);
var status = jqxhr.status;
if (status == 200) {
var str = '';
var isChecked = '';
var hasRoles = false;
for (var role in roleMap) {
if (roleMap[role].assigned == true) {
isChecked = 'checked';
}
str += '<label class="checkbox-text"><input type="checkbox" id="user-role-' + roleMap[role].role + '" value="' + roleMap[role].role
+ '" ' + isChecked + '/>' + roleMap[role].role + '</label>&nbsp;&nbsp;&nbsp;&nbsp;';
hasRoles = true;
}
if (!hasRoles) {
str = "There is no any roles for this group";
return;
}
$('#user-roles').html(str);
$("a#share-group-yes-link").show();
$("a#share-group-yes-link").click(function () {
var updatedRoleMap = [];
for (var role in roleMap) {
if ($('#user-role-' + roleMap[role].role).is(':checked') != roleMap[role].assigned) {
roleMap[role].assigned = $('#user-role-' + roleMap[role].role).is(':checked');
updatedRoleMap.push(roleMap[role]);
}
}
invokerUtil.post("/iotserver/api/group/id/" + groupId + "/" + selectedUser + "/roleupdate",
updatedRoleMap,
function (data, txtStatus, jqxhr) {
var status = jqxhr.status;
if (status == 200) {
$(modalPopupContent).html($('#share-group-200-content').html());
loadDevices();
setTimeout(function () {
hidePopup();
}, 2000);
} else {
displayErrors(status);
}
}, errorHandler);
});
} else {
displayErrors(status);
}
}, errorHandler);
$("a#share-group-w2-cancel-link").click(function () {
hidePopup();
});
});
} else {
displayErrors(status);
}
}, errorHandler);
$("a#share-group-w1-cancel-link").click(function () {
hidePopup();
});
});
/**
* Following click function would execute
* when a user clicks on "Remove" link
* on Group Management page in WSO2 IoT Server Console.
*/
$("a.remove-group-link").click(function () {
var groupId = $(this).data("groupid");
var removeGroupApi = "/iotserver/api/group/id/" + groupId + "/remove";
$(modalPopupContent).html($('#remove-group-modal-content').html());
showPopup();
$("a#remove-group-yes-link").click(function () {
invokerUtil.delete(
removeGroupApi,
function (data, txtStatus, jqxhr) {
var status = jqxhr.status;
if (status == 200) {
$(modalPopupContent).html($('#remove-group-200-content').html());
loadDevices();
setTimeout(function () {
hidePopup();
}, 2000);
} else {
displayErrors(status);
}
},
function () {
$(modalPopupContent).html($('#group-unexpected-error-content').html());
$("a#group-unexpected-error-link").click(function () {
hidePopup();
});
}
);
});
$("a#remove-group-cancel-link").click(function () {
hidePopup();
});
});
/**
* Following click function would execute
* when a user clicks on "Edit" link
* on Device Management page in WSO2 MDM Console.
*/
$("a.edit-group-link").click(function () {
var groupId = $(this).data("groupid");
var groupName = $(this).data("groupname");
var groupDescription = $(this).data("groupdescription");
var editGroupApi = "/iotserver/api/group/id/" + groupId + "/update";
$(modalPopupContent).html($('#edit-group-modal-content').html());
$('#edit-group-name').val(groupName);
$('#edit-group-description').val(groupDescription);
showPopup();
$("a#edit-group-yes-link").click(function () {
var newGroupName = $('#edit-group-name').val();
var newGroupDescription = $('#edit-group-description').val();
var group = {"name": newGroupName, "description": newGroupDescription};
invokerUtil.post(
editGroupApi,
group,
function (data, txtStatus, jqxhr) {
var status = jqxhr.status;
if (status == 200) {
if (data != "false") {
$(modalPopupContent).html($('#edit-group-200-content').html());
loadDevices();
setTimeout(function () {
hidePopup();
}, 2000);
} else {
$(modalPopupContent).html($('#group-409-content').html());
$("a#group-409-link").click(function () {
hidePopup();
});
}
} else {
displayErrors(status);
}
},
function () {
$(modalPopupContent).html($('#group-unexpected-error-content').html());
$("a#group-unexpected-error-link").click(function () {
hidePopup();
});
}
);
});
$("a#edit-group-cancel-link").click(function () {
hidePopup();
});
});
}
function displayErrors(status) {
if (status == 400) {
$(modalPopupContent).html($('#group-400-content').html());
$("a#group-400-link").click(function () {
hidePopup();
});
} else if (status == 403) {
$(modalPopupContent).html($('#group-403-content').html());
$("a#group-403-link").click(function () {
hidePopup();
});
} else if (status == 409) {
$(modalPopupContent).html($('#group-409-content').html());
$("a#group-409-link").click(function () {
hidePopup();
});
}
}

45
modules/distribution/src/repository/jaggeryapps/iotserver/units/device-listing/public/templates/group-listing.hbs
Unescape View File

@ -1,9 +1,9 @@
{{#each groups}} {{#each groups}}
{{groupMap this}} {{groupMap this}}
<br/> <div class="ast-container list-view">
<div class="row wr-device-board"> <div class="row wr-device-board list-view" style="font-size: inherit;">
<div class="col-lg-12 wr-secondary-bar"> <div class="col-lg-12 wr-secondary-bar" style="width: inherit;">
<label class="device-id device-select"> <label class="device-id device-select" style="font-size: 20px; margin-bottom: 0px;">
{{#if name}} {{#if name}}
{{name}} Devices {{name}} Devices
{{else}} {{else}}
@ -11,9 +11,44 @@
{{/if}} {{/if}}
</label> </label>
</div> </div>
{{#if name}}
<div class="ast-model">
<a href="/iotserver/analytics?groupId={{id}}&name={{name}}">
<span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-sequence fw-stack-1x"></i>
</span>
<span class="lbl-action">Stats</span>
</a>
<a href="#" class="share-group-link" data-groupid="{{id}}">
<span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-share fw-stack-1x"></i>
</span>
<span class="lbl-action">Share</span>
</a>
<a href="#" class="edit-group-link" data-groupid="{{id}}" data-groupname="{{name}}"
data-groupdescription="{{description}}">
<span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-edit fw-stack-1x"></i>
</span>
<span class="lbl-action">Edit</span>
</a>
<a href="#" class="remove-group-link" data-groupid="{{id}}">
<span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-delete fw-stack-1x"></i>
</span>
<span class="lbl-action">Delete</span>
</a>
</div>
{{/if}}
</div> </div>
<hr/> <hr/>
<div id="ast-container-{{id}}" class="ast-container">
</div> </div>
<div id="ast-container-{{id}}" class="ast-container devices-set list-view">
</div>
<br/>
{{/each}} {{/each}}

Write Preview
Loading…
Cancel
Save