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['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.analytics.push(deviceMgtLink);
links['device-mgt'].push(dashboardLink); links['device-mgt'].push(dashboardLink);
links['group-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>

@ -164,13 +164,6 @@ function loadDevices() {
groups = data.data; groups = data.data;
} }
viewModel.groups = groups; 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); var content = template(viewModel);
$("#ast-container-parent").html(content); $("#ast-container-parent").html(content);
var deviceListing = $("#device-listing"); var deviceListing = $("#device-listing");
@ -183,9 +176,15 @@ function loadDevices() {
viewModel.devices = groups[g].devices; viewModel.devices = groups[g].devices;
viewModel.imageLocation = imageResource; viewModel.imageLocation = imageResource;
content = template(viewModel); 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 { } 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);
} }
/* /*
@ -197,7 +196,6 @@ function loadDevices() {
attachEvents(); attachEvents();
formatDates(); 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();
}); });
@ -378,9 +378,10 @@ 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);
} }
@ -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());
$('div[data-group="' + groupId + '"]').remove(); loadGroups();
$("a#remove-group-200-link").click(function () { setTimeout(function () {
hidePopup();
});
} else {
$(modalPopupContent).html($('#group-409-content').html());
$("a#group-409-link").click(function () {
hidePopup(); hidePopup();
}); }, 2000);
}
} 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