| Line 0
          
      
      
        Link Here | 
            
              |  |  | 1 | [% INCLUDE 'doc-head-open.inc' %] | 
            
              | 2 | <title>Koha › 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> |