Download as
Browse Code »

Commit 104cb330f5801629627e783fd5b2fe925e496c0b

Authored by Adabriand Furtado
1 parent 78ae61e2
Exists in master

Adicionado ícone de loading e coluna com o número de correções

Showing 5 changed files with 125 additions and 90 deletions   Show diff stats
.gitignore
  Diff comments   View file @104cb33
... ... @@ -5,3 +5,4 @@
5 5 *.log
6 6 video/*
7 7 tmp/
  8 +*.pyc
... ...
view/assets/css/main.css
  Diff comments   View file @104cb33
... ... @@ -9,7 +9,13 @@ video {
9 9 }
10 10 */
11 11 .video-body {
12   - height: 350px;
  12 + height: 50%;
  13 + width: 85%;
  14 +}
  15 +
  16 +.video-container {
  17 + padding-left: 40px;
  18 + padding-right: 0px;
13 19 }
14 20  
15 21 .row {
... ... @@ -25,8 +31,8 @@ video {
25 31 }
26 32  
27 33 /* Fontes */
28   -.table-responsive, .btn-default, .finish-task-button, #upload-button, h1, h2,
29   - h3, h4, h5, h6 {
  34 +.table-responsive, .btn-default, .finish-task-button, #upload-button, h1,
  35 + h2, h3, h4, h5, h6 {
30 36 font-family: 'Titillium Web', sans-serif;
31 37 }
32 38  
... ... @@ -114,22 +120,12 @@ h6 {
114 120 }
115 121  
116 122 .progress-bar {
117   - height: 5px;
  123 + height: 100%;
118 124 }
119 125  
120 126 .progress {
121 127 background-color: rgba(218, 228, 232, 1.0);
122   - height: 5px;
123   -}
124   -
125   -#avatar-container {
126   - padding-left: 40px;
127   - padding-right: 0px;
128   -}
129   -
130   -#ref-container {
131   - padding-left: 60px;
132   - padding-right: 0px;
  128 + height: 7px;
133 129 }
134 130  
135 131 #upload-form {
... ... @@ -161,7 +157,7 @@ h6 {
161 157 #upload-file-name {
162 158 text-overflow: ellipsis;
163 159 overflow: hidden;
164   - padding: 6px 0px;
  160 + padding: 7px 11px 7px 0px;
165 161 color: #9e9fa0;
166 162 font-style: italic;
167 163 }
... ... @@ -172,6 +168,8 @@ h6 {
172 168  
173 169 #upload-progress {
174 170 margin-bottom: 0px;
  171 + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
  172 + box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
175 173 }
176 174  
177 175 #upload-msg {
... ... @@ -188,6 +186,10 @@ h6 {
188 186 padding-right: 40px;
189 187 }
190 188  
  189 +#fix-button {
  190 + display: none;
  191 +}
  192 +
