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

Adabriand Furtado
1 parent 78ae61e2
Showing 5 changed files with 125 additions and 90 deletions Show diff stats
.gitignore
view/assets/css/main.css
view/img/fix.png
view/img/loading.gif
view/template.html
@@ -5,3 +5,4 @@
 *.log
 video/*
 tmp/
+*.pyc
@@ -9,7 +9,13 @@ video {
 }
 */
 .video-body {
-	height: 350px;
+	height: 50%;
+	width: 85%;
+}
+
+.video-container {
+	padding-left: 40px;
+	padding-right: 0px;
 }
 .row {
@@ -25,8 +31,8 @@ video {
 }
 /* Fontes */
-.table-responsive, .btn-default, .finish-task-button, #upload-button, h1, h2,
-	h3, h4, h5, h6 {
+.table-responsive, .btn-default, .finish-task-button, #upload-button, h1,
+	h2, h3, h4, h5, h6 {
 	font-family: 'Titillium Web', sans-serif;
 }
@@ -114,22 +120,12 @@ h6 {
 }
 .progress-bar {
-	height: 5px;
+	height: 100%;
 }
 .progress {
 	background-color: rgba(218, 228, 232, 1.0);
-	height: 5px;
-}
-
-#avatar-container {
-	padding-left: 40px;
-	padding-right: 0px;
-}
-
-#ref-container {
-	padding-left: 60px;
-	padding-right: 0px;
+	height: 7px;
 }
 #upload-form {
@@ -161,7 +157,7 @@ h6 {
 #upload-file-name {
 	text-overflow: ellipsis;
 	overflow: hidden;
-	padding: 6px 0px;
+	padding: 7px 11px 7px 0px;
 	color: #9e9fa0;
 	font-style: italic;
 }
@@ -172,6 +168,8 @@ h6 {
 #upload-progress {
 	margin-bottom: 0px;
+	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
+	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
 }
 #upload-msg {
@@ -188,6 +186,10 @@ h6 {
 	padding-right: 40px;
 }
