117 lines
4.4 KiB
JavaScript
117 lines
4.4 KiB
JavaScript
$(document).ready(function() {
|
|
$('.nd_collapse_columns').collapser({
|
|
target: 'next',
|
|
effect: 'slide',
|
|
changeText: true,
|
|
expandHtml: '<label class="nd_collapser">Display Columns<div class="arrow-up"></div></label>',
|
|
collapseHtml: '<label class="nd_collapser">Display Columns<div class="arrow-down"></div></label>',
|
|
});
|
|
|
|
$('.nd_collapse_portprop').collapser({
|
|
target: 'next',
|
|
effect: 'slide',
|
|
changeText: true,
|
|
expandHtml: '<label class="nd_collapser">Port Properties<div class="arrow-up"></div></label>',
|
|
collapseHtml: '<label class="nd_collapser">Port Properties<div class="arrow-down"></div></label>',
|
|
});
|
|
|
|
$('.nd_collapse_nodeprop').collapser({
|
|
target: 'next',
|
|
effect: 'slide',
|
|
changeText: true,
|
|
expandHtml: '<label class="nd_collapser">Node Properties<div class="arrow-up"></div></label>',
|
|
collapseHtml: '<label class="nd_collapser">Node Properties<div class="arrow-down"></div></label>',
|
|
});
|
|
|
|
$('.nd_collapse_legend').collapser({
|
|
target: 'next',
|
|
effect: 'slide',
|
|
changeText: true,
|
|
expandHtml: '<label class="nd_collapser">Legend<div class="arrow-up"></div></label>',
|
|
collapseHtml: '<label class="nd_collapser">Legend<div class="arrow-down"></div></label>',
|
|
});
|
|
|
|
// parameterised for the active tab - submits search form and injects
|
|
// HTML response into the tab pane, or an error/empty-results message
|
|
function do_search (event, tab) {
|
|
var form = '#' + tab + '_form';
|
|
var target = '#' + tab + '_pane';
|
|
var mark = '#' + tab + '_bookmark';
|
|
|
|
// stop form from submitting normally
|
|
event.preventDefault();
|
|
|
|
// get the form params
|
|
var query = $(form).serialize();
|
|
|
|
// in case of slow data load, let the user know
|
|
$(target).html(
|
|
'<div class="span3 alert-message notice"><p>Waiting for results...</p></div>'
|
|
);
|
|
|
|
// submit the query and put results into the tab pane
|
|
$(target).load( '/ajax/content/device/' + tab + '?' + query,
|
|
function(response, status, xhr) {
|
|
if (status !== "success") {
|
|
$(target).html(
|
|
'<div class="span6 alert-message error">' +
|
|
'<p>Search failed! Please contact your site administrator.</p></div>'
|
|
);
|
|
return;
|
|
}
|
|
if (response === "") {
|
|
$(target).html(
|
|
'<div class="span3 alert-message info"><p>No matching records.</p></div>'
|
|
);
|
|
}
|
|
// looks good, update the bookmark for this search
|
|
$(mark).attr('href', '/device?' + query);
|
|
|
|
// enable collapser on any large vlan lists
|
|
$('.nd_collapse_vlans').collapser({
|
|
target: 'next',
|
|
effect: 'slide',
|
|
changeText: true,
|
|
expandHtml: '<div class="cell-arrow-up"></div><div class="nd_collapser">Show VLANs</div>',
|
|
collapseHtml: '<div class="cell-arrow-down"></div><div class="nd_collapser">Hide VLANs</div>',
|
|
});
|
|
}
|
|
);
|
|
}
|
|
|
|
// search hook for each tab
|
|
[% FOREACH tab IN vars.tabs %]
|
|
$('[% "#${tab.id}_form" %]').submit(function(event){ do_search(event, '[% tab.id %]'); });
|
|
[% END %]
|
|
|
|
// on page load, load the content for the active tab
|
|
[% IF params.tab %]
|
|
$('#[% params.tab %]_form').trigger("submit");
|
|
[% END %]
|
|
|
|
// on tab change, hide previous tab's search form and show new tab's
|
|
// search form. also trigger to load the content for the newly active tab.
|
|
$('#search_results').bind('change', function(e) {
|
|
var to = $(e.target).attr('href').replace(/^#/,"").replace(/_pane$/,"");
|
|
var from = $(e.relatedTarget).attr('href').replace(/^#/,"").replace(/_pane$/,"");
|
|
|
|
$('#' + from + '_search').toggleClass('active');
|
|
$('#' + to + '_search').toggleClass('active');
|
|
|
|
var to_form = '#' + to + '_form';
|
|
var from_form = '#' + from + '_form';
|
|
// copy current search string to new form's input box
|
|
$(to_form).find("input[name=q]").val(
|
|
$(from_form).find("input[name=q]").val()
|
|
);
|
|
$(to_form).trigger("submit");
|
|
});
|
|
|
|
// fix green background on search checkboxes
|
|
// https://github.com/twitter/bootstrap/issues/742
|
|
syncCheckBox = function() {
|
|
$(this).parents('.add-on').toggleClass('active', $(this).is(':checked'));
|
|
};
|
|
$('.add-on :checkbox').each(syncCheckBox).click(syncCheckBox);
|
|
});
|