Tidying up the topic browser view

4.x.x
Ace 7 years ago
parent 7601decaaf
commit d74aadae20

@ -28,14 +28,6 @@ function InitiateViewOption(url) {
}
}
/*
* Setting-up global variables.
*/
var deviceCheckbox = "#ast-container .ctrl-wr-asset .itm-select input[type='checkbox']";
var assetContainer = "#ast-container";
var deviceListing, currentUser,name;
/*
* DOM ready functions.
*/
@ -52,12 +44,6 @@ $(document).ready(function () {
name = getParameterByName("name");
/* Adding selected class for selected topics */
$(deviceCheckbox).each(function () {
addDeviceSelectedClass(this);
});
/* for device list sorting drop down */
$(".ctrl-filter-type-switcher").popover({
html: true,
@ -67,30 +53,16 @@ $(document).ready(function () {
});
});
/*
* Add selected style class to the parent element function.
*
* @param checkbox: Selected checkbox
*/
function addDeviceSelectedClass(checkbox) {
if ($(checkbox).is(":checked")) {
$(checkbox).closest(".ctrl-wr-asset").addClass("selected device-select");
} else {
$(checkbox).closest(".ctrl-wr-asset").removeClass("selected device-select");
}
}
function loadTopics(searchType, searchParam) {
var serviceURL;
if ($.hasPermission("VIEW_TOPICS")) {
serviceURL = "/api/mqtt-topics/v1.0/admin/topics";
console.log("serviceURL------"+serviceURL);
} else {
$("#loading-content").remove();
$('#device-table').addClass('hidden');
$('#device-listing-status-msg').text('Permission denied.');
$("#device-listing-status").removeClass(' hidden');
$('#topics-table').addClass('hidden');
$('#topics-listing-status-msg').text('Permission denied.');
$("#topics-listing-status").removeClass(' hidden');
return;
}
@ -205,22 +177,15 @@ function loadTopics(searchType, searchParam) {
});
var json = {
"recordsTotal": Object.keys(data).length,
"recordsFiltered": Object.keys(data).length,
"recordsTotal": data.count,
"recordsFiltered": data.count,
"data": objects
};
var table = $('#device-grid1').DataTable();
setInterval( function () {
table.ajax.reload();
}, 300000 );
return JSON.stringify(json);
};
$('#device-grid1').datatables_extended_serverside_paging(
$('#topics-grid').datatables_extended_serverside_paging(
null,
serviceURL,
dataFilter,
@ -228,10 +193,8 @@ function loadTopics(searchType, searchParam) {
fnCreatedRow,
function () {
$(".icon .text").res_text(0.2);
$('#device-grid1').removeClass('hidden');
$('#topics-grid').removeClass('hidden');
$("#loading-content").remove();
}, {
"placeholder": "Search By Topic Name",
"searchKey": "name"

@ -46,198 +46,61 @@
<div class="col-md-12 wr-page-content">
<div>
<span id="permission" data-permission="{{permissions.list}}"></span>
{{unit "cdmf.unit.device.operation-mod"}}
{{#if deviceCount}}
<div id="loading-content" class="col-centered">
<i class="fw fw-settings fw-spin fw-2x"></i>
Loading subscriptions . . .
<br>
</div>
<div id="device-listing-status" class="raw hidden">
<ul style="list-style-type: none;">
<li class="message message-info">
<h4>
<i class="icon fw fw-info"></i>
<a id="device-listing-status-msg"></a>
</h4>
</li>
</ul>
</div>
<div id="device-table">
<table class="table table-striped table-hover list-table display responsive nowrap data-table hidden"
id="device-grid1">
<thead>
<tr class="sort-row">
<th class="no-sort"></th>
<th>By TopicName</th>
<th>By RemainingMsgCount</th>
<th>By Active</th>
<th>By Durable</th>
<th>By SubscriberQueueName</th>
<th>By SubscriptionIdentifier</th>
</tr>
<tr class="filter-row filter-box">
<th class="no-sort"></th>
<th data-for="By TopicName" class="text-filter"></th>
<th data-for="By RemainingMessageCount" class="text-filter"></th>
<th data-for="By Active" class="select-filter"></th>
<th data-for="By Durable" class="select-filter data-platform"></th>
<th data-for="By SubscriberQueueName" class="select-filter"></th>
<th data-for="By SubscriptionIdentifier" class="select-filter"></th>
<!--<th class="no-sort"></th>-->
</tr>
<tr class="bulk-action-row">
<th colspan="7">
<ul class="tiles"></ul>
</th>
</tr>
</thead>
<tbody id="ast-container">
<br class="c-both" />
</tbody>
</table>
</div>
<br class="c-both" />
<div id="content-filter-types" style="display: none">
<div class="sort-title">Sort By</div>
<div class="sort-options">
<a href="#">By SubscribedQueueOrTopicName<span class="ico-sort-asc"></span></a>
<a href="#">By localNumberOfMessagesRemainingForSubscriber</a>
<a href="#">By localActive</a>
<a href="#">By localDurable</a>
<a href="#">By localSubscriberQueueName</a>
<a href="#">By localSubscriptionIdentifier</a>
</div>
</div>
{{else}}
<div id="ast-container" class="ast-container list-view">
<div class="ctrl-info-panel col-centered text-center wr-login">
<h3 class="text-muted">
<i class="fw fw-devices fw-3x"></i>
</h3>
</div>
</div>
{{/if}}
<div id="edit-device-modal-content" class="hide">
<div class="modal-header">
<h3 class="pull-left modal-title">
Please enter new name for the device?
</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i
class="fw fw-cancel"></i>
</button>
</div>
<div class="modal-body add-margin-top-2x add-margin-bottom-2x">
<input id="edit-device-name" style="color:#3f3f3f;padding:5px" type="text"
value=""
placeholder="Type here" size="60">
</div>
<div class="modal-footer">
<div class="buttons">
<a href="#" id="edit-device-yes-link" class="btn-operations">
Rename
</a>
<a href="#" id="edit-device-cancel-link" class="btn-operations">
Cancel
</a>
</div>
</div>
<div id="loading-content" class="col-centered">
<i class="fw fw-settings fw-spin fw-2x"></i>
Loading subscriptions . . .
<br>
</div>
<div id="edit-device-200-content" class="hide">
<div class="modal-header">
<h3 class="pull-left modal-title">
Device was successfully updated.
</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i
class="fw fw-cancel"></i>
</button>
</div>
<div class="modal-body add-margin-top-2x add-margin-bottom-2x">
</div>
<div class="modal-footer">
<div class="buttons">
<div id="edit-device-200-content" class="hide">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>Device was successfully updated.</h3>
</div>
</div>
</div>
</div>
<div id="device-400-content" class="hide">
<div class="modal-content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>Exception at backend. Try Later.</h3>
<br />
<div class="buttons">
<a href="#" id="device-400-link" class="btn-operations">
Ok
</a>
</div>
</div>
</div>
</div>
</div>
<div id="device-403-content" class="hide">
<div class="modal-content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>Operation not permitted.</h3>
<br />
<div class="buttons">
<a href="#" id="device-403-link" class="btn-operations">
Ok
</a>
</div>
</div>
</div>
</div>
</div>
<div id="device-409-content" class="hide">
<div class="modal-content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>Device does not exist.</h3>
<br />
<div class="buttons">
<a href="#" id="remove-device-409-link" class="btn-operations">
Ok
</a>
</div>
</div>
</div>
</div>
</div>
<div id="no-device-selected" class="hide">
<div class="modal-content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>Please select one ore more devices in order to perform this
operation.</h3>
<br/>
<div class="buttons">
<a href="#" id="no-device-selected-link" class="btn-operations">
Ok
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="topics-listing-status" class="raw hidden">
<ul style="list-style-type: none;">
<li class="message message-info">
<h4>
<i class="icon fw fw-info"></i>
<a id="topics-listing-status-msg"></a>
</h4>
</li>
</ul>
</div>
<div id="topics-table">
<table class="table table-striped table-hover list-table display responsive nowrap data-table hidden"
id="topics-grid">
<thead>
<tr class="sort-row">
<th class="no-sort"></th>
<th>By TopicName</th>
<th>By RemainingMsgCount</th>
<th>By Active</th>
<th>By Durable</th>
<th>By SubscriberQueueName</th>
<th>By SubscriptionIdentifier</th>
</tr>
<tr class="filter-row filter-box">
<th class="no-sort"></th>
<th data-for="By TopicName" class="text-filter"></th>
<th data-for="By RemainingMessageCount" class="text-filter"></th>
<th data-for="By Active" class="select-filter"></th>
<th data-for="By Durable" class="select-filter data-platform"></th>
<th data-for="By SubscriberQueueName" class="select-filter"></th>
<th data-for="By SubscriptionIdentifier" class="select-filter"></th>
<!--<th class="no-sort"></th>-->
</tr>
</thead>
<tbody id="ast-container">
<br class="c-both" />
</tbody>
</table>
</div>
<br class="c-both" />
<div id="content-filter-types" style="display: none">
<div class="sort-title">Sort By</div>
<div class="sort-options">
<a href="#">By SubscribedQueueOrTopicName<span class="ico-sort-asc"></span></a>
<a href="#">By localNumberOfMessagesRemainingForSubscriber</a>
<a href="#">By localActive</a>
<a href="#">By localDurable</a>
<a href="#">By localSubscriberQueueName</a>
<a href="#">By localSubscriptionIdentifier</a>
</div>
</div>
</div>

Loading…
Cancel
Save