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

   1 [% INCLUDE 'doc-head-open.inc' %]
   2 <title>Koha &rsaquo; Localization</title>
   3 [% INCLUDE 'doc-head-close.inc' popup => 1 %]
   4 <link rel="stylesheet" type="text/css" href="[% interface %]/[% theme %]/css/datatables.css" />
   5 [% INCLUDE 'greybox.inc' %]
   6 [% INCLUDE 'datatables.inc' %]
   7 <script type="text/javascript">
   8 //<![CDATA[
   9
  10     function show_message( params ) {
  11         var type = params.type;
  12         var data = params.data;
  13         var messages = $("#messages");
  14         var message;
  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.");
  22             } else {
  23                 message.text("An error occurred when updating this translation.");
  24             }
  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.");
  38             } else {
  39                 message.text("An error occurred when adding this translation");
  40             }
  41         }
  42
  43         $(messages).append(message);
  44
  45         setTimeout(function(){
  46             message.hide()
  47         }, 3000);
  48     }
  49
  50     function send_update_request( data, cell ) {
  51         $.ajax({
  52             data: data,
  53             type: 'PUT',
  54             url: '/cgi-bin/koha/svc/localization',
  55             success: function (data) {
  56                 if ( data.error ) {
  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 });
  62                 }
  63
  64                 if ( $(cell).hasClass('lang') ) {
  65                     $(cell).text(data.lang)
  66                 } else if ( $(cell).hasClass('translation') ) {
  67                     $(cell).text(data.translation)
  68                 }
  69             },
  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)
  76                 }
  77                 show_message({ type: 'error_on_update', data: data });
  78             },
  79         });
  80     }
  81
  82     function send_delete_request( id, cell ) {
  83         $.ajax({
  84             type: 'DELETE',
  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 });
  89             },
  90             error: function (data) {
  91                 $(cell).css('background-color', '#FF0000');
  92                 show_message({ type: 'error_on_delete', data: data });
  93             },
  94         });
  95     }
  96
  97     $(document).ready(function() {
  98         $(".dialog").hide();
  99
 100         var table = $("#localization").DataTable($.extend(true, {}, dataTablesDefaults, {
 101             'bPaginate': false,
 102         }));
 103
 104         var languages_select = $('<select name="lang"></select>');
 105         [% FOR language IN languages %]
 106             [% FOR sublanguage IN language.sublanguages_loop %]
 107                 var option;
 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);
 111                 [% ELSE %]
 112                     option = $('<option value="[% sublanguage.rfc4646_subtag %]">[% sublanguage.native_description %] ([% sublanguage.rfc4646_subtag %])</option>');
 113                 [% END %]
 114                 $(languages_select).append(option);
 115             [% END %]
 116         [% END %]
 117
 118         $("td.translation").on('focus', function(){
 119             $(this).css('background-color', '');
 120         });
 121         $("td.lang").on('click', function(){
 122             var td = this;
 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){
 128                 e.stopPropagation();
 129             });
 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 );
 136             });
 137             $(my_select).on('blur', function(){
 138                 $(td).html(lang);
 139             });
 140             $(this).html(my_select);
 141         });
 142
 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 );
 149         });
 150
 151         $("a.delete").on('click', function(e){
 152             e.preventDefault();
 153             if ( confirm(_("Are you sure you want to delete this translation?")) ) {
 154                 var td = $(this).parent();
 155                 var tr = $(td).parent();
 156                 var id = $(tr).data('id');
 157                 send_delete_request( id, td );
 158             }
 159         });
 160
 161         $("#add_translation").on('submit', function(e){
 162             e.preventDefault();
 163             var entity = $(this).find('input[name="entity"]').val();
 164             var code = $(this).find('input[name="code"]').val();
 165             var lang = $(this).find('select[name="lang"] option:selected').val();
 166             var translation = $(this).find('input[name="translation"]').val();
 167             var data = "entity=" + encodeURIComponent(entity) + "&code=" + encodeURIComponent(code) + "&lang=" + encodeURIComponent(lang) + "&translation=" + encodeURIComponent(translation);
 168             $.ajax({
 169                 data: data,
 170                 type: 'POST',
 171                 url: '/cgi-bin/koha/svc/localization',
 172                 success: function (data) {
 173                     if ( data.error ) {
 174                         show_message({ type: 'error_on_insert', data: data });
 175                     } else {
 176                         // FIXME Should append the delete link
 177                         table.row.add( [ data.id, data.entity, data.code, data.lang, data.translation, "" ] ).draw();
 178                         show_message({ type: 'success_on_insert', data: data });
 179                     }
 180                 },
 181                 error: function (data) {
 182                     show_message({ type: 'error_on_insert', data: data });
 183                 },
 184             });
 185         });
 186
 187      });
 188 //]]>
 189 </script>
 190 </head>
 191 <body id="admin_localization" class="admin">
 192 <div id="main">
 193 <form id="add_translation" method="post">
 194     <input type="hidden" name="entity" value="[% entity %]" />
 195     <input type="hidden" name="code" value="[% code %]" />
 196     Lang: <select name="lang">
 197         [% FOR language IN languages %]
 198             [% FOR sublanguage IN language.sublanguages_loop %]
 199                 [% IF language.plural %]
 200                     <option value="[% sublanguage.rfc4646_subtag %]">[% sublanguage.native_description %] [% sublanguage.region_description %] ([% sublanguage.rfc4646_subtag %])</option>
 201                 [% ELSE %]
 202                     <option value="[% sublanguage.rfc4646_subtag %]">[% sublanguage.native_description %] ([% sublanguage.rfc4646_subtag %])</option>
 203                 [% END %]
 204             [% END %]
 205         [% END %]
 206     </select>
 207     Translation: <input type="text" name="translation" />
 208     <input type="submit" value="Add" />
 209 </form>
 210 <div id="messages"></div>
 211 <table id="localization">
 212     <thead>
 213         <tr>
 214             <th>Id</th>
 215             <th>Entity</th>
 216             <th>Code</th>
 217             <th>Lang</th>
 218             <th>Translation</th>
 219             <th></th>
 220         </tr>
 221     </thead>
 222     <tbody>
 223         [% FOR t IN translations %]
 224         <tr id="row_id_[% t.id %]" data-id="[% t.id %]">
 225             <td>[% t.id %]</td>
 226             <td>[% t.entity %]</td>
 227             <td>[% t.code %]</td>
 228             <td class="lang">[% t.lang %]</td>
 229             <td class="translation" contenteditable="true">[% t.translation %]</td>
 230             <td class="actions"><a href="#" class="delete"><i class="fa fa-trash"></i> Delete</a></td>
 231         </tr>
 232         [% END %]
 233     </tbody>
 234 </table>
 235 </div>
 236 </body>
 237 </html>