From 104cb330f5801629627e783fd5b2fe925e496c0b Mon Sep 17 00:00:00 2001
From: Adabriand Furtado <adabriand@gmail.com>
Date: Tue, 13 Oct 2015 16:23:38 -0300
Subject: [PATCH] Adicionado ícone de loading e coluna com o número de correções

---
 .gitignore               |   1 +
 view/assets/css/main.css |  63 ++++++++++++++++++++++++++++++++++++++++++---------------------
 view/img/fix.png         | Bin 0 -> 7006 bytes
 view/img/loading.gif     | Bin 0 -> 79842 bytes
 view/template.html       | 151 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------------------------------------
 5 files changed, 125 insertions(+), 90 deletions(-)
 create mode 100644 view/img/fix.png
 create mode 100644 view/img/loading.gif

diff --git a/.gitignore b/.gitignore
index 45c66d6..3103336 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@
 *.log
 video/*
 tmp/
+*.pyc
diff --git a/view/assets/css/main.css b/view/assets/css/main.css
index 2a62847..2d2f49a 100755
--- a/view/assets/css/main.css
+++ b/view/assets/css/main.css
@@ -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
diff --git a/view/img/fix.png b/view/img/fix.png
new file mode 100644
index 0000000..7076867
Binary files /dev/null and b/view/img/fix.png differ
diff --git a/view/img/loading.gif b/view/img/loading.gif
new file mode 100644
index 0000000..0fcd282
Binary files /dev/null and b/view/img/loading.gif differ
diff --git a/view/template.html b/view/template.html
index 19ff585..81fba54 100755
--- a/view/template.html
+++ b/view/template.html
@@ -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();
--
libgit2 0.21.2