initial implementaton of ports sidebar
This commit is contained in:
Oliver Gorwits
@@ -46,7 +46,7 @@ hook 'before' => sub {
|
||||
};
|
||||
|
||||
ajax '/ajax/content/device/:thing' => sub {
|
||||
return "<p>Hello ". param('thing') ."</p>";
|
||||
return "<p>Hello, this is where the ". param('thing') ." content goes.</p>";
|
||||
};
|
||||
|
||||
# device ports with a description (er, name) matching
|
||||
@@ -76,6 +76,30 @@ get '/device' => sub {
|
||||
return;
|
||||
}
|
||||
|
||||
# list of columns
|
||||
var('port_columns' => [
|
||||
{ name => 'port', label => 'Port' },
|
||||
{ name => 'description', label => 'Description' },
|
||||
{ name => 'type', label => 'Type' },
|
||||
{ name => 'duplex', label => 'Duplex' },
|
||||
{ name => 'lastchange', label => 'Last Change' },
|
||||
{ name => 'name', label => 'Name' },
|
||||
{ name => 'speed', label => 'Speed' },
|
||||
{ name => 'mac', label => 'Port Mac' },
|
||||
{ name => 'mtu', label => 'MTU' },
|
||||
{ name => 'native', label => 'Native VLAN' },
|
||||
{ name => 'vlan', label => 'VLAN Membership' },
|
||||
{ name => 'connected', label => 'Connected Devices' },
|
||||
{ name => 'stp', label => 'Spanning Tree' },
|
||||
{ name => 'status', label => 'Status' },
|
||||
]);
|
||||
|
||||
# details for connected devices
|
||||
var('connected_properties' => [
|
||||
{ name => 'age', label => 'Age Stamp' },
|
||||
{ name => 'ip', label => 'IP Address' },
|
||||
]);
|
||||
|
||||
# list of tabs
|
||||
var('tabs' => [
|
||||
{ id => 'details', label => 'Details' },
|
||||
|
||||
@@ -32,11 +32,23 @@ form .clearfix.success input {
|
||||
padding: 30px 60px 40px 90px;
|
||||
}
|
||||
|
||||
.inputs-list:first-child {
|
||||
padding-top: 2px !important;
|
||||
}
|
||||
|
||||
.device_label {
|
||||
color: #0069D6;
|
||||
}
|
||||
|
||||
.nd_loginform {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.nd_days_select {
|
||||
width: 56px;
|
||||
}
|
||||
|
||||
.nd_sidesearchform {
|
||||
padding-left: 0px;
|
||||
}
|
||||
@@ -72,3 +84,33 @@ form .clearfix.success input {
|
||||
padding: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.nd_collapser {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nd_collapse_pre_hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.arrow-up {
|
||||
float: right;
|
||||
margin-top: 6px;
|
||||
margin-right: 11px;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-bottom: 8px solid #F89406;
|
||||
}
|
||||
|
||||
.arrow-down {
|
||||
float: right;
|
||||
margin-top: 6px;
|
||||
margin-right: 11px;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-top: 8px solid #F89406;
|
||||
}
|
||||
|
||||
9
Netdisco/public/javascripts/jquery-collapser.min.js
vendored
Normal file
9
Netdisco/public/javascripts/jquery-collapser.min.js
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
/*
|
||||
* jQuery - Collapser - Plugin v1.0
|
||||
* http://www.aakashweb.com/
|
||||
* Copyright 2010, Aakash Chakravarthy
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
|
||||
(function($){$.fn.collapser=function(options,beforeCallback,afterCallback){var defaults={target:'next',targetOnly:null,effect:'slide',changeText:true,expandHtml:'Expand',collapseHtml:'Collapse',expandClass:'',collapseClass:''};var options=$.extend(defaults,options);var expHtml,collHtml,effectShow,effectHide;if(options.effect=='slide'){effectShow='slideDown';effectHide='slideUp';}else{effectShow='fadeIn';effectHide='fadeOut';}if(options.changeText==true){expHtml=options.expandHtml;collHtml=options.collapseHtml;}function callBeforeCallback(obj){if(beforeCallback!==undefined){beforeCallback.apply(obj);}}function callAfterCallback(obj){if(afterCallback!==undefined){afterCallback.apply(obj);}}function hideElement(obj,method){callBeforeCallback(obj);if(method==1){obj[options.target](options.targetOnly)[effectHide]();obj.html(expHtml);obj.removeClass(options.collapseClass);obj.addClass(options.expandClass);}else{$(document).find(options.target)[effectHide]();obj.html(expHtml);obj.removeClass(options.collapseClass);obj.addClass(options.expandClass);}callAfterCallback(obj);}function showElement(obj,method){callBeforeCallback(obj)
|
||||
if(method==1){obj[options.target](options.targetOnly)[effectShow]();obj.html(collHtml);obj.removeClass(options.expandClass);obj.addClass(options.collapseClass);}else{$(document).find(options.target)[effectShow]();obj.html(collHtml);obj.removeClass(options.expandClass);obj.addClass(options.collapseClass);}callAfterCallback(obj);}function toggleElement(obj,method){if(method==1){if(obj[options.target](options.targetOnly).is(':visible')){hideElement(obj,1);}else{showElement(obj,1);}}else{if($(document).find(options.target).is(':visible')){hideElement(obj,2);}else{showElement(obj,2);}}}return this.each(function(){if($.fn[options.target]&&$(this)[options.target]()){$(this).toggle(function(){toggleElement($(this),1);},function(){toggleElement($(this),1);});}else{$(this).toggle(function(){toggleElement($(this),2);},function(){toggleElement($(this),2);});}if($.fn[options.target]&&$(this)[options.target]()){if($(this)[options.target]().is(':hidden')){$(this).html(expHtml);$(this).removeClass(options.collapseClass);$(this).addClass(options.expandClass);}else{$(this).html(collHtml);$(this).removeClass(options.expandClass);$(this).addClass(options.collapseClass);}}else{if($(document).find(options.target).is(':hidden')){$(this).html(expHtml);}else{$(this).html(collHtml);}}});};})(jQuery);
|
||||
@@ -5,7 +5,8 @@
|
||||
[% FOREACH tab IN vars.tabs %]
|
||||
<div id="[% tab.id %]_search" class="tab-pane [% 'active' IF params.tab == tab.id %]">
|
||||
<div class="clearfix">
|
||||
<h3>[% d.ip %]</h3><p>[% d.dns.remove(settings.domain_suffix) %]</p>
|
||||
<h3 class="device_label">[% d.ip %]</h3>
|
||||
<p class="device_label">[% d.dns.remove(settings.domain_suffix) %]</p>
|
||||
</div>
|
||||
[%+ TRY %][% INCLUDE "inc/device/${tab.id}.tt" %][% CATCH %]<!-- no "[% tab.id %]" search options -->[% END %]
|
||||
</div> <!-- /tab-pane -->
|
||||
|
||||
@@ -3,11 +3,67 @@
|
||||
<input name="tab" value="[% tab.id %]" type="hidden"/>
|
||||
<input name="ip" value="[% params.ip %]" type="hidden"/>
|
||||
<input name="port" value="[% params.port %]" type="hidden"/>
|
||||
<div class="clearfix">
|
||||
<a href="#" class="nd_collapse_columns"><label>Display Columns</label></a>
|
||||
<div class="input nd_collapse_pre_hidden">
|
||||
<ul class="inputs-list">
|
||||
[% FOREACH item IN vars.port_columns %]
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox" name="[% item.name %]" value="[% item.name %]"/>
|
||||
<span>[% item.label %]</span>
|
||||
</label>
|
||||
</li>
|
||||
[% END %]
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix">
|
||||
<a href="#" class="nd_collapse_nodeprop"><label>Node Properties</label></a>
|
||||
<div class="input nd_collapse_pre_hidden">
|
||||
<ul class="inputs-list">
|
||||
[% FOREACH item IN vars.connected_properties %]
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox" name="[% item.name %]" value="[% item.name %]"/>
|
||||
<span>[% item.label %]</span>
|
||||
</label>
|
||||
</li>
|
||||
[% END %]
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix">
|
||||
<label>Ports become "Free" after</label>
|
||||
<span rel="twipsy" data-placement="right" data-offset="5" title="Time since Port went Down">
|
||||
<select class="nd_days_select" name="age_num"/>
|
||||
[% SET count = 1 %]
|
||||
[% WHILE count < 32 %]
|
||||
<option>[% count %]</option>
|
||||
[% SET count = count + 1 %]
|
||||
[% END %]
|
||||
</select>
|
||||
<select class="span2" name="age_unit"/>
|
||||
<option>days</option>
|
||||
<option>weeks</option>
|
||||
<option>months</option>
|
||||
<option>years</option>
|
||||
</select>
|
||||
</span>
|
||||
</div>
|
||||
<div class="clearfix"></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 class="nd_legendlabel label warning">a</span></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="nd_search clearfix">
|
||||
<button id="[% tab.id %]_submit" type="submit" class="btn info">Update View</button>
|
||||
<a id="[% tab.id %]_bookmark" href="#"
|
||||
rel="twipsy" data-placement="right" data-offset="5" title="Bookmark these Settings">
|
||||
<img class="nd_bookmark" src="/images/glyphicons_072_bookmark.png">
|
||||
</a>
|
||||
<img class="nd_bookmark" src="/images/glyphicons_072_bookmark.png"></a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -1,4 +1,20 @@
|
||||
$(document).ready(function() {
|
||||
$('.nd_collapse_columns').collapser({
|
||||
target: 'next',
|
||||
effect: 'slide',
|
||||
changeText: true,
|
||||
expandHtml: '<label class="nd_collapser">Display Columns<div class="arrow-down"></div></label>',
|
||||
collapseHtml: '<label class="nd_collapser">Display Columns<div class="arrow-up"></div></label>',
|
||||
});
|
||||
|
||||
$('.nd_collapse_nodeprop').collapser({
|
||||
target: 'next',
|
||||
effect: 'slide',
|
||||
changeText: true,
|
||||
expandHtml: '<label class="nd_collapser">Node Properties<div class="arrow-down"></div></label>',
|
||||
collapseHtml: '<label class="nd_collapser">Node Properties<div class="arrow-up"></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) {
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<![endif]-->
|
||||
|
||||
<script type="text/javascript" src="/javascripts/jquery-latest.min.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/jquery-collapser.min.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/bootstrap-alerts.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/bootstrap-twipsy.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/bootstrap-dropdown.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user