Add group details page

merge-requests/1/head
charithag 9 years ago
parent 70dd0203b5
commit e473946547

@ -112,7 +112,7 @@ if (uriMatcher.match("/{context}/api/group/add")) {
data = {"username": user.username, "shareUser":shareUser, "role":role}; data = {"username": user.username, "shareUser":shareUser, "role":role};
result = post(endPoint, data, "json"); result = post(endPoint, data, "json");
} else if (uriMatcher.match("/{context}/api/group/id/{groupId}/share")) { } else if (uriMatcher.match("/{context}/api/group/id/{groupId}/unshare")) {
groupId = uriMatcher.elements().groupId; groupId = uriMatcher.elements().groupId;
var unShareUser = request.getContent()["unShareUser"]; var unShareUser = request.getContent()["unShareUser"];
@ -197,6 +197,6 @@ if (uriMatcher.match("/{context}/api/group/add")) {
// returning the result. // returning the result.
if (result) { if (result) {
response.status = result.xhr.status; response.status = result.xhr.status;
print(false); print(result.data);
} }
%> %>

@ -135,6 +135,8 @@ if (uriMatcher.match("/{context}/api/user/login/")) {
result = 403; result = 403;
} }
} else if (uriMatcher.match("/{context}/api/users")) {
result = userModule.getUsers();
} }
// returning the result. // returning the result.

@ -119,6 +119,10 @@ utility = function () {
key: "groups/operation", key: "groups/operation",
name: "Perform Device Operation" name: "Perform Device Operation"
}], "device-mgt/user", type); }], "device-mgt/user", type);
userModule.addPermissions([{
key: "groups/list",
name: "List Groups of User"
}], "device-mgt/user", type);
}; };
return publicMethods; return publicMethods;

