Koha-community/Koha
13
7
Fork 0
Code Issues Releases Wiki Activity

Bug 15886 - Revise layout and behavior of audio alerts management

Browse source 
This patch changes the behavior of the audio alerts management page so
that sections of the page are shown or hidden based on what the current
task is. Other changes include:

- Moving JavaScript to a separate file
- Adding a toolbar with a "New alert" button.
- Enabling or disabling the "play sound" button based on the value of
  the sound file field.
- Enabling or disabling the "delete" button based on whether there are
  checkboxes checked.
- Switching the patron category administration header search form for
  the "generic" catalog search one.
- Adding "Required" classes to required fields so that the staff
  client's built-in JS validation library can be used.
- Styling the add/edit form in a way which is consistent with other
  interfaces in Koha.
- Removing the invalid "border" attribute from images.
- Adding better alt attributes to images.

To test, the AudioAlerts system preference must be enabled. Apply the
patch and go to Administration -> Audio alerts.

- Confirm that the add/edit form is hidden initially. A toolbar with a
  "New" button should appear with existing audio alerts in a table
  below.
- Confirm that the "New alert" button works:
  - The table should be hidden and an empty "add" form displayed.
  - Confirm that an empty form cannot be submitted.
  - Confirm that typing or selecting a sound enables the "Play sound"
    button and that it works to play the sound.
  - Confirm that adding valid data works.
  - Confirm that clicking the "Cancel" button hides the form and
    redisplays the table.
- Test the "edit" button for an existing sound:
  - Confirm that the edit form is displayed and populated with the
    correct data.
  - Confirm that edits are saved correctly.
- When viewing the table of existing alerts, confirm that checking one
  of the checkboxes "enables" the delete button.
- With one or more checkboxes checked, test that clicking the delete
  button triggers a deletion confirmation. Test both confirm and cancel
  operations.
- With no checkboxes checked, test that clicking the delete button
  triggers an alert that checkboxes must be checked.
- Ponder whether all this is an improvement or not.

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

Signed-off-by: Brendan Gallagher brendan@bywatersolutions.com
This commit is contained in:
Owen Leonard 2016-02-23 12:07:17 -05:00 committed by Brendan Gallagher
parent 5b89339272
commit 3352ca6a70
2 changed files with 151 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
koha-tmpl/intranet-tmpl/prog/en/js/audio_alerts.js Normal file
View file

@ -0,0 +1,89 @@
$( document ).ready(function() {
var checkboxes = $("#delete-alert-form input[type='checkbox']");
var checkedcheckboxes = 0;
checkboxes.on("change",function(){
if( $(checkboxes+":checked").length > 0){
checkedcheckboxes = 1;
$("#delete-alerts").removeClass("disabled");
} else {
checkedcheckboxes = 0;
$("#delete-alerts").addClass("disabled");
}
});
var soundfield = $("#sound");
var playsound = $('#play-sound');
soundfield.on("change",function(){
enablePlayButton($(this).val(),playsound);
});
$(".edit-alert").hide();
$("#new-alert-form").hide();
$("#newalert").on("click",function(e){
e.preventDefault();
$("#new-alert-form").show();
$("#toolbar, #delete-alert-form").hide();
});
$('#koha-sounds').on('change', function() {
soundfield.val( this.value );
enablePlayButton($(this).val(),playsound);
});
playsound.on('click', function(e) {
e.preventDefault();
if( soundfield.val() !== '' ){
playSound( soundfield.val() );
} else {
alert( MSG_AUDIO_EMPTY_SOUND );
}
});
$('#cancel-edit').on('click', function(e) {
e.preventDefault();
enablePlayButton("",playsound);
$("#id").val("");
$("#selector").val("");
soundfield.val("");
$("#koha-sounds").val("");
$("#toolbar").show();
$(".edit-alert").hide();
$(".create-alert").show();
$("#new-alert-form").hide();
$("#delete-alert-form").show();
});
$('#delete-alert-form').on('submit', function() {
if( checkedcheckboxes == 1 ){
return confirm( MSG_AUDIO_CONFIRM_DELETE );
} else {
alert( MSG_AUDIO_CHECK_CHECKBOXES );
return false;
}
});
});
function enablePlayButton(sound_field_value,playbutton){
if( sound_field_value !== '' ){
playbutton.removeClass("disabled");
} else {
playbutton.addClass("disabled");
}
}
function EditAlert( elt, id, precedence, selector, sound ) {
$("#new-alert-form").show();
$("#delete-alert-form").hide();
$("#toolbar").hide();
$(".create-alert").hide();
$(".edit-alert").show();
$("#id").val(id);
$("#selector").val(selector);
$("#sound").val(sound);
$("#koha-sounds").val(sound);
enablePlayButton(sound,$('#play-sound'));
}

