forked from Scifabric/pdftranscribe
-
Notifications
You must be signed in to change notification settings - Fork 2
/
template.html
279 lines (251 loc) · 9.65 KB
/
template.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
<style type="text/css">
#the-canvas {
cursor: move;
}
</style>
<div class="row">
<!-- Success and Error Messages for the user -->
<!-- Question, task id, photo and action buttons for answering the question-->
<div class="span6 offset2" style="height:50px">
<div id="success" class="alert alert-success" style="display:none;">
<a class="close">×</a>
<strong>Bien hecho!</strong> Tus respuestas han sido guardadas
</div>
<div id="taskcompleted" class="alert alert-info" style="display:none;">
<strong>La tarea ha sido completada!</strong> Muchas gracias!
</div>
<div id="loading" class="alert alert-info">
<strong>Cargando el PDF...</strong>
</div>
<div id="finish" class="alert alert-success" style="display:none;">
<strong>Congratulations!</strong> Ya has participado en todas las tareas disponibles!
<br/>
<div class="alert-actions">
<a class="btn small" href="/">Vuelve</a>
<a class="btn small" href="/app">o, echa un vistazo a otras aplicaciones.</a>
</div>
</div>
<div id="error" class="alert alert-error" style="display:none;">
<a class="close">×</a>
<strong>Error!</strong> Algo fue mal ... contacta con el administrador de la aplicación
</div>
</div> <!-- End Success and Error Messages for the user -->
</div>
<div class="row skeleton">
<div id="question" class="span12">
<h1>Pregunta</h1>
<span class="label label-info"><i class="icon icon-bullhorn"></i> Importante</span> <strong>Solo necesitamos las líneas en las que figuran cuantías por concepto.</strong><br/>
<span class="label label-info"><i class="icon icon-bullhorn"></i> Importante</span> <strong>Ignora tanto los totales como el resto de filas en tu transcripción.</strong><br/>
<table border=0>
<tr>
<td>
<i>Ejemplo de transcripción de fila (separar campos por punto y coma ( carácter ; )</i>
<ul>
<li>Original: 00100 01101 31000 INTERESES OPERACIONES DE TESORERIA 1.841.666,66</li>
<li>Transcrita: 00100;01101;31000;INTERESES OPERACIONES DE TESORERIA;1.841.666,66
</ul>
</td>
<td>
<i>Ejemplo de filas a ignorar:</i>
<ul>
<li>001 DEUDA PÚBLICA</li>
<li>Total programa 01101 DEUDA PÚBLICA 87.816.681,06</li>
</ul>
</td>
</tr>
</table>
<hr>
</div>
</div>
<div class="row skeleton" style="">
<!-- Answer buttons -->
<div id="answer" class="span8" style="text-align:center;">
<div class="btn-group" style="padding-bottom:5px;">
<button class="btn btn-zoom" value=0><i class="icon icon-white icon-undo"></i></button>
<button class="btn btn-zoom" value=1><i class="icon icon-white icon-zoom-in"></i></button>
<button class="btn btn-zoom" value=-1><i class="icon icon-white icon-zoom-out"></i></button>
</div>
<!--<div id="viewport" style="width:620px;height:755px;overflow:auto;">
<canvas id="the-canvas"></canvas>
</div>-->
</div>
<div id="question" class="span4">
<p>Estás trabajando en la tarea: <span id="task-id" class="label label-warning">#</span></p>
<p>Has completado: <span id="done" class="label label-info"></span> tareas desde
<span id="total" class="label label-inverse"></span></p>
<div class="progress progress-striped">
<div id="progress" rel="tooltip" title="#" class="bar" style="width: 0%;"></div>
</div>
<div>
<h5>
<strong>Transcribe aquí. Una línea por cada fila del PDF. Separa los campos con punto y coma</strong>.
Si no te queda claro, repasa el tutorial. Puedes descargar el PDF para copiar y pegar.<br/>
<a href="/app/sevilla-presus13/tutorial" class="btn btn-primary" target="_blank">Abrir tutorial</a>
<a href="#" class="btn btn-primary pdf-downloader">Descargar en PDF</a>
</h5>
<form class="form-inline">
<textarea id="text" rows="15" style="width:100%;"></textarea>
</form>
<button class="btn btn-submit">Enviar!</button>
</div>
</div>
</div>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script src="/static/js/pdf/scrollsync.js"></script>
<script src="/static/js/pdf/dragscrollable.js"></script>
<script src="/static/js/pdf/pdf.js" type="text/javascript" ></script>
<script>
//
// Disable workers to avoid yet another cross-origin issue (workers need the URL of
// the script to be loaded, and currently do not allow cross-origin scripts)
//
PDFJS.disableWorker = true;
//
// Get page info from document, resize canvas accordingly, and render page
//
function renderPage(task) {
// Using promise to fetch the page
task.pdfDoc.getPage(task.pageNum).then(function(page) {
var viewport = page.getViewport(task.scale);
task.canvas.height = viewport.height;
task.canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: task.ctx,
viewport: viewport
};
page.render(renderContext);
});
}
function zoom(task, v) {
task.pdfDoc.getPage(task.pageNum).then(function(page){
if (v==1) {
task.scale = task.scale + 0.1;
if (task.scale >= 2) {
task.scale = 2;
}
}
if (v==-1) {
task.scale = task.scale - 0.1;
if (task.scale <= 0) {
task.scale = 0.1;
}
}
if (v==0) {
task.scale = 0.8;
}
var viewport = page.getViewport(task.scale + 0.1);
task.canvas.height = viewport.height;
task.canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: task.ctx,
viewport: viewport
};
page.render(renderContext);
});
}
//
// Go to previous page
//
function goPrevious(task) {
if (task.pageNum <= 1)
return;
task.pageNum--;
renderPage(task);
}
//
// Go to next page
//
function goNext(task) {
if (task.pageNum >= task.pdfDoc.numPages)
return;
task.pageNum++;
renderPage(task);
}
function loadUserProgress(task) {
pybossa.userProgress('sevilla-presus13').done(function(data){
var pct = Math.round((data.done*100)/data.total);
$("#progress").css("width", pct.toString() +"%");
$("#progress").attr("title", pct.toString() + "% completed!");
$("#progress").tooltip({'placement': 'left'});
$("#total").text(data.total);
$("#done").text(data.done);
$('.pdf-downloader').click(function(e) {
var pdf_task_page = task.pageNum;
var download_url = "https://github.com/openkratio/sevilla-presus13/raw/master/pdf/"+pdf_task_page+"_sevilla-presus13.pdf";
window.open(download_url);
});
});
}
pybossa.taskLoaded(function(task, deferred){
if ( !$.isEmptyObject(task) ) {
if (task.state=='completed') {
$('#answer').hide();
$('#taskcompleted').show();
}
// NOTE:
// Modifying the URL below to another server will likely *NOT* work. Because of browser
// security restrictions, we have to use a file server with special headers
// (CORS) - most servers don't support cross-origin browser requests.
// Asynchronously download PDF as an ArrayBuffer
var canvas = $("<canvas/>", {"id": "canvas_" + task.id});
canvas.css("border", "1px solid black");
var viewport = $("<div/>", {"id": "viewport_" + task.id});
viewport.css("width", "620px");
viewport.css("height", "755px");
viewport.css("overflow", "auto");
viewport.css("display", "none");
viewport.append(canvas);
$("#answer").append(viewport);
$('#viewport_' + task.id).dragscrollable({dragSelector:'#canvas_' + task.id});
task.canvas = document.getElementById('canvas_' + task.id);
task.ctx = document.getElementById("canvas_" + task.id).getContext('2d');
task.scale = 0.9;
task.pageNum = task.info.page;
PDFJS.getDocument(task.info.pdf_url).then(function getPdfHelloWorld(_pdfDoc) {
task.pdfDoc = _pdfDoc;
deferred.resolve(task);
});
}
else {
$(".skeleton").hide();
$("#finish").fadeIn();
deferred.resolve(task);
}
});
pybossa.presentTask(function(task, deferred){
if ( !$.isEmptyObject(task) ) {
loadUserProgress(task);
$("#viewport_" + task.id).show();
renderPage(task);
$("#question h1").text(task.info.question);
$("#task-id").text(task.id);
$("#loading").hide();
$(".btn-zoom").off('click').on('click', function(evt){
console.log($(evt.target).attr("value"));
zoom(task, parseInt($(evt.target).attr("value")));
});
$(".btn-submit").off('click').on('click', function(){
if ($("textarea#text").val() == '') {
alert("El cuadro está vacío, por favor realiza la transcripción antes de enviar");
}
else {
var answer = $("textarea#text").val();
$("#viewport_" + task.id).hide();
pybossa.saveTask(task.id, answer).done(function(data){
deferred.resolve();
$("#success").fadeIn();
setTimeout(function() { $("#success").fadeOut() }, 2000);
})
}
});
}
else {
$(".skeleton").hide();
$("#finish").fadeIn();
}
$("textarea#text").val('');
});
pybossa.run('sevilla-presus13');
</script>