implement tabbed search
This commit is contained in:
Oliver Gorwits
@@ -1,69 +1,18 @@
|
||||
[%
|
||||
more_dd = { "Reports" = "/reports" }
|
||||
user_dd = [
|
||||
{ "title" = "Settings", "link" = "/settings" },
|
||||
{ "title" = "Help", "link" = "/help" },
|
||||
{ "title" = "Log Out", "link" = "/logout" }
|
||||
]
|
||||
%]
|
||||
|
||||
<div class="topbar" data-dropdown="dropdown">
|
||||
<div class="topbar-inner">
|
||||
<div class="container-fluid">
|
||||
<a class="brand" href="/">Netdisco</a>
|
||||
[% IF session.user %]
|
||||
<ul class="nav">
|
||||
<li><a href="/">Home</a></li>
|
||||
[% IF more_dd.size %]
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle">More</a>
|
||||
<ul class="dropdown-menu">
|
||||
[% FOREACH title IN more_dd.keys.sort %]
|
||||
<li><a href="[% more_dd.$title %]">[% title %]</a></li>
|
||||
[% END %]
|
||||
</ul>
|
||||
</li> <!-- /dropdown -->
|
||||
[% END %]
|
||||
</ul>
|
||||
<form action="/search">
|
||||
<input class="span5" type="text" placeholder="Search">
|
||||
</form>
|
||||
<ul class="nav secondary-nav">
|
||||
<li class="menu">
|
||||
<p>Logged in as </p>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle">[% session.user %]</a>
|
||||
<ul class="dropdown-menu">
|
||||
[% FOREACH item IN user_dd %]
|
||||
<li><a href="[% item.link %]">[% item.title %]</a></li>
|
||||
[% END %]
|
||||
</ul>
|
||||
</li> <!-- /dropdown -->
|
||||
</ul>
|
||||
[% END %]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="row nd_herorow">
|
||||
<div class="span10 offset3">
|
||||
[% IF params.failed %]
|
||||
<div class="nd_loginalert alert-message error" data-alert="on">
|
||||
<a class="close" href="#">×</a>
|
||||
<div class="nd_loginalert alert-message error">
|
||||
<p>Incorrect username or password, please try again.</p>
|
||||
</div>
|
||||
[% END %]
|
||||
[% IF params.logout %]
|
||||
<div class="nd_loginalert alert-message notice" data-alert="on">
|
||||
<a class="close" href="#">×</a>
|
||||
<div class="nd_loginalert alert-message notice">
|
||||
<p>You are logged out.</p>
|
||||
</div>
|
||||
[% END %]
|
||||
[% IF params.notfound %]
|
||||
<div class="nd_loginalert alert-message notice" data-alert="on">
|
||||
<a class="close" href="#">×</a>
|
||||
[% IF vars.notfound %]
|
||||
<div class="nd_loginalert alert-message notice">
|
||||
<p>Sorry, page not found.
|
||||
<a href="http://sourceforge.net/tracker/?group_id=80033&atid=558508" target="_blank">Report a Bug?</a></p>
|
||||
</div>
|
||||
|
||||
@@ -10,12 +10,12 @@
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
|
||||
<script type="text/javascript" src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-alerts.js"></script>
|
||||
<script type="text/javascript" src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-dropdown.js"></script>
|
||||
<script type="text/javascript" src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-tabs.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/jquery-latest.min.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/bootstrap-alerts.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/bootstrap-dropdown.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/bootstrap-tabs.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
|
||||
<!-- for the fixed navbar -->
|
||||
@@ -28,6 +28,55 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
[%
|
||||
more_dd = { "Reports" = "/reports" }
|
||||
user_dd = [
|
||||
{ "title" = "Settings", "link" = "/settings" },
|
||||
{ "title" = "Help", "link" = "/help" },
|
||||
{ "title" = "Log Out", "link" = "/logout" }
|
||||
]
|
||||
%]
|
||||
|
||||
<div class="topbar" data-dropdown="dropdown">
|
||||
<div class="topbar-inner">
|
||||
<div class="container-fluid">
|
||||
<a class="brand" href="/">Netdisco</a>
|
||||
[% IF session.user %]
|
||||
<ul class="nav">
|
||||
<li><a href="/">Home</a></li>
|
||||
[% IF more_dd.size %]
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle">More</a>
|
||||
<ul class="dropdown-menu">
|
||||
[% FOREACH title IN more_dd.keys.sort %]
|
||||
<li><a href="[% more_dd.$title %]">[% title %]</a></li>
|
||||
[% END %]
|
||||
</ul>
|
||||
</li> <!-- /dropdown -->
|
||||
[% END %]
|
||||
</ul>
|
||||
<form method="post" action="/search">
|
||||
<input name="from_navbar" value="1" type="hidden"/>
|
||||
<input placeholder="Search" class="span5" name="q" type="text"/>
|
||||
</form>
|
||||
<ul class="nav secondary-nav">
|
||||
<li class="menu">
|
||||
<p>Logged in as </p>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle">[% session.user %]</a>
|
||||
<ul class="dropdown-menu">
|
||||
[% FOREACH item IN user_dd %]
|
||||
<li><a href="[% item.link %]">[% item.title %]</a></li>
|
||||
[% END %]
|
||||
</ul>
|
||||
</li> <!-- /dropdown -->
|
||||
</ul>
|
||||
[% END %]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
[% content %]
|
||||
</body>
|
||||
</html>
|
||||
|
||||
151
Netdisco/views/search.tt
Normal file
151
Netdisco/views/search.tt
Normal file
@@ -0,0 +1,151 @@
|
||||
<div class="container-fluid">
|
||||
<div class="sidebar">
|
||||
<div class="well">
|
||||
<div class="tab-content">
|
||||
<div id="nd_device_search" class="tab-pane [% 'active' IF params.tab == 'device' %]">
|
||||
<form class="nd_sidesearchform form-stacked" method="post" 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 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 class="nd_sidesearchform form-stacked" method="post" 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 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 class="nd_sidesearchform form-stacked" method="post" 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 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 class="nd_sidesearchform form-stacked" method="post" 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 type="submit" class="btn info">Search Again</button>
|
||||
</div>
|
||||
</form>
|
||||
</div> <!-- /tab-pane -->
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
[% IF params.tab %]
|
||||
$('#[% params.tab %]_results').load('/ajax/content/search/[% params.tab %]', function(response, status, xhr) {
|
||||
if (status =="error") {
|
||||
$('#[% params.tab %]_results').html(
|
||||
'<div class="span3 alert-message error"><p>Search failed!</p></div>'
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (response === "") {
|
||||
$('#[% params.tab %]_results').html(
|
||||
'<div class="span3 alert-message info"><p>No matching records.</p></div>'
|
||||
);
|
||||
return;
|
||||
}
|
||||
});
|
||||
[% END %]
|
||||
|
||||
$('#search_results').bind('change', function(e) {
|
||||
var from = $(e.target).attr('href').replace(/^#/,"").replace(/_results$/,"");
|
||||
var to = $(e.relatedTarget).attr('href').replace(/^#/,"").replace(/_results$/,"");
|
||||
$('#nd_' + from + '_search').toggleClass('active');
|
||||
$('#nd_' + to + '_search').toggleClass('active');
|
||||
|
||||
var from_pane = '#' + from + '_results';
|
||||
$(from_pane).load('/ajax/content/search/' + from, function(response, status, xhr) {
|
||||
if (status =="error") {
|
||||
$(from_pane).html(
|
||||
'<div class="span3 alert-message error"><p>Search failed!</p></div>'
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (response === "") {
|
||||
$(from_pane).html(
|
||||
'<div class="span3 alert-message info"><p>No matching records.</p></div>'
|
||||
);
|
||||
return;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
<!-- 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>
|
||||
Reference in New Issue
Block a user