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 [% Asset.css("css/datatables.css") | $raw %]
   8 </head>
   9
  10 <body id="admin_localization" class="admin">
  11 <div id="main">
  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>
  20                 [% ELSE %]
  21                     <option value="[% sublanguage.rfc4646_subtag | html %]">[% sublanguage.native_description | html %] ([% sublanguage.rfc4646_subtag | html %])</option>
  22                 [% END %]
  23             [% END %]
  24         [% END %]
  25     </select>
  26     Translation: <input type="text" name="translation" />
  27     <input type="submit" value="Add" />
  28 </form>
  29 <div id="messages"></div>
  30 <table id="localization">
  31     <thead>
  32         <tr>
  33             <th>Id</th>
  34             <th>Entity</th>
  35             <th>Code</th>
  36             <th>Lang</th>
  37             <th>Translation</th>
  38             <th></th>
  39         </tr>
  40     </thead>
  41     <tbody>
  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>
  50         </tr>
  51         [% END %]
  52     </tbody>
  53 </table>
  54 </div>
  55
  56 [% MACRO jsinclude BLOCK %]
  57     [% INCLUDE 'datatables.inc' %]
  58     <script>
  59
  60         function show_message( params ) {
  61             var type = params.type;
  62             var data = params.data;
  63             var messages = $("#messages");
  64             var message;
  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.");
  72                 } else {
  73                     message.text("An error occurred when updating this translation.");
  74                 }
  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.");
  88                 } else {
  89                     message.text("An error occurred when adding this translation");
  90                 }
  91             }
  92
  93             $(messages).append(message);
  94
  95             setTimeout(function(){
  96                 message.hide()
  97             }, 3000);
  98         }
  99
 100         function send_update_request( data, cell ) {
 101             $.ajax({
 102                 data: data,
 103                 type: 'PUT',
 104                 url: '/cgi-bin/koha/svc/localization',
 105                 success: function (data) {
 106                     if ( data.error ) {
 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 });
 112                     }
 113
 114                     if ( $(cell).hasClass('lang') ) {
 115                         $(cell).text(data.lang)
 116                     } else if ( $(cell).hasClass('translation') ) {
 117                         $(cell).text(data.translation)
 118                     }
 119                 },
 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)
 126                     }
 127                     show_message({ type: 'error_on_update', data: data });
 128                 },
 129             });
 130         }
 131
 132         function send_delete_request( id, cell ) {
 133             $.ajax({
 134                 type: 'DELETE',
 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 });
 139                 },
 140                 error: function (data) {
 141                     $(cell).css('background-color', '#FF0000');
 142                     show_message({ type: 'error_on_delete', data: data });
 143                 },
 144             });
 145         }
 146
 147         $(document).ready(function() {
 148             $(".dialog").hide();
 149
 150             var table = $("#localization").DataTable($.extend(true, {}, dataTablesDefaults, {
 151                 'bPaginate': false,
 152             }));
 153
 154             var languages_select = $('<select name="lang"></select>');
 155             [% FOR language IN languages %]
 156                 [% FOR sublanguage IN language.sublanguages_loop %]
 157                     var option;
 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);
 161                     [% ELSE %]
 162                         option = $('<option value="[% sublanguage.rfc4646_subtag | html %]">[% sublanguage.native_description | html %] ([% sublanguage.rfc4646_subtag | html %])</option>');
 163                     [% END %]
 164                     $(languages_select).append(option);
 165                 [% END %]
 166             [% END %]
 167
 168             $("td.translation").on('focus', function(){
 169                 $(this).css('background-color', '');
 170             });
 171             $("td.lang").on('click', function(){
 172                 var td = this;
 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){
 178                     e.stopPropagation();
 179                 });
 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 );
 186                 });
 187                 $(my_select).on('blur', function(){
 188                     $(td).html(lang);
 189                 });
 190                 $(this).html(my_select);
 191             });
 192
 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 );
 199             });
 200
 201             $("a.delete").on('click', function(e){
 202                 e.preventDefault();
 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 );
 208                 }
 209             });
 210
 211             $("#add_translation").on('submit', function(e){
 212                 e.preventDefault();
 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);
 218                 $.ajax({
 219                     data: data,
 220                     type: 'POST',
 221                     url: '/cgi-bin/koha/svc/localization',
 222                     success: function (data) {
 223                         if ( data.error ) {
 224                             show_message({ type: 'error_on_insert', data: data });
 225                         } else {
 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 });
 229                         }
 230                     },
 231                     error: function (data) {
 232                         show_message({ type: 'error_on_insert', data: data });
 233                     },
 234                 });
 235             });
 236
 237          });
 238     </script>
 239 [% END %]
 240 [% INCLUDE 'popup-bottom.inc' %]