Integração do Ranking com a API do PyBossa.

Adabriand Furtado
1 parent feb70914
Showing 10 changed files with 364 additions and 211 deletions Show diff stats
view/assets/css/main.css
view/assets/css/ranking.css
view/assets/js/helpers/pybossa-api-helper.js
view/assets/js/ranking.js
view/assets/js/render-sign.js
view/assets/js/submit-sign.js
view/assets/js/teached-signs.js
view/assets/js/wikilibras.js
view/ranking/ranking.html
view/template.html
@@ -146,6 +146,18 @@ body {
 	padding: 0px 0px 50px 0px;
 }
+.ref-video {
+	background-color: #000000;
+}
+
+#initial-screen .ref-video {
+	max-height: 350px;
+}
+
+#configuration-screen .ref-video {
+	max-height: 250px;
+}
+
 /* Avatar Container */
 #avatar-facial {
 	display: none;
@@ -504,7 +516,6 @@ ul.rig.columns-4 li {
 }
 #render-ref video {
-	background-color: #000000;
 	height: 407px;
 }
@@ -519,11 +530,6 @@ ul.rig.columns-4 li {
 	margin-bottom: 0px;
 }
-#thanks-screen h6 {
-	margin-top: 0px;
-	margin-bottom: 60px;
-}
-
 #thanks-screen img {
 	width: 100%;
 }
@@ -531,3 +537,11 @@ ul.rig.columns-4 li {
 #completed-all-task-msg {
 	display: none;
 }
+
+#completed-task-msg h6 {
+	margin: 0px 0px 60px 0px;
+}
+
+#completed-all-task-msg h6 {
+	margin: 0px 0px 10px 0px;
+}
@@ -27,57 +27,95 @@
 	padding-top: 30px;
 }
+#ranking-info-container .avatar-container {
+	display: none;
+}
+
+#ranking-info-container .avatar-info img {
+	width: 100%;
+}
+
 #ranking-info-container .achievement-info {
 	color: #028c12;
 }
+#ranking-info-container .progress-container {
+	padding-left: 100px;
+	margin-top: 10px;
+}
+
+#ranking-info-container .achievements-container {
+	position: relative;
+	padding: 10px 0px 0px 0px;
+	word-wrap: break-word;
+}
+
+#ranking-info-container .progress-label {
+	position: absolute;
+	left: 0px;
+}
+
+#ranking-info-container .done-tasks {
+	color: #84DC76;
+}
+
+#ranking-info-container .total-tasks {
+	color: #f0ad4e;
+}
+
+#ranking-info-container .tooltip-inner {
+	font-size: 16px;
+	max-width: 220px;
+}
+
 #leaderboard-container {
 	background-color: #fefcfc;
 	padding: 0px;
+	min-height: 560px;
 }
 #leaderboard-container table {
 	margin-bottom: 0px;
 }
-#ranking-container .table-striped>tbody>tr:nth-of-type(odd) {
+#leaderboard-container  .table-striped>tbody>tr:nth-of-type(odd) {
 	background-color: #f1f2f2;
 }
-#ranking-container .table-striped>tbody>tr:hover {
+#leaderboard-container  .table-striped>tbody>tr:hover {
 	background-color: #e0e0e0;
 }
-#ranking-container .table-striped>tbody>tr.highlight {
+#leaderboard-container  .table-striped>tbody>tr.highlight {
 	background-color: #fbefa3;
 }
-#ranking-container .table-striped>tbody>tr.highlight:hover {
+#leaderboard-container  .table-striped>tbody>tr.highlight:hover {
 	background-color: #f7e783;
 }
-#ranking-container th {
+#leaderboard-container  th {
 	text-align: center;
 	border: 0px;
 	padding-bottom: 15px;
 }
-#ranking-container td {
+#leaderboard-container  td {
 	text-align: center;
 	border: 0px;
 }
-#ranking-container td:nth-of-type(1), #ranking-container td:nth-of-type(2)
+#leaderboard-container  td:nth-of-type(1), #leaderboard-container  td:nth-of-type(2)
 	{
 	width: 75px;
 }
-#ranking-container td:nth-of-type(2), #ranking-container th:nth-of-type(2),
-	#ranking-container td:nth-of-type(3), #ranking-container th:nth-of-type(3)
+#leaderboard-container  td:nth-of-type(2), #leaderboard-container  th:nth-of-type(2),
+	#leaderboard-container  td:nth-of-type(3), #leaderboard-container  th:nth-of-type(3)
 	{
 	text-align: left;
 }
-#ranking-container th:nth-of-type(3) img {
+#leaderboard-container  th:nth-of-type(3) img {
 	padding-left: 20px;
 }
 \ No newline at end of file