191 193 .finish-task-button {
192 194 float: right;
193 195 padding-bottom: 0px;
... ... @@ -195,11 +197,6 @@ h6 {
195 197 color: rgba(94, 199, 189, 1.0);
196 198 }
197 199  
198   -.enabled-button {
199   - filter: alpha(opacity = 100);
200   - opacity: 1;
201   -}
202   -
203 200 .enabled-button:hover {
204 201 cursor: pointer;
205 202 filter: alpha(opacity = 50);
... ... @@ -209,4 +206,28 @@ h6 {
209 206 .disabled-button {
210 207 filter: alpha(opacity = 50);
211 208 opacity: 0.5;
  209 +}
  210 +
  211 +.mask {
  212 + filter: alpha(opacity = 50);
  213 + opacity: 0.5;
  214 +}
  215 +
  216 +#loading-container {
  217 + display: none;
  218 + position: fixed;
  219 + top: 0;
  220 + right: 0;
  221 + bottom: 0;
  222 + left: 0;
  223 + z-index: 1040;
  224 +}
  225 +
  226 +
  227 +
  228 +#loading-container img {
  229 + position: absolute;
  230 + width: 80px;
  231 + top: 37%;
  232 + left: 47%;
212 233 }
213 234 \ No newline at end of file
... ...
view/img/fix.png 0 → 100644
View file @104cb33

6.84 KB
view/img/loading.gif 0 → 100644
View file @104cb33

78 KB
view/template.html
  Diff comments   View file @104cb33
... ... @@ -5,6 +5,9 @@
5 5 <script src="{{ server }}/assets/js/jquery.fileupload.js"></script>
6 6 <script src="{{ server }}/assets/js/moment.js"></script>
7 7  
  8 +<div id="loading-container">
  9 + <img src="{{ server }}/img/loading.gif">
  10 +</div>
8 11 <div class="row">
9 12 <div id="success" class="alert alert-success" style="display: none;">
10 13 <strong>Parabéns!</strong> <span>Tarefa concluída.</span>
... ... @@ -28,7 +31,7 @@
28 31 <th>SELO DO SINAL</th>
29 32 <th>DATA DE SUBMISSÃO</th>
30 33 <th>ÚLTIMA EDIÇÃO</th>
31   - <th>ÚLTIMA EDIÇÃO POR</th>
  34 + <th>NÚMERO DE CORREÇÕES</th>
32 35 </tr>
33 36 </thead>
34 37 <tbody>
... ... @@ -37,14 +40,14 @@
37 40 <td><span id="sign-seal">WIKILIBRAS</span></td>
38 41 <td><span id="submission-date"></span></td>
39 42 <td><span id="last-edit-date">-</span></td>
40   - <td><span id="last-edit-by">-</span></td>
  43 + <td><span id="number-of-fixes">-</span></td>
41 44 </tr>
42 45 </tbody>
43 46 </table>
44 47 </div>
45 48 <div class="line-separator"></div>
46 49 <div id="corretor-container" class="row body-container">
47   - <div id="avatar-container" class="col-sm-6">
  50 + <div id="avatar-container" class="col-sm-6 video-container">
48 51 <div class="row">
49 52 <h6>
50 53 ANIMAÇÃO ATUAL "<span class="sign-label"></span>":
... ... @@ -56,31 +59,28 @@
56 59 <source type="video/webm">
57 60 </video>
58 61 </div>
59   - <div class="row">
  62 + <div class="row link-container">
60 63 <a id="blend-link" href="" class="btn btn-default" download>DOWNLOAD
61 64 ARQUIVO DE ANIMAÇÃO .BLENDER <img
62 65 src="{{ server }}/img/blender.svg"
63 66 style="width: 22px; height: 22px"></img>
64 67 </a>
65 68 </div>
66   - <div class="row">
  69 + <!-- <div class="row"></div> -->
  70 + <div id="upload-container" class="row">
67 71 <h6 id="upload-msg">ENVIAR ARQUIVO DE ANIMAÇÃO BLENDER
68 72 CORRIGIDO:</h6>
69   - </div>
70   - <div class="row">
71   - <div id="upload-form-container" class="col-sm-8">
72   - <div id="upload-button-container" class="col-sm-5">
73   - <form id="upload-form" method="post" enctype="multipart/form-data">
74   - <input id="file-upload" type="file" name="file" />
75   - </form>
76   - <div id="upload-button" class="enabled-button">
77   - <img id="upload-icon" class="icon"
78   - src="{{ server }}/img/paperclip.svg"></img>ENVIAR
79   - </div>
  73 + <div id="upload-button-container" class="col-sm-3">
  74 + <form id="upload-form" method="post" enctype="multipart/form-data">
  75 + <input id="file-upload" type="file" name="file" />
  76 + </form>
  77 + <div id="upload-button" class="enabled-button">
  78 + <img id="upload-icon" class="icon"
  79 + src="{{ server }}/img/paperclip.svg"></img>ENVIAR
80 80 </div>
81   - <span id="upload-file-name" class="col-sm-7"> Escolha um
82   - arquivo </span>
83 81 </div>
  82 + <span id="upload-file-name" class="col-sm-5">Escolha um
  83 + arquivo</span>
84 84 <div id="upload-progress-container" class="col-sm-4">
85 85 <div id="upload-progress" class="progress">
86 86 <div class="progress-bar" role="progressbar" aria-valuenow="0"
... ... @@ -89,7 +89,7 @@
89 89 </div>
90 90 </div>
91 91 </div>
92   - <div id="ref-container" class="col-sm-6">
  92 + <div id="ref-container" class="col-sm-6 video-container">
93 93 <div class="row">
94 94 <h6>
95 95 VÍDEO DE REFERÊNCIA “<span class="sign-label"></span>”:
... ... @@ -101,7 +101,7 @@
101 101 <source type="video/webm">
102 102 </video>
103 103 </div>
104   - <div class="row">
  104 + <div class="row link-container">
105 105 <a id="ref-video-link" href="" class="btn btn-default" download>DOWNLOAD
106 106 VÍDEO DE REFERÊNCIA DO SINAL <img
107 107 src="{{ server }}/img/download.svg"
... ... @@ -110,7 +110,11 @@
110 110 </div>
111 111 <div id="finish-task-container" class="row">
112 112 <div id="finish-button" class="finish-task-button disabled-button ">
113   - FINALIZAR<img class="icon" src="{{ server }}/img/finish.svg"></img>
  113 + <span id="finish-button-text">FINALIZAR</span><img class="icon"
  114 + src="{{ server }}/img/finish.svg"></img>
  115 + </div>
  116 + <div id="fix-button" class="finish-task-button enabled-button">
  117 + CORRIGIR<img class="icon" src="{{ server }}/img/fix.png"></img>
114 118 </div>
115 119 <div id="skip-button" class="finish-task-button enabled-button">
116 120 PULAR<img class="icon" src="{{ server }}/img/skip.svg"></img>
... ... @@ -118,49 +122,16 @@
118 122 </div>
119 123 </div>
120 124 </div>
121   - <div id="approval-container" class="row body-container">
122   - <div id="avatar-container" class="col-sm-6">
123   - <div class="row">
124   - <h6>
125   - ANIMAÇÃO"<span class="sign-label"></span>":
126   - </h6>
127   - </div>
128   - <div class="row">
129   - <video id="avatar-video"
130   - src="{{ server }}/videos/ENSINADO_AVATAR.webm" preload="metadata"
131   - class="video-body" autoplay loop controls>
132   - <source type="video/webm">
133   - </video>
134   - </div>
135   - </div>
136   - <div id="ref-container" class="col-sm-6">
137   - <div class="row">
138   - <h6>
139   - VÍDEO DE REFERÊNCIA “<span class="sign-label"></span>”:
140   - </h6>
141   - </div>
142   - <div class="row">
143   - <video src="{{ server }}/videos/ENSINADO_REF.webm"
144   - preload="metadata" class="video-body" autoplay loop controls>
145   - <source type="video/mp4">
146   - </video>
147   - </div>
148   - <div id="approval-task-container" class="row">
149   - <div id="approved-button" class="finish-task-button enabled-button">
150   - APROVADO<img class="icon" src="{{ server }}/img/finish.svg"></img>
151   - </div>
152   - <div id="fix-button" class="finish-task-button enabled-button">
153   - CORRIGIR<img class="icon" src="{{ server }}/img/skip.svg"></img>
154   - </div>
155   - </div>
156   - </div>
157   - </div>
158 125 </div>
159 126  
160 127 <script type="text/javascript">
161 128 var base_url = "{{ server }}/videos/";
162 129 var upload_session_id = generateSessionID();
163 130 var current_task_id = -1;
  131 + var status_dict = {
  132 + "APROVAR" : "APPROVED",
  133 + "FINALIZAR" : "FINISHED"
  134 + };
164 135  
165 136 function generateSessionID() {
166 137 return (Math.random() + " ").substring(2, 10)
... ... @@ -177,16 +148,47 @@
177 148 $("#finish-button").off("click").on("click", function() {
178 149 // endpoint - /finish_task
179 150 // enviar mensagem via POST para renderizar video - upload/<session_hash>/<task.info.sign_name>_CORRIGIDO.blend
180   - saveAnswer(task, deferred, "FINISHED");
  151 + enableLoading();
  152 + setTimeout(function() {
  153 + disableLoading();
  154 + status = status_dict[$("#finish-button").text().trim()];
  155 + saveAnswer(task, deferred, status);
  156 + }, 3000);
181 157 });
182 158 }
183 159  
  160 + function enableLoading() {
  161 + $("#loading-container").show();
  162 + $("#main-container").addClass("mask");
  163 + }
  164 +
  165 + function disableLoading() {
  166 + $("#loading-container").hide();
  167 + $("#main-container").removeClass("mask");
  168 + }
  169 +
184 170 function disableFinishButton() {
185 171 $("#finish-button").off("click");
186 172 $("#finish-button").removeClass("enabled-button");
187 173 $("#finish-button").addClass("disabled-button");
188 174 }
189 175  
  176 + function showApprovalGUI(task, deferred) {
  177 + $("#upload-container").hide();
  178 + $(".link-container").hide();
  179 + $("#fix-button").show();
  180 + $("#finish-button-text").text("APROVAR");
  181 + enableFinishButton(task, deferred);
  182 + }
  183 +
  184 + function showFixGUI() {
  185 + disableFinishButton();
  186 + $("#upload-container").show();
  187 + $(".link-container").show();
  188 + $("#finish-button-text").text("FINALIZAR");
  189 + $("#fix-button").hide();
  190 + }
  191 +
190 192 function setupButtons(task, deferred) {
191 193 disableFinishButton();
192 194 resetUploadProgress();
... ... @@ -228,23 +230,34 @@
228 230 saveAnswer(task, deferred, "SKIP");
229 231 });
230 232 $("#fix-button").off("click").on("click", function() {
231   - $("#approval-container").hide();
232   - $("#corretor-container").show();
233   - });
234   - $("#approved-button").off("click").on("click", function() {
235   - saveAnswer(task, deferred, "FINISHED");
  233 + showFixGUI();
236 234 });
237 235 }
238 236  
239   - function saveAnswer(task, deferred, status) {
  237 + function createAnswer(task, status) {
240 238 var answer = {
241   - "status" : status
  239 + "status" : status,
  240 + "number_of_fixes" : 0,
  241 + "number_of_approval" : 0
242 242 };
  243 + var last_answer = task.info.last_answer;
  244 + var hasLastAnswer = typeof last_answer != "undefined";
  245 + if (hasLastAnswer) {
  246 + answer = last_answer;
  247 + }
243 248 if (status == "FINISHED") {
244 249 answer["last_edit_date"] = moment(new Date()).format(
245 250 "YYYY-MM-DDTHH:mm:ss")
246 251 answer["last_upload_session_id"] = upload_session_id;
  252 + answer["number_of_fixes"] = answer.number_of_fixes + 1;
  253 + } else if (status == "APPROVED") {
  254 + answer["number_of_approval"] = answer.number_of_approval + 1;
247 255 }
  256 + return answer;
  257 + }
  258 +
  259 + function saveAnswer(task, deferred, status) {
  260 + var answer = createAnswer(task, status);
248 261 pybossa.saveTask(task.id, answer).done(function() {
249 262 $("#success").fadeIn(500);
250 263 $("#main-container").hide();
... ... @@ -271,9 +284,10 @@
271 284 var last_answer = task.info.last_answer;
272 285 var hasLastAnswer = typeof last_answer != "undefined";
273 286 if (hasLastAnswer && last_answer.status == "FINISHED") {
  287 + console.log(last_answer);
274 288 $("#last-edit-date").text(
275 289 moment(last_answer.last_edit_date).format("DD/MM/YYYY"));
276   - $("#last-edit-by").text(last_answer.last_edit_by);
  290 + $("#number-of-fixes").text(last_answer.number_of_fixes);
277 291 }
278 292 }
279 293  
... ... @@ -285,8 +299,7 @@
285 299 $("#main-container").fadeIn(500);
286 300 var hasLastAnswer = typeof task.info.last_answer != "undefined";
287 301 if (hasLastAnswer && task.info.last_answer.status == "FINISHED") {
288   - $("#corretor-container").hide();
289   - $("#approval-container").show();
  302 + showApprovalGUI(task, deferred);
290 303 }
291 304 } else {
292 305 $("#main-container").hide();
... ...