+#fix-button {
+	display: none;
+}
+
 .finish-task-button {
 	float: right;
 	padding-bottom: 0px;
@@ -195,11 +197,6 @@ h6 {
 	color: rgba(94, 199, 189, 1.0);
 }
-.enabled-button {
-	filter: alpha(opacity = 100);
-	opacity: 1;
-}
-
 .enabled-button:hover {
 	cursor: pointer;
 	filter: alpha(opacity = 50);
@@ -209,4 +206,28 @@ h6 {
 .disabled-button {
 	filter: alpha(opacity = 50);
 	opacity: 0.5;
+}
+
+.mask {
+	filter: alpha(opacity = 50);
+	opacity: 0.5;
+}
+
+#loading-container {
+	display: none;
+	position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1040;
+}
+
+
+
+#loading-container img {
+	position: absolute;
+	width: 80px;
+	top: 37%;
+	left: 47%;
 }
 \ No newline at end of file
@@ -5,6 +5,9 @@
 <script src="{{ server }}/assets/js/jquery.fileupload.js"></script>
 <script src="{{ server }}/assets/js/moment.js"></script>
+<div id="loading-container">
+	<img src="{{ server }}/img/loading.gif">
+</div>
 <div class="row">
 	<div id="success" class="alert alert-success" style="display: none;">
 		<strong>Parabéns!</strong> <span>Tarefa concluída.</span>
@@ -28,7 +31,7 @@
 					<th>SELO DO SINAL</th>
 					<th>DATA DE SUBMISSÃO</th>
 					<th>ÚLTIMA EDIÇÃO</th>
-					<th>ÚLTIMA EDIÇÃO POR</th>
+					<th>NÚMERO DE CORREÇÕES</th>
 				</tr>
 			</thead>
 			<tbody>
@@ -37,14 +40,14 @@
 					<td><span id="sign-seal">WIKILIBRAS</span></td>
 					<td><span id="submission-date"></span></td>
 					<td><span id="last-edit-date">-</span></td>
-					<td><span id="last-edit-by">-</span></td>
+					<td><span id="number-of-fixes">-</span></td>
 				</tr>
 			</tbody>
 		</table>
 	</div>
 	<div class="line-separator"></div>
 	<div id="corretor-container" class="row body-container">
-		<div id="avatar-container" class="col-sm-6">
+		<div id="avatar-container" class="col-sm-6 video-container">
 			<div class="row">
 				<h6>
 					ANIMAÇÃO ATUAL "<span class="sign-label"></span>":
@@ -56,31 +59,28 @@
 					<source type="video/webm">
 				</video>
 			</div>
-			<div class="row">
+			<div class="row link-container">
 				<a id="blend-link" href="" class="btn btn-default" download>DOWNLOAD
 					ARQUIVO DE ANIMAÇÃO .BLENDER <img
 					src="{{ server }}/img/blender.svg"
 					style="width: 22px; height: 22px"></img>
 				</a>
 			</div>
-			<div class="row">
+			<!-- <div class="row"></div> -->
+			<div id="upload-container" class="row">
 				<h6 id="upload-msg">ENVIAR ARQUIVO DE ANIMAÇÃO BLENDER
 					CORRIGIDO:</h6>
-			</div>
-			<div class="row">
-				<div id="upload-form-container" class="col-sm-8">
-					<div id="upload-button-container" class="col-sm-5">
-						<form id="upload-form" method="post" enctype="multipart/form-data">
-							<input id="file-upload" type="file" name="file" />
-						</form>
-						<div id="upload-button" class="enabled-button">
-							<img id="upload-icon" class="icon"
-								src="{{ server }}/img/paperclip.svg"></img>ENVIAR
-						</div>
+				<div id="upload-button-container" class="col-sm-3">
+					<form id="upload-form" method="post" enctype="multipart/form-data">
+						<input id="file-upload" type="file" name="file" />
+					</form>
+					<div id="upload-button" class="enabled-button">
+						<img id="upload-icon" class="icon"
+							src="{{ server }}/img/paperclip.svg"></img>ENVIAR
 					</div>
-					<span id="upload-file-name" class="col-sm-7"> Escolha um
-						arquivo </span>
 				</div>
+				<span id="upload-file-name" class="col-sm-5">Escolha um
+					arquivo</span>
 				<div id="upload-progress-container" class="col-sm-4">
 					<div id="upload-progress" class="progress">
 						<div class="progress-bar" role="progressbar" aria-valuenow="0"
@@ -89,7 +89,7 @@
 				</div>
 			</div>
 		</div>
-		<div id="ref-container" class="col-sm-6">
+		<div id="ref-container" class="col-sm-6 video-container">
 			<div class="row">
 				<h6>
 					VÍDEO DE REFERÊNCIA “<span class="sign-label"></span>”:
@@ -101,7 +101,7 @@
 					<source type="video/webm">
 				</video>
 			</div>
-			<div class="row">
+			<div class="row link-container">
 				<a id="ref-video-link" href="" class="btn btn-default" download>DOWNLOAD
 					VÍDEO DE REFERÊNCIA DO SINAL <img
 					src="{{ server }}/img/download.svg"
@@ -110,7 +110,11 @@
 			</div>
 			<div id="finish-task-container" class="row">
 				<div id="finish-button" class="finish-task-button disabled-button ">
-					FINALIZAR<img class="icon" src="{{ server }}/img/finish.svg"></img>
+					<span id="finish-button-text">FINALIZAR</span><img class="icon"
+						src="{{ server }}/img/finish.svg"></img>
+				</div>
+				<div id="fix-button" class="finish-task-button enabled-button">
+					CORRIGIR<img class="icon" src="{{ server }}/img/fix.png"></img>
 				</div>
 				<div id="skip-button" class="finish-task-button enabled-button">
 					PULAR<img class="icon" src="{{ server }}/img/skip.svg"></img>
@@ -118,49 +122,16 @@
 			</div>
 		</div>
 	</div>
-	<div id="approval-container" class="row body-container">
-		<div id="avatar-container" class="col-sm-6">
-			<div class="row">
-				<h6>
-					ANIMAÇÃO"<span class="sign-label"></span>":
-				</h6>
-			</div>
-			<div class="row">
-				<video id="avatar-video"
-					src="{{ server }}/videos/ENSINADO_AVATAR.webm" preload="metadata"
-					class="video-body" autoplay loop controls>
-					<source type="video/webm">
-				</video>
-			</div>
-		</div>
-		<div id="ref-container" class="col-sm-6">
-			<div class="row">
-				<h6>
-					VÍDEO DE REFERÊNCIA “<span class="sign-label"></span>”:
-				</h6>
-			</div>
-			<div class="row">
-				<video src="{{ server }}/videos/ENSINADO_REF.webm"
-					preload="metadata" class="video-body" autoplay loop controls>
-					<source type="video/mp4">
-				</video>
-			</div>
-			<div id="approval-task-container" class="row">
-				<div id="approved-button" class="finish-task-button enabled-button">
-					APROVADO<img class="icon" src="{{ server }}/img/finish.svg"></img>
-				</div>
-				<div id="fix-button" class="finish-task-button enabled-button">
-					CORRIGIR<img class="icon" src="{{ server }}/img/skip.svg"></img>
-				</div>
-			</div>
-		</div>
-	</div>
 </div>
 <script type="text/javascript">
 	var base_url = "{{ server }}/videos/";
 	var upload_session_id = generateSessionID();
 	var current_task_id = -1;
+	var status_dict = {
+		"APROVAR" : "APPROVED",
+		"FINALIZAR" : "FINISHED"
+	};
 	function generateSessionID() {
 		return (Math.random() + " ").substring(2, 10)
@@ -177,16 +148,47 @@
 		$("#finish-button").off("click").on("click", function() {
 			// endpoint - /finish_task
 			// enviar mensagem via POST para renderizar video - upload/<session_hash>/<task.info.sign_name>_CORRIGIDO.blend
-			saveAnswer(task, deferred, "FINISHED");
+			enableLoading();
+			setTimeout(function() {
+				disableLoading();
+				status = status_dict[$("#finish-button").text().trim()];
+				saveAnswer(task, deferred, status);
+			}, 3000);
 		});
 	}
+	function enableLoading() {
+		$("#loading-container").show();
+		$("#main-container").addClass("mask");
+	}
+
+	function disableLoading() {
+		$("#loading-container").hide();
+		$("#main-container").removeClass("mask");
+	}
+
 	function disableFinishButton() {
 		$("#finish-button").off("click");
 		$("#finish-button").removeClass("enabled-button");
 		$("#finish-button").addClass("disabled-button");
 	}
+	function showApprovalGUI(task, deferred) {
+		$("#upload-container").hide();
+		$(".link-container").hide();
+		$("#fix-button").show();
+		$("#finish-button-text").text("APROVAR");
+		enableFinishButton(task, deferred);
+	}
+
+	function showFixGUI() {
+		disableFinishButton();
+		$("#upload-container").show();
+		$(".link-container").show();
+		$("#finish-button-text").text("FINALIZAR");
+		$("#fix-button").hide();
+	}
+
 	function setupButtons(task, deferred) {
 		disableFinishButton();
 		resetUploadProgress();
@@ -228,23 +230,34 @@
 			saveAnswer(task, deferred, "SKIP");
 		});
 		$("#fix-button").off("click").on("click", function() {
-			$("#approval-container").hide();
-			$("#corretor-container").show();
-		});
-		$("#approved-button").off("click").on("click", function() {
-			saveAnswer(task, deferred, "FINISHED");
+			showFixGUI();
 		});
 	}