@@ -0,0 +1,44 @@
+(function(pybossaApiHelper, $, undefined) {
+	
+	var pybossaEndpoint = '';
+	var projectName = '';
+	
+	function _getProjectId() {
+		return $.ajax({
+			url : pybossaEndpoint + '/api/project?short_name=' + projectName
+		});
+	}
+
+	function _getUserProgress() {
+		return $.ajax({
+			url : pybossaEndpoint + '/api/project/' + projectName + '/userprogress',
+			cache : false,
+			dataType : 'json'
+		});
+	}
+
+	function _getAnswers(projectId, userId) {
+		return $.ajax({
+			url : pybossaEndpoint + '/api/taskrun?project_id=' + projectId
+					+ '&user_id=' + userId
+		});
+	}
+	
+	pybossaApiHelper.setup = function(endpoint, name) {
+		pybossaEndpoint = endpoint;
+		projectName = name;
+	}
+	
+	pybossaApiHelper.getProjectId = function() {
+		return _getProjectId();
+	}
+	
+	pybossaApiHelper.getUserProgress = function() {
+		return _getUserProgress();
+	}
+
+	pybossaApiHelper.getAnswers = function(projectId, userId) {
+		return _getAnswers(projectId, userId);
+	}
+	
+}(window.pybossaApiHelper = window.pybossaApiHelper || {}, jQuery));
 (function(ranking, $, undefined) {
+	var NUMBER_OF_TOP_USERS = 10;
+	var STARS_MAP = [ '', 'gold', 'silver', 'bronze' ];
 	var baseUrl = '';
-	
+	var pybossaEndpoint = '';
+	var projectName = '';
+	var loggedUser = {};
+	var totalTasks = 0;
+	var doneTasks = 0;
+
+	function _getRankingData(callback) {
+		$.ajax({
+			url : pybossaEndpoint + '/api/leaderboard?limit='
+					+ NUMBER_OF_TOP_USERS,
+			success : function(response) {
+				callback(typeof response == "object" ? response[projectName]
+						: '');
+			},
+			error : function(xhr, textStatus, error) {
+				alert(xhr.responseText);
+			}
+		});
+	}
+
+	function _processRankingRow(rowData) {
+		var rank = rowData.rank;
+		if (rank < 0) {
+			return '';
+		}
+		var starHTML = '';
+		if (rank > 0 && rank < 4) {
+			starHTML = '<img src="' + baseUrl + '/img/ranking/'
+					+ STARS_MAP[rank] + '-star-icon.png">';
+		}
+		var trHTML = '<tr>';
+		if (rowData.name === loggedUser.name) {
+			trHTML = '<tr class="warning">';
+			loggedUser.rank = rowData.rank;
+		}
+		rank = rank == 0 ? "-" : rank + '.';
+		return trHTML + '<td>' + starHTML + '</td><td>' + rank
+				+ '</td><td><a href="/pybossa/account/' + rowData.name
+				+ '/" target="_blank">' + rowData.fullname + '</a></td><td>'
+				+ rowData.score + '</td></tr>';
+	}
+
+	function _updateRanking() {
+		_getRankingData(function(data) {
+			if (data === '')
+				return;
+
+			var rowsHTML = '';
+			for (var i = 0; i < data.length; i++) {
+				rowsHTML += _processRankingRow(data[i]);
+			}
+			$("#leaderboard-container tbody").html(rowsHTML);
+			$("#ranking-info-container .rank-position").html(loggedUser.rank);
+			$("#ranking-info-container .username").html(loggedUser.fullName);
+			if (loggedUser.avatarUrl != '') {
+				$("#ranking-info-container .avatar-container img").attr("src",
+						loggedUser.avatarUrl);
+				$("#ranking-info-container .avatar-placeholder").hide();
+				$("#ranking-info-container .avatar-container").show();
+			}
+			if (loggedUser.rank === 0) {
+				$("#ranking-info-container .rank-position-container").hide();
+			}
+			_updateProgress();
+		});
+	}
+
+	function _getUserData() {
+		return $.ajax({
+			url : pybossaEndpoint + '/api/user?name=' + loggedUser.name
+		});
+	}
+
+	function _getAvatarUrl(data) {
+		return typeof data.avatar != "undefined" ? pybossaEndpoint
+				+ '/uploads/' + data.container + '/' + data.avatar : '';
+	}
+
+	function _updateProgress() {
+		pybossaApiHelper
+				.getUserProgress()
+				.done(
+						function(response) {
+							totalTasks = response.total;
+							doneTasks = response.done;
+							var percentage = (doneTasks / totalTasks) * 100;
+							$("#ranking-info-container .progress-bar").attr(
+									'aria-valuenow', percentage).css("width",
+									percentage + '%');
+							$("#ranking-container [data-toggle='tooltip']")
+									.tooltip(
+											{
+												title : '<strong><span class="done-tasks">'
+														+ doneTasks
+														+ '</span> / <span class="total-tasks">'
+														+ totalTasks
+														+ '</span> sinais ensinados.</strong>',
+												placement : "bottom",
+												trigger : "manual"
+											});
+						});
+	}
+
+	function _loadRankingData() {
+		_getUserData().done(function(response) {
+			if (typeof response == "undefined" || response.length < 1) {
+				return;
+			}
+			loggedUser.fullName = response[0].fullname;
+			loggedUser.avatarUrl = _getAvatarUrl(response[0].info);
+			_updateRanking();
+		});
+	}
+
 	ranking.show = function() {
 		$(".sub-main-container").hide();
 		$("#ranking-container").show();
+
+		if (doneTasks > 0) {
+			$("#ranking-container [data-toggle='tooltip']").tooltip('show');
+		}
 	}
-	
-	ranking.setup = function(serverUrl) {
+
+	ranking.setup = function(serverUrl, endpoint, name, user) {
 		baseUrl = serverUrl;
-		loadHtmlHelper.load("#ranking-container", "/ranking/ranking.html");
+		pybossaEndpoint = endpoint;
+		projectName = name;
+		loggedUser.name = user;
+		loadHtmlHelper.load("#ranking-container", "/ranking/ranking.html",
+				_loadRankingData);
 	};
 }(window.ranking = window.ranking || {}, jQuery));
@@ -4,7 +4,6 @@
 	function _submitParameterJSON(parsedParameterJSON, callback) {
 		console.log(parsedParameterJSON);
-
 		$.ajax({
 			type : 'POST',
 			url : api_url + '/sign',
@@ -36,6 +36,7 @@
 	submitSign.show = function() {
 		$(".sub-main-container").hide();
 		$("#submit-sign-container").show();
+		$("#submit-sign-anchor").focus();
 	}
 	submitSign.setup = function(uploadSignHost) {
@@ -63,8 +64,8 @@
 					progressall : function(e, data) {
 						var progress = parseInt(data.loaded / data.total * 100,
 								10);
-						$("#upload-progress .progress-bar").css("width",
-								progress + "%");
+						$("#upload-progress .progress-bar").attr('aria-valuenow', progress).
+							css("width", progress + "%");
 					},
 					error : function(error) {
 						alert(error.responseText);
@@ -3,31 +3,8 @@
 	var totalTasks = 0;
 	var doneTasks = 0;
 	var userId = -1;
-	var pybossaUrl = '/pybossa/';
-	var projectname = 'wikilibras';
 	var projectId = -1;
-	function _getProjectId() {
-		return $.ajax({
-			url : pybossaUrl + 'api/project?short_name=' + projectname
-		});
-	}
-
-	function _getUserProgress() {
-		return $.ajax({
-			url : pybossaUrl + 'api/project/' + projectname + '/userprogress',
-			cache : false,
-			dataType : 'json'
-		});
-	}
-
-	function _getAnswers() {
-		return $.ajax({
-			url : pybossaUrl + 'api/taskrun?project_id=' + projectId
-					+ '&user_id=' + userId
-		});
-	}
-
 	function _updateTeachedSignsMessage() {
 		$(".teached-signs-msg").hide();
 		if (doneTasks == 0) {
@@ -66,30 +43,30 @@
 									.html(
 											"<video autoplay loop><source src='"
 													+ videoUrl
-													+ "' type='video/webm'>Sem suporte a videos</video>");
+													+ "' type='video/webm'>Sem suporte a vídeos</video>");
 							$('#teached-sign-name').html(signName);
 							$('#teached-sign-modal').modal('show');
 						});
 	}
 	function _updateTeachedSignsContainer() {
-		_getAnswers().done(function(answers) {
+		pybossaApiHelper.getAnswers(projectId, userId).done(function(answers) {
 			_createSigns(answers);
 		});
 	}
-	
+
 	teachedSigns.show = function() {
 		$(".sub-main-container").hide();
 		$("#teached-signs-container").show();
 	}
 	teachedSigns.setup = function() {
-		_getProjectId().done(function(response) {
+		pybossaApiHelper.getProjectId().done(function(response) {
 			if (typeof response == "undefined" || response.length < 1) {
 				return;
 			}
 			projectId = response[0].id;
-			_getUserProgress().done(function(response) {
+			pybossaApiHelper.getUserProgress().done(function(response) {
 				totalTasks = response.total;
 				doneTasks = response.done;
 				userId = response.user_id;
 (function(wikilibras, $, undefined) {
-	var videos_url = '';
-	var base_url = '';
-	var server_backend_url = '';
-	var api_url = '';
-	var upload_signs_url = '';
-	var current_task_id = -1;
+	var videosUrl = '';
+	var baseUrl = '';
+	var serverBackendUrl = '';
+	var apiUrl = '';
+	var uploadSignsUrl = '';
+	var currentTaskId = -1;
 	var tmpParameterJSON = {};
 	var parsedParameterJSON = {};
+	var pybossaEndpoint = '';
+	var projectName = '';
+	var isDemoTask = false;
 	function _setupTmpParameterJSON(sign_name) {
 		tmpParameterJSON = {
@@ -21,18 +24,18 @@
 	}
 	function _getLoggedUser() {
-		var pybossa_rembember_token = Cookies.get('remember_token');
-		var splitted_token_id = pybossa_rembember_token.split('|');
-		return splitted_token_id.length > 0 ? splitted_token_id[0]
+		var pybossaRememberToken = Cookies.get('remember_token');
+		var splittedTokenId = pybossaRememberToken.split('|');
+		return splittedTokenId.length > 0 ? splittedTokenId[0]
 				: 'anonymous';
 	}
 	function _loadTaskInfo(task) {
-		current_task_id = task.id;
-		var sign_name = task.info.sign_name;
-		var ref_vid_link = videos_url + sign_name + '_REF.webm';
-		$('.sign-label').text(sign_name);
-		$('.ref-video').attr('src', ref_vid_link);
+		currentTaskId = task.id;
+		var signName = task.info.sign_name;
+		var refVidLink = videosUrl + signName + '_REF.webm';
+		$('.sign-label').text(signName);
+		$('.ref-video').attr('src', refVidLink);
 		_setupTmpParameterJSON(task.info.sign_name);
 	}
@@ -43,7 +46,6 @@
 			tmpParameterJSON[mainConfig][subConfig] = [];
 			subConfigJSON = tmpParameterJSON[mainConfig][subConfig];
 		}
-
 		subConfigJSON[parseInt(step) - 1] = value;
 	}
@@ -63,7 +65,7 @@
 			videoHelper.pause("#initial-screen video");
 		}
 	}
-	
+
 	function _showApprovalScreen(toShow, parameterJSON) {
 		if (toShow) {
 			$("#render-button-container .btn").hide();
@@ -77,21 +79,23 @@
 	}
 	function _submitAnswer(task, deferred, status) {
-		var answer = _createAnswer(task, status);
-		if (status == "APPROVED") {
-			_finishTask(task, deferred, answer);
-		} else {
-			_saveAnswer(task, deferred, answer);
+		if (!isDemoTask) {
+			var answer = _createAnswer(task, status);
+			if (status == "APPROVED") {
+				_finishTask(task, deferred, answer);
+			} else {
+				_saveAnswer(task, deferred, answer);
+			}
 		}
 		renderSign.showRenderScreen(false);
 		$("#thanks-screen").show();
 	}
 	function _setupMainScreen(task, deferred) {
-		var last_answer = task.info.last_answer;
-		var hasLastAnswer = typeof last_answer != "undefined";
+		var lastAnswer = task.info.last_answer;
+		var hasLastAnswer = typeof lastAnswer != "undefined";
 		if (hasLastAnswer) {
-			_showApprovalScreen(true, last_answer.parameter_json);
+			_showApprovalScreen(true, lastAnswer.parameter_json);
 		} else {
 			_showApprovalScreen(false);
 			_showInitialScreen(true);
@@ -127,12 +131,12 @@
 	function _createAnswer(task, status) {
 		var answer = {}
 		answer["status"] = status;
-		var last_answer = task.info.last_answer;
-		var hasLastAnswer = typeof last_answer != "undefined";
+		var lastAnswer = task.info.last_answer;
+		var hasLastAnswer = typeof lastAnswer != "undefined";
 		if (hasLastAnswer && status == "APPROVED") {
-			answer["number_of_approval"] = last_answer.number_of_approval + 1;
-			answer["parameter_json"] = last_answer.parameter_json;
+			answer["number_of_approval"] = lastAnswer.number_of_approval + 1;
+			answer["parameter_json"] = lastAnswer.parameter_json;
 		} else {
 			answer["number_of_approval"] = 0;
 			answer["parameter_json"] = parsedParameterJSON;
@@ -141,13 +145,13 @@
 	}
 	function _finishTask(task, deferred, answer) {
-		var last_answer = task.info.last_answer;
-		var hasLastAnswer = typeof last_answer != "undefined";
-		var toSubmitUserId =  hasLastAnswer ?
-				last_answer.parameter_json["userId"] : _getLoggedUser();
+		var lastAnswer = task.info.last_answer;
+		var hasLastAnswer = typeof lastAnswer != "undefined";
+		var toSubmitUserId = hasLastAnswer ? lastAnswer.parameter_json["userId"]
+				: _getLoggedUser();
 		$.ajax({
 			type : "POST",
-			url : server_backend_url + "/finish_task",
+			url : serverBackendUrl + "/finish_task",
 			data : {
 				"task_id" : task.id,
 				"project_id" : task.project_id,
@@ -180,7 +184,7 @@
 		// It removes the PyBossa default message
 		$(".row .col-md-12 p").remove();
 	}
-	
+
 	function _setupLoginContainer() {
 		if ($("#login-container").html() === "") {
 			$("#login-container").html(
@@ -189,23 +193,36 @@
 	}
 	function _loadMainComponents() {
-		iconHelper.setup(base_url);
-		loadHtmlHelper.setup(base_url);
-		dynengine.setup(base_url);
-		dynworkflow.setup(base_url);
-		submitSign.setup(upload_signs_url);
+		pybossaApiHelper.setup(pybossaEndpoint, projectName);
+		iconHelper.setup(baseUrl);
+		loadHtmlHelper.setup(baseUrl);
+		dynengine.setup(baseUrl);
+		dynworkflow.setup(baseUrl);
+		submitSign.setup(uploadSignsUrl);
 		teachedSigns.setup();
-		renderSign.setup(api_url);
-		ranking.setup(base_url);
+		renderSign.setup(apiUrl);
+		ranking.setup(baseUrl, pybossaEndpoint, projectName,
+				_getLoggedUser());
 		_setupLoginContainer();
 	}
+	function _showDemoTask() {
+		isDemoTask = true;
+		var task = {'info':{'sign_name':'CALAR'}};
+		_startTask(task, function() {});
+	}
+
+	function _startTask(task, deferred) {
+		_loadTaskInfo(task);
+		_setupGUI(task, deferred);
+		$("#thanks-screen").hide();
+		$("#main-container").fadeIn(500);
+	}
+
 	pybossa.presentTask(function(task, deferred) {
 		_loadMainComponents();
-		if (!$.isEmptyObject(task) && current_task_id != task.id) {
-			_loadTaskInfo(task);
-			_setupGUI(task, deferred)
-			$("#main-container").fadeIn(500);
+		if (!$.isEmptyObject(task) && currentTaskId != task.id) {
+			_startTask(task, deferred);
 		} else {
 			_showCompletedAllTaskMsg();
 		}
@@ -213,19 +230,21 @@
 	// Private methods
 	function _run(projectname) {
-		pybossa.setEndpoint("/pybossa");
+		pybossa.setEndpoint(pybossaEndpoint);
 		pybossa.run(projectname);
 	}
 	// Public methods
-	wikilibras.run = function(serverhost, serverbackend, projectname, apihost,
+	wikilibras.run = function(serverhost, serverbackend, projname, apihost,
 			uploadsignshost) {
-		base_url = serverhost;
-		server_backend_url = serverbackend;
-		videos_url = base_url + "/videos/";
-		api_url = apihost;
-		upload_signs_url = uploadsignshost;
-		_run(projectname);
+		baseUrl = serverhost;
+		serverBackendUrl = serverbackend;
+		videosUrl = baseUrl + "/videos/";
+		apiUrl = apihost;
+		uploadSignsUrl = uploadsignshost;
+		pybossaEndpoint = '/pybossa';
+		projectName = projname;
+		_run(projectName);
 	};
 	wikilibras.updateTempParameterJSON = function(mainConfig, subConfig, step,
@@ -243,4 +262,8 @@
 		$("#tutorial-container").show();
 	}
+	wikilibras.showDemoTask = function() {
+		_showDemoTask();
+	}
+
 }(window.wikilibras = window.wikilibras || {}, jQuery));
 \ No newline at end of file
@@ -2,26 +2,30 @@
 	<div class="title">WikiRanking</div>
 	<div>Lorem Ipsum é apenas uma simulação de texto da indústria
 		tipográfica e de impressos, e vem sendo utilizado desde o século XVI.</div>
-	<div class="avatar-info">
-		<img src="{{ server }}/img/ranking/user-shape.png">
-		<div>Teste 11</div>
-	</div>
-	<div>
-		<div>
-			<strong>Nível</strong>: 5
+	<div class="avatar-info col-sm-12">
+		<div class="avatar-placeholder col-sm-6 col-sm-offset-3">
+			<img src="{{ server }}/img/ranking/user-shape.png">
 		</div>
-		<div>
-			<strong>Conquista</strong>:<span class="achievement-info"> construir
-				5 sinais em 24 horas.</span>
+		<div class="avatar-container col-sm-8 col-sm-offset-2">
+			<img src="">
 		</div>
-		<div>
-			<strong>Atributo</strong>: lorem ipsum
+		<div class="col-sm-12">
+			<div class="username"></div>
+			<div class="rank-position-container">
+				<strong><span class="rank-position"></span>º Posição</strong>
+			</div>
 		</div>
-		<div>
-			<strong>Atributo</strong>: lorem ipsum
+	</div>
+	<div class="achievements-container col-sm-12">
+		<div class="progress-container col-sm-12">
+			<div class="progress">
+				<div class="progress-bar" role="progressbar" aria-valuenow="0"
+					aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"
+					data-html="true"></div>
+			</div>
 		</div>
-		<div>
-			<strong>Atributo</strong>: lorem ipsum
+		<div class="progress-label">
+			<span><strong>Progresso:</strong></span>
 		</div>
 	</div>
 </div>
@@ -38,83 +42,6 @@
 			</tr>
 		</thead>
 		<tbody>
-			<tr>
-				<td><img src="{{ server }}/img/ranking/gold-star-icon.png"></td>
-				<td>1.</td>
-				<td><a href="/pybossa/account/adabriand/" target="_blank">Teste
-						1</a></td>
-				<td>6</td>
-			</tr>
-			<tr>
-				<td><img src="{{ server }}/img/ranking/silver-star-icon.png"></td>
-				<td>2.</td>
-				<td><a href="/pybossa/account/adabriand/" target="_blank">Teste
-						2</a></td>
-				<td>3</td>
-			</tr>
-			<tr>
-				<td><img src="{{ server }}/img/ranking/bronze-star-icon.png"></td>
-				<td>3.</td>
-				<td><a href="/pybossa/account/adabriand/" target="_blank">Teste
-						3</a></td>
-				<td>2</td>
-			</tr>
-			<tr>
-				<td></td>
-				<td>4.</td>
-				<td><a href="/pybossa/account/adabriand/" target="_blank">Teste
-						4</a></td>
-				<td>2</td>
-			</tr>
-			<tr>
-				<td></td>
-				<td>5.</td>
-				<td><a href="/pybossa/account/adabriand/" target="_blank">Teste
-						5</a></td>
-				<td>2</td>
-			</tr>
-			<tr>
-				<td></td>
-				<td>6.</td>
-				<td><a href="/pybossa/account/adabriand/" target="_blank">Teste
-						6</a></td>
-				<td>2</td>
-			</tr>
-			<tr>
-				<td></td>
-				<td>7.</td>
-				<td><a href="/pybossa/account/adabriand/" target="_blank">Teste
-						7</a></td>
-				<td>2</td>
-			</tr>
-			<tr>
-				<td></td>
-				<td>8.</td>
-				<td><a href="/pybossa/account/adabriand/" target="_blank">Teste
-						8</a></td>
-				<td>2</td>
-			</tr>
-			<tr>
-				<td></td>
-				<td>9.</td>
-				<td><a href="/pybossa/account/adabriand/" target="_blank">Teste
-						9</a></td>
-				<td>2</td>
-			</tr>
-			<tr>
-				<td></td>
-				<td>10.</td>
-				<td><a href="/pybossa/account/adabriand/" target="_blank">Teste
-						10</a></td>
-				<td>2</td>
-			</tr>
-			<tr class="highlight">
-				<td></td>
-				<td>25.</td>
-				<td><a href="/pybossa/account/adabriand/" target="_blank">Teste
-						11</a></td>
-				<td>2</td>
-			</tr>
 		</tbody>
 	</table>
 </div>
 \ No newline at end of file
@@ -16,20 +16,17 @@
 			</button>
 		</div>
 		<!-- Collect the nav links, forms, and other content for toggling -->
-		<div class="collapse navbar-collapse"
-			id="navbar-collapse-1">
+		<div class="collapse navbar-collapse" id="navbar-collapse-1">
 			<ul class="nav navbar-nav navbar-right">
 				<li><a href="javascript:void(0);"
 					onclick="wikilibras.showTeachContainer()">Ensinar</a></li>
-				<li><a href="javascript:void(0);"
+				<li><a id="submit-sign-anchor" href="javascript:void(0);"
 					onclick="submitSign.show()">Enviar sinal</a></li>
-				<li><a href="javascript:void(0);"
-					onclick="teachedSigns.show()">Sinais
+				<li><a href="javascript:void(0);" onclick="teachedSigns.show()">Sinais
 						ensinados</a></li>
 				<li><a href="javascript:void(0);"
 					onclick="wikilibras.showTutorialContainer()">Tutorial</a></li>
-				<li><a href="javascript:void(0);"
-					onclick="ranking.show()">Ranking</a></li>
+				<li><a href="javascript:void(0);" onclick="ranking.show()">Ranking</a></li>
 				<li id="login-container"></li>
 			</ul>
 		</div>
@@ -130,8 +127,8 @@
 							<img src="{{ server }}/img/avatar-right-hand-icon.png"></img>
 						</div>
 						<div id="avatar-body-left-hand"
-							class="icon_container config-menu-option"
-							name="avatar-left-hand" panel="left-hand">
+							class="icon_container config-menu-option" name="avatar-left-hand"
+							panel="left-hand">
 							<img src="{{ server }}/img/avatar-left-hand-icon.png"></img>
 						</div>
 						<img class="avatar-img-zoom-out" src="{{ server }}/img/avatar.png"></img>
@@ -201,15 +198,24 @@
 			</div>
 		</div>
 		<div id="thanks-screen">
-			<div class="col-sm-6 col-centered">
+			<div class="col-sm-7 col-centered">
 				<div id="completed-task-msg">
 					<h3 class="text-center">Obrigado,</h3>
 					<h6 class="text-center">você configurou o sinal com sucesso!</h6>
 				</div>
-				<div id="completed-all-task-msg">
-					<h3 class="text-center">Parabéns,</h3>
-					<h6 class="text-center">você configurou todos os sinais
-						disponíveis!</h6>
+				<div id="completed-all-task-msg" class="text-center">
+					<h4>
+						Que pena, não há disponíveis sinais no momento!
+						</h6>
+						<h6>
+							Ajude a expandir o dicionário <a href="javascript:void(0);"
+								onclick="submitSign.show()">enviando um novo sinal</a>, ou
+						</h6>
+						<h6>
+							experimente <a href="javascript:void(0);"
+								onclick="wikilibras.showDemoTask()">uma tarefa de
+								demonstração.</a>
+						</h6>
 				</div>
 				<div class="col-sm-11 col-centered">
 					<img src="{{ server }}/img/avatar-thanks.png"></img>
@@ -350,6 +356,7 @@
 <script src="{{ server }}/assets/js/selection-panel/selection-panel.js"></script>
 <!-- Helpers -->
+<script src="{{ server }}/assets/js/helpers/pybossa-api-helper.js"></script>
 <script src="{{ server }}/assets/js/helpers/load-html-helper.js"></script>
 <script src="{{ server }}/assets/js/helpers/video-helper.js"></script>
 <script src="{{ server }}/assets/js/helpers/icon-helper.js"></script>
@@ -0,0 +1,44 @@		@@ -0,0 +1,44 @@
	1	+(function(pybossaApiHelper, $, undefined) {
	2	+
	3	+ var pybossaEndpoint = '';
	4	+ var projectName = '';
	5	+
	6	+ function _getProjectId() {
	7	+ return $.ajax({
	8	+ url : pybossaEndpoint + '/api/project?short_name=' + projectName
	9	+ });
	10	+ }
	11	+
	12	+ function _getUserProgress() {
	13	+ return $.ajax({
	14	+ url : pybossaEndpoint + '/api/project/' + projectName + '/userprogress',
	15	+ cache : false,
	16	+ dataType : 'json'
	17	+ });
	18	+ }
	19	+
	20	+ function _getAnswers(projectId, userId) {
	21	+ return $.ajax({
	22	+ url : pybossaEndpoint + '/api/taskrun?project_id=' + projectId
	23	+ + '&user_id=' + userId
	24	+ });
	25	+ }
	26	+
	27	+ pybossaApiHelper.setup = function(endpoint, name) {
	28	+ pybossaEndpoint = endpoint;
	29	+ projectName = name;
	30	+ }
	31	+
	32	+ pybossaApiHelper.getProjectId = function() {
	33	+ return _getProjectId();
	34	+ }
	35	+
	36	+ pybossaApiHelper.getUserProgress = function() {
	37	+ return _getUserProgress();
	38	+ }
	39	+
	40	+ pybossaApiHelper.getAnswers = function(projectId, userId) {
	41	+ return _getAnswers(projectId, userId);
	42	+ }
	43	+
	44	+}(window.pybossaApiHelper = window.pybossaApiHelper \|\| {}, jQuery));
1	(function(ranking, $, undefined) {	1	(function(ranking, $, undefined) {
2		2
		3	+ var NUMBER_OF_TOP_USERS = 10;
		4	+ var STARS_MAP = [ '', 'gold', 'silver', 'bronze' ];
3	var baseUrl = '';	5	var baseUrl = '';
4	-	6	+ var pybossaEndpoint = '';
		7	+ var projectName = '';
		8	+ var loggedUser = {};
		9	+ var totalTasks = 0;
		10	+ var doneTasks = 0;
		11	+
		12	+ function _getRankingData(callback) {
		13	+ $.ajax({
		14	+ url : pybossaEndpoint + '/api/leaderboard?limit='
		15	+ + NUMBER_OF_TOP_USERS,
		16	+ success : function(response) {
		17	+ callback(typeof response == "object" ? response[projectName]
		18	+ : '');
		19	+ },
		20	+ error : function(xhr, textStatus, error) {
		21	+ alert(xhr.responseText);
		22	+ }
		23	+ });
		24	+ }
		25	+
		26	+ function _processRankingRow(rowData) {
		27	+ var rank = rowData.rank;
		28	+ if (rank < 0) {
		29	+ return '';
		30	+ }
		31	+ var starHTML = '';
		32	+ if (rank > 0 && rank < 4) {
		33	+ starHTML = '<img src="' + baseUrl + '/img/ranking/'
		34	+ + STARS_MAP[rank] + '-star-icon.png">';
		35	+ }
		36	+ var trHTML = '<tr>';
		37	+ if (rowData.name === loggedUser.name) {
		38	+ trHTML = '<tr class="warning">';
		39	+ loggedUser.rank = rowData.rank;
		40	+ }
		41	+ rank = rank == 0 ? "-" : rank + '.';
		42	+ return trHTML + '<td>' + starHTML + '</td><td>' + rank
		43	+ + '</td><td><a href="/pybossa/account/' + rowData.name
		44	+ + '/" target="_blank">' + rowData.fullname + '</a></td><td>'
		45	+ + rowData.score + '</td></tr>';
		46	+ }
		47	+
		48	+ function _updateRanking() {
		49	+ _getRankingData(function(data) {
		50	+ if (data === '')
		51	+ return;
		52	+
		53	+ var rowsHTML = '';
		54	+ for (var i = 0; i < data.length; i++) {
		55	+ rowsHTML += _processRankingRow(data[i]);
		56	+ }
		57	+ $("#leaderboard-container tbody").html(rowsHTML);
		58	+ $("#ranking-info-container .rank-position").html(loggedUser.rank);
		59	+ $("#ranking-info-container .username").html(loggedUser.fullName);
		60	+ if (loggedUser.avatarUrl != '') {
		61	+ $("#ranking-info-container .avatar-container img").attr("src",
		62	+ loggedUser.avatarUrl);
		63	+ $("#ranking-info-container .avatar-placeholder").hide();
		64	+ $("#ranking-info-container .avatar-container").show();
		65	+ }
		66	+ if (loggedUser.rank === 0) {
		67	+ $("#ranking-info-container .rank-position-container").hide();
		68	+ }
		69	+ _updateProgress();
		70	+ });
		71	+ }
		72	+
		73	+ function _getUserData() {
		74	+ return $.ajax({
		75	+ url : pybossaEndpoint + '/api/user?name=' + loggedUser.name
		76	+ });
		77	+ }
		78	+
		79	+ function _getAvatarUrl(data) {
		80	+ return typeof data.avatar != "undefined" ? pybossaEndpoint
		81	+ + '/uploads/' + data.container + '/' + data.avatar : '';
		82	+ }
		83	+
		84	+ function _updateProgress() {
		85	+ pybossaApiHelper
		86	+ .getUserProgress()
		87	+ .done(
		88	+ function(response) {
		89	+ totalTasks = response.total;
		90	+ doneTasks = response.done;
		91	+ var percentage = (doneTasks / totalTasks) * 100;
		92	+ $("#ranking-info-container .progress-bar").attr(
		93	+ 'aria-valuenow', percentage).css("width",
		94	+ percentage + '%');
		95	+ $("#ranking-container [data-toggle='tooltip']")
		96	+ .tooltip(
		97	+ {
		98	+ title : '<strong><span class="done-tasks">'
		99	+ + doneTasks
		100	+ + '</span> / <span class="total-tasks">'
		101	+ + totalTasks
		102	+ + '</span> sinais ensinados.</strong>',
		103	+ placement : "bottom",
		104	+ trigger : "manual"
		105	+ });
		106	+ });
		107	+ }
		108	+
		109	+ function _loadRankingData() {
		110	+ _getUserData().done(function(response) {
		111	+ if (typeof response == "undefined" \|\| response.length < 1) {
		112	+ return;
		113	+ }
		114	+ loggedUser.fullName = response[0].fullname;
		115	+ loggedUser.avatarUrl = _getAvatarUrl(response[0].info);
		116	+ _updateRanking();
		117	+ });
		118	+ }
		119	+
5	ranking.show = function() {	120	ranking.show = function() {
6	$(".sub-main-container").hide();	121	$(".sub-main-container").hide();
7	$("#ranking-container").show();	122	$("#ranking-container").show();
		123	+
		124	+ if (doneTasks > 0) {
		125	+ $("#ranking-container [data-toggle='tooltip']").tooltip('show');
		126	+ }
8	}	127	}
9	-
10	- ranking.setup = function(serverUrl) {	128	+
		129	+ ranking.setup = function(serverUrl, endpoint, name, user) {
11	baseUrl = serverUrl;	130	baseUrl = serverUrl;
12	- loadHtmlHelper.load("#ranking-container", "/ranking/ranking.html");	131	+ pybossaEndpoint = endpoint;
		132	+ projectName = name;
		133	+ loggedUser.name = user;
		134	+ loadHtmlHelper.load("#ranking-container", "/ranking/ranking.html",
		135	+ _loadRankingData);
13	};	136	};
14		137
15	}(window.ranking = window.ranking \|\| {}, jQuery));	138	}(window.ranking = window.ranking \|\| {}, jQuery));
	@@ -4,7 +4,6 @@		@@ -4,7 +4,6 @@
4		4
5	function _submitParameterJSON(parsedParameterJSON, callback) {	5	function _submitParameterJSON(parsedParameterJSON, callback) {
6	console.log(parsedParameterJSON);	6	console.log(parsedParameterJSON);
7	-
8	$.ajax({	7	$.ajax({
9	type : 'POST',	8	type : 'POST',
10	url : api_url + '/sign',	9	url : api_url + '/sign',
	@@ -2,26 +2,30 @@		@@ -2,26 +2,30 @@
2	<div class="title">WikiRanking</div>	2	<div class="title">WikiRanking</div>
3	<div>Lorem Ipsum é apenas uma simulação de texto da indústria	3	<div>Lorem Ipsum é apenas uma simulação de texto da indústria
4	tipográfica e de impressos, e vem sendo utilizado desde o século XVI.</div>	4	tipográfica e de impressos, e vem sendo utilizado desde o século XVI.</div>
5	- <div class="avatar-info">
6	- <img src="{{ server }}/img/ranking/user-shape.png">
7	- <div>Teste 11</div>
8	- </div>
9	- <div>
10	- <div>
11	- <strong>Nível</strong>: 5	5	+ <div class="avatar-info col-sm-12">
		6	+ <div class="avatar-placeholder col-sm-6 col-sm-offset-3">
		7	+ <img src="{{ server }}/img/ranking/user-shape.png">
12	</div>	8	</div>
13	- <div>
14	- <strong>Conquista</strong>:<span class="achievement-info"> construir
15	- 5 sinais em 24 horas.</span>	9	+ <div class="avatar-container col-sm-8 col-sm-offset-2">
		10	+ <img src="">
16	</div>	11	</div>
17	- <div>
18	- <strong>Atributo</strong>: lorem ipsum	12	+ <div class="col-sm-12">
		13	+ <div class="username"></div>
		14	+ <div class="rank-position-container">
		15	+ <strong><span class="rank-position"></span>º Posição</strong>
		16	+ </div>
19	</div>	17	</div>
20	- <div>
21	- <strong>Atributo</strong>: lorem ipsum	18	+ </div>
		19	+ <div class="achievements-container col-sm-12">
		20	+ <div class="progress-container col-sm-12">
		21	+ <div class="progress">
		22	+ <div class="progress-bar" role="progressbar" aria-valuenow="0"
		23	+ aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"
		24	+ data-html="true"></div>
		25	+ </div>
22	</div>	26	</div>
23	- <div>
24	- <strong>Atributo</strong>: lorem ipsum	27	+ <div class="progress-label">
		28	+ <span><strong>Progresso:</strong></span>
25	</div>	29	</div>
26	</div>	30	</div>
27	</div>	31	</div>
	@@ -38,83 +42,6 @@		@@ -38,83 +42,6 @@
38	</tr>	42	</tr>
39	</thead>	43	</thead>
40	<tbody>	44	<tbody>
41	- <tr>
42	- <td><img src="{{ server }}/img/ranking/gold-star-icon.png"></td>
43	- <td>1.</td>
44	- <td><a href="/pybossa/account/adabriand/" target="_blank">Teste
45	- 1</a></td>
46	- <td>6</td>
47	- </tr>
48	- <tr>
49	- <td><img src="{{ server }}/img/ranking/silver-star-icon.png"></td>
50	- <td>2.</td>
51	- <td><a href="/pybossa/account/adabriand/" target="_blank">Teste
52	- 2</a></td>
53	- <td>3</td>
54	- </tr>
55	- <tr>
56	- <td><img src="{{ server }}/img/ranking/bronze-star-icon.png"></td>
57	- <td>3.</td>
58	- <td><a href="/pybossa/account/adabriand/" target="_blank">Teste
59	- 3</a></td>
60	- <td>2</td>
61	- </tr>
62	- <tr>
63	- <td></td>
64	- <td>4.</td>
65	- <td><a href="/pybossa/account/adabriand/" target="_blank">Teste
66	- 4</a></td>
67	- <td>2</td>
68	- </tr>
69	- <tr>
70	- <td></td>
71	- <td>5.</td>
72	- <td><a href="/pybossa/account/adabriand/" target="_blank">Teste
73	- 5</a></td>
74	- <td>2</td>
75	- </tr>
76	- <tr>
77	- <td></td>
78	- <td>6.</td>
79	- <td><a href="/pybossa/account/adabriand/" target="_blank">Teste
80	- 6</a></td>
81	- <td>2</td>
82	- </tr>
83	- <tr>
84	- <td></td>
85	- <td>7.</td>
86	- <td><a href="/pybossa/account/adabriand/" target="_blank">Teste
87	- 7</a></td>
88	- <td>2</td>
89	- </tr>
90	- <tr>
91	- <td></td>
92	- <td>8.</td>
93	- <td><a href="/pybossa/account/adabriand/" target="_blank">Teste
94	- 8</a></td>
95	- <td>2</td>
96	- </tr>
97	- <tr>
98	- <td></td>
99	- <td>9.</td>
100	- <td><a href="/pybossa/account/adabriand/" target="_blank">Teste
101	- 9</a></td>
102	- <td>2</td>
103	- </tr>
104	- <tr>
105	- <td></td>
106	- <td>10.</td>
107	- <td><a href="/pybossa/account/adabriand/" target="_blank">Teste
108	- 10</a></td>
109	- <td>2</td>
110	- </tr>
111	- <tr class="highlight">
112	- <td></td>
113	- <td>25.</td>
114	- <td><a href="/pybossa/account/adabriand/" target="_blank">Teste
115	- 11</a></td>
116	- <td>2</td>
117	- </tr>
118	</tbody>	45	</tbody>
119	</table>	46	</table>
120	</div>	47	</div>
121	\ No newline at end of file	48	\ No newline at end of file