135/netdisco
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make tabs fully parameterised

Browse Source
This commit is contained in:
Oliver Gorwits
2012-01-07 11:46:10 +00:00
parent 427a759c53
commit 229423996a
8 changed files with 157 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
Netdisco/lib/Netdisco.pm
View File

@@ -43,6 +43,14 @@ get '/search' => sub {
params->{'vendor'} = 'checked';
}
# list of tabs
var('tabs' => [
{ id => 'device', label => 'Device' },
{ id => 'node', label => 'Node' },
{ id => 'vlan', label => 'VLAN' },
{ id => 'port', label => 'Port' },
]);
template 'search';
};

67
Netdisco/views/inc/js/search.js Normal file
View File

@@ -0,0 +1,67 @@
$(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';
// 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/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>'
);
return;
}
}
);
}
// 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');
$('#' + 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);
});

12
Netdisco/views/inc/search/device.tt Normal file
View File

@@ -0,0 +1,12 @@
<div id="device_search" class="tab-pane [% 'active' IF params.tab == 'device' %]">
<form id="device_form" class="nd_sidesearchform form-stacked" method="get" action="/search">
<div class="clearfix">
<input class="span3" name="q" value="[% params.q %]" type="text"/>
</div>
<p><em>Device Search Options</em></p>
<input name="tab" value="device" type="hidden"/>
<div class="clearfix">
<button id="device_submit" type="submit" class="btn info">Search Again</button>
</div>
</form>
</div> <!-- /tab-pane -->

36
Netdisco/views/inc/search/node.tt Normal file
View File

@@ -0,0 +1,36 @@
<div id="node_search" class="tab-pane [% 'active' IF params.tab == 'node' %]">
<form id="node_form" class="nd_sidesearchform form-stacked" method="get" action="/search">
<div class="clearfix">
<input class="span3" name="q" value="[% params.q %]" type="text"/>
</div>
<p><em>Node Search Options</em></p>
<input name="tab" value="node" type="hidden"/>
<div class="clearfix input-prepend">
<label class="add-on">
<input type="checkbox" id="stamps" name="stamps"[% ' checked="checked"' IF params.stamps %]/>
</label>
<label for="stamps">
<span class="nd_searchcheckbox uneditable-input">Time Stamps</span>
</label>
</div>
<div class="clearfix input-prepend">
<label class="add-on">
<input type="checkbox" id="vendor" name="vendor"[% ' checked="checked"' IF params.vendor %]/>
</label>
<label for="vendor">
<span class="nd_searchcheckbox uneditable-input">Vendor</span>
</label>
</div>
<div class="clearfix input-prepend">
<label class="add-on">
<input type="checkbox" id="archived" name="archived"[% ' checked="checked"' IF params.archived %]/>
</label>
<label for="archived">
<span class="nd_searchcheckbox uneditable-input">Archived Data</span>
</label>
</div>
<div class="clearfix">
<button id="node_submit" type="submit" class="btn info">Search Again</button>
</div>
</form>
</div> <!-- /tab-pane -->

11
Netdisco/views/inc/search/port.tt Normal file
View File

@@ -0,0 +1,11 @@
<div id="port_search" class="tab-pane [% 'active' IF params.tab == 'port' %]">
<form id="port_form" class="nd_sidesearchform form-stacked" method="get" action="/search">
<div class="clearfix">
<input class="span3" name="q" value="[% params.q %]" type="text"/>
</div>
<input name="tab" value="vlan" type="hidden"/>
<div class="clearfix">
<button id="port_submit" type="submit" class="btn info">Search Again</button>
</div>
</form>
</div> <!-- /tab-pane -->

11
Netdisco/views/inc/search/vlan.tt Normal file
View File

@@ -0,0 +1,11 @@
<div id="vlan_search" class="tab-pane [% 'active' IF params.tab == 'vlan' %]">
<form id="vlan_form" class="nd_sidesearchform form-stacked" method="get" action="/search">
<div class="clearfix">
<input class="span3" name="q" value="[% params.q %]" type="text"/>
</div>
<input name="tab" value="vlan" type="hidden"/>
<div class="clearfix">
<button id="vlan_submit" type="submit" class="btn info">Search Again</button>
</div>
</form>
</div> <!-- /tab-pane -->

153
Netdisco/views/search.tt
View File

