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

merge-requests/1/head
charithag 9 years ago
parent b7780e1742
commit 2be17aaa8d

@ -15,7 +15,7 @@ function onRequest(context) {
var dashboardLink = {
title: "Go back to Dashboard",
icon: "fw-left-arrow",
url: "/iotserver"
url: "/iotserver/dashboard"
};
var deviceMgtLink = {
@ -24,21 +24,32 @@ function onRequest(context) {
url: "/iotserver/devices"
};
var groupMgtLink = {
title: "Go back to Groups",
icon: "fw-left-arrow",
url: "/iotserver/groups"
};
var storeLink = {
title: "Go back to Store",
icon: "fw-left-arrow",
url: "/iotserver"
};
links.users.push(dashboardLink);
links.policies.push(dashboardLink);
links.profiles.push(dashboardLink);
links.store.push(dashboardLink);
links.store.push(storeLink);
links.analytics.push(deviceMgtLink);
links['device-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) {
//user is not logged in

@ -87,12 +87,6 @@
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<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>
@ -128,12 +122,6 @@
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<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>
@ -166,12 +154,6 @@
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<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>
@ -182,12 +164,6 @@
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<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>

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

@ -14,10 +14,10 @@
<div class="ast-title">
<h3 class="ast-name">{{name}}</h3>
<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 class="ast-model">
<span class="ast-ver">{{enrolmentInfo.owner}}</span>
<span class="ast-ver">Owner: {{enrolmentInfo.owner}}</span>
<span class="ast-published">{{status}}</span>
<div class="ast-btn-group">
@ -27,6 +27,13 @@
<i class="fw fw-view fw-stack-1x"></i>
</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>
{{#if_owner enrolmentInfo.owner }}
<a href="#" class="group-device-link" data-deviceid="{{deviceIdentifier}}" data-devicetype="{{type}}" data-devicename="{{name}}">

@ -77,12 +77,6 @@
<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="share-group-200-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
</a>
</div>
</div>
</div>
</div>
@ -113,12 +107,6 @@
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<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>
@ -160,12 +148,6 @@
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<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>
@ -207,12 +189,6 @@
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<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>

@ -253,10 +253,10 @@ function attachGroupAdding() {
if (status == 200) {
if (data != "false") {
$(modalPopupContent).html($('#add-group-200-content').html());
$("a#add-group-200-link").click(function () {
loadGroups();
setTimeout(function () {
hidePopup();
window.location.href = '/iotserver/groups';
});
}, 2000);
} else {
$(modalPopupContent).html($('#group-400-content').html());
$("a#group-400-link").click(function () {
@ -299,7 +299,7 @@ function attachEvents() {
* when a user clicks on "Share" link
* 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");
$("#group-data-form-" + groupId).closest('form').submit();
});
@ -367,7 +367,7 @@ function attachEvents() {
$("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){
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]);
}
@ -378,10 +378,11 @@ function attachEvents() {
var status = jqxhr.status;
if (status == 200) {
$(modalPopupContent).html($('#share-group-200-content').html());
$("a#share-group-200-link").click(function () {
loadGroups();
setTimeout(function () {
hidePopup();
});
}else {
}, 2000);
} else {
displayErrors(status);
}
}, errorHandler);
@ -423,18 +424,11 @@ function attachEvents() {
function (data, txtStatus, jqxhr) {
var status = jqxhr.status;
if (status == 200) {
if (data != "false") {
$(modalPopupContent).html($('#remove-group-200-content').html());
$('div[data-group="' + groupId + '"]').remove();
$("a#remove-group-200-link").click(function () {
hidePopup();
});
} else {
$(modalPopupContent).html($('#group-409-content').html());
$("a#group-409-link").click(function () {
hidePopup();
});
}
$(modalPopupContent).html($('#remove-group-200-content').html());
loadGroups();
setTimeout(function () {
hidePopup();
}, 2000);
} else {
displayErrors(status);
}
@ -483,10 +477,9 @@ function attachEvents() {
if (data != "false") {
$(modalPopupContent).html($('#edit-group-200-content').html());
$("div[data-groupid='" + groupId + "'] .ast-name").html(newGroupName);
$("a#edit-group-200-link").click(function () {
setTimeout(function () {
hidePopup();
window.location.href = '/iotserver/groups';
});
}, 2000);
} else {
$(modalPopupContent).html($('#group-409-content').html());
$("a#group-409-link").click(function () {

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

Loading…
Cancel
Save