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

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