@@ -2,156 +2,27 @@
<div class="sidebar">
<div class="well">
<div class="tab-content">
<div id="nd_device_search" class="tab-pane [% 'active' IF params.tab == 'device' %]">
<form id="device_form" class="nd_sidesearchform form-stacked" method="get" action="/search">
<div class="clearfix">
<input class="span3" name="q" value="[% params.q %]" type="text"/>
</div>
<p><em>Device Search Options</em></p>
<input name="tab" value="device" type="hidden"/>
<div class="clearfix">
<button id="device_submit" type="submit" class="btn info">Search Again</button>
</div>
</form>
</div> <!-- /tab-pane -->
<div id="nd_node_search" class="tab-pane [% 'active' IF params.tab == 'node' %]">
<form id="node_form" class="nd_sidesearchform form-stacked" method="get" action="/search">
<div class="clearfix">
<input class="span3" name="q" value="[% params.q %]" type="text"/>
</div>
<p><em>Node Search Options</em></p>
<input name="tab" value="node" type="hidden"/>
<div class="clearfix input-prepend">
<label class="add-on">
<input type="checkbox" id="stamps" name="stamps" [% 'checked="checked"' IF params.stamps %]/>
</label>
<label for="stamps">
<span class="nd_searchcheckbox uneditable-input">Time Stamps</span>
</label>
</div>
<div class="clearfix input-prepend">
<label class="add-on">
<input type="checkbox" id="vendor" name="vendor" [% 'checked="checked"' IF params.vendor %]/>
</label>
<label for="vendor">
<span class="nd_searchcheckbox uneditable-input">Vendor</span>
</label>
</div>
<div class="clearfix input-prepend">
<label class="add-on">
<input type="checkbox" id="archived" name="archived" [% 'checked="checked"' IF params.archived %]/>
</label>
<label for="archived">
<span class="nd_searchcheckbox uneditable-input">Archived Data</span>
</label>
</div>
<div class="clearfix">
<button id="node_submit" type="submit" class="btn info">Search Again</button>
</div>
</form>
</div> <!-- /tab-pane -->
<div id="nd_vlan_search" class="tab-pane [% 'active' IF params.tab == 'vlan' %]">
<form id="vlan_form" class="nd_sidesearchform form-stacked" method="get" action="/search">
<div class="clearfix">
<input class="span3" name="q" value="[% params.q %]" type="text"/>
</div>
<input name="tab" value="vlan" type="hidden"/>
<div class="clearfix">
<button id="vlan_submit" type="submit" class="btn info">Search Again</button>
</div>
</form>
</div> <!-- /tab-pane -->
<div id="nd_port_search" class="tab-pane [% 'active' IF params.tab == 'port' %]">
<form id="port_form" class="nd_sidesearchform form-stacked" method="get" action="/search">
<div class="clearfix">
<input class="span3" name="q" value="[% params.q %]" type="text"/>
</div>
<input name="tab" value="vlan" type="hidden"/>
<div class="clearfix">
<button id="port_submit" type="submit" class="btn info">Search Again</button>
</div>
</form>
</div> <!-- /tab-pane -->
[% FOREACH tab IN vars.tabs %]
[% INCLUDE "inc/search/${tab.id}.tt" %]
[% END %]
</div> <!-- /tab-content -->
</div>
</div>
<div class="content">
<ul id="search_results" class="tabs" data-tabs="on">
<li [% 'class="active"' IF params.tab == 'device' %]><a href="#device_results">Device</a></li>
<li [% 'class="active"' IF params.tab == 'node' %]><a href="#node_results">Node</a></li>
<li [% 'class="active"' IF params.tab == 'vlan' %]><a href="#vlan_results">VLAN</a></li>
<li [% 'class="active"' IF params.tab == 'port' %]><a href="#port_results">Port</a></li>
[% FOREACH tab IN vars.tabs %]
<li[% ' class="active"' IF params.tab == tab.id %]><a href="#[% tab.id %]_pane">[% tab.label %]</a></li>
[% END %]
</ul>
<div class="tab-content">
<div class="tab-pane [% 'active' IF params.tab == 'device' %]" id="device_results">
<div class="span3 alert-message notice"><p>Waiting for results...</p></div>
</div>
<div class="tab-pane [% 'active' IF params.tab == 'node' %]" id="node_results">
<div class="span3 alert-message notice"><p>Waiting for results...</p></div>
</div>
<div class="tab-pane [% 'active' IF params.tab == 'vlan' %]" id="vlan_results">
<div class="span3 alert-message notice"><p>Waiting for results...</p></div>
</div>
<div class="tab-pane [% 'active' IF params.tab == 'port' %]" id="port_results">
<div class="span3 alert-message notice"><p>Waiting for results...</p></div>
</div>
[% FOREACH tab IN vars.tabs %]
<div class="tab-pane[% ' active' IF params.tab == tab.id %]" id="[% tab.id %]_pane"></div>
[% END %]
</div>
</div>
<script>
$(document).ready(function() {
function do_search (event, tab) {
var form = '#' + tab + '_form';
var target = '#' + tab + '_results';
/* stop form from submitting normally */
event.preventDefault();
/* get the form params */
var query = $(form).serialize();
/* submit the query and put results into the tab pane */
$(target).load( '/ajax/content/search/' + tab + '?' + query,
function(response, status, xhr) {
if (status == "error") {
$(target).html(
'<div class="span3 alert-message error"><p>Search failed!</p></div>'
);
return;
}
if (response === "") {
$(target).html(
'<div class="span3 alert-message info"><p>No matching records.</p></div>'
);
return;
}
}
);
}
[% FOREACH tab IN ['device', 'node', 'vlan', 'port'] %]
$('[% "#${tab}_form" %]').submit(function(event){ do_search(event, '[% tab %]'); });
[% END %]
[% IF params.tab %]
$('#[% params.tab %]_form').trigger("submit");
[% END %]
$('#search_results').bind('change', function(e) {
var to = $(e.target).attr('href').replace(/^#/,"").replace(/_results$/,"");
var from = $(e.relatedTarget).attr('href').replace(/^#/,"").replace(/_results$/,"");
$('#nd_' + from + '_search').toggleClass('active');
$('#nd_' + to + '_search').toggleClass('active');
$('#nd_' + to + '_results').html(
'<div class="span3 alert-message notice"><p>Waiting for results...</p></div>'
);
$('#' + 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);
});
<script type="text/javascript">
[%+ INCLUDE 'inc/js/search.js' -%]
</script>

0
README
View File