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