4 [% INCLUDE 'doc-head-open.inc' %]
5 <title>Koha › Localization</title>
6 [% INCLUDE 'doc-head-close.inc' popup => 1 %]
7 [% Asset.css("css/datatables.css") | $raw %]
10 <body id="admin_localization" class="admin">
12 <form id="add_translation" method="post">
13 <input type="hidden" name="entity" value="[% entity | html %]" />
14 <input type="hidden" name="code" value="[% code | html %]" />
15 Lang: <select name="lang">
16 [% FOR language IN languages %]
17 [% FOR sublanguage IN language.sublanguages_loop %]
18 [% IF language.plural %]
19 <option value="[% sublanguage.rfc4646_subtag | html %]">[% sublanguage.native_description | html %] [% sublanguage.region_description | html %] ([% sublanguage.rfc4646_subtag | html %])</option>
21 <option value="[% sublanguage.rfc4646_subtag | html %]">[% sublanguage.native_description | html %] ([% sublanguage.rfc4646_subtag | html %])</option>
26 Translation: <input type="text" name="translation" />
27 <input type="submit" value="Add" />
29 <div id="messages"></div>
30 <table id="localization">
42 [% FOR t IN translations %]
43 <tr id="row_id_[% t.id | html %]" data-id="[% t.id | html %]">
44 <td>[% t.id | html %]</td>
45 <td>[% t.entity | html %]</td>
46 <td>[% t.code | html %]</td>
47 <td class="lang">[% t.lang | html %]</td>
48 <td class="translation" contenteditable="true">[% t.translation | html %]</td>
49 <td class="actions"><a href="#" class="delete"><i class="fa fa-trash"></i> Delete</a></td>
56 [% MACRO jsinclude BLOCK %]
57 [% INCLUDE 'datatables.inc' %]
60 function show_message( params ) {
61 var type = params.type;
62 var data = params.data;
63 var messages = $("#messages");
65 if ( type == 'success_on_update' ) {
66 message = $('<div class="dialog message"></div>');
67 message.text("Entity %s (code %s) for lang %s has correctly been updated with '%s'".format(data.entity, data.code, data.lang, data.translation));
68 } else if ( type == 'error_on_update' ) {
69 message = $('<div class="dialog alert"></div>');
70 if ( data.error_code == 'already_exists' ) {
71 message.text("A translation already exists for this language.");
73 message.text("An error occurred when updating this translation.");
75 } else if ( type == 'success_on_delete' ) {
76 message = $('<div class="dialog message"></div>');
77 message.text("The translation (id %s) has been removed successfully".format(data.id));
78 } else if ( type == 'error_on_delete' ) {
79 message = $('<div class="dialog alert"></div>');
80 message.text("An error occurred when deleting this translation");
81 } else if ( type == 'success_on_insert' ) {
82 message = $('<div class="dialog message"></div>');
83 message.text("Translation (id %s) has been added successfully".format(data.id));
84 } else if ( type == 'error_on_insert' ) {
85 message = $('<div class="dialog alert"></div>');
86 if ( data.error_code == 'already_exists' ) {
87 message.text("A translation already exists for this language.");
89 message.text("An error occurred when adding this translation");
93 $(messages).append(message);
95 setTimeout(function(){
100 function send_update_request( data, cell ) {
104 url: '/cgi-bin/koha/svc/localization',
105 success: function (data) {
107 $(cell).css('background-color', '#FF0000');
108 show_message({ type: 'error_on_update', data: data });
109 } else if ( data.is_changed == 1 ) {
110 $(cell).css('background-color', '#00FF00');
111 show_message({ type: 'success_on_update', data: data });
114 if ( $(cell).hasClass('lang') ) {
115 $(cell).text(data.lang)
116 } else if ( $(cell).hasClass('translation') ) {
117 $(cell).text(data.translation)
120 error: function (data) {
121 $(cell).css('background-color', '#FF0000');
122 if ( $(cell).hasClass('lang') ) {
123 $(cell).text(data.lang)
124 } else if ( $(cell).hasClass('translation') ) {
125 $(cell).text(data.translation)
127 show_message({ type: 'error_on_update', data: data });
132 function send_delete_request( id, cell ) {
135 url: '/cgi-bin/koha/svc/localization/?id='+id,
136 success: function (data) {
137 $("#localization").DataTable().row( '#row_id_' + id ).remove().draw();
138 show_message({ type: 'success_on_delete', data: data });
140 error: function (data) {
141 $(cell).css('background-color', '#FF0000');
142 show_message({ type: 'error_on_delete', data: data });
147 $(document).ready(function() {
150 var table = $("#localization").DataTable($.extend(true, {}, dataTablesDefaults, {
154 var languages_select = $('<select name="lang"></select>');
155 [% FOR language IN languages %]
156 [% FOR sublanguage IN language.sublanguages_loop %]
158 [% IF language.plural %]
159 option = $('<option value="[% sublanguage.rfc4646_subtag | html %]">[% sublanguage.native_description | html %] [% sublanguage.region_description | html %] ([% sublanguage.rfc4646_subtag | html %])</option>');
160 $(languages_select).append(option);
162 option = $('<option value="[% sublanguage.rfc4646_subtag | html %]">[% sublanguage.native_description | html %] ([% sublanguage.rfc4646_subtag | html %])</option>');
164 $(languages_select).append(option);
168 $("td.translation").on('focus', function(){
169 $(this).css('background-color', '');
171 $("td.lang").on('click', function(){
173 var lang = $(td).text();
174 $(td).css('background-color', '');
175 var my_select = $(languages_select).clone();
176 $(my_select).find('option[value="' + lang + '"]').attr('selected', 'selected');
177 $(my_select).on('click', function(e){
180 $(my_select).on('change', function(){
181 var tr = $(this).parent().parent();
182 var id = $(tr).data('id');
183 var lang = $(this).find('option:selected').val();
184 var data = "id=" + encodeURIComponent(id) + "&lang=" + encodeURIComponent(lang);
185 send_update_request( data, td );
187 $(my_select).on('blur', function(){
190 $(this).html(my_select);
193 $("td.translation").on('blur', function(){
194 var tr = $(this).parent();
195 var id = $(tr).data('id');
196 var translation = $(this).text();
197 var data = "id=" + encodeURIComponent(id) + "&translation=" + encodeURIComponent(translation);
198 send_update_request( data, this );
201 $("a.delete").on('click', function(e){
203 if ( confirm(_("Are you sure you want to delete this translation?")) ) {
204 var td = $(this).parent();
205 var tr = $(td).parent();
206 var id = $(tr).data('id');
207 send_delete_request( id, td );
211 $("#add_translation").on('submit', function(e){
213 var entity = $(this).find('input[name="entity"]').val();
214 var code = $(this).find('input[name="code"]').val();
215 var lang = $(this).find('select[name="lang"] option:selected').val();
216 var translation = $(this).find('input[name="translation"]').val();
217 var data = "entity=" + encodeURIComponent(entity) + "&code=" + encodeURIComponent(code) + "&lang=" + encodeURIComponent(lang) + "&translation=" + encodeURIComponent(translation);
221 url: '/cgi-bin/koha/svc/localization',
222 success: function (data) {
224 show_message({ type: 'error_on_insert', data: data });
226 // FIXME Should append the delete link
227 table.row.add( [ data.id, data.entity, data.code, data.lang, data.translation, "" ] ).draw();
228 show_message({ type: 'success_on_insert', data: data });
231 error: function (data) {
232 show_message({ type: 'error_on_insert', data: data });
240 [% INCLUDE 'popup-bottom.inc' %]