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 |
<option value="[% language.lang %]">[% language.description %]</option> |
198 |
[% END %] |
199 |
</select> |
200 |
Translation: <input type="text" name="translation" /> |
201 |
<input type="submit" value="Add" /> |
202 |
</form> |
203 |
<div id="messages"></div> |
204 |
</div> |
205 |
</body> |
206 |
</html> |