log message for port controls

Netdisco/share/public/css/netdisco.css

@@ -80,6 +80,11 @@ div.content > div.tab-content table.nd_floatinghead thead {
   min-width: 0px;
 }
 
+/* for when hidden modals interfere with mouse actions on higher elements */
+.nd_deep-horizon {
+  z-index: -1000;
+}
+
 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 /* styles to adjust the hero box used for homepage + login */
 

Netdisco/share/public/javascripts/netdisco_portcontrol.js

@@ -1,6 +1,18 @@
+// to tell whether bootstrap's modal had Submit button pressed :(
+var nd_save_ok = false;
+
 // user clicked or asked for port changes to be submitted via ajax
 function port_control (e) {
-  var td = $(e).closest('td');
+  var td = $(e).closest('td'),
+      logmessage = $('#nd_portlog_log').val();
+  $('#nd_portlog_log').val('');
+
+  if (nd_save_ok == false) {
+    td.find('.nd_editable-cell-content').text(td.data('default'));
+    td.blur();
+    return;
+  }
+  nd_save_ok = false;
 
   $.ajax({
     type: 'POST'
@@ -11,6 +23,7 @@ function port_control (e) {
       ,field:  td.data('field')
       ,action: td.data('action')
       ,value:  td.text().trim()
+      ,log:    logmessage,
     }
     ,success: function() {
       toastr.info('Submitted change request');
@@ -44,8 +57,8 @@ function port_control (e) {
     }
     ,error: function() {
       toastr.error('Failed to submit change request');
-      document.execCommand('undo');
+      td.find('.nd_editable-cell-content').text(td.data('default'));
-      $(e).blur();
+      td.blur();
     }
   });
 }
@@ -95,34 +108,49 @@ $(document).ready(function() {
       $(this).siblings('td').find('.nd_device-details-edit').hide(); // details
   });
 
-  // activity for port up/down control
+  // to tell whether bootstrap's modal had Submit button pressed :(
-  $('#ports_pane').on('click', '.icon-hand-up', function() {
+  $('#ports_pane').on('click', '#nd_portlog_submit', function() {
-    port_control(this); // save
+    nd_save_ok = true;
-  });
-  $('#ports_pane').on('click', '.icon-hand-down', function() {
-    port_control(this); // save
   });
 
-  // activity for power enable/disable control
+  // activity for port up/down control, power enable/disable control
-  $('#ports_pane').on('click', '.nd_power-icon', function() {
+  $('#ports_pane').on('click', '.icon-hand-up,.icon-hand-down,.nd_power-icon', function() {
-    port_control(this); // save
+    var clicked = this; // create a closure
+    $('#nd_portlog').one('hidden', function() {
+      port_control(clicked); // save
+    });
+    $('#nd_portlog').modal('show');
   });
 
+  // has cell content changed?
   var dirty = false;
 
   // activity for contenteditable control
   $('.tab-content').on('keydown', '[contenteditable=true]', function(event) {
-    var esc = event.which == 27,
+    var cell = this,
+        td = $(cell).closest('td'),
+        esc = event.which == 27,
         nl  = event.which == 13;
 
     if (esc) {
-      $(this).blur();
+      $(cell).blur();
     }
     else if (nl) {
       event.preventDefault();
-      port_control(this); // save
+
+      if (td.data('field') == 'c_vlan') {
+        $('#nd_portlog').one('hidden', function() {
+          port_control(cell); // save
+        });
+        $('#nd_portlog').modal('show');
+      }
+      else {
+        // no confirm for port descr change
+        port_control(cell); // save
+      }
+
       dirty = false;
-      $(this).blur();
+      $(cell).blur();
     }
     else {
       dirty = true;

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

@@ -125,7 +125,7 @@
 
       [% IF params.c_vlan %]
       [% IF user_can_port_control AND params.c_admin %]
-      <td class="nd_editable-cell" contenteditable="true"
+      <td class="nd_editable-cell" contenteditable="true" data-default="[% row.vlan | html_entity %]"
         data-field="c_vlan" data-for-device="[% device.ip | html_entity %]" data-for-port="[% row.port | html_entity %]">
       <i class="icon-edit nd_edit-icon"></i>
       <div class="nd_editable-cell-content">
@@ -273,3 +273,20 @@
     [% END %]
   </tbody>
 </table>
+
+[% IF user_can_port_control %]
+<div id="nd_portlog" class="nd_modal nd_deep-horizon modal hide fade" tabindex="-1"
+  role="dialog" aria-labelledby="nd_portlog_label" aria-hidden="true">
+  <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
+    <h3 id="nd_portlog_label">Log Message</h3>
+  </div>
+  <div class="modal-body">
+    <p>Log message:</p>
+    <textarea id="nd_portlog_log" class="input-block-level" rows="2" data-form="delete" name="log"></textarea>
+  </div>
+  <div class="modal-footer">
+    <button id="nd_portlog_submit" class="btn btn-success" data-dismiss="modal" aria-hidden="true">Submit</button>
+  </div>
+</div>
+[% END %]

Netdisco/share/views/js/device.js

@@ -113,4 +113,13 @@
         }
       });
     });
+
+    // bootstrap modal mucks about with mouse actions on higher elements
+    // so need to bury and raise it when needed
+    $('#ports_pane').on('show', '.nd_modal', function () {
+      $(this).toggleClass('nd_deep-horizon');
+    });
+    $('#ports_pane').on('hidden', '.nd_modal', function () {
+      $(this).toggleClass('nd_deep-horizon');
+    });
   });