Add group details page

application-manager-new
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};
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;
var unShareUser = request.getContent()["unShareUser"];
@ -197,6 +197,6 @@ if (uriMatcher.match("/{context}/api/group/add")) {
// returning the result.
if (result) {
response.status = result.xhr.status;
print(false);
print(result.data);
}
%>

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

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

@ -1,13 +1,8 @@
{{#zone "main"}}
<div class="row wr-group-board">
<div class="row wr-device-board">
<div class="col-lg-12 wr-secondary-bar">
<label class="device-id device-select" data-groupid="{{group.id}}">
Group {{group.name}}
<span class="lbl-device">
{{#if group.viewModel.vendor}}
({{group.viewModel.vendor}} {{group.viewModel.model}})
{{/if}}
</span>
Group: {{group.name}}
</label>
</div>
</div>
@ -16,7 +11,7 @@
</div>
<div class="col-md-12 wr-page-content">
{{unit "operation-bar"}}
{{unit "operation-bar"}}
<div class="row">
<div class="col-md-12 wr-stats-board">
@ -25,13 +20,21 @@
<div class="col-lg-2 ast-desc-image">
<div class="row">
<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>
<br/>
<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>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>Modified on:</b><br/> <span class="formatDate">{{group.dateOfLastUpdate}}</span></div>
<div class="ast-group-desc"><b>Created on:</b> <span
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>
@ -42,51 +45,6 @@
<div class="row">
<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>
@ -98,7 +56,8 @@
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<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">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-arrow fw-down-arrow fw-stack-1x"></i>
@ -107,55 +66,37 @@
</a>
</h2>
</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">
<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>
<!-- policies -->
<!-- devices -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<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">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-arrow fw-down-arrow fw-stack-1x"></i>
</span>
Policies
Group Devices
</a>
</h2>
</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">
Not available yet
<a href="../../device?id={{group.id}}"><i class="fw fw-charts"></i> Show Devices
in Group</a>
</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>
@ -171,6 +112,5 @@
{{/zone}}
{{#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>
{{/zone}}

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

@ -30,6 +30,38 @@
<!-- /no groups found -->
</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 class="content">
<div class="row">

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

@ -245,11 +245,11 @@ function attachGroupAdding() {
var status = jqxhr.status;
if (status == 200) {
if (data != "false") {
$(modalPopupContent).html($('#add-group-200-content').html());
$("a#add-group-200-link").click(function () {
hidePopup();
location.reload();
});
$(modalPopupContent).html($('#add-group-200-content').html());
$("a#add-group-200-link").click(function () {
hidePopup();
location.reload();
});
} else {
$(modalPopupContent).html($('#group-400-content').html());
$("a#group-400-link").click(function () {
@ -293,6 +293,83 @@ function attachGroupAdding() {
* 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.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
* when a user clicks on "Remove" link
@ -324,26 +401,13 @@ function attachEvents() {
hidePopup();
});
}
} else if (status == 400) {
$(modalPopupContent).html($('#group-400-content').html());
$("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();
});
} else {
displayErrors(status);
}
},
function () {
$(modalPopupContent).html($('#group-unexpected-error-content').html());
$("a#remove-group-unexpected-error-link").click(function () {
$("a#group-unexpected-error-link").click(function () {
hidePopup();
});
}
@ -387,7 +451,6 @@ function attachEvents() {
$("div[data-groupid='" + groupId + "'] .ast-name").html(newGroupName);
$("a#edit-group-200-link").click(function () {
hidePopup();
location.reload();
});
} else {
$(modalPopupContent).html($('#group-409-content').html());
@ -395,21 +458,8 @@ function attachEvents() {
hidePopup();
});
}
} else 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();
});
} else {
displayErrors(status);
}
},
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}}
{{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="itm-select">
<label class="wr-input-control checkbox">
@ -8,51 +17,50 @@
</label>
</div>
<div class="itm-ast">
<a href="group/{{id}}">
<div class="ast-img"><img src="{{../imageLocation}}group-icon.png"/></div>
<div class="ast-desc">
<div class="ast-title">
<h3 class="ast-name">{{name}}</h3>
<span class="ast-auth">Device Count: {{deviceCount}}</span>
<span class="ast-auth">Created On: <span class="formatDate">{{dateOfCreation}}</span></span>
</div>
<div class="ast-model">
<span class="ast-ver">Shared with: {{users}}</span>
<div class="ast-img"><img src="{{../imageLocation}}group-icon.png"/></div>
<div class="ast-desc">
<div class="ast-title">
<h3 class="ast-name">{{name}}</h3>
<span class="ast-auth">Device Count: {{deviceCount}}</span>
<span class="ast-auth">Created On: <span class="formatDate">{{dateOfCreation}}</span></span>
</div>
<div class="ast-model">
<span class="ast-ver">Shared with: {{users}}</span>
<div class="ast-btn-group">
<a href="/iotserver/group/{{id}}">
<div href="#" class="ast-btn-group">
<a class="view-group-link" data-group="{{this}}">
<span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-view fw-stack-1x"></i>
</span>
<span class="lbl-action">View</span>
</a>
<a href="#" class="share-group-link" data-groupid="{{id}}">
<span class="lbl-action">View</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="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="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>
<span class="lbl-action">Delete</span>
</a>
</div>
</div>
<br class="c-both"/>
</a>
</div>
<br class="c-both"/>
</div>
</div>

Loading…
Cancel
Save