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