koha-tmpl/intranet-tmpl/prog/en/modules/admin/localization.tt

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