-	function saveAnswer(task, deferred, status) {
+	function createAnswer(task, status) {
 		var answer = {
-			"status" : status
+			"status" : status,
+			"number_of_fixes" : 0,
+			"number_of_approval" : 0
 		};
+		var last_answer = task.info.last_answer;
+		var hasLastAnswer = typeof last_answer != "undefined";
+		if (hasLastAnswer) {
+			answer = last_answer;
+		}
 		if (status == "FINISHED") {
 			answer["last_edit_date"] = moment(new Date()).format(
 					"YYYY-MM-DDTHH:mm:ss")
 			answer["last_upload_session_id"] = upload_session_id;
+			answer["number_of_fixes"] = answer.number_of_fixes + 1;
+		} else if (status == "APPROVED") {
+			answer["number_of_approval"] = answer.number_of_approval + 1;
 		}
+		return answer;
+	}
+
+	function saveAnswer(task, deferred, status) {
+		var answer = createAnswer(task, status);
 		pybossa.saveTask(task.id, answer).done(function() {
 			$("#success").fadeIn(500);
 			$("#main-container").hide();
@@ -271,9 +284,10 @@
 		var last_answer = task.info.last_answer;
 		var hasLastAnswer = typeof last_answer != "undefined";
 		if (hasLastAnswer && last_answer.status == "FINISHED") {
+			console.log(last_answer);
 			$("#last-edit-date").text(
 					moment(last_answer.last_edit_date).format("DD/MM/YYYY"));
-			$("#last-edit-by").text(last_answer.last_edit_by);
+			$("#number-of-fixes").text(last_answer.number_of_fixes);
 		}
 	}
@@ -285,8 +299,7 @@
 			$("#main-container").fadeIn(500);
 			var hasLastAnswer = typeof task.info.last_answer != "undefined";
 			if (hasLastAnswer && task.info.last_answer.status == "FINISHED") {
-				$("#corretor-container").hide();
-				$("#approval-container").show();
+				showApprovalGUI(task, deferred);
 			}
 		} else {
 			$("#main-container").hide();
	@@ -5,3 +5,4 @@		@@ -5,3 +5,4 @@
5	*.log	5	*.log
6	video/*	6	video/*
7	tmp/	7	tmp/
		8	+*.pyc
	@@ -9,7 +9,13 @@ video {		@@ -9,7 +9,13 @@ video {
9	}	9	}
10	*/	10	*/
11	.video-body {	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	.row {	21	.row {
	@@ -25,8 +31,8 @@ video {		@@ -25,8 +31,8 @@ video {
25	}	31	}
26		32
27	/* Fontes */	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	font-family: 'Titillium Web', sans-serif;	36	font-family: 'Titillium Web', sans-serif;
31	}	37	}
32		38
	@@ -114,22 +120,12 @@ h6 {		@@ -114,22 +120,12 @@ h6 {
114	}	120	}
115		121
116	.progress-bar {	122	.progress-bar {
117	- height: 5px;	123	+ height: 100%;
118	}	124	}
119		125
120	.progress {	126	.progress {
121	background-color: rgba(218, 228, 232, 1.0);	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	#upload-form {	131	#upload-form {
	@@ -161,7 +157,7 @@ h6 {		@@ -161,7 +157,7 @@ h6 {
161	#upload-file-name {	157	#upload-file-name {
162	text-overflow: ellipsis;	158	text-overflow: ellipsis;
163	overflow: hidden;	159	overflow: hidden;
164	- padding: 6px 0px;	160	+ padding: 7px 11px 7px 0px;
165	color: #9e9fa0;	161	color: #9e9fa0;
166	font-style: italic;	162	font-style: italic;
167	}	163	}
	@@ -172,6 +168,8 @@ h6 {		@@ -172,6 +168,8 @@ h6 {
172		168
173	#upload-progress {	169	#upload-progress {
174	margin-bottom: 0px;	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	#upload-msg {	175	#upload-msg {
	@@ -188,6 +186,10 @@ h6 {		@@ -188,6 +186,10 @@ h6 {
188	padding-right: 40px;	186	padding-right: 40px;
189	}	187	}
190		188
		189	+#fix-button {
		190	+ display: none;
		191	+}
		192	+
191	.finish-task-button {	193	.finish-task-button {
192	float: right;	194	float: right;
193	padding-bottom: 0px;	195	padding-bottom: 0px;
	@@ -195,11 +197,6 @@ h6 {		@@ -195,11 +197,6 @@ h6 {
195	color: rgba(94, 199, 189, 1.0);	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	.enabled-button:hover {	200	.enabled-button:hover {
204	cursor: pointer;	201	cursor: pointer;
205	filter: alpha(opacity = 50);	202	filter: alpha(opacity = 50);
	@@ -209,4 +206,28 @@ h6 {		@@ -209,4 +206,28 @@ h6 {
209	.disabled-button {	206	.disabled-button {
210	filter: alpha(opacity = 50);	207	filter: alpha(opacity = 50);
211	opacity: 0.5;	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	\ No newline at end of file	234	\ No newline at end of file