From 370b29ddf1e184b550150ceaf6043ab9f2cb1de4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sven=20K=C3=A4stle?= <sven.kaestle@gmx.de> Date: Fri, 7 Sep 2018 15:45:27 +0200 Subject: [PATCH] feat: Load full submission and submission category parts on page load * also a new function called 'getValueFromUrl' --- .../webapp/assets/css/annotationStyle.css | 6 ++ .../main/webapp/assets/js/annotationScript.js | 93 +++++++++++++++++-- .../main/webapp/assets/js/project-student.js | 19 ++-- .../assets/js/unstructuredAnnotation.js | 4 +- .../webapp/assets/js/unstructuredUpload.js | 4 +- .../src/main/webapp/assets/js/utility.js | 5 +- .../main/webapp/pages/annotation-document.jsp | 7 +- 7 files changed, 112 insertions(+), 26 deletions(-) diff --git a/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css b/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css index 0dbf610d..5ffeb66e 100644 --- a/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css +++ b/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css @@ -150,8 +150,14 @@ ol { } .leftcontent-text { overflow: scroll; + white-space: pre-line; + color: lightgrey; } .resize-vertical { resize: vertical; } +.categoryText { + color: black; + font-weight: bold; +} diff --git a/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js b/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js index f2b891a1..8a5e0c99 100644 --- a/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js +++ b/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js @@ -6,23 +6,50 @@ var targetId = 200; var targetCategory = "TITEL"; // declare document text, start and end character -var documentText, startCharacter, endCharacter; +var startCharacter, endCharacter; /** * This function will fire when the DOM is ready */ $(document).ready(function() { + let fullSubmissionId = getValueFromUrl("fullSubmissionId"); + let category = getValueFromUrl("category"); - // connect to websocket on page ready - connect(targetId); + getFullSubmission(getValueFromUrl("fullSubmissionId"), function (response) { + + // set text + $('#documentText').html(response.text); + + // fetch submission parts + getSubmissionPart(fullSubmissionId, category, function (response) { + + let body = response.body; + // save body + $('#documentText').data("body", body); + let offset = 0; + for (let i = 0; i < body.length; i++) { + addHighlightedTextWithOffset(body[i].startCharacter, body[i].endCharacter, offset); + // add char count of '<span class="categoryText"></span>' + offset += 34; + } + + // scroll document text to first span element + let documentText = $('#documentText'); + let span = $('#documentText span').first(); + documentText.scrollTo(span); + + + }, function () { + // error + }) - // receive text - getSubmissionPart("2f216683-5f13-4b5f-8a26-4ffa0566eca1", targetCategory, function (response) { - // todo success }, function () { - // todo error + // error }); + // connect to websocket on page ready + connect(targetId); + /** * Context menu handler */ @@ -209,8 +236,6 @@ $(document).ready(function() { $('#annotation-edit-form-comment').val('') }); - documentText = $('#documentText').html(); - // fetch annotations from server on page start getAnnotations(targetId, targetCategory, function (response) { // iterate over annotations and display each @@ -366,6 +391,8 @@ function displayAnnotation(annotation) { * @param userToken The user token */ function addHighlightedText(startCharacter, endCharacter, userToken) { + // initialize variables + let documentText = $('#documentText').text(); // create <span> tag with the annotated text var replacement = $('<span></span>').attr('id', 'anchor').css('background-color', getUserColor(userToken)).html(documentText.slice(startCharacter, endCharacter)); @@ -379,10 +406,58 @@ function addHighlightedText(startCharacter, endCharacter, userToken) { $('#documentText').html(newDocument); } +/** + * Add a highlighted text at specific position + * + * @param startCharacter The offset of the start character + * @param endCharacter The offset of the end character + * @param offset The calculated extra offset depending on already highlighted text + */ +function addHighlightedTextWithOffset(startCharacter, endCharacter, offset) { + + var documentText = $('#documentText').text(); + var documentHtml = $('#documentText').html(); + + // create <span> tag with the annotated text + var replacement = $('<span></span>').attr('class', 'categoryText').html(documentText.slice(startCharacter, endCharacter)); + + // wrap an <p> tag around the replacement, get its parent (the <p>) and ask for the html + var replacementHtml = replacement.wrap('<p/>').parent().html(); + + // insert the replacementHtml + var newDocument = documentHtml.slice(0, startCharacter + offset) + replacementHtml + documentHtml.slice(endCharacter + offset); + + // set new document text + $('#documentText').html(newDocument); +} + +/** + * Iterate over all data arrays and calculate the offset for a given start character + * + * @param startCharacter The given start character + * @returns {number} The offset + */ +function calculateExtraOffset(startCharacter) { + let extraOffset = 0; + $('#annotations').find('.category-card').each(function () { + let array = $(this).data('array'); + if (array != null) { + for (let i = 0; i < array.length; i++) { + if (array[i].end <= startCharacter) { + extraOffset += 22 + $(this).attr('id').length; + } + } + } + }); + return extraOffset; +} + /** * Restore the base text */ function deleteHighlightedText() { + // initialize variables + let documentText = $('#documentText').text(); $('#documentText').html(documentText); } diff --git a/gemeinsamforschen/src/main/webapp/assets/js/project-student.js b/gemeinsamforschen/src/main/webapp/assets/js/project-student.js index 59d86b77..52d70fce 100644 --- a/gemeinsamforschen/src/main/webapp/assets/js/project-student.js +++ b/gemeinsamforschen/src/main/webapp/assets/js/project-student.js @@ -1,6 +1,6 @@ $(document).ready(function(){ // fetch all submission part project representations from database - getSubmissionPartsByProjectId(getProjectIdFromUrl(), function (response) { + getSubmissionPartsByProjectId(getValueFromUrl("projectId"), function (response) { // iterate over response and display each element for (let i = 0; i < response.length; i++) { @@ -9,7 +9,12 @@ $(document).ready(function(){ // add click listener to feedback buttons $('.annotationview').click(function () { - location.href="annotation-document.jsp?token="+getUserTokenFromUrl(); + let fullSubmissionId = $(this).closest("li").data("fullSubmissionId"); + let category = $(this).closest("li").data("category"); + location.href="annotation-document.jsp?token=" + getUserTokenFromUrl() + + "&projectId=" + getValueFromUrl("projectId") + + "&fullSubmissionId=" + fullSubmissionId + + "&category=" + category; }); }, function () { @@ -32,7 +37,7 @@ $(document).ready(function(){ }); $('#btnUnstructuredUpload').click(function () { - location.href="unstructured-upload.jsp?token="+getUserTokenFromUrl() + "&projectId=" + getProjectIdFromUrl(); + location.href="unstructured-upload.jsp?token="+getUserTokenFromUrl() + "&projectId=" + getValueFromUrl("projectId"); }) }); @@ -54,9 +59,11 @@ function displaySubmission(user, category, fullSubmissionId) { .append("feedback") ) ) - ) - // add data to link - .data("fullSubmissionId", fullSubmissionId); + // add data to link + .data("fullSubmissionId", fullSubmissionId) + .data("category", category) + ); + } /** diff --git a/gemeinsamforschen/src/main/webapp/assets/js/unstructuredAnnotation.js b/gemeinsamforschen/src/main/webapp/assets/js/unstructuredAnnotation.js index 6ffb2c1a..ce860a82 100644 --- a/gemeinsamforschen/src/main/webapp/assets/js/unstructuredAnnotation.js +++ b/gemeinsamforschen/src/main/webapp/assets/js/unstructuredAnnotation.js @@ -26,7 +26,7 @@ $(document).ready(function() { }, function () { // jump to upload page on error - location.href="unstructured-upload.jsp?token=" + getUserTokenFromUrl() + "&projectId=" + getProjectIdFromUrl(); + location.href="unstructured-upload.jsp?token=" + getUserTokenFromUrl() + "&projectId=" + getValueFromUrl("projectId"); }); // set click listener to save button @@ -285,7 +285,7 @@ function saveButtonHandler() { $.when.apply($, promises).then(function () { // redirect user to project page after saving - location.href="project-student.jsp?token=" + getUserTokenFromUrl() + "&projectId=" + getProjectIdFromUrl(); + location.href="project-student.jsp?token=" + getUserTokenFromUrl() + "&projectId=" + getValueFromUrl("projectId"); }); // redirect user to project page after saving diff --git a/gemeinsamforschen/src/main/webapp/assets/js/unstructuredUpload.js b/gemeinsamforschen/src/main/webapp/assets/js/unstructuredUpload.js index 265a0a90..a024e123 100644 --- a/gemeinsamforschen/src/main/webapp/assets/js/unstructuredUpload.js +++ b/gemeinsamforschen/src/main/webapp/assets/js/unstructuredUpload.js @@ -14,7 +14,7 @@ $(document).ready(function() { var fullSubmissionPostRequest = { user: user, text: text, - projectId: getProjectIdFromUrl() + projectId: getValueFromUrl("projectId") }; // save request in database @@ -23,7 +23,7 @@ $(document).ready(function() { $('#upload-textarea').val(""); // jump to next page - location.href="unstructured-annotation.jsp?token=" + getUserTokenFromUrl() + "&projectId=" + getProjectIdFromUrl() + "&submission=" + response.id; + location.href="unstructured-annotation.jsp?token=" + getUserTokenFromUrl() + "&projectId=" + getValueFromUrl("projectId") + "&submission=" + response.id; }); } }); diff --git a/gemeinsamforschen/src/main/webapp/assets/js/utility.js b/gemeinsamforschen/src/main/webapp/assets/js/utility.js index ad821640..40197ba6 100644 --- a/gemeinsamforschen/src/main/webapp/assets/js/utility.js +++ b/gemeinsamforschen/src/main/webapp/assets/js/utility.js @@ -13,14 +13,13 @@ function getUserTokenFromUrl() { } -function getProjectIdFromUrl() { +function getValueFromUrl(name) { var parts = window.location.search.substr(1).split("&"); var $_GET = {}; for (var i = 0; i < parts.length; i++) { var temp = parts[i].split("="); $_GET[decodeURIComponent(temp[0])] = decodeURIComponent(temp[1]); } - return $_GET['projectId']; + return $_GET[name]; } - diff --git a/gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp b/gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp index 30aeafc1..9b44cabe 100644 --- a/gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp +++ b/gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp @@ -22,6 +22,8 @@ <script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js" type="text/javascript"></script> <!-- js - scrollTo --> <script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script> + <!-- js - utility --> + <script src="../assets/js/utility.js"></script> <!-- js - annotation websocket script --> <script src="../assets/js/annotationWebsocket.js"></script> <!-- js - annotation REST script --> @@ -44,10 +46,7 @@ <div class="content-mainpage"> <div class="leftcolumn"> <div class="leftcontent"> - <div class="leftcontent-text context-menu-one" id="documentText"> - Style never met and those among great. At no or september sportsmen he perfectly happiness attending. Depending listening delivered off new she procuring satisfied sex existence. Person plenty answer to exeter it if. Law use assistance especially resolution cultivated did out sentiments unsatiable. Way necessary had intention happiness but september delighted his curiosity. Furniture furnished or on strangers neglected remainder engrossed. Shot what able cold new the see hold. Friendly as an betrayed formerly he. Morning because as to society behaved moments. Put ladies design mrs sister was. Play on hill felt john no gate. Am passed figure to marked in. Prosperous middletons is ye inhabiting as assistance me especially. For looking two cousins regular amongst. - Style never met and those among great. At no or september sportsmen he perfectly happiness attending. Depending listening delivered off new she procuring satisfied sex existence. Person plenty answer to exeter it if. Law use assistance especially resolution cultivated did out sentiments unsatiable. Way necessary had intention happiness but september delighted his curiosity. Furniture furnished or on strangers neglected remainder engrossed. Shot what able cold new the see hold. Friendly as an betrayed formerly he. Morning because as to society behaved moments. Put ladies design mrs sister was. Play on hill felt john no gate. Am passed figure to marked in. Prosperous middletons is ye inhabiting as assistance me especially. For looking two cousins regular amongst. - </div> + <div class="leftcontent-text context-menu-one" id="documentText"></div> <div class="leftcontent-buttons"> <div class="leftcontent-buttons-next"> <button id="btnContinue" type="button" class="btn btn-secondary">Weiter</button> -- GitLab