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

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