|
Line 0
Link Here
|
|
|
1 |
[% INCLUDE 'doc-head-open.inc' %] |
| 2 |
<title>Koha › Localization</title> |
| 3 |
[% INCLUDE 'doc-head-close.inc' %] |
| 4 |
<link rel="stylesheet" type="text/css" href="[% themelang %]/css/datatables.css" /> |
| 5 |
[% INCLUDE 'greybox.inc' %] |
| 6 |
[% INCLUDE 'datatables.inc' %] |
| 7 |
<script type="text/javascript"> |
| 8 |
//<![CDATA[ |
| 9 |
|
| 10 |
function show_message( params ) { |
| 11 |
var type = params.type; |
| 12 |
var data = params.data; |
| 13 |
var messages = $("#messages"); |
| 14 |
var message; |
| 15 |
if ( type == 'success_on_update' ) { |
| 16 |
message = $('<div class="dialog message"></div>'); |
| 17 |
message.text("Entity %s (code %s) for lang %s has correctly been updated with '%s'".format(data.entity, data.code, data.lang, data.translation)); |
| 18 |
} else if ( type == 'error_on_update' ) { |
| 19 |
message = $('<div class="dialog alert"></div>'); |
| 20 |
message.text("An error occurred when updating this translation"); |
| 21 |
} else if ( type == 'success_on_delete' ) { |
| 22 |
message = $('<div class="dialog message"></div>'); |
| 23 |
message.text("The translation (id %s) has been removed successfully".format(data.id)); |
| 24 |
} else if ( type == 'error_on_delete' ) { |
| 25 |
message = $('<div class="dialog alert"></div>'); |
| 26 |
message.text("An error occurred when deleting this translation"); |
| 27 |
} else if ( type == 'success_on_insert' ) { |
| 28 |
message = $('<div class="dialog message"></div>'); |
| 29 |
message.text("Translation (id %s) has been added successfully".format(data.id)); |
| 30 |
} else if ( type == 'error_on_insert' ) { |
| 31 |
message = $('<div class="dialog alert"></div>'); |
| 32 |
message.text("An error occurred when adding this translation"); |
| 33 |
} |
| 34 |
|
| 35 |
$(messages).append(message); |
| 36 |
|
| 37 |
setTimeout(function(){ |
| 38 |
message.hide() |
| 39 |
}, 3000); |
| 40 |
} |
| 41 |
|
| 42 |
function send_update_request( data, cell ) { |
| 43 |
$.ajax({ |
| 44 |
data: data, |
| 45 |
type: 'PUT', |
| 46 |
url: '/cgi-bin/koha/svc/localization', |
| 47 |
success: function (data) { |
| 48 |
if ( data.is_changed ) { |
| 49 |
$(cell).css('background-color', '#00FF00'); |
| 50 |
show_message({ type: 'success_on_update', data: data }); |
| 51 |
} |
| 52 |
if ( $(cell).hasClass('lang') ) { |
| 53 |
$(cell).text(data.lang) |
| 54 |
} else if ( $(cell).hasClass('translation') ) { |
| 55 |
$(cell).text(data.translation) |
| 56 |
} |
| 57 |
}, |
| 58 |
error: function (data) { |
| 59 |
$(cell).css('background-color', '#FF0000'); |
| 60 |
if ( $(cell).hasClass('lang') ) { |
| 61 |
$(cell).text(data.lang) |
| 62 |
} else if ( $(cell).hasClass('translation') ) { |
| 63 |
$(cell).text(data.translation) |
| 64 |
} |
| 65 |
show_message({ type: 'error_on_update', data: data }); |
| 66 |
}, |
| 67 |
}); |
| 68 |
} |
| 69 |
|
| 70 |
function send_delete_request( id, cell ) { |
| 71 |
$.ajax({ |
| 72 |
type: 'DELETE', |
| 73 |
url: '/cgi-bin/koha/svc/localization/?id='+id, |
| 74 |
success: function (data) { |
| 75 |
$("#localization").DataTable().row( '#row_id_' + id ).remove().draw(); |
| 76 |
show_message({ type: 'success_on_delete', data: data }); |
| 77 |
}, |
| 78 |
error: function (data) { |
| 79 |
$(cell).css('background-color', '#FF0000'); |
| 80 |
show_message({ type: 'error_on_delete', data: data }); |
| 81 |
}, |
| 82 |
}); |
| 83 |
} |
| 84 |
|
| 85 |
$(document).ready(function() { |
| 86 |
$(".dialog").hide(); |
| 87 |
|
| 88 |
var table = $("#localization").DataTable($.extend(true, {}, dataTablesDefaults, { |
| 89 |
'bPaginate': false, |
| 90 |
})); |
| 91 |
|
| 92 |
var languages_select = $('<select name="lang"></select>'); |
| 93 |
[% FOR language IN languages %] |
| 94 |
var option = $('<option value="[% language.lang %]">[% language.description %]</option>'); |
| 95 |
$(languages_select).append(option); |
| 96 |
[% END %] |
| 97 |
|
| 98 |
$("td.translation").on('focus', function(){ |
| 99 |
$(this).css('background-color', ''); |
| 100 |
}); |
| 101 |
$("td.lang").on('click', function(){ |
| 102 |
var td = this; |
| 103 |
var lang = $(td).text(); |
| 104 |
$(td).css('background-color', ''); |
| 105 |
var my_select = $(languages_select).clone(); |
| 106 |
$(my_select).find('option[value="' + lang + '"]').attr('selected', 'selected'); |
| 107 |
$(my_select).on('click', function(e){ |
| 108 |
e.stopPropagation(); |
| 109 |
}); |
| 110 |
$(my_select).on('change', function(){ |
| 111 |
var tr = $(this).parent().parent(); |
| 112 |
var id = $(tr).data('id'); |
| 113 |
var lang = $(this).find('option:selected').val(); |
| 114 |
var data = "id=" + encodeURIComponent(id) + "&lang=" + encodeURIComponent(lang); |
| 115 |
send_update_request( data, td ); |
| 116 |
}); |
| 117 |
$(my_select).on('blur', function(){ |
| 118 |
$(td).html(lang); |
| 119 |
}); |
| 120 |
$(this).html(my_select); |
| 121 |
}); |
| 122 |
|
| 123 |
$("td.translation").on('blur', function(){ |
| 124 |
var tr = $(this).parent(); |
| 125 |
var id = $(tr).data('id'); |
| 126 |
var translation = $(this).text(); |
| 127 |
var data = "id=" + encodeURIComponent(id) + "&translation=" + encodeURIComponent(translation); |
| 128 |
send_update_request( data, this ); |
| 129 |
}); |
| 130 |
|
| 131 |
$("a.delete").on('click', function(){ |
| 132 |
if ( confirm(_("Are you sure you want to delete this translation?")) ) { |
| 133 |
var td = $(this).parent(); |
| 134 |
var tr = $(td).parent(); |
| 135 |
var id = $(tr).data('id'); |
| 136 |
send_delete_request( id, td ); |
| 137 |
} |
| 138 |
}); |
| 139 |
|
| 140 |
$("#add_translation").on('submit', function(e){ |
| 141 |
e.preventDefault(); |
| 142 |
var entity = $(this).find('input[name="entity"]').val(); |
| 143 |
var code = $(this).find('input[name="code"]').val(); |
| 144 |
var lang = $(this).find('select[name="lang"] option:selected').val(); |
| 145 |
var translation = $(this).find('input[name="translation"]').val(); |
| 146 |
var data = "entity=" + encodeURIComponent(entity) + "&code=" + encodeURIComponent(code) + "&lang=" + encodeURIComponent(lang) + "&translation=" + encodeURIComponent(translation); |
| 147 |
$.ajax({ |
| 148 |
data: data, |
| 149 |
type: 'POST', |
| 150 |
url: '/cgi-bin/koha/svc/localization', |
| 151 |
success: function (data) { |
| 152 |
// FIXME Should append the delete link |
| 153 |
table.row.add( [ data.id, data.entity, data.code, data.lang, data.translation, "" ] ).draw(); |
| 154 |
show_message({ type: 'success_on_insert', data: data }); |
| 155 |
}, |
| 156 |
error: function (data) { |
| 157 |
show_message({ type: 'error_on_insert', data: data }); |
| 158 |
}, |
| 159 |
}); |
| 160 |
}); |
| 161 |
|
| 162 |
}); |
| 163 |
//]]> |
| 164 |
</script> |
| 165 |
</head> |
| 166 |
<body id="admin_localization" class="admin"> |
| 167 |
<div id="main"> |
| 168 |
<table id="localization"> |
| 169 |
<thead> |
| 170 |
<tr> |
| 171 |
<th>Id</th> |
| 172 |
<th>Entity</th> |
| 173 |
<th>Code</th> |
| 174 |
<th>Lang</th> |
| 175 |
<th>Translation</th> |
| 176 |
<th></th> |
| 177 |
</tr> |
| 178 |
</thead> |
| 179 |
<tbody> |
| 180 |
[% FOR t IN translations %] |
| 181 |
<tr id="row_id_[% t.id %]" data-id="[% t.id %]"> |
| 182 |
<td>[% t.id %]</td> |
| 183 |
<td>[% t.entity %]</td> |
| 184 |
<td>[% t.code %]</td> |
| 185 |
<td class="lang">[% t.lang %]</td> |
| 186 |
<td class="translation" contenteditable="true">[% t.translation %]</td> |
| 187 |
<td><a class="delete" title="Delete this translation"><i class="icon-remove"></i></a</td> |
| 188 |
</tr> |
| 189 |
[% END %] |
| 190 |
</tbody> |
| 191 |
</table> |
| 192 |
<form id="add_translation" method="post"> |
| 193 |
<input type="hidden" name="entity" value="[% entity %]" /> |
| 194 |
<input type="hidden" name="code" value="[% code %]" /> |
| 195 |
Lang: <select name="lang"> |
| 196 |
[% FOR language IN languages %] |
| 197 |
[% FOR sublanguage IN language.sublanguages_loop %] |
| 198 |
[% IF language.plural %] |
| 199 |
<option value="[% sublanguage.rfc4646_subtag %]">[% sublanguage.native_description %] [% sublanguage.region_description %] ([% sublanguage.rfc4646_subtag %])</option> |
| 200 |
[% ELSE %] |
| 201 |
<option value="[% sublanguage.rfc4646_subtag %]">[% sublanguage.native_description %] ([% sublanguage.rfc4646_subtag %])</option> |
| 202 |
[% END %] |
| 203 |
[% END %] |
| 204 |
[% END %] |
| 205 |
</select> |
| 206 |
Translation: <input type="text" name="translation" /> |
| 207 |
<input type="submit" value="Add" /> |
| 208 |
</form> |
| 209 |
<div id="messages"></div> |
| 210 |
</div> |
| 211 |
</body> |
| 212 |
</html> |