135/netdisco
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Modal confirm dialogs for dangerous actions.

Browse Source 
Squashed commit of the following:

commit 80513dd206
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Aug 31 08:26:39 2013 +0100

    use blockquote to make dialog more readable

commit bab8e4d00c
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Aug 31 08:16:49 2013 +0100

    add confirm dialog to user delete

commit 46c7d54973
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Aug 31 07:46:52 2013 +0100

    add confirm dialog to pseudo device delete

commit 00f26b92a9
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Aug 31 07:41:41 2013 +0100

    restore aria header ref

commit 1c04d32cd2
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Aug 31 07:38:39 2013 +0100

    add confirm dialog to topo link delete

commit 914a03a19c
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Aug 31 07:12:59 2013 +0100

    tidy dialogs

commit e4c3978ba8
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Fri Aug 30 23:37:55 2013 +0100

    remove attr("data-

commit 626c8c3fdd
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Fri Aug 30 23:36:47 2013 +0100

    log message for port controls

commit b614669c0c
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Fri Aug 30 21:23:22 2013 +0100

    swap attr for data

commit 79ce5ec47d
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Fri Aug 30 21:09:41 2013 +0100

    improve delete modal and add log message

commit 601671b383
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Tue Aug 27 22:46:43 2013 +0100

    modal dialog which calls ajax
This commit is contained in:
Oliver Gorwits
2013-08-31 08:29:41 +01:00
parent aa2a5e3b20
commit c75167fe27
9 changed files with 213 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
Netdisco/share/public/css/netdisco.css
View File

@@ -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 */
@@ -147,6 +152,11 @@ div.content > div.tab-content table.nd_floatinghead thead {
text-align: center;
}
/* undo nd_center-cell when in a modial dialog (which lives in table cell) */
.table .nd_center-cell .modal-body {
text-align: left;
}
/* fix layout of form fields inside the (topology) table */
td div.input-append {
margin-bottom: 0px;

84
Netdisco/share/public/javascripts/netdisco_portcontrol.js
View File

@@ -1,51 +1,64 @@
// 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'
,url: uri_base + '/ajax/portcontrol'
,data: {
device: td.attr('data-for-device')
,port: td.attr('data-for-port')
,field: td.attr('data-field')
,action: td.attr('data-action')
device: td.data('for-device')
,port: td.data('for-port')
,field: td.data('field')
,action: td.data('action')
,value: td.text().trim()
,log: logmessage,
}
,success: function() {
toastr.info('Submitted change request');
// update all the screen furniture for port up/down control
if ($.trim(td.attr('data-action')) == 'down') {
if ($.trim(td.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');
td.data('action', 'up');
}
else if ($.trim(td.attr('data-action')) == 'up') {
else if ($.trim(td.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');
td.data('action', 'down');
}
else if ($.trim(td.attr('data-action')) == 'false') {
else if ($.trim(td.data('action')) == 'false') {
$(e).next('span').text('');
$(e).toggleClass('nd_power-on');
$(e).data('tooltip').options.title = 'Click to Enable';
td.attr('data-action', 'true');
td.data('action', 'true');
}
else if ($.trim(td.attr('data-action')) == 'true') {
else if ($.trim(td.data('action')) == 'true') {
$(e).toggleClass('nd_power-on');
$(e).data('tooltip').options.title = 'Click to Disable';
td.attr('data-action', 'false');
td.data('action', 'false');
}
}
,error: function() {
toastr.error('Failed to submit change request');
document.execCommand('undo');
$(e).blur();
td.find('.nd_editable-cell-content').text(td.data('default'));
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
$('#ports_pane').on('click', '.icon-hand-up', function() {
port_control(this); // save
});
$('#ports_pane').on('click', '.icon-hand-down', function() {
port_control(this); // save
// to tell whether bootstrap's modal had Submit button pressed :(
$('#ports_pane').on('click', '#nd_portlog_submit', function() {
nd_save_ok = true;
});
// activity for power enable/disable control
$('#ports_pane').on('click', '.nd_power-icon', function() {
port_control(this); // save
// activity for port up/down control, power enable/disable control
$('#ports_pane').on('click', '.icon-hand-up,.icon-hand-down,.nd_power-icon', function() {
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;

24
Netdisco/share/views/ajax/admintask/pseudodevice.tt
View File

@@ -16,7 +16,9 @@
<button class="btn btn-small nd_adminbutton" name="add" type="submit"><i class="icon-plus-sign"></i> Add</button>
</td>
</tr>
[% SET count = 0 %]
[% WHILE (row = results.next) %]
[% SET count = count + 1 %]
<tr>
<td class="nd_center-cell"><a class="nd_linkcell"
href="[% uri_for('/device') %]?q=[% row.dns | uri %]">[% row.dns | html_entity %]</a></td>
@@ -28,10 +30,30 @@
<input data-form="update" name="dns" type="hidden" value="[% row.dns | html_entity %]">
<input data-form="update" name="ip" type="hidden" value="[% row.ip | html_entity %]">
<button class="btn nd_adminbutton" name="update" type="submit"><i class="icon-save text-warning"></i></button>
<button class="btn" data-toggle="modal"
data-target="#nd_devdel-[% count %]" type="button"><i class="icon-trash text-error"></i></button>
<div id="nd_devdel-[% count %]" class="nd_modal modal hide fade" tabindex="-1"
role="dialog" aria-labelledby="nd_devdel_label-[% count %]" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="nd_devdel_label-[% count %]">Are you sure?</h3>
</div>
<div class="modal-body">
<blockquote>
<p class="text-info">
Pseudo-device &quot;[% row.dns | html_entity %] / [% row.ip | html_entity %]&quot; will be deleted.</p>
</blockquote>
<input data-form="del" name="dns" type="hidden" value="[% row.dns | html_entity %]">
<input data-form="del" name="ip" type="hidden" value="[% row.ip | html_entity %]">
<input data-form="del" name="ports" type="hidden" value="[% row.port_count | html_entity %]">
<button class="btn nd_adminbutton" name="del" type="submit"><i class="icon-trash text-error"></i></button>
</div>
<div class="modal-footer">
<button class="btn btn-success" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-danger nd_adminbutton" name="del" data-dismiss="modal">Confirm</button>
</div>
</div>
</td>
</tr>
[% END %]

29
Netdisco/share/views/ajax/admintask/topology.tt
View File

@@ -38,7 +38,9 @@
<button class="btn btn-small nd_adminbutton" name="add" type="submit"><i class="icon-plus-sign"></i> Add</button>
</td>
</tr>
[% SET count = 0 %]
[% WHILE (row = results.next) %]
[% SET count = count + 1 %]
<tr>
<td class="nd_center-cell"><a class="nd_linkcell" href="[% uri_for('/device') %]?q=[% row.dev1 | uri %]">
[% (row.device1.dns || row.device1.name || row.device1.ip) | html_entity %]</a>
@@ -48,11 +50,36 @@
[% (row.device2.dns || row.device2.name || row.device2.ip) | html_entity %]</a></td>
<td class="nd_center-cell">[% row.port2 | html_entity %]</td>
<td class="nd_center-cell">
<button class="btn" data-toggle="modal"
data-target="#nd_devdel-[% count %]" type="button"><i class="icon-trash text-error"></i></button>
<div id="nd_devdel-[% count %]" class="nd_modal modal hide fade" tabindex="-1"
role="dialog" aria-labelledby="nd_devdel_label-[% count %]" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="nd_devdel_label-[% count %]">Are you sure?</h3>
</div>
<div class="modal-body">
<blockquote>
<p class="text-info">The link between these two ports will be removed:</p>
<p>&nbsp;</p>
<ul>
<li><p class="text-info">[% (row.device1.dns || row.device1.name || row.device1.ip) | html_entity %],&nbsp;
[% row.port1 | html_entity %]</p></li>
<li><p class="text-info">[% (row.device2.dns || row.device2.name || row.device2.ip) | html_entity %],&nbsp;
[% row.port2 | html_entity %]</p></li>
</ul>
</blockquote>
<input data-form="del" name="dev1" type="hidden" value="[% row.dev1 | html_entity %]">
<input data-form="del" name="port1" type="hidden" value="[% row.port1 | html_entity %]">
<input data-form="del" name="dev2" type="hidden" value="[% row.dev2 | html_entity %]">
<input data-form="del" name="port2" type="hidden" value="[% row.port2 | html_entity %]">
<button class="btn nd_adminbutton" name="del" type="submit"><i class="icon-trash text-error"></i></button>
</div>
<div class="modal-footer">
<button class="btn btn-success" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-danger nd_adminbutton" name="del" data-dismiss="modal">Confirm</button>
</div>
</div>
</td>
</tr>
[% END %]

23
Netdisco/share/views/ajax/admintask/users.tt
View File

@@ -23,7 +23,9 @@
</td>
</tr>
[% SET count = 0 %]
[% WHILE (row = results.next) %]
[% SET count = count + 1 %]
<tr>
<td class="nd_center-cell">
<input data-form="update" name="fullname" type="text" value="[% row.fullname | html_entity %]">
@@ -46,8 +48,27 @@
<td class="nd_center-cell">
<button class="btn nd_adminbutton" name="update" type="submit"><i class="icon-save text-warning"></i></button>
<button class="btn" data-toggle="modal"
data-target="#nd_devdel-[% count %]" type="button"><i class="icon-trash text-error"></i></button>
<div id="nd_devdel-[% count %]" class="nd_modal modal hide fade" tabindex="-1"
role="dialog" aria-labelledby="nd_devdel_label-[% count %]" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="nd_devdel_label-[% count %]">Are you sure?</h3>
</div>
<div class="modal-body">
<blockquote>
<p class="text-info">User &quot;[% row.username | html_entity %]&quot; will be deleted.</p>
</blockquote>
<input data-form="del" name="username" type="hidden" value="[% row.username | html_entity %]">
<button class="btn nd_adminbutton" name="del" type="submit"><i class="icon-trash text-error"></i></button>
</div>
<div class="modal-footer">
<button class="btn btn-success" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-danger nd_adminbutton" name="del" data-dismiss="modal">Confirm</button>
</div>
</div>
</td>
</tr>
[% END %]

38
Netdisco/share/views/ajax/device/details.tt
View File

@@ -98,12 +98,38 @@
<tr data-for-device="[% d.dns || d.ip %]">
<td>Admin Tasks</td>
<td>
<input type="hidden" data-form="discover" value="[% d.ip %]" name="device" type="text"/>
<button class="btn btn-info btn-small nd_adminbutton" name="discover" type="submit">Discover</button>
<input type="hidden" data-form="arpnip" value="[% d.ip %]" name="device" type="text"/>
<button class="btn btn-info btn-small nd_adminbutton" name="arpnip" type="submit">Arpnip</button>
<input type="hidden" data-form="macsuck" value="[% d.ip %]" name="device" type="text"/>
<button class="btn btn-info btn-small nd_adminbutton" name="macsuck" type="submit">Macsuck</button>
<input type="hidden" data-form="discover" value="[% d.ip %]" name="device"/>
<button class="btn btn-info btn-small nd_adminbutton" name="discover">Discover</button>
<input type="hidden" data-form="arpnip" value="[% d.ip %]" name="device"/>
<button class="btn btn-info btn-small nd_adminbutton" name="arpnip">Arpnip</button>
<input type="hidden" data-form="macsuck" value="[% d.ip %]" name="device"/>
<button class="btn btn-info btn-small nd_adminbutton" name="macsuck">Macsuck</button>
<button class="btn btn-danger btn-small pull-right"
data-toggle="modal" data-target="#nd_devdel" type="button">Delete</button>
<div id="nd_devdel" class="nd_modal modal hide fade" tabindex="-1"
role="dialog" aria-labelledby="nd_devdel_label" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="nd_devdel_label">Confirm Delete: [% d.dns || d.ip | html_entity %]</h3>
</div>
<div class="modal-body">
<blockquote>
<ul>
<li><p>This action is immediate and not reversible</p></li>
<li><p>All associated Nodes will be removed from the database</p></li>
</ul>
</blockquote>
<textarea class="input-block-level" rows="2" data-form="delete"
placeholder="Enter a log message" name="log"></textarea>
<input type="hidden" data-form="delete" value="[% d.ip %]" name="device"/>
</div>
<div class="modal-footer">
<button class="btn btn-success" data-dismiss="modal" aria-hidden="true">No !</button>
<button class="btn btn-danger nd_adminbutton" name="delete" data-dismiss="modal">Really Delete</button>
</div>
</div>
</td>
</tr>
[% END %]

16
Netdisco/share/views/ajax/device/ports.tt
View File

@@ -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,17 @@
[% 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-hidden="true">
<div class="modal-body">
<textarea id="nd_portlog_log" class="input-block-level" rows="2" name="log"
placeholder="Enter a log message"></textarea>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button id="nd_portlog_submit" class="btn btn-info" data-dismiss="modal">Continue</button>
</div>
</div>
[% END %]

3
Netdisco/share/views/js/admintask.js
View File

@@ -59,6 +59,9 @@
,delay: 150
,minLength: 0
});
// activate modals
$('.nd_modal').modal({show: false});
}
// on load, establish global delegations for now and future

22
Netdisco/share/views/js/device.js
View File

@@ -27,7 +27,8 @@
$('#nd_netmap-help').hide();
}
// activate tooltips and popovers
// activate modals, tooltips and popovers
$('.nd_modal').modal({show: false});
$("[rel=tooltip]").tooltip({live: true});
$("[rel=popover]").popover({live: true});
}
@@ -37,7 +38,7 @@
var tab = '[% tab.tag %]'
var target = '#' + tab + '_pane';
// sidebar form fields should change colour and have bin/copy icon
// sidebar form fields should change colour and have trash/copy icon
form_inputs.each(function() {device_form_state($(this))});
form_inputs.change(function() {device_form_state($(this))});
@@ -52,7 +53,7 @@
.toggleClass('icon-chevron-up icon-chevron-down');
});
// handler for bin icon in port filter box
// handler for trashcan icon in port filter box
var portfilter = $('#ports_form').find("input[name=f]");
$('.nd_field-clear-icon').click(function() {
portfilter.val('');
@@ -101,15 +102,24 @@
,async: true
,dataType: 'html'
,url: uri_base + '/ajax/control/admin/' + mode
,data: tr.find('input[data-form="' + mode + '"]').serializeArray()
,data: tr.find('input[data-form="' + mode + '"],textarea[data-form="' + mode + '"]').serializeArray()
,success: function() {
toastr.info('Queued '+ mode +' for device '+ tr.attr('data-for-device'));
toastr.info('Queued '+ mode +' for device '+ tr.data('for-device'));
}
// skip any error reporting for now
// TODO: fix sanity_ok in Netdisco Web
,error: function() {
toastr.error('Failed to queue '+ mode +' for device '+ tr.attr('data-for-device'));
toastr.error('Failed to queue '+ mode +' for device '+ tr.data('for-device'));
}
});
});
// 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');
});
});