port up and down control now updates table details

also update tooltip for sidebar pin icon depending on state

Netdisco/public/css/netdisco.css

@@ -268,9 +268,12 @@ form .clearfix.success input {
   background-color: #A9DBA9;
 }
 
-/* a little whitespace between legend items */
+/* when we use font-awesome icons, override the size */
-.nd_legend li {
+#nd_legend i {
-  line-height: 19px;
+  width: 9px;
+}
+.table-bordered i {
+  width: 9px;
 }
 
 /* bring sidebar items closer together */

Netdisco/public/javascripts/netdisco.js

@@ -158,7 +158,15 @@ $(document).ready(function() {
   $('.sidebar_pin').click(function() {
     $('.sidebar').toggleClass('sidebar_pinned');
     $('.sidebar_pin').toggleClass('sidebar_pin_clicked');
+    // update tooltip note for current state
+    if ($('.sidebar_pin').hasClass('sidebar_pin_clicked')) {
+      $('.sidebar_pin').first().data('tooltip').options.title = 'Unpin Sidebar';
+    }
+    else {
+      $('.sidebar_pin').first().data('tooltip').options.title = 'Pin Sidebar';
+    }
   });
+
   // sidebar toggle - trigger in/out on image click()
   $('#sidebar_toggle_img_in').click(function() {
     $('.sidebar').toggle(250);

Netdisco/public/javascripts/netdisco_portcontrol.js

@@ -6,14 +6,30 @@ function port_control (e) {
     type: 'POST'
     ,url: uri_base + '/ajax/portcontrol'
     ,data: {
-      device:  td.data('for-device')
+      device:  td.attr('data-for-device')
-      ,port:   td.data('for-port')
+      ,port:   td.attr('data-for-port')
-      ,field:  td.data('field')
+      ,field:  td.attr('data-field')
-      ,action: td.data('action')
+      ,action: td.attr('data-action')
       ,value:  td.text().trim()
     }
     ,success: function() {
       toastr.info('Submitted change request');
+
+      // update all the screen furniture for port up/down control
+      if ($.trim(td.attr('data-action')) == 'down') {
+        td.prev('td').html('<span class="label">S</span>');
+        $(e).toggleClass('icon-hand-down');
+        $(e).toggleClass('icon-hand-up');
+        $(e).data('tooltip').options.title = 'Click to Enable';
+        td.attr('data-action', 'up');
+      }
+      else if ($.trim(td.attr('data-action')) == 'up') {
+        td.prev('td').html('<span class="label"><i class="icon-refresh"></i></span>');
+        $(e).toggleClass('icon-hand-up');
+        $(e).toggleClass('icon-hand-down');
+        $(e).data('tooltip').options.title = 'Click to Disable';
+        td.attr('data-action', 'down');
+      }
     }
     ,error: function() {
       toastr.error('Failed to submit change request');
@@ -28,16 +44,12 @@ function port_control (e) {
   $.ajax({
     url: uri_base + '/ajax/userlog'
     ,success: function(data) {
-      // console.log(data);
-
       for (var i = 0; i < data['error'].length; i++) {
         toastr.error(data['error'][i], 'Failed Change Request');
       }
-
       for (var i = 0; i < data['done'].length; i++) {
         toastr.success(data['done'][i], 'Successful Change Request');
       }
-
       // Schedule next request when the current one's complete
       setTimeout(worker, 5000);
     }

Netdisco/views/ajax/device/details.tt

@@ -17,7 +17,7 @@
       </td>
       [% ELSE %]
       <td>
-        <a rel="tooltip" data-placement="top" data-offset="5" title="Find Similar Devices"
+        <a rel="tooltip" data-placement="top" data-offset="5" data-title="Find Similar Devices"
         href="[% vars.search_device %]&location=[% d.location | uri %]">[% d.location %]</a>
       </td>
       [% END %]
@@ -40,10 +40,10 @@
     <tr>
       <td>Vendor / Model</td>
       <td>
-        <a rel="tooltip" data-placement="top" data-offset="5" title="Find Similar Devices"
+        <a rel="tooltip" data-placement="top" data-offset="5" data-title="Find Similar Devices"
         href="[% vars.search_device %]&vendor=[% d.vendor | uri %]">[% d.vendor %]</a>
         /
-        <a rel="tooltip" data-placement="top" data-offset="5" title="Find Similar Devices"
+        <a rel="tooltip" data-placement="top" data-offset="5" data-title="Find Similar Devices"
         href="[% vars.search_device %]&model=[% d.model | uri %]">[% d.model %]</a>
       </td>
     </tr>
@@ -51,7 +51,7 @@
       <td>OS / Version</td>
       <td>[% d.os %] /
         <a rel="tooltip" data-placement="top" data-offset="5"
-        title="Find Similar Devices"
+          data-title="Find Similar Devices"
           href="[% vars.search_device %]&os_ver=[% d.os_ver | uri %]">[% d.os_ver %]</a>
       </td>
     </tr>

Netdisco/views/ajax/device/ports.tt

@@ -32,13 +32,13 @@
         data-field="c_port" data-for-device="[% device %]" data-for-port="[% row.port | html_entity %]">
         <i class="icon-hand-down nd_hand_icon"
           rel="tooltip" data-placement="top" data-offset="3"
-          data-animation="" title="Click to Disable"></i>
+          data-animation="" data-title="Click to Disable"></i>
       [% ELSE %]
       <td class="nd_editable_cell" data-action="up"
         data-field="c_port" data-for-device="[% device %]" data-for-port="[% row.port | html_entity %]">
         <i class="icon-hand-up nd_hand_icon"
           rel="tooltip" data-placement="top" data-offset="3"
-          data-animation="" title="Click to Enable"></i>
+          data-animation="" data-title="Click to Enable"></i>
       [% END %]
       [% ELSE %]
       <td>

Netdisco/views/device.tt

@@ -1,5 +1,5 @@
 <i class="sidebar_toggle icon-wrench icon-large" id="sidebar_toggle_img_out"
-  rel="tooltip" data-placement="left" data-offset="5" title="Show Sidebar"></i>
+  rel="tooltip" data-placement="left" data-offset="5" data-title="Show Sidebar"></i>
 <i class="icon-question-sign icon-large" id="netmap_help_img" rel="popover"
   data-title="Neighbor Map Controls"
   data-html="true"
@@ -15,9 +15,9 @@
   <div class="sidebar sidebar_pinned">
     <div class="well">
       <i class="sidebar_toggle icon-signout" id="sidebar_toggle_img_in"
-        rel="tooltip" data-placement="left" data-offset="5" title="Hide Sidebar"></i>
+        rel="tooltip" data-placement="left" data-offset="5" data-title="Hide Sidebar"></i>
       <i class="sidebar_pin icon-pushpin sidebar_pin_clicked"
-        rel="tooltip" data-placement="left" data-offset="5" title="Sidebar Pin"></i>
+        rel="tooltip" data-placement="left" data-offset="5" data-title="Unpin Sidebar"></i>
       <div class="tab-content">
         [% FOREACH tab IN vars.tabs %]
         <div id="[% tab.id %]_search" class="tab-pane [% 'active' IF params.tab == tab.id %]">

Netdisco/views/search.tt

@@ -1,12 +1,12 @@
 <i class="sidebar_toggle icon-wrench icon-large" id="sidebar_toggle_img_out"
-  rel="tooltip" data-placement="left" data-offset="5" title="Show Sidebar"></i>
+  rel="tooltip" data-placement="left" data-offset="5" data-title="Show Sidebar"></i>
 <div class="container-fluid">
   <div class="sidebar">
     <div class="well">
       <i class="sidebar_toggle icon-signout" id="sidebar_toggle_img_in"
-        rel="tooltip" data-placement="left" data-offset="5" title="Hide Sidebar"></i>
+        rel="tooltip" data-placement="left" data-offset="5" data-title="Hide Sidebar"></i>
       <i class="sidebar_pin icon-pushpin"
-        rel="tooltip" data-placement="left" data-offset="5" title="Pin Sidebar"></i>
+        rel="tooltip" data-placement="left" data-offset="5" data-title="Pin Sidebar"></i>
       <div class="tab-content">
         [% FOREACH tab IN vars.tabs %]
         <div id="[% tab.id %]_search" class="tab-pane [% 'active' IF params.tab == tab.id %]">

Netdisco/views/sidebar/device/ports.tt

@@ -2,11 +2,11 @@
             <input name="q" value="[% params.q %]" type="hidden"/>
             <div class="clearfix">
               <a class="field_clear_icon" href="#"
-                rel="tooltip" data-placement="top" data-offset="3" title="Show all Ports">
+                rel="tooltip" data-placement="top" data-offset="3" data-title="Show all Ports">
                 <img src="[% uri_base %]/images/tango_sweep.png"/></a>
               <input id="nd_port_query" placeholder="Port, Name or VLAN"
                 name="f" value="[% params.f %]" type="text"
-                rel="tooltip" data-placement="left" data-offset="5" title="Filter by Port, Name or VLAN"/>
+                rel="tooltip" data-placement="left" data-offset="5" data-title="Filter by Port, Name or VLAN"/>
             </div>
             <div class="clearfix">
               <span data-toggle="collapse" data-target="#nd_legend">
@@ -36,6 +36,9 @@
                   <li>
                     <span class="label label-warning">A</span>&nbsp; Archived Data
                   </li>
+                  <li>
+                    <span class="label"><i class="icon-refresh"></i></span>&nbsp; Click "Update View"
+                  </li>
                 </ul>
               </div>
             </div>
@@ -79,7 +82,7 @@
                   </li>
                   <li>
                     <span rel="tooltip" data-placement="left"
-                      data-offset="5" title="Free if Down for this period of time">
+                      data-offset="5" data-title="Free if Down for this period of time">
                     <select id="nd_days_select" name="age_num">
                       [% FOREACH count IN [1..32] %]
                       <option[% ' selected="selected"' IF params.age_num == count %]>[% count %]</option>

Netdisco/views/sidebar/search/device.tt

@@ -7,7 +7,7 @@
                 class="field_clear_icon icon-trash icon-large"></i>
               <input class="nd_side_input" placeholder="DNS"
                 type="text" name="dns" value="[% params.dns %]"
-                rel="tooltip" data-placement="left" data-offset="5" title="DNS"/>
+                rel="tooltip" data-placement="left" data-offset="5" data-title="DNS"/>
             </div>
             <div class="clearfix">
               <i data-btn-for="ip" class="field_copy_icon icon-copy icon-large"></i>
@@ -15,7 +15,7 @@
                 class="field_clear_icon icon-trash icon-large"></i>
               <input class="nd_side_input" placeholder="IP Address"
                 type="text" name="ip" value="[% params.ip %]"
-                rel="tooltip" data-placement="left" data-offset="5" title="IP Address"/>
+                rel="tooltip" data-placement="left" data-offset="5" data-title="IP Address"/>
             </div>
             <div class="clearfix">
               <i data-btn-for="name" class="field_copy_icon icon-copy icon-large"></i>
@@ -23,7 +23,7 @@
                 class="field_clear_icon icon-trash icon-large"></i>
               <input class="nd_side_input" placeholder="System Name"
                 type="text" name="name" value="[% params.name %]"
-                rel="tooltip" data-placement="left" data-offset="5" title="System Name"/>
+                rel="tooltip" data-placement="left" data-offset="5" data-title="System Name"/>
             </div>
             <div class="clearfix">
               <i data-btn-for="location" class="field_copy_icon icon-copy icon-large"></i>
@@ -31,7 +31,7 @@
                 class="field_clear_icon icon-trash icon-large"></i>
               <input class="nd_side_input" placeholder="Location"
                 type="text" name="location" value="[% params.location %]"
-                rel="tooltip" data-placement="left" data-offset="5" title="Location"/>
+                rel="tooltip" data-placement="left" data-offset="5" data-title="Location"/>
             </div>
             <div class="clearfix">
               <i data-btn-for="description" class="field_copy_icon icon-copy icon-large"></i>
@@ -39,12 +39,12 @@
                 class="field_clear_icon icon-trash icon-large"></i>
               <input class="nd_side_input" placeholder="Description"
                 type="text" name="description" value="[% params.description %]"
-                rel="tooltip" data-placement="left" data-offset="5" title="Description"/>
+                rel="tooltip" data-placement="left" data-offset="5" data-title="Description"/>
             </div>
             <div class="clearfix">
               <select class="nd_side_select" size="[% vars.model_list.size > 5 ? 5 : vars.model_list.size %]"
                 multiple="on" name="model"
-                rel="tooltip" data-placement="left" data-offset="5" title="Model"/>
+                rel="tooltip" data-placement="left" data-offset="5" data-title="Model"/>
                 [% FOREACH opt IN vars.model_list %]
                 <option[% ' selected="selected"' IF vars.model_lkp.exists(opt) %]>[% opt %]</option>
                 [% END %]
@@ -53,7 +53,7 @@
             <div class="clearfix">
               <select class="nd_side_select" size="[% vars.os_ver_list.size > 5 ? 5 : vars.os_ver_list.size %]"
                 multiple="on" name="os_ver"
-                rel="tooltip" data-placement="left" data-offset="5" title="OS Release"/>
+                rel="tooltip" data-placement="left" data-offset="5" data-title="OS Release"/>
                 [% FOREACH opt IN vars.os_ver_list %]
                 <option[% ' selected="selected"' IF vars.os_ver_lkp.exists(opt) %]>[% opt %]</option>
                 [% END %]
@@ -62,7 +62,7 @@
             <div class="clearfix">
               <select class="nd_side_select" size="[% vars.vendor_list.size > 5 ? 5 : vars.vendor_list.size %]"
                 multiple="on" name="vendor"
-                rel="tooltip" data-placement="left" data-offset="5" title="Vendor"/>
+                rel="tooltip" data-placement="left" data-offset="5" data-title="Vendor"/>
                 [% FOREACH opt IN vars.vendor_list %]
                 <option[% ' selected="selected"' IF vars.vendor_lkp.exists(opt) %]>[% opt %]</option>
                 [% END %]