diff --git a/view/assets/css/main.css b/view/assets/css/main.css index f436cb5..170fc0d 100644 --- a/view/assets/css/main.css +++ b/view/assets/css/main.css @@ -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; +} diff --git a/view/assets/css/ranking.css b/view/assets/css/ranking.css index a2c4b1e..7029c16 100644 --- a/view/assets/css/ranking.css +++ b/view/assets/css/ranking.css @@ -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 diff --git a/view/assets/js/helpers/pybossa-api-helper.js b/view/assets/js/helpers/pybossa-api-helper.js new file mode 100644 index 0000000..8a79e28 --- /dev/null +++ b/view/assets/js/helpers/pybossa-api-helper.js @@ -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)); diff --git a/view/assets/js/ranking.js b/view/assets/js/ranking.js index 5a1e774..8eb494a 100644 --- a/view/assets/js/ranking.js +++ b/view/assets/js/ranking.js @@ -1,15 +1,138 @@ (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 = ''; + } + var trHTML = ''; + if (rowData.name === loggedUser.name) { + trHTML = ''; + loggedUser.rank = rowData.rank; + } + rank = rank == 0 ? "-" : rank + '.'; + return trHTML + '' + starHTML + '' + rank + + '' + rowData.fullname + '' + + rowData.score + ''; + } + + 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 : '' + + doneTasks + + ' / ' + + totalTasks + + ' sinais ensinados.', + 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)); diff --git a/view/assets/js/render-sign.js b/view/assets/js/render-sign.js index be2e7a1..7ffa0c0 100644 --- a/view/assets/js/render-sign.js +++ b/view/assets/js/render-sign.js @@ -4,7 +4,6 @@ function _submitParameterJSON(parsedParameterJSON, callback) { console.log(parsedParameterJSON); - $.ajax({ type : 'POST', url : api_url + '/sign', diff --git a/view/assets/js/submit-sign.js b/view/assets/js/submit-sign.js index c8b200c..22d5933 100644 --- a/view/assets/js/submit-sign.js +++ b/view/assets/js/submit-sign.js @@ -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); diff --git a/view/assets/js/teached-signs.js b/view/assets/js/teached-signs.js index 25086ee..af3e546 100644 --- a/view/assets/js/teached-signs.js +++ b/view/assets/js/teached-signs.js @@ -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( ""); + + "' type='video/webm'>Sem suporte a vídeos"); $('#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; diff --git a/view/assets/js/wikilibras.js b/view/assets/js/wikilibras.js index 2bfc3a9..fbef87a 100644 --- a/view/assets/js/wikilibras.js +++ b/view/assets/js/wikilibras.js @@ -1,13 +1,16 @@ (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 diff --git a/view/ranking/ranking.html b/view/ranking/ranking.html index 784c9ac..374e8d4 100644 --- a/view/ranking/ranking.html +++ b/view/ranking/ranking.html @@ -2,26 +2,30 @@
WikiRanking
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.
-
- -
Teste 11
-
-
-
- Nível: 5 +
+
+
-
- Conquista: construir - 5 sinais em 24 horas. +
+
-
- Atributo: lorem ipsum +
+
+
+ º Posição +
-
- Atributo: lorem ipsum +
+
+
+
+
+
-
- Atributo: lorem ipsum +
+ Progresso:
@@ -38,83 +42,6 @@ - - - 1. - Teste - 1 - 6 - - - - 2. - Teste - 2 - 3 - - - - 3. - Teste - 3 - 2 - - - - 4. - Teste - 4 - 2 - - - - 5. - Teste - 5 - 2 - - - - 6. - Teste - 6 - 2 - - - - 7. - Teste - 7 - 2 - - - - 8. - Teste - 8 - 2 - - - - 9. - Teste - 9 - 2 - - - - 10. - Teste - 10 - 2 - - - - 25. - Teste - 11 - 2 -
\ No newline at end of file diff --git a/view/template.html b/view/template.html index 3571d89..8157de8 100755 --- a/view/template.html +++ b/view/template.html @@ -16,20 +16,17 @@
-
+ class="icon_container config-menu-option" name="avatar-left-hand" + panel="left-hand">
@@ -201,15 +198,24 @@
-
+

Obrigado,

você configurou o sinal com sucesso!
-
-

Parabéns,

-
você configurou todos os sinais - disponíveis!
+
+

+ Que pena, não há disponíveis sinais no momento! +

+
+ Ajude a expandir o dicionário enviando um novo sinal, ou +
+
+ experimente uma tarefa de + demonstração. +
@@ -350,6 +356,7 @@ + -- libgit2 0.21.2