@ -1,13 +1,8 @@
{{#zone "main"}} {{#zone "main"}}
<div class="row wr-group-board"> <div class="row wr-device-board">
<div class="col-lg-12 wr-secondary-bar"> <div class="col-lg-12 wr-secondary-bar">
<label class="device-id device-select" data-groupid="{{group.id}}"> <label class="device-id device-select" data-groupid="{{group.id}}">
Group {{group.name}} Group: {{group.name}}
<span class="lbl-device">
{{#if group.viewModel.vendor}}
({{group.viewModel.vendor}} {{group.viewModel.model}})
{{/if}}
</span>
</label> </label>
</div> </div>
</div> </div>
@ -16,7 +11,7 @@
</div> </div>
<div class="col-md-12 wr-page-content"> <div class="col-md-12 wr-page-content">
{{unit "operation-bar"}} {{unit "operation-bar"}}
<div class="row"> <div class="row">
<div class="col-md-12 wr-stats-board"> <div class="col-md-12 wr-stats-board">
@ -25,13 +20,21 @@
<div class="col-lg-2 ast-desc-image"> <div class="col-lg-2 ast-desc-image">
<div class="row"> <div class="row">
<div class="col-lg-12 col-sm-4"> <div class="col-lg-12 col-sm-4">
<img src="{{self.publicURL}}/img/group-icon.png" style="width:200px" /> <img src="{{self.publicURL}}/img/group-icon.png" style="width:200px"/>
</div> </div>
<br/>
<div class="col-lg-12 col-sm-4 ast-desc"> <div class="col-lg-12 col-sm-4 ast-desc">
<div class="ast-group-desc"><b>Description</b><br/> <span>{{group.description}}</span>
</div>
<br/>
<div class="ast-group-desc"><b>No. of Devices:</b> {{group.deviceCount}}</div> <div class="ast-group-desc"><b>No. of Devices:</b> {{group.deviceCount}}</div>
<div class="ast-group-desc"><b>Users:</b> {{group.users}}</div> <div class="ast-group-desc"><b>Users:</b> {{group.users}}</div>
<div class="ast-group-desc"><b>Created on:</b><br/> <span class="formatDate">{{group.dateOfCreation}}</span></div> <div class="ast-group-desc"><b>Created on:</b> <span
<div class="ast-group-desc"><b>Modified on:</b><br/> <span class="formatDate">{{group.dateOfLastUpdate}}</span></div> class="formatDate">{{group.dateOfCreation}}</span></div>
<div class="ast-group-desc"><b>Modified on:</b> <span
class="formatDate">{{group.dateOfLastUpdate}}</span></div>
</div> </div>
</div> </div>
</div> </div>
@ -42,51 +45,6 @@
<div class="row"> <div class="row">
<div class="col-lg-6 col-md-6"> <div class="col-lg-6 col-md-6">
{{#if group.viewModel.BatteryLevel}}
<div class="col-lg-4">
<div class="wr-stats-board-tile">
<div class="tile-name">BATTERY</div>
<div>
<div class="tile-icon"><i class="fw fw-battery"></i></div>
<div class="tile-stats">{{group.viewModel.BatteryLevel}}%</div>
</div>
</div>
</div>
{{/if}}
{{#if group.viewModel.DeviceCapacity}}
<div class="col-lg-4">
<div class="wr-stats-board-tile">
<div class="tile-name">STORAGE</div>
<div>
<div class="tile-icon"><i class="fw fw-hdd"></i></div>
<div class="tile-stats">{{group.viewModel.DeviceCapacityPercentage}}%<span class="tile-stats-free">{{group.viewModel.DeviceCapacityUsed}} GB Free</span></div>
</div>
</div>
</div>
{{/if}}
{{#if group.viewModel.internal_memory.FreeCapacity}}
<div class="col-lg-4">
<div class="wr-stats-board-tile">
<div class="tile-name">LOCAL STORAGE</div>
<div>
<div class="tile-icon"><i class="fw fw-hdd"></i></div>
<div class="tile-stats">{{group.viewModel.internal_memory.DeviceCapacityPercentage}}%<span class="tile-stats-free">{{group.viewModel.internal_memory.FreeCapacity}} GB Free</span></div>
</div>
</div>
</div>
{{/if}}
{{#if group.viewModel.external_memory.FreeCapacity}}
<div class="col-lg-4">
<div class="wr-stats-board-tile">
<div class="tile-name">EXTERNAL STORAGE</div>
<div>
<div class="tile-icon"><i class="fw fw-hdd"></i></div>
<div class="tile-stats">{{group.viewModel.external_memory.DeviceCapacityPercentage}}%<span class="tile-stats-free">{{group.viewModel.external_memory.FreeCapacity}} GB Free</span></div>
</div>
</div>
</div>
{{/if}}
</div> </div>
</div> </div>
@ -98,7 +56,8 @@
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour"> <div class="panel-heading" role="tab" id="headingFour">
<h2 class="sub-title panel-title"> <h2 class="sub-title panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
<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-arrow fw-down-arrow fw-stack-1x"></i> <i class="fw fw-arrow fw-down-arrow fw-stack-1x"></i>
@ -107,55 +66,37 @@
</a> </a>
</h2> </h2>
</div> </div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"> <div id="collapseFour" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="headingFour">
<div class="panel-body"> <div class="panel-body">
<a href="../../groups/analytics?id={{id}}" ><i class="fw fw-charts"></i> Show Statistics</a> <a href="../../groups/analytics?id={{group.id}}"><i class="fw fw-charts"></i>
Show Statistics</a>
</div> </div>
</div> </div>
</div> </div>
<!-- policies --> <!-- devices -->
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo"> <div class="panel-heading" role="tab" id="headingTwo">
<h2 class="sub-title panel-title"> <h2 class="sub-title panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<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-arrow fw-down-arrow fw-stack-1x"></i> <i class="fw fw-arrow fw-down-arrow fw-stack-1x"></i>
</span> </span>
Policies Group Devices
</a> </a>
</h2> </h2>
</div> </div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="headingTwo">
<div class="panel-body"> <div class="panel-body">
Not available yet <a href="../../device?id={{group.id}}"><i class="fw fw-charts"></i> Show Devices
in Group</a>
</div> </div>
</div> </div>
</div> </div>
<!-- /policies -->
<!-- installed applications -->
<!--<div class="panel panel-default">-->
<!--<div class="panel-heading" role="tab" id="headingThree">-->
<!--<h2 class="sub-title panel-title">-->
<!--<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">-->
<!--<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>-->
<!--Installed Applications-->
<!--</a>-->
<!--</h2>-->
<!--</div>-->
<!--<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">-->
<!--<div class="panel-body">-->
<!--Not available yet-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!-- /installed applications -->
</div> </div>
@ -171,6 +112,5 @@
{{/zone}} {{/zone}}
{{#zone "bottomJs"}} {{#zone "bottomJs"}}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script src="{{self.publicURL}}/js/group-detail.js"></script> <script src="{{self.publicURL}}/js/group-detail.js"></script>
{{/zone}} {{/zone}}

@ -5,19 +5,15 @@ function onRequest(context) {
var uriMatcher = new URIMatcher(String(uri)); var uriMatcher = new URIMatcher(String(uri));
var isMatched = uriMatcher.match("/{context}/group/{groupId}"); var isMatched = uriMatcher.match("/{context}/group/{groupId}");
if (isMatched) { if (isMatched) {
var carbon = require('carbon'); var group = {};
var carbonHttpsServletTransport = carbon.server.address('https'); group.id = uriMatcher.elements().groupId;
group.name = request.getParameter("name");
var matchedElements = uriMatcher.elements(); group.deviceCount = request.getParameter("deviceCount");
var groupId = matchedElements.groupId; group.dateOfCreation = request.getParameter("dateOfCreation");
var endpoint = carbonHttpsServletTransport + "/" + matchedElements.context + "/api/group/id/" + groupId; group.dateOfLastUpdate = request.getParameter("dateOfLastUpdate");
log.info(endpoint); group.description = request.getParameter("description");
//var result = get(endpoint, {}, "json"); group.users = request.getParameter("users");
//if (result){ context.group =group;
// context.group = result.data;
//}else{
// response.sendError(503);
//}
} else { } else {
response.sendError(404); response.sendError(404);
} }

@ -30,6 +30,38 @@
<!-- /no groups found --> <!-- /no groups found -->
</div> </div>
<div id="share-group-modal-content" class="hide">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>Share group with others</h3>
<div class="buttons">
<a href="#" id="share-group-yes-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;OK&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 class="buttons">
<a href="#" id="remove-group-200-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
</a>
</div>
</div>
</div>
</div>
</div>
<div id="remove-group-modal-content" class="hide"> <div id="remove-group-modal-content" class="hide">
<div class="content"> <div class="content">
<div class="row"> <div class="row">

@ -1,12 +1,17 @@
function onRequest(context){ function onRequest(context){
//var userModule = require("/modules/user.js").userModule;
var permissions = []; var permissions = [];
//if(userModule.isAuthorized("/permission/device-mgt/admin/devices/list")){ //var userModule = require("/modules/user.js").userModule;
//if(userModule.isAuthorized("/permission/device-mgt/admin/groups/list")){
// permissions.push("LIST_GROUPS"); // permissions.push("LIST_GROUPS");
//}else if(userModule.isAuthorized("/permission/device-mgt/user/devices/list")){ //}else if(userModule.isAuthorized("/permission/device-mgt/groups/remove")){
// permissions.push("LIST_OWN_GROUPS"); // permissions.push("REMOVE_GROUPS");
//}else if(userModule.isAuthorized("/permission/device-mgt/groups/share")){
// permissions.push("SHARE_GROUPS");
//} //}
permissions.push("LIST_GROUPS"); permissions.push("LIST_GROUPS");
permissions.push("ADD_GROUPS");
permissions.push("SHARE_GROUPS");
context.permissions = stringify(permissions); context.permissions = stringify(permissions);
context.SHARE_GROUPS = true;
return context; return context;
} }

@ -245,11 +245,11 @@ function attachGroupAdding() {
var status = jqxhr.status; var status = jqxhr.status;
if (status == 200) { if (status == 200) {
if (data != "false") { if (data != "false") {
$(modalPopupContent).html($('#add-group-200-content').html()); $(modalPopupContent).html($('#add-group-200-content').html());
$("a#add-group-200-link").click(function () { $("a#add-group-200-link").click(function () {
hidePopup(); hidePopup();
location.reload(); location.reload();
}); });
} else { } else {
$(modalPopupContent).html($('#group-400-content').html()); $(modalPopupContent).html($('#group-400-content').html());
$("a#group-400-link").click(function () { $("a#group-400-link").click(function () {
@ -293,6 +293,83 @@ function attachGroupAdding() {
* 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.
*/
$("a.view-group-link").click(function () {
$("#group_data").closest('form').submit();
});
/**
* 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");
var shareGroupApi = "/iotserver/api/group/id/" + groupId + "/share";
var unShareGroupApi = "/iotserver/api/group/id/" + groupId + "/unshare";
$(modalPopupContent).html($('#share-group-modal-content').html());
showPopup();
$("a#share-group-share-link").click(function () {
var data = {"shareUser":"", "role":""};
invokerUtil.post(
shareGroupApi,
data,
function (data, txtStatus, jqxhr) {
var status = jqxhr.status;
if (status == 200) {
} else {
displayErrors(status);
}
},
function () {
$(modalPopupContent).html($('#group-unexpected-error-content').html());
$("a#group-unexpected-error-link").click(function () {
hidePopup();
});
}
);
});
$("a#share-group-unshare-link").click(function () {
var data = {"shareUser":"", "role":""};
invokerUtil.post(
unShareGroupApi,
data,
function (data, txtStatus, jqxhr) {
var status = jqxhr.status;
if (status == 200) {
} else {
displayErrors(status);
}
},
function () {
$(modalPopupContent).html($('#group-unexpected-error-content').html());
$("a#group-unexpected-error-link").click(function () {
hidePopup();
});
}
);
});
$("a#share-group-yes-link").click(function () {
hidePopup();
location.reload();
});
$("a#share-group-cancel-link").click(function () {
hidePopup();
});
});
/** /**
* Following click function would execute * Following click function would execute
* when a user clicks on "Remove" link * when a user clicks on "Remove" link
@ -324,26 +401,13 @@ function attachEvents() {
hidePopup(); hidePopup();
}); });
} }
} else if (status == 400) { } else {
$(modalPopupContent).html($('#group-400-content').html()); displayErrors(status);
$("a#remove-group-400-link").click(function () {
hidePopup();
});
} else if (status == 403) {
$(modalPopupContent).html($('#group-403-content').html());
$("a#remove-group-403-link").click(function () {
hidePopup();
});
} else if (status == 409) {
$(modalPopupContent).html($('#group-409-content').html());
$("a#remove-group-409-link").click(function () {
hidePopup();
});
} }
}, },
function () { function () {
$(modalPopupContent).html($('#group-unexpected-error-content').html()); $(modalPopupContent).html($('#group-unexpected-error-content').html());
$("a#remove-group-unexpected-error-link").click(function () { $("a#group-unexpected-error-link").click(function () {
hidePopup(); hidePopup();
}); });
} }
@ -387,7 +451,6 @@ function attachEvents() {
$("div[data-groupid='" + groupId + "'] .ast-name").html(newGroupName); $("div[data-groupid='" + groupId + "'] .ast-name").html(newGroupName);
$("a#edit-group-200-link").click(function () { $("a#edit-group-200-link").click(function () {
hidePopup(); hidePopup();
location.reload();
}); });
} else { } else {
$(modalPopupContent).html($('#group-409-content').html()); $(modalPopupContent).html($('#group-409-content').html());
@ -395,21 +458,8 @@ function attachEvents() {
hidePopup(); hidePopup();
}); });
} }
} else if (status == 400) { } else {
$(modalPopupContent).html($('#group-400-content').html()); displayErrors(status);
$("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();
});
} }
}, },
function () { function () {
@ -426,3 +476,22 @@ function attachEvents() {
}); });
}); });
} }
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();
});
}
}

@ -1,5 +1,14 @@
{{#each groups}} {{#each groups}}
{{groupMap this}} {{groupMap this}}
<form action="/iotserver/group/{{id}}" method="POST" id="group_data" >
<input type="hidden" name="name" value="{{name}}">
<input type="hidden" name="deviceCount" value="{{deviceCount}}">
<input type="hidden" name="dateOfCreation" value="{{dateOfCreation}}">
<input type="hidden" name="dateOfLastUpdate" value="{{dateOfLastUpdate}}">
<input type="hidden" name="description" value="{{description}}">
<input type="hidden" name="users" value="{{users}}">
</form>
<div class="ctrl-wr-asset" data-groupid="{{id}}"> <div class="ctrl-wr-asset" data-groupid="{{id}}">
<div class="itm-select"> <div class="itm-select">
<label class="wr-input-control checkbox"> <label class="wr-input-control checkbox">
@ -8,51 +17,50 @@
</label> </label>
</div> </div>
<div class="itm-ast"> <div class="itm-ast">
<a href="group/{{id}}"> <div class="ast-img"><img src="{{../imageLocation}}group-icon.png"/></div>
<div class="ast-img"><img src="{{../imageLocation}}group-icon.png"/></div> <div class="ast-desc">
<div class="ast-desc"> <div class="ast-title">
<div class="ast-title"> <h3 class="ast-name">{{name}}</h3>
<h3 class="ast-name">{{name}}</h3> <span class="ast-auth">Device Count: {{deviceCount}}</span>
<span class="ast-auth">Device Count: {{deviceCount}}</span> <span class="ast-auth">Created On: <span class="formatDate">{{dateOfCreation}}</span></span>
<span class="ast-auth">Created On: <span class="formatDate">{{dateOfCreation}}</span></span> </div>
</div> <div class="ast-model">
<div class="ast-model"> <span class="ast-ver">Shared with: {{users}}</span>
<span class="ast-ver">Shared with: {{users}}</span>
<div class="ast-btn-group"> <div href="#" class="ast-btn-group">
<a href="/iotserver/group/{{id}}"> <a class="view-group-link" data-group="{{this}}">
<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-view fw-stack-1x"></i> <i class="fw fw-view fw-stack-1x"></i>
</span> </span>
<span class="lbl-action">View</span> <span class="lbl-action">View</span>
</a> </a>
<a href="#" class="share-group-link" data-groupid="{{id}}"> <a href="#" class="share-group-link" data-groupid="{{id}}">
<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>
</span> </span>
<span class="lbl-action">Share</span> <span class="lbl-action">Share</span>
</a> </a>
<a href="#" class="edit-group-link" data-groupid="{{id}}" data-groupname="{{name}}" data-groupdescription="{{description}}"> <a href="#" class="edit-group-link" data-groupid="{{id}}" data-groupname="{{name}}"
data-groupdescription="{{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>
</span> </span>
<span class="lbl-action">Edit</span> <span class="lbl-action">Edit</span>
</a> </a>
<a href="#" class="remove-group-link" data-groupid="{{id}}"> <a href="#" class="remove-group-link" data-groupid="{{id}}">
<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>
</span> </span>
<span class="lbl-action">Delete</span> <span class="lbl-action">Delete</span>
</a> </a>
</div>
</div> </div>
</div> </div>
<br class="c-both"/> </div>
</a> <br class="c-both"/>
</div> </div>
</div> </div>

Loading…
Cancel
Save