put colvis controls in sidebar [experimental]

Netdisco/lib/App/Netdisco/Web/Device.pm

@@ -8,7 +8,6 @@ use URL::Encode 'url_params_mixed';
 
 hook 'before' => sub {
   my @default_port_columns_left = (
-    { name => 'c_admin',       label => 'Port Controls',     default => ''   },
     { name => 'c_port',        label => 'Port',              default => ''   },
   );
 
@@ -25,10 +24,11 @@ hook 'before' => sub {
     { name => 'c_vmember',     label => 'VLAN Membership',   default => ''   },
     { name => 'c_power',       label => 'PoE',               default => ''   },
     { name => 'c_ssid',        label => 'SSID',              default => ''   },
-    { name => 'c_nodes',       label => 'Connected Nodes',   default => ''   },
+    { name => 'c_nodes',       label => 'Show Nodes',        default => ''   },
     { name => 'c_neighbors',   label => 'Connected Devices', default => 'on' },
     { name => 'c_stp',         label => 'Spanning Tree',     default => ''   },
     { name => 'c_up',          label => 'Status',            default => ''   },
+    { name => 'c_admin',       label => 'Port Controls',     default => ''   },
   );
 
   # build list of port detail columns

Netdisco/share/views/ajax/device/ports.tt

@@ -27,6 +27,7 @@
 
 <script type="text/javascript">
 //<![CDATA[
+
 $(document).ready(function() {
   var freeDate = moment().subtract( [% params.age_num %], '[% params.age_unit %]' );
   var table = $('#dp-data-table').dataTable({
@@ -38,7 +39,6 @@ $(document).ready(function() {
     },
     "deferRender": true,
     "order": [[ 1, "asc" ]],
-    "dom": 'C<"nd_clear-both">lfrtip',
     "colVis": {
       "exclude": [ 0 ]
     },
@@ -611,6 +611,35 @@ $(document).ready(function() {
     ],
     "data": [% results %]
   });
+
+  // display the column show/hide buttons in the sidebar
+  var colvis = new $.fn.dataTable.ColVis( table );
+  var columns = colvis.s.dt.aoColumns;
+
+  // first remove existing controls, in case indexes have changed
+  $('#nd_column-controls').find('.nd_colvis-checkbox').remove();
+
+  if ( $.inArray( 'all', colvis.s.aiExclude ) === -1 ) {
+      for ( var i=0, iLen=columns.length ; i<iLen ; i++ ) {
+          if ( $.inArray( i, colvis.s.aiExclude ) === -1 ) {
+              var button = colvis.dom.buttons.shift();
+              if (columns[i]["name"] == "icon") {
+                continue;
+              }
+
+              $(button).addClass('nd_colvis-checkbox');
+              $(button).find('label').addClass('checkbox');
+              $(button).find('input').attr('id', columns[i]["name"]);
+              $(button).find('input').attr('name', columns[i]["name"]);
+
+              if (columns[i]["name"] == "c_nodes") {
+                $(button).find('span').text('Connected Devices');
+              }
+
+              $('#nd_column-controls').append( button );
+          }
+      }
+  }
 });
 //]]>
 </script>

Netdisco/share/views/sidebar/device/ports.tt

@@ -56,26 +56,7 @@
                 <i class="nd_arrow-up-down-right icon-chevron-down icon-large"></i>
                 </label></span>
               <div id="nd_columns" class="collapse in">
-                <ul class="nd_inputs-list unstyled">
+                <ul id="nd_column-controls" class="nd_inputs-list unstyled">
-                  [% FOREACH item IN vars.port_columns %]
-                  [% NEXT IF item.name == 'c_admin' AND NOT user_has_role('port_control') %]
-                  [% IF item.name == 'c_admin' OR item.name == 'c_nodes' %]
-                  <li>
-                    <label class="checkbox">
-                      <input type="checkbox" id="[% item.name | html_entity %]"
-                        name="[% item.name | html_entity %]"[% ' checked="checked"' IF params.${item.name} %] />
-                      [% IF item.name == 'c_admin' %]
-                        <span class="label label-info">[% item.label | html_entity %]</span>
-                      [% ELSE %]
-                        [% item.label | html_entity %]
-                      [% END %]
-                    </label>
-                  </li>
-                  [% ELSE %]
-                      <input type="checkbox" id="[% item.name | html_entity %]"
-                        name="[% item.name | html_entity %]"[% ' checked="checked"' IF params.${item.name} %] style="display:none;" />
-                  [% END %]
-                  [% END %]
                 </ul>
               </div>
             </div>
@@ -147,6 +128,24 @@
                 </ul>
               </div>
             </div>
+            <ul class="nd_inputs-list unstyled">
+              [% FOREACH item IN vars.port_columns %]
+              [% NEXT IF item.name == 'c_admin' AND NOT user_has_role('port_control') %]
+              [% IF item.name == 'c_admin' OR item.name == 'c_nodes' %]
+              <li>
+                <label class="checkbox">
+                  <input type="checkbox" id="[% item.name | html_entity %]"
+                    name="[% item.name | html_entity %]"[% ' checked="checked"' IF params.${item.name} %] />
+                  [% IF item.name == 'c_admin' %]
+                    <span class="label label-info">[% item.label | html_entity %]</span>
+                  [% ELSE %]
+                    [% item.label | html_entity %]
+                  [% END %]
+                </label>
+              </li>
+              [% END %]
+              [% END %]
+            </ul>
             <div class="btn-group">
               <button id="[% tab.tag %]_submit" type="submit" class="btn btn-info nd_sidebar-btn-drop">
                 <i class="icon-search icon-large pull-left nd_navbar-icon"></i> Update View</button>