Add navigation options to groups and devices. Fix navigation UX issues in appbar

application-manager-new
charithag 10 years ago
parent b7780e1742
commit 2be17aaa8d

@ -15,7 +15,7 @@ function onRequest(context) {
var dashboardLink = { var dashboardLink = {
title: "Go back to Dashboard", title: "Go back to Dashboard",
icon: "fw-left-arrow", icon: "fw-left-arrow",
url: "/iotserver" url: "/iotserver/dashboard"
}; };
var deviceMgtLink = { var deviceMgtLink = {
@ -24,21 +24,32 @@ function onRequest(context) {
url: "/iotserver/devices" url: "/iotserver/devices"
}; };
var groupMgtLink = {
title: "Go back to Groups",
icon: "fw-left-arrow",
url: "/iotserver/groups"
};
var storeLink = { var storeLink = {
title: "Go back to Store", title: "Go back to Store",
icon: "fw-left-arrow", icon: "fw-left-arrow",
url: "/iotserver" url: "/iotserver"
}; };
links.users.push(dashboardLink); links.users.push(dashboardLink);
links.policies.push(dashboardLink); links.policies.push(dashboardLink);
links.profiles.push(dashboardLink); links.profiles.push(dashboardLink);
links.store.push(dashboardLink); links.store.push(dashboardLink);
links.store.push(storeLink); links.store.push(storeLink);
links.analytics.push(deviceMgtLink);
links['device-mgt'].push(dashboardLink);
links['group-mgt'].push(dashboardLink); links['group-mgt'].push(dashboardLink);
var groupId = request.getParameter("groupId");
if (groupId){
links.analytics.push(groupMgtLink);
links['device-mgt'].push(groupMgtLink);
}else{
links.analytics.push(deviceMgtLink);
links['device-mgt'].push(dashboardLink);
}
if (!carbonUser) { if (!carbonUser) {
//user is not logged in //user is not logged in

@ -87,12 +87,6 @@
<div class="row"> <div class="row">
<div class="col-lg-5 col-md-6 col-centered"> <div class="col-lg-5 col-md-6 col-centered">
<h3>Device was successfully removed.</h3> <h3>Device was successfully removed.</h3>
<div class="buttons">
<a href="#" id="remove-device-200-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -128,12 +122,6 @@
<div class="row"> <div class="row">
<div class="col-lg-5 col-md-6 col-centered"> <div class="col-lg-5 col-md-6 col-centered">
<h3>Device was successfully updated.</h3> <h3>Device was successfully updated.</h3>
<div class="buttons">
<a href="#" id="edit-device-200-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -166,12 +154,6 @@
<div class="row"> <div class="row">
<div class="col-lg-5 col-md-6 col-centered"> <div class="col-lg-5 col-md-6 col-centered">
<h3>Device was successfully associated with group.</h3> <h3>Device was successfully associated with group.</h3>
<div class="buttons">
<a href="#" id="group-associate-device-200-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -182,12 +164,6 @@
<div class="row"> <div class="row">
<div class="col-lg-5 col-md-6 col-centered"> <div class="col-lg-5 col-md-6 col-centered">
<h3>Device was successfully removed from group.</h3> <h3>Device was successfully removed from group.</h3>
<div class="buttons">
<a href="#" id="group-deassociate-device-200-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
</a>
</div>
</div> </div>
</div> </div>
</div> </div>

@ -39,9 +39,9 @@ var groupId, user;
} }
}); });
Handlebars.registerHelper("if_owner", function (owner, opts) { Handlebars.registerHelper("if_owner", function (owner, opts) {
if (owner == user){ if (owner == user) {
return opts.fn(this); return opts.fn(this);
}else{ } else {
opts.inverse(this); opts.inverse(this);
} }
}); });
@ -164,40 +164,38 @@ function loadDevices() {
groups = data.data; groups = data.data;
} }
viewModel.groups = groups; viewModel.groups = groups;
if (!groups || groups.length <= 0) { var content = template(viewModel);
if (groupId && groupId != "0") { $("#ast-container-parent").html(content);
$("#ast-container-parent").html($("#no-grouped-devices-div-content").html()); var deviceListing = $("#device-listing");
} else { var deviceListingSrc = deviceListing.attr("src");
$("#ast-container-parent").html($("#no-devices-div-content").html()); var imageResource = deviceListing.data("image-resource");
} $.template("device-listing", deviceListingSrc, function (template) {
} else { for (var g in groups) {
var content = template(viewModel); if (groups[g].devices && groups[g].devices.length > 0) {
$("#ast-container-parent").html(content); viewModel = {};
var deviceListing = $("#device-listing"); viewModel.devices = groups[g].devices;
var deviceListingSrc = deviceListing.attr("src"); viewModel.imageLocation = imageResource;
var imageResource = deviceListing.data("image-resource"); content = template(viewModel);
$.template("device-listing", deviceListingSrc, function (template) { } else {
for (var g in groups) { if (groupId && groupId != "0") {
if (groups[g].devices && groups[g].devices.length > 0){ content = $("#no-grouped-devices-div-content").html();
viewModel = {}; } else if (groups[g].id == 0 && g == 0) {
viewModel.devices = groups[g].devices; content = $("#no-devices-div-content").html();
viewModel.imageLocation = imageResource; } else {
content = template(viewModel);
}else{
content = $("#no-devices-in-group-div-content").html(); content = $("#no-devices-in-group-div-content").html();
} }
$("#ast-container-" + groups[g].id).html(content);
} }
/* $("#ast-container-" + groups[g].id).html(content);
* On device checkbox select add parent selected style class }
*/ /*
$(deviceCheckbox).click(function () { * On device checkbox select add parent selected style class
addDeviceSelectedClass(this); */
}); $(deviceCheckbox).click(function () {
attachEvents(); addDeviceSelectedClass(this);
formatDates();
}); });
} attachEvents();
formatDates();
});
}; };
invokerUtil.get(serviceURL, invokerUtil.get(serviceURL,
successCallback, function (message) { successCallback, function (message) {
@ -283,9 +281,9 @@ function attachEvents() {
if (status == 200) { if (status == 200) {
$(modalPopupContent).html($('#remove-device-200-content').html()); $(modalPopupContent).html($('#remove-device-200-content').html());
$('div[data-deviceid="' + deviceId + '"]').remove(); $('div[data-deviceid="' + deviceId + '"]').remove();
$("a#remove-device-200-link").click(function () { setTimeout(function () {
hidePopup(); hidePopup();
}); }, 2000);
} else if (status == 400) { } else if (status == 400) {
$(modalPopupContent).html($('#remove-device-400-content').html()); $(modalPopupContent).html($('#remove-device-400-content').html());
$("a#remove-device-400-link").click(function () { $("a#remove-device-400-link").click(function () {
@ -344,9 +342,9 @@ function attachEvents() {
if (status == 200) { if (status == 200) {
$(modalPopupContent).html($('#edit-device-200-content').html()); $(modalPopupContent).html($('#edit-device-200-content').html());
$("div[data-deviceid='" + deviceId + "'] .ast-name").html(newDeviceName); $("div[data-deviceid='" + deviceId + "'] .ast-name").html(newDeviceName);
$("a#edit-device-200-link").click(function () { setTimeout(function () {
hidePopup(); hidePopup();
}); }, 2000);
} else if (status == 400) { } else if (status == 400) {
$(modalPopupContent).html($('#device-400-content').html()); $(modalPopupContent).html($('#device-400-content').html());
$("a#device-400-link").click(function () { $("a#device-400-link").click(function () {
@ -383,9 +381,7 @@ function attachEvents() {
* when a user clicks on "Group" link * when a user clicks on "Group" link
* on Device Management page in WSO2 MDM Console. * on Device Management page in WSO2 MDM Console.
*/ */
if (groupId && groupId != "0") { if ($("a.group-device-link").length > 0) {
$("a.group-device-link").remove();
} else {
$("a.group-device-link").click(function () { $("a.group-device-link").click(function () {
var deviceId = $(this).data("deviceid"); var deviceId = $(this).data("deviceid");
var deviceType = $(this).data("devicetype"); var deviceType = $(this).data("devicetype");
@ -423,9 +419,10 @@ function attachEvents() {
var status = jqxhr.status; var status = jqxhr.status;
if (status == 200) { if (status == 200) {
$(modalPopupContent).html($('#group-associate-device-200-content').html()); $(modalPopupContent).html($('#group-associate-device-200-content').html());
$("a#group-associate-device-200-link").click(function () { loadDevices();
setTimeout(function () {
hidePopup(); hidePopup();
}); }, 2000);
} else if (status == 400) { } else if (status == 400) {
$(modalPopupContent).html($('#device-400-content').html()); $(modalPopupContent).html($('#device-400-content').html());
$("a#device-400-link").click(function () { $("a#device-400-link").click(function () {

@ -14,10 +14,10 @@
<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 Type: {{type}}</span> <span class="ast-auth">Device Type: {{type}}</span>
<span class="ast-auth">Date of Enrollment: <span class="formatDate">{{enrolmentInfo.dateOfEnrolment}}</span></span> <span class="ast-auth">Enrolled On: <span class="formatDate">{{enrolmentInfo.dateOfEnrolment}}</span></span>
</div> </div>
<div class="ast-model"> <div class="ast-model">
<span class="ast-ver">{{enrolmentInfo.owner}}</span> <span class="ast-ver">Owner: {{enrolmentInfo.owner}}</span>
<span class="ast-published">{{status}}</span> <span class="ast-published">{{status}}</span>
<div class="ast-btn-group"> <div class="ast-btn-group">
@ -27,6 +27,13 @@
<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 href="/iotserver/analytics?deviceId={{deviceIdentifier}}&deviceType={{type}}">
<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>
{{#if_owner enrolmentInfo.owner }} {{#if_owner enrolmentInfo.owner }}
<a href="#" class="group-device-link" data-deviceid="{{deviceIdentifier}}" data-devicetype="{{type}}" data-devicename="{{name}}"> <a href="#" class="group-device-link" data-deviceid="{{deviceIdentifier}}" data-devicetype="{{type}}" data-devicename="{{name}}">

@ -77,12 +77,6 @@
<div class="row"> <div class="row">
<div class="col-lg-5 col-md-6 col-centered"> <div class="col-lg-5 col-md-6 col-centered">
<h3>Group sharing updated successfully.</h3> <h3>Group sharing updated successfully.</h3>
<div class="buttons">
<a href="#" id="share-group-200-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -113,12 +107,6 @@
<div class="row"> <div class="row">
<div class="col-lg-5 col-md-6 col-centered"> <div class="col-lg-5 col-md-6 col-centered">
<h3>Group was successfully removed.</h3> <h3>Group was successfully removed.</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> </div>
@ -160,12 +148,6 @@
<div class="row"> <div class="row">
<div class="col-lg-5 col-md-6 col-centered"> <div class="col-lg-5 col-md-6 col-centered">
<h3>Group successfully added.</h3> <h3>Group successfully added.</h3>
<div class="buttons">
<a href="#" id="add-group-200-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -207,12 +189,6 @@
<div class="row"> <div class="row">
<div class="col-lg-5 col-md-6 col-centered"> <div class="col-lg-5 col-md-6 col-centered">
<h3>Group was successfully updated.</h3> <h3>Group was successfully updated.</h3>
<div class="buttons">
<a href="#" id="edit-group-200-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
</a>
</div>
</div> </div>
</div> </div>
</div> </div>

@ -253,10 +253,10 @@ function attachGroupAdding() {
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 () { loadGroups();
setTimeout(function () {
hidePopup(); hidePopup();
window.location.href = '/iotserver/groups'; }, 2000);
});
} 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 () {
@ -299,7 +299,7 @@ function attachEvents() {
* 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 IoT Server Console.
*/ */
$("a.view-group-link").click(function () { $(".view-group-link").click(function () {
var groupId = $(this).data("groupid"); var groupId = $(this).data("groupid");
$("#group-data-form-" + groupId).closest('form').submit(); $("#group-data-form-" + groupId).closest('form').submit();
}); });
@ -367,7 +367,7 @@ function attachEvents() {
$("a#share-group-yes-link").click(function () { $("a#share-group-yes-link").click(function () {
var updatedRoleMap = []; var updatedRoleMap = [];
for (var role in roleMap) { for (var role in roleMap) {
if ($('#user-role-' + roleMap[role].role).is(':checked') != roleMap[role].assigned){ if ($('#user-role-' + roleMap[role].role).is(':checked') != roleMap[role].assigned) {
roleMap[role].assigned = $('#user-role-' + roleMap[role].role).is(':checked'); roleMap[role].assigned = $('#user-role-' + roleMap[role].role).is(':checked');
updatedRoleMap.push(roleMap[role]); updatedRoleMap.push(roleMap[role]);
} }
@ -378,10 +378,11 @@ function attachEvents() {
var status = jqxhr.status; var status = jqxhr.status;
if (status == 200) { if (status == 200) {
$(modalPopupContent).html($('#share-group-200-content').html()); $(modalPopupContent).html($('#share-group-200-content').html());
$("a#share-group-200-link").click(function () { loadGroups();
setTimeout(function () {
hidePopup(); hidePopup();
}); }, 2000);
}else { } else {
displayErrors(status); displayErrors(status);
} }
}, errorHandler); }, errorHandler);
@ -423,18 +424,11 @@ function attachEvents() {
function (data, txtStatus, jqxhr) { function (data, txtStatus, jqxhr) {
var status = jqxhr.status; var status = jqxhr.status;
if (status == 200) { if (status == 200) {
if (data != "false") { $(modalPopupContent).html($('#remove-group-200-content').html());
$(modalPopupContent).html($('#remove-group-200-content').html()); loadGroups();
$('div[data-group="' + groupId + '"]').remove(); setTimeout(function () {
$("a#remove-group-200-link").click(function () { hidePopup();
hidePopup(); }, 2000);
});
} else {
$(modalPopupContent).html($('#group-409-content').html());
$("a#group-409-link").click(function () {
hidePopup();
});
}
} else { } else {
displayErrors(status); displayErrors(status);
} }
@ -483,10 +477,9 @@ function attachEvents() {
if (data != "false") { if (data != "false") {
$(modalPopupContent).html($('#edit-group-200-content').html()); $(modalPopupContent).html($('#edit-group-200-content').html());
$("div[data-groupid='" + groupId + "'] .ast-name").html(newGroupName); $("div[data-groupid='" + groupId + "'] .ast-name").html(newGroupName);
$("a#edit-group-200-link").click(function () { setTimeout(function () {
hidePopup(); hidePopup();
window.location.href = '/iotserver/groups'; }, 2000);
});
} else { } else {
$(modalPopupContent).html($('#group-409-content').html()); $(modalPopupContent).html($('#group-409-content').html());
$("a#group-409-link").click(function () { $("a#group-409-link").click(function () {

@ -9,7 +9,7 @@
<input type="hidden" name="users" value="{{users}}"> <input type="hidden" name="users" value="{{users}}">
</form> </form>
<div class="ctrl-wr-asset" data-groupid="{{id}}"> <div class="ctrl-wr-asset view-group-link" data-groupid="{{id}}">
<div class="itm-select"> <div class="itm-select">
<label class="wr-input-control checkbox"> <label class="wr-input-control checkbox">
<input type="checkbox"/> <input type="checkbox"/>
@ -35,6 +35,20 @@
</span> </span>
<span class="lbl-action">View</span> <span class="lbl-action">View</span>
</a> </a>
<a href="/iotserver/devices?groupId={{id}}">
<span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-devices fw-stack-1x"></i>
</span>
<span class="lbl-action">Devices</span>
</a>
<a href="/iotserver/analytics?groupId={{id}}">
<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}}"> <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>

Loading…
Cancel
Save