Merge pull request #206 from charithag/master

Restructure group related UIs
revert-70aa11f8
Kasun Delgolla 9 years ago
commit 04de876265

@ -19,5 +19,105 @@
{{/zone}} {{/zone}}
{{#zone "content"}} {{#zone "content"}}
{{unit "cdmf.unit.group.create"}} <div class="container container-bg white-bg">
<div class="col-md-12 col-lg-6 col-centered wr-content wr-login col-centered sign-panel">
<p class="page-sub-title">Add New Group</p>
<p>Create new device group on IoT Server</p>
<!-- validation -->
<span class="wr-validation-summary hidden center-block col-centered">
<strong class="label label-danger col-centered"></strong>
</span>
<hr/>
<form method="GET" class="form-login-box" action="groups">
<label class="wr-input-label">Group Name</label>
<div class="wr-input-control">
<input type="text right" id="name" placeholder="Group Name">
</div>
<label class="wr-input-label">Description</label>
<div class="wr-input-control">
<input type="text right" id="description" placeholder="Description">
</div>
<div class="wr-input-control">
<button class="wr-btn" id="add-group-btn">
&nbsp;&nbsp;&nbsp;&nbsp;Add&nbsp;&nbsp;&nbsp;&nbsp;</button>
<button class="wr-btn" onclick="history.go(-1)">&nbsp;&nbsp;&nbsp;&nbsp;Cancel&nbsp;&nbsp;&nbsp;&nbsp;</button>
</div>
</form>
</div>
</div>
<div id="group-400-content" class="hide">
<div class="modal-content">
<div class="row">
<div class="col-md-7 col-centered center-container">
<h4>Exception at backend. Try Later.</h4>
<br/>
<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="modal-content">
<div class="row">
<div class="col-md-7 col-centered center-container">
<h4>Operation not permitted.</h4>
<br/>
<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="modal-content">
<div class="row">
<div class="col-md-7 col-centered center-container">
<h4>Group Name already exists.</h4>
<br/>
<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="modal-content">
<div class="row">
<div class="col-md-7 col-centered center-container">
<h4>Unexpected error occurred!</h4>
<br/>
<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 "bottomJs"}}
{{js "js/group-add.js"}}
{{/zone}} {{/zone}}

@ -27,20 +27,10 @@ $(function () {
$('.wr-validation-summary').removeClass("hidden"); $('.wr-validation-summary').removeClass("hidden");
return false; return false;
} else { } else {
var addGroupAPI = "../api/group/add";
var group = {"name": name, "description": description}; var group = {"name": name, "description": description};
var postRequest = $.ajax({
url: addGroupAPI,
method: "POST",
contentType: "application/json",
accept: "application/json",
data: JSON.stringify(group)
});
postRequest.done(function (data, textStatus, jqxhr) { var successCallback = function (data) {
var status = JSON.parse(jqxhr.responseText).data.statusCode; if (data.status == 201) {
console.log(status);
if (status == 200) {
$('.wr-validation-summary strong').text("Group created. You will be redirected to groups"); $('.wr-validation-summary strong').text("Group created. You will be redirected to groups");
$('.wr-validation-summary').removeClass("hidden"); $('.wr-validation-summary').removeClass("hidden");
$('.wr-validation-summary strong').removeClass("label-danger"); $('.wr-validation-summary strong').removeClass("label-danger");
@ -51,17 +41,13 @@ $(function () {
} else { } else {
displayErrors(status); displayErrors(status);
} }
}); };
postRequest.fail(function (jqXHR, textStatus) { invokerUtil.post("/common/group_manager/groups", group,
displayErrors(status); successCallback, function (message) {
displayErrors(message.content);
}); });
//invokerUtil.post("/common/group_manager/group", group,
// successCallback, function (message) {
// console.log(message.content);
// });
return false; return false;
} }
}); });

