From e7b8781f92d1055445b8260405f92a6108bb686a Mon Sep 17 00:00:00 2001 From: Or Ronai Date: Sun, 4 Oct 2020 16:03:41 +0300 Subject: [PATCH 1/3] feat: Colorize students comments - The last comment is the comment which going to mark the line - If someomne deletes a comment - the line color will be updated accordingly --- lms/lmsdb/models.py | 1 + lms/static/comments.js | 17 ++++++++++++----- lms/static/grader.js | 5 ++++- 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/lms/lmsdb/models.py b/lms/lmsdb/models.py index df87b034..e338b6cf 100644 --- a/lms/lmsdb/models.py +++ b/lms/lmsdb/models.py @@ -770,6 +770,7 @@ def _by_file(cls, file_id: int): .switch() .join(User) .where(cls.file == file_id) + .order_by(cls.timestamp.asc()) ) @classmethod diff --git a/lms/static/comments.js b/lms/static/comments.js index 170f1887..0375fed8 100644 --- a/lms/static/comments.js +++ b/lms/static/comments.js @@ -1,10 +1,11 @@ const DEFAULT_COMMENTED_LINE_COLOR = '#fab3b0'; +const STUDENT_COMMENTED_LINE_COLOR = '#a9f6f9'; const FLAKE_COMMENTED_LINE_COLOR = '#fac4c3'; const HOVER_LINE_STYLE = '1px solid #0d0d0f'; -function markLine(target, color) { - if (target.dataset && target.dataset.marked === 'true') { return; } - if (target.dataset && target.dataset.vimbackground === 'true') { return; } +function markLine(target, color, deletion = false) { + if (target.dataset && target.dataset.marked === 'true' && !deletion) { return; } + if (target.dataset && target.dataset.vimbackground === 'true' && ! deletion) { return; } target.style.background = color; } @@ -45,7 +46,7 @@ function formatCommentData(commentData) { function addCommentToLine(line, commentData) { const commentElement = document.querySelector(`.line[data-line="${line}"]`); const formattedComment = formatCommentData(commentData); - const commentText = `${formattedComment}`; + const commentText = `${formattedComment}`; let existingPopover = bootstrap.Popover.getInstance(commentElement); if (existingPopover !== null) { const existingContent = `${existingPopover.config.content}
`; @@ -65,13 +66,18 @@ function addCommentToLine(line, commentData) { if (commentData.is_auto) { markLine(commentElement, FLAKE_COMMENTED_LINE_COLOR); } else { - markLine(commentElement, DEFAULT_COMMENTED_LINE_COLOR); + const lineColor = getLineColorByRole(commentData.author_role); + markLine(commentElement, lineColor, true); commentElement.dataset.marked = true; } return existingPopover; } +function getLineColorByRole(authorRole) { + return authorRole === 1 ? STUDENT_COMMENTED_LINE_COLOR : DEFAULT_COMMENTED_LINE_COLOR; +} + function treatComments(comments) { if (comments === undefined) { console.error('Probably bad xhr request'); @@ -143,6 +149,7 @@ window.markLink = markLine; window.hoverLine = hoverLine; window.addCommentToLine = addCommentToLine; window.isUserGrader = isUserGrader; +window.getLineColorByRole = getLineColorByRole; window.addEventListener('load', () => { const codeElement = document.getElementById('code-view').dataset; window.solutionId = codeElement.id; diff --git a/lms/static/grader.js b/lms/static/grader.js index 2efaa9d7..a82b809c 100644 --- a/lms/static/grader.js +++ b/lms/static/grader.js @@ -67,8 +67,11 @@ function visuallyRemoveComment(commentId) { removeContent = `${commentElement.outerHTML}
`; } existingPopover.config.content = existingPopover.config.content.replace(removeContent, ''); + const commentParent = commentElement.parentNode; hr.parentNode.removeChild(hr); - commentElement.parentNode.removeChild(commentElement); + commentParent.removeChild(commentElement); + newLineColor = window.getLineColorByRole(commentParent.lastChild.previousElementSibling.dataset.authorRole); + window.markLine(lineElement, newLineColor, true); } } From 158e4fe8bc72f924eab31fddeac58483b4f57a78 Mon Sep 17 00:00:00 2001 From: Or Ronai Date: Sun, 4 Oct 2020 16:14:45 +0300 Subject: [PATCH 2/3] Fixed variable decleration --- lms/static/grader.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lms/static/grader.js b/lms/static/grader.js index a82b809c..1b81d9b3 100644 --- a/lms/static/grader.js +++ b/lms/static/grader.js @@ -70,7 +70,7 @@ function visuallyRemoveComment(commentId) { const commentParent = commentElement.parentNode; hr.parentNode.removeChild(hr); commentParent.removeChild(commentElement); - newLineColor = window.getLineColorByRole(commentParent.lastChild.previousElementSibling.dataset.authorRole); + const newLineColor = window.getLineColorByRole(commentParent.lastChild.previousElementSibling.dataset.authorRole); window.markLine(lineElement, newLineColor, true); } } From dddb10fd9c48310312d96aaa4a3b04dc5f9dad7d Mon Sep 17 00:00:00 2001 From: Or Ronai Date: Sun, 4 Oct 2020 18:16:15 +0300 Subject: [PATCH 3/3] Fixed linting --- lms/static/comments.js | 4 ++-- lms/static/grader.js | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/lms/static/comments.js b/lms/static/comments.js index 0375fed8..13be4dc1 100644 --- a/lms/static/comments.js +++ b/lms/static/comments.js @@ -5,7 +5,7 @@ const HOVER_LINE_STYLE = '1px solid #0d0d0f'; function markLine(target, color, deletion = false) { if (target.dataset && target.dataset.marked === 'true' && !deletion) { return; } - if (target.dataset && target.dataset.vimbackground === 'true' && ! deletion) { return; } + if (target.dataset && target.dataset.vimbackground === 'true' && !deletion) { return; } target.style.background = color; } @@ -66,7 +66,7 @@ function addCommentToLine(line, commentData) { if (commentData.is_auto) { markLine(commentElement, FLAKE_COMMENTED_LINE_COLOR); } else { - const lineColor = getLineColorByRole(commentData.author_role); + const lineColor = window.getLineColorByRole(commentData.author_role); markLine(commentElement, lineColor, true); commentElement.dataset.marked = true; } diff --git a/lms/static/grader.js b/lms/static/grader.js index 1b81d9b3..b6421ea7 100644 --- a/lms/static/grader.js +++ b/lms/static/grader.js @@ -70,7 +70,8 @@ function visuallyRemoveComment(commentId) { const commentParent = commentElement.parentNode; hr.parentNode.removeChild(hr); commentParent.removeChild(commentElement); - const newLineColor = window.getLineColorByRole(commentParent.lastChild.previousElementSibling.dataset.authorRole); + const lastAuthorRole = commentParent.lastChild.previousElementSibling.dataset.authorRole; + const newLineColor = window.getLineColorByRole(lastAuthorRole); window.markLine(lineElement, newLineColor, true); } }