relocate templates; fix use of deprecated before_template
This commit is contained in:
Oliver Gorwits
116
Netdisco/views/js/device.js
Normal file
116
Netdisco/views/js/device.js
Normal file
@@ -0,0 +1,116 @@
|
||||
$(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( '[% uri_for('/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', '[% uri_for('/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);
|
||||
});
|
||||
107
Netdisco/views/js/search.js
Normal file
107
Netdisco/views/js/search.js
Normal file
@@ -0,0 +1,107 @@
|
||||
$(document).ready(function() {
|
||||
// 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( '[% uri_for('/ajax/content/search') %]/' + 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', '[% uri_for('/search') %]?' + query);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
// highlight active search filters in green
|
||||
// there must be a way to factor this out to a func but my JS is weak :-/
|
||||
|
||||
$("form .clearfix input").not("[name=q]").each(function() {
|
||||
if ($(this).val() === "") {
|
||||
$(this).parent(".clearfix").removeClass('success');
|
||||
} else {
|
||||
$(this).parent(".clearfix").addClass('success');
|
||||
}
|
||||
});
|
||||
$("form .clearfix input").not("[name=q]").change(function() {
|
||||
if ($(this).val() === "") {
|
||||
$(this).parent(".clearfix").removeClass('success');
|
||||
} else {
|
||||
$(this).parent(".clearfix").addClass('success');
|
||||
}
|
||||
});
|
||||
$("form .clearfix select").each(function() {
|
||||
if ($(this).find(":selected").length === 0) {
|
||||
$(this).parent(".clearfix").removeClass('success');
|
||||
} else {
|
||||
$(this).parent(".clearfix").addClass('success');
|
||||
}
|
||||
});
|
||||
$("form .clearfix select").change(function() {
|
||||
if ($(this).find(":selected").length === 0) {
|
||||
$(this).parent(".clearfix").removeClass('success');
|
||||
} else {
|
||||
$(this).parent(".clearfix").addClass('success');
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user