@ -33,8 +33,244 @@
<div class="wr-hidden-operations wr-advance-operations"></div> <div class="wr-hidden-operations wr-advance-operations"></div>
<div class="col-md-12 wr-page-content"> <div class="col-md-12 wr-page-content">
<div> <div>
{{unit "cdmf.unit.group.listing"}} {{#if groupCount}}
<div class="container-fluid">
<table class="table table-striped table-hover list-table display responsive nowrap data-table table-selectable grid-view"
id="group-grid">
<thead>
<tr class="sort-row">
<th class="no-sort"></th>
<th class="no-sort"></th>
<th>By Owner</th>
<th class="no-sort"></th>
</tr>
<tr class="filter-row filter-box">
<th></th>
<th></th>
<th data-for="By Owner" class="text-filter"></th>
<th></th>
</tr>
</thead>
<tbody id="ast-container"></tbody>
</table>
</div>
{{else}}
<div id="ast-container" class="ast-container list-view">
<div class="ctrl-info-panel col-centered text-center wr-login">
<h2>You don't have any group registered at the moment.</h2>
<br/>
{{#if permissions.ADD_GROUP}}
<p class="text-center">
<a href="{{@app.context}}/group/add" class="wr-btn">
<span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-add fw-stack-1x"></i>
</span>
Add New Group
</a>
</p>
{{/if}}
</div>
</div>
{{/if}}
<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> </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="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>Operation 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>Unexpected error occurred!</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>
</div>
</div>
</div>
{{/zone}}
{{#zone "bottomJs"}}
<script id="group-listing" data-current-user="{{currentUser.username}}"
src="{{@unit.publicUri}}/templates/listing.hbs"
type="text/x-handlebars-template"></script>
{{#if groupCount}}
{{js "js/listing.js"}}
{{/if}}
{{/zone}} {{/zone}}

@ -87,14 +87,8 @@ function loadGroups() {
var groupListingSrc = groupListing.attr("src"); var groupListingSrc = groupListing.attr("src");
var currentUser = groupListing.data("currentUser"); var currentUser = groupListing.data("currentUser");
$.template("group-listing", groupListingSrc, function (template) { $.template("group-listing", groupListingSrc, function (template) {
var serviceURL = "api/group/all";
var getGroupsRequest = $.ajax({ var successCallback = function (data) {
url: serviceURL,
method: "GET"
});
getGroupsRequest.done(function (data) {
data = JSON.parse(data); data = JSON.parse(data);
var viewModel = {}; var viewModel = {};
viewModel.groups = data.data; viewModel.groups = data.data;
@ -112,6 +106,11 @@ function loadGroups() {
$('#group-grid').datatables_extended(); $('#group-grid').datatables_extended();
$(".icon .text").res_text(0.2); $(".icon .text").res_text(0.2);
};
invokerUtil.get("/common/group_manager/groups?start=0&rowCount=1000",
successCallback, function (message) {
displayErrors(message.content);
}); });
}); });
@ -199,24 +198,16 @@ function hidePopup() {
* Following functions should be triggered after AJAX request is made. * Following functions should be triggered after AJAX request is made.
*/ */
function attachEvents() { function attachEvents() {
/**
* Following click function would execute
* when a user clicks on "Share" link
* on Group Management page in WSO2 IoT Server Console.
*/
$(".view-group-link").click(function () {
var groupId = $(this).data("groupid");
window.location = "devices?groupId=" + groupId;
});
/** /**
* Following click function would execute * Following click function would execute
* when a user clicks on "Share" link * when a user clicks on "Share" link
* on Group Management page in WSO2 IoT Server Console. * on Group Management page in WSO2 Device Management Server Console.
*/ */
$("a.share-group-link").click(function () { $("a.share-group-link").click(function () {
var groupId = $(this).data("groupid");
var username = $("#group-listing").data("current-user"); var username = $("#group-listing").data("current-user");
var groupName = $(this).data("group-name");
var groupOwner = $(this).data("group-owner");
$(modalPopupContent).html($('#share-group-w1-modal-content').html()); $(modalPopupContent).html($('#share-group-w1-modal-content').html());
$('#user-names').html('<div style="height:100px" data-state="loading" data-loading-text="Loading..." data-loading-style="icon-only" data-loading-inverse="true"></div>'); $('#user-names').html('<div style="height:100px" data-state="loading" data-loading-text="Loading..." data-loading-style="icon-only" data-loading-inverse="true"></div>');
showPopup(); showPopup();
@ -250,86 +241,7 @@ function attachEvents() {
$("a#share-group-next-link").show(); $("a#share-group-next-link").show();
$("a#share-group-next-link").click(function () { $("a#share-group-next-link").click(function () {
var selectedUser = $('#share-user-selector').val(); var selectedUser = $('#share-user-selector').val();
$(modalPopupContent).html($('#share-group-w2-modal-content').html()); getAllRoles(groupName, groupOwner, selectedUser);
$('#user-roles').html('<div style="height:100px" data-state="loading" data-loading-text="Loading..." data-loading-style="icon-only" data-loading-inverse="true"></div>');
$("a#share-group-yes-link").hide();
var roleMappingRequest = $.ajax({
url: "api/group/id/" + groupId + "/" + selectedUser + "/rolemapping",
method: "GET",
contentType: "application/json",
accept: "application/json"
});
roleMappingRequest.done(function (data, txtStatus, jqxhr) {
var roleMap = JSON.parse(data);
var status = jqxhr.status;
if (status == 200) {
roleMap = roleMap.data;
var str = '';
var isChecked = '';
var hasRoles;
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]);
}
}
var roleUpdateRequest = $.ajax({
url: "api/group/id/" + groupId + "/" + selectedUser + "/roleupdate",
method: "POST",
contentType: "application/json",
accept: "application/json",
data: JSON.stringify(updatedRoleMap)
});
roleUpdateRequest.done(function (data, txtStatus,
jqxhr) {
var status = jqxhr.status;
if (status == 200) {
$(modalPopupContent).html($('#share-group-200-content').html());
setTimeout(function () {
hidePopup();
location.reload(false);
}, 2000);
} else {
displayErrors(status);
}
});
roleUpdateRequest.fail(function (jqXHR) {
displayErrors(jqXHR);
});
});
} else {
displayErrors(status);
}
});
roleMappingRequest.fail(function (jqXHR) {
displayErrors(jqXHR);
});
$("a#share-group-w2-cancel-link").click(function () {
hidePopup();
});
}); });
} else { } else {
displayErrors(status); displayErrors(status);
@ -351,23 +263,15 @@ function attachEvents() {
* on Group Management page in WSO2 IoT Server Console. * on Group Management page in WSO2 IoT Server Console.
*/ */
$("a.remove-group-link").click(function () { $("a.remove-group-link").click(function () {
var groupId = $(this).data("groupid"); var groupName = $(this).data("group-name");
var removeGroupApi = "api/group/id/" + groupId + "/remove"; var groupOwner = $(this).data("group-owner");
$(modalPopupContent).html($('#remove-group-modal-content').html()); $(modalPopupContent).html($('#remove-group-modal-content').html());
showPopup(); showPopup();
$("a#remove-group-yes-link").click(function () { $("a#remove-group-yes-link").click(function () {
var deleteRequest = $.ajax({ var successCallback = function (data) {
url: removeGroupApi, if (data.status == 200) {
method: "DELETE",
contentType: "application/json",
accept: "application/json"
});
deleteRequest.done(function (data, txtStatus, jqxhr) {
var status = jqxhr.status;
if (status == 200) {
$(modalPopupContent).html($('#remove-group-200-content').html()); $(modalPopupContent).html($('#remove-group-200-content').html());
setTimeout(function () { setTimeout(function () {
hidePopup(); hidePopup();
@ -376,10 +280,11 @@ function attachEvents() {
} else { } else {
displayErrors(status); displayErrors(status);
} }
}); };
deleteRequest.fail(function (jqXHR) { invokerUtil.delete("/common/group_manager/groups/" + groupOwner + "/" + groupName,
displayErrors(jqXHR); successCallback, function (message) {
displayErrors(message.content);
}); });
}); });
@ -395,10 +300,9 @@ function attachEvents() {
* on Device Management page in WSO2 MDM Console. * on Device Management page in WSO2 MDM Console.
*/ */
$("a.edit-group-link").click(function () { $("a.edit-group-link").click(function () {
var groupId = $(this).data("groupid"); var groupName = $(this).data("group-name");
var groupName = $(this).data("groupname"); var groupOwner = $(this).data("group-owner");
var groupDescription = $(this).data("groupdescription"); var groupDescription = $(this).data("group-description");
var editGroupApi = "api/group/id/" + groupId + "/update";
$(modalPopupContent).html($('#edit-group-modal-content').html()); $(modalPopupContent).html($('#edit-group-modal-content').html());
$('#edit-group-name').val(groupName); $('#edit-group-name').val(groupName);
@ -408,19 +312,10 @@ function attachEvents() {
$("a#edit-group-yes-link").click(function () { $("a#edit-group-yes-link").click(function () {
var newGroupName = $('#edit-group-name').val(); var newGroupName = $('#edit-group-name').val();
var newGroupDescription = $('#edit-group-description').val(); var newGroupDescription = $('#edit-group-description').val();
var group = {"name": newGroupName, "description": newGroupDescription}; var group = {"name": newGroupName, "description": newGroupDescription, "owner": groupOwner};
var groupUpdateRequest = $.ajax({ var successCallback = function (data) {
url: editGroupApi, if (data.status == 200) {
method: "POST",
contentType: "application/json",
accept: "application/json",
data: JSON.stringify(group)
});
groupUpdateRequest.done(function (data, txtStatus, jqxhr) {
var status = jqxhr.status;
if (status == 200) {
$(modalPopupContent).html($('#edit-group-200-content').html()); $(modalPopupContent).html($('#edit-group-200-content').html());
$("h4[data-groupid='" + groupId + "']").html(newGroupName); $("h4[data-groupid='" + groupId + "']").html(newGroupName);
setTimeout(function () { setTimeout(function () {
@ -429,10 +324,11 @@ function attachEvents() {
} else { } else {
displayErrors(status); displayErrors(status);
} }
}); };
groupUpdateRequest.fail(function (jqXHR) { invokerUtil.put("/common/group_manager/groups/" + groupOwner + "/" + groupName,
displayErrors(jqXHR); successCallback, function (message) {
displayErrors(message.content);
}); });
}); });
@ -442,6 +338,105 @@ function attachEvents() {
}); });
} }
function getAllRoles(groupName, groupOwner, selectedUser) {
$(modalPopupContent).html($('#share-group-w2-modal-content').html());
$('#user-roles').html('<div style="height:100px" data-state="loading" data-loading-text="Loading..." data-loading-style="icon-only" data-loading-inverse="true"></div>');
$("a#share-group-yes-link").hide();
var successCallback = function (data) {
if (data.status == 200) {
if (data.data.length > 0) {
generateRoleMap(groupName, groupOwner, selectedUser, data.data);
} else {
$('#user-roles').html("There is no any roles for this group.");
}
} else {
displayErrors(status);
}
};
invokerUtil.get("/common/group_manager/groups/" + groupOwner + "/" + groupName + "/share/roles",
successCallback, function (message) {
displayErrors(message.content);
});
$("a#share-group-w2-cancel-link").click(function () {
hidePopup();
});
}
function generateRoleMap(groupName, groupOwner, selectedUser, allRoles) {
var successCallback = function (data) {
if (data.status == 200) {
var userRoles = data.data;
var roleMap = [];
var str = '';
var isChecked = '';
for (var role in allRoles) {
var objRole = {"role": allRoles[role], "assigned": false};
for (var usrRole in userRoles) {
if (allRoles[role] == userRoles[usrRole]) {
objRole.assigned = true;
isChecked = 'checked';
break;
}
}
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;';
roleMap.push(objRole);
}
$('#user-roles').html(str);
$("a#share-group-yes-link").show();
var isOngoing;
$("a#share-group-yes-link").click(function () {
if (isOngoing) {
return false;
}
$("a#share-group-yes-link").html("Wait...");
isOngoing = true;
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');
updateGroupShare(groupName, groupOwner, selectedUser, roleMap[role]);
}
}
});
} else {
displayErrors(status);
}
};
invokerUtil.get("/common/group_manager/groups/" + groupOwner + "/" + groupName + "/share/roles?userName=" + selectedUser,
successCallback, function (message) {
displayErrors(message.content);
});
$("a#share-group-w2-cancel-link").click(function () {
hidePopup();
});
}
function updateGroupShare(groupName, groupOwner, selectedUser, role) {
var successCallback = function (data) {
var status = data.status;
if (status == 200) {
$(modalPopupContent).html($('#share-group-200-content').html());
setTimeout(function () {
hidePopup();
location.reload(false);
}, 2000);
} else {
displayErrors(status);
}
};
invokerUtil.put("/common/group_manager/groups/" + groupOwner + "/" + groupName + "/share/roles?userName=" + selectedUser,
role, successCallback, function (message) {
displayErrors(message.content);
});
}
function displayErrors(jqXHR) { function displayErrors(jqXHR) {
showPopup(); showPopup();
if (jqXHR.status == 400) { if (jqXHR.status == 400) {

@ -1,19 +1,19 @@
{{#each groups}} {{#each groups}}
<tr data-type="selectable" data-groupid="{{id}}"> <tr data-type="selectable" data-group-name="{{name}}" data-group-owner="{{owner}}">
<td class="remove-padding icon-only content-fill"> <td class="remove-padding icon-only content-fill">
<div class="thumbnail icon"> <div class="thumbnail icon">
<img class="square-element text fw " <img class="square-element text fw "
src="public/cdmf.unit.group.listing/images/group-icon.png"/> src="public/cdmf.page.groups/images/group-icon.png"/>
</div> </div>
</td> </td>
<td class="fade-edge"> <td class="fade-edge">
<h4 data-groupid="{{id}}">{{name}}</h4> <h4>{{name}}</h4>
</td> </td>
<td class="fade-edge remove-padding-top" data-search="{{owner}}" <td class="fade-edge remove-padding-top" data-search="{{owner}}"
data-display="{{owner}}" data-display="{{owner}}"
data-grid-label="Owner">{{owner}}</td> data-grid-label="Owner">{{owner}}</td>
<td class="text-right content-fill text-left-on-grid-view no-wrap"> <td class="text-right content-fill text-left-on-grid-view no-wrap">
<a href="devices?groupId={{id}}&groupName={{name}}" <a href="devices?groupName={{name}}&groupOwner={{owner}}"
data-click-event="remove-form" class="btn padding-reduce-on-grid-view"> data-click-event="remove-form" class="btn padding-reduce-on-grid-view">
<span class="fw-stack"> <span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i> <i class="fw fw-ring fw-stack-2x"></i>
@ -21,7 +21,7 @@
</span> </span>
<span class="hidden-xs hidden-on-grid-view">View Devices</span> <span class="hidden-xs hidden-on-grid-view">View Devices</span>
</a> </a>
<a href="analytics?groupId={{id}}&groupName={{name}}" <a href="analytics?groupName={{name}}&groupOwner={{owner}}"
data-click-event="remove-form" class="btn padding-reduce-on-grid-view"> data-click-event="remove-form" class="btn padding-reduce-on-grid-view">
<span class="fw-stack"> <span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i> <i class="fw fw-ring fw-stack-2x"></i>
@ -31,7 +31,7 @@
</a> </a>
<a href="#" data-click-event="remove-form" <a href="#" data-click-event="remove-form"
class="btn padding-reduce-on-grid-view share-group-link" class="btn padding-reduce-on-grid-view share-group-link"
data-groupid="{{id}}"> data-group-name="{{name}}" data-group-owner="{{owner}}">
<span class="fw-stack"> <span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i> <i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-share fw-stack-1x"></i> <i class="fw fw-share fw-stack-1x"></i>
@ -40,8 +40,8 @@
</a> </a>
<a href="#" data-click-event="remove-form" <a href="#" data-click-event="remove-form"
class="btn padding-reduce-on-grid-view edit-group-link" class="btn padding-reduce-on-grid-view edit-group-link"
data-groupid="{{id}}" data-groupname="{{name}}" data-group-name="{{name}}" data-group-owner="{{owner}}"
data-groupdescription="{{description}}"> data-group-description="{{description}}">
<span class="fw-stack"> <span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i> <i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-edit fw-stack-1x"></i> <i class="fw fw-edit fw-stack-1x"></i>
@ -50,7 +50,7 @@
</a> </a>
<a href="#" data-click-event="remove-form" <a href="#" data-click-event="remove-form"
class="btn padding-reduce-on-grid-view remove-group-link" class="btn padding-reduce-on-grid-view remove-group-link"
data-groupid="{{id}}"> data-group-name="{{name}}" data-group-owner="{{owner}}">
<span class="fw-stack"> <span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i> <i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-delete fw-stack-1x"></i> <i class="fw fw-delete fw-stack-1x"></i>

@ -1,101 +0,0 @@
<div class="container container-bg white-bg">
<div class="col-md-12 col-lg-6 col-centered wr-content wr-login col-centered sign-panel">
<p class="page-sub-title">Add New Group</p>
<p>Create new device group on IoT Server</p>
<!-- validation -->
<span class="wr-validation-summary hidden center-block col-centered">
<strong class="label label-danger col-centered"></strong>
</span>
<hr/>
<form method="GET" class="form-login-box" action="groups">
<label class="wr-input-label">Group Name</label>
<div class="wr-input-control">
<input type="text right" id="name" placeholder="Group Name">
</div>
<label class="wr-input-label">Description</label>
<div class="wr-input-control">
<input type="text right" id="description" placeholder="Description">
</div>
<div class="wr-input-control">
<button class="wr-btn" id="add-group-btn">&nbsp;&nbsp;&nbsp;&nbsp;Add&nbsp;&nbsp;&nbsp;&nbsp;</button>
<button class="wr-btn" onclick="javascript:history.go(-1)">&nbsp;&nbsp;&nbsp;&nbsp;Cancel&nbsp;&nbsp;&nbsp;&nbsp;</button>
</div>
</form>
</div>
</div>
<div id="group-400-content" class="hide">
<div class="modal-content">
<div class="row">
<div class="col-md-7 col-centered center-container">
<h4>Exception at backend. Try Later.</h4>
<br/>
<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="modal-content">
<div class="row">
<div class="col-md-7 col-centered center-container">
<h4>Operation not permitted.</h4>
<br/>
<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="modal-content">
<div class="row">
<div class="col-md-7 col-centered center-container">
<h4>Group Name already exists.</h4>
<br/>
<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="modal-content">
<div class="row">
<div class="col-md-7 col-centered center-container">
<h4>Unexpected error occurred!</h4>
<br/>
<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 "bottomJs"}}
{{js "js/group-add.js"}}
{{/zone}}

@ -1,240 +0,0 @@
{{#if groupCount}}
<div class="container-fluid">
<table class="table table-striped table-hover list-table display responsive nowrap data-table table-selectable grid-view"
id="group-grid">
<thead>
<tr class="sort-row">
<th class="no-sort"></th>
<th class="no-sort"></th>
<th>By Owner</th>
<th class="no-sort"></th>
</tr>
<tr class="filter-row filter-box">
<th></th>
<th></th>
<th data-for="By Owner" class="text-filter"></th>
<th></th>
</tr>
</thead>
<tbody id="ast-container"></tbody>
</table>
</div>
{{else}}
<div id="ast-container" class="ast-container list-view">
<div class="ctrl-info-panel col-centered text-center wr-login">
<h2>You don't have any group registered at the moment.</h2>
<br/>
{{#if permissions.ADD_GROUP}}
<p class="text-center">
<a href="{{@app.context}}/group/add" class="wr-btn">
<span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-add fw-stack-1x"></i>
</span>
Add New Group
</a>
</p>
{{/if}}
</div>
</div>
{{/if}}
<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="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>Operation 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>Unexpected error occurred!</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 "bottomJs"}}
<script id="group-listing" data-current-user="{{currentUser.username}}"
src="{{@unit.publicUri}}/templates/listing.hbs"
type="text/x-handlebars-template"></script>
{{#if groupCount}}
{{js "js/listing.js"}}
{{/if}}
{{/zone}}
Loading…
Cancel
Save