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