169
koha-tmpl/intranet-tmpl/prog/en/modules/admin/audio_alerts.tt
View file

@ -1,76 +1,17 @@
[% INCLUDE 'doc-head-open.inc' %]
<title>Koha &rsaquo; Administration &rsaquo; Audio alerts</title>
[% INCLUDE 'doc-head-close.inc' %]
<script type="text/javascript">
$( document ).ready(function() {
$(".edit-alert").hide();
$('#koha-sounds').on('change', function() {
$('#sound').val( this.value );
});
$('#koha-sounds').on('change', function() {
$('#sound').val( this.value );
});
$('#play-sound').on('click', function() {
playSound( $('#sound').val() );
return false;
});
$('#cancel-edit').on('click', function() {
$("#id").val("");
$("#selector").val("");
$("#sound").val("");
$(".edit-alert").hide();
$(".create-alert").show();
$("#audio-alerts-table").find("td").each(function (i) {
$(this).removeClass('highlighted-row');
});
return false;
});
$('#new-alert-form').on('submit', function() {
if ( ! $('#selector').val() ) {
alert(_("You must enter a selector!"));
return false;
} else if ( ! $('#sound').val() ) {
alert(_("You must choose a sound!"));
return false;
} else {
return true;
}
});
$('#delete-alert-form').on('submit', function() {
return confirm(_("Are you sure you want to delete the selected audio alerts?"));
});
});
function EditAlert( elt, id, precedence, selector, sound ) {
$("#audio-alerts-table").find("td").each(function (i) {
$(this).removeClass('highlighted-row');
});
$(".create-alert").hide();
$(".edit-alert").show();
$(elt).parent().parent().find("td").each(function (i) {
$(this).addClass('highlighted-row');
});
$("#id").val(id);
$("#selector").val(selector);
$("#sound").val(sound);
}
var MSG_AUDIO_EMPTY_SOUND = _("Please select or enter a sound.");
var MSG_AUDIO_CONFIRM_DELETE = _("Are you sure you want to delete the selected audio alerts?");
var MSG_AUDIO_CHECK_CHECKBOXES = _("Check the box next to the alert you want to delete.")
</script>
<script type="text/javascript" src="[% themelang %]/js/audio_alerts.js"></script>
</head>
<body id="admin_audio_alerts" class="admin">
[% INCLUDE 'header.inc' %]
[% INCLUDE 'patrons-admin-search.inc' %]
[% INCLUDE 'cat-search.inc' %]
<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/admin/admin-home.pl">Administration</a> &rsaquo; Audio alerts</div>
@ -78,49 +19,62 @@ function EditAlert( elt, id, precedence, selector, sound ) {
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<form id="new-alert-form" action="audio_alerts.pl" method="post">
<fieldset class="form-inline">
<div id="toolbar" class="btn-toolbar">
<a class="btn btn-small" id="newalert" href="/cgi-bin/koha/admin/audio_alerts.pl"><i class="fa fa-plus"></i> New alert</a>
</div>
<form id="new-alert-form" action="audio_alerts.pl" method="post" class="validated">
<fieldset class="rows">
<legend><span class="create-alert">Add new alert</span><span class="edit-alert">Edit alert</span></legend>
<input id="id" name="id" type="hidden" value="" />
<input id="selector" name="selector" type="text" class="input-large" placeholder="selector" />
<input id="sound" name="sound" type="text" class="input-large" placeholder="sound" />
<button id="play-sound" class="btn"><i class="icon-play"></i> Play sound</button>
<br/>
<select id="koha-sounds">
<option value="">Select built-in sound</option>
<option value="beep.ogg">beep.ogg</option>
<option value="call.ogg">call.ogg</option>
<option value="critical.ogg">critical.ogg</option>
<option value="device_connect.ogg">device_connect.ogg</option>
<option value="device_disconnect.ogg">device_disconnect.ogg</option>
<option value="ending.ogg">ending.ogg</option>
<option value="fail.ogg">fail.ogg</option>
<option value="IM_notification.ogg">IM_notification.ogg</option>
<option value="incoming_call.ogg">incoming_call.ogg</option>
<option value="loading.ogg">loading.ogg</option>
<option value="loading_2.ogg">loading_2.ogg</option>
<option value="maximize.ogg">maximize.ogg</option>
<option value="minimize.ogg">minimize.ogg</option>
<option value="new_mail_notification.ogg">new_mail_notification.ogg</option>
<option value="opening.ogg">opening.ogg</option>
<option value="panic.ogg">panic.ogg</option>
<option value="popup.ogg">popup.ogg</option>
<option value="warning.ogg">warning.ogg</option>
</select>
<p>
<button id="save-alert" type="submit" class="btn create-alert"><i class="icon-hdd"></i> Save alert</button>
<button id="save-edit" type="submit" class="btn edit-alert save-edit"><i class="icon-hdd"></i> Update alert</button>
<a id="cancel-edit" class="btn edit-alert cancel-edit"><i class="icon icon-remove-circle"></i> Cancel edit</a>
</p>
<ol>
<li>
<label for="selector" class="required">Selector: </label>
<input id="selector" name="selector" type="text" class="required input-large" placeholder="selector" />
<span class="required">Required</span>
</li>
<li>
<label for="sound" class="required">Sound: </label>
<input id="sound" name="sound" type="text" class="required input-large" placeholder="sound" />
<button id="play-sound" class="btn btn-mini disabled"><i class="icon-play"></i> Play sound</button>
<span class="required">Required</span>
</li>
<li>
<label for="koha-sounds">Select a built-in sound: </label>
<select id="koha-sounds">
<option value=""> -- Choose one -- </option>
<option value="beep.ogg">beep.ogg</option>
<option value="call.ogg">call.ogg</option>
<option value="critical.ogg">critical.ogg</option>
<option value="device_connect.ogg">device_connect.ogg</option>
<option value="device_disconnect.ogg">device_disconnect.ogg</option>
<option value="ending.ogg">ending.ogg</option>
<option value="fail.ogg">fail.ogg</option>
<option value="IM_notification.ogg">IM_notification.ogg</option>
<option value="incoming_call.ogg">incoming_call.ogg</option>
<option value="loading.ogg">loading.ogg</option>
<option value="loading_2.ogg">loading_2.ogg</option>
<option value="maximize.ogg">maximize.ogg</option>
<option value="minimize.ogg">minimize.ogg</option>
<option value="new_mail_notification.ogg">new_mail_notification.ogg</option>
<option value="opening.ogg">opening.ogg</option>
<option value="panic.ogg">panic.ogg</option>
<option value="popup.ogg">popup.ogg</option>
<option value="warning.ogg">warning.ogg</option>
</select>
</li>
</ol>
</fieldset>
<fieldset class="action">
<input id="save-alert" type="submit" value="Submit" />
<a href="#" id="cancel-edit" class="cancel cancel-edit">Cancel</a>
</fieldset>
</form>
<form id="delete-alert-form" action="audio_alerts.pl" method="post">
<h3>Audio alerts</h3>
<table id="audio-alerts-table">
<thead id="audio-alerts-table-head">
<tr>
@ -140,19 +94,19 @@ function EditAlert( elt, id, precedence, selector, sound ) {
<td>[% a.precedence %]</td>
<td style="white-space:nowrap;">
<a title="Move alert up" href="audio_alerts.pl?action=move&amp;where=up&amp;id=[% a.id %]">
<img src="[% interface %]/[% theme %]/img/go-up.png" border="0" alt="Go up" />
<img src="[% interface %]/[% theme %]/img/go-up.png" alt="Move alert up" />
</a>
<a title="Move alert to top" href="audio_alerts.pl?action=move&amp;where=top&amp;id=[% a.id %]">
<img src="[% interface %]/[% theme %]/img/go-top.png" border="0" alt="Go top" />
<img src="[% interface %]/[% theme %]/img/go-top.png" alt="Move alert to top" />
</a>
<a title="Move alert to bottom" href="audio_alerts.pl?action=move&amp;where=bottom&amp;id=[% a.id %]">
<img src="[% interface %]/[% theme %]/img/go-bottom.png" border="0" alt="Go bottom" />
<img src="[% interface %]/[% theme %]/img/go-bottom.png" alt="Move alert to bottom" />
</a>
<a title="Move alert down" href="audio_alerts.pl?action=move&amp;where=down&amp;id=[% a.id %]">
<img src="[% interface %]/[% theme %]/img/go-down.png" border="0" alt="Go down" />
<img src="[% interface %]/[% theme %]/img/go-down.png" alt="Move alert down" />
</a>
</td>
<td>[% a.selector %]</td>
@ -163,8 +117,9 @@ function EditAlert( elt, id, precedence, selector, sound ) {
</tbody>
</table>
<p/>
<button id="delete-alerts" type="submit" class="btn"><i class="icon-trash"></i> Delete selected alerts</button>
<p>
<button id="delete-alerts" type="submit" class="btn disabled"><i class="icon-trash"></i> Delete selected alerts</button>
</p>
</form>
</div>
</div>