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">
10 function show_message( params ) {
11 var type = params.type;
12 var data = params.data;
13 var messages = $("#messages");
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 if ( data.error_code == 'already_exists' ) {
21 message.text("A translation already exists for this language.");
23 message.text("An error occurred when updating this translation.");
25 } else if ( type == 'success_on_delete' ) {
26 message = $('<div class="dialog message"></div>');
27 message.text("The translation (id %s) has been removed successfully".format(data.id));
28 } else if ( type == 'error_on_delete' ) {
29 message = $('<div class="dialog alert"></div>');
30 message.text("An error occurred when deleting this translation");
31 } else if ( type == 'success_on_insert' ) {
32 message = $('<div class="dialog message"></div>');
33 message.text("Translation (id %s) has been added successfully".format(data.id));
34 } else if ( type == 'error_on_insert' ) {
35 message = $('<div class="dialog alert"></div>');
36 if ( data.error_code == 'already_exists' ) {
37 message.text("A translation already exists for this language.");
39 message.text("An error occurred when adding this translation");
43 $(messages).append(message);
45 setTimeout(function(){
50 function send_update_request( data, cell ) {
54 url: '/cgi-bin/koha/svc/localization',
55 success: function (data) {
57 $(cell).css('background-color', '#FF0000');
58 show_message({ type: 'error_on_update', data: data });
59 } else if ( data.is_changed == 1 ) {
60 $(cell).css('background-color', '#00FF00');
61 show_message({ type: 'success_on_update', data: data });
64 if ( $(cell).hasClass('lang') ) {
65 $(cell).text(data.lang)
66 } else if ( $(cell).hasClass('translation') ) {
67 $(cell).text(data.translation)
70 error: function (data) {
71 $(cell).css('background-color', '#FF0000');
72 if ( $(cell).hasClass('lang') ) {
73 $(cell).text(data.lang)
74 } else if ( $(cell).hasClass('translation') ) {
75 $(cell).text(data.translation)
77 show_message({ type: 'error_on_update', data: data });
82 function send_delete_request( id, cell ) {
85 url: '/cgi-bin/koha/svc/localization/?id='+id,
86 success: function (data) {
87 $("#localization").DataTable().row( '#row_id_' + id ).remove().draw();
88 show_message({ type: 'success_on_delete', data: data });
90 error: function (data) {
91 $(cell).css('background-color', '#FF0000');
92 show_message({ type: 'error_on_delete', data: data });
97 $(document).ready(function() {
100 var table = $("#localization").DataTable($.extend(true, {}, dataTablesDefaults, {
104 var languages_select = $('<select name="lang"></select>');
105 [% FOR language IN languages %]
106 [% FOR sublanguage IN language.sublanguages_loop %]
108 [% IF language.plural %]
109 option = $('<option value="[% sublanguage.rfc4646_subtag %]">[% sublanguage.native_description %] [% sublanguage.region_description %] ([% sublanguage.rfc4646_subtag %])</option>');
110 $(languages_select).append(option);
112 option = $('<option value="[% sublanguage.rfc4646_subtag %]">[% sublanguage.native_description %] ([% sublanguage.rfc4646_subtag %])</option>');
114 $(languages_select).append(option);
118 $("td.translation").on('focus', function(){
119 $(this).css('background-color', '');
121 $("td.lang").on('click', function(){
123 var lang = $(td).text();
124 $(td).css('background-color', '');
125 var my_select = $(languages_select).clone();
126 $(my_select).find('option[value="' + lang + '"]').attr('selected', 'selected');
127 $(my_select).on('click', function(e){
130 $(my_select).on('change', function(){
131 var tr = $(this).parent().parent();
132 var id = $(tr).data('id');
133 var lang = $(this).find('option:selected').val();
134 var data = "id=" + encodeURIComponent(id) + "&lang=" + encodeURIComponent(lang);
135 send_update_request( data, td );
137 $(my_select).on('blur', function(){
140 $(this).html(my_select);
143 $("td.translation").on('blur', function(){
144 var tr = $(this).parent();
145 var id = $(tr).data('id');
146 var translation = $(this).text();
147 var data = "id=" + encodeURIComponent(id) + "&translation=" + encodeURIComponent(translation);
148 send_update_request( data, this );
151 $("a.delete").on('click', function(){
152 if ( confirm(_("Are you sure you want to delete this translation?")) ) {
153 var td = $(this).parent();
154 var tr = $(td).parent();
155 var id = $(tr).data('id');
156 send_delete_request( id, td );
160 $("#add_translation").on('submit', function(e){
162 var entity = $(this).find('input[name="entity"]').val();
163 var code = $(this).find('input[name="code"]').val();
164 var lang = $(this).find('select[name="lang"] option:selected').val();
165 var translation = $(this).find('input[name="translation"]').val();
166 var data = "entity=" + encodeURIComponent(entity) + "&code=" + encodeURIComponent(code) + "&lang=" + encodeURIComponent(lang) + "&translation=" + encodeURIComponent(translation);
170 url: '/cgi-bin/koha/svc/localization',
171 success: function (data) {
173 show_message({ type: 'error_on_insert', data: data });
175 // FIXME Should append the delete link
176 table.row.add( [ data.id, data.entity, data.code, data.lang, data.translation, "" ] ).draw();
177 show_message({ type: 'success_on_insert', data: data });
180 error: function (data) {
181 show_message({ type: 'error_on_insert', data: data });
190 <body id="admin_localization" class="admin">
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>
201 <option value="[% sublanguage.rfc4646_subtag %]">[% sublanguage.native_description %] ([% sublanguage.rfc4646_subtag %])</option>
206 Translation: <input type="text" name="translation" />
207 <input type="submit" value="Add" />
209 <div id="messages"></div>
210 <table id="localization">
222 [% FOR t IN translations %]
223 <tr id="row_id_[% t.id %]" data-id="[% t.id %]">
225 <td>[% t.entity %]</td>
226 <td>[% t.code %]</td>
227 <td class="lang">[% t.lang %]</td>
228 <td class="translation" contenteditable="true">[% t.translation %]</td>
229 <td><a class="delete" title="Delete this translation"><i class="icon-remove"></i></a</td>