feat: Implement client-side REST api and add simple highlighting of text

gemeinsamforschen/src/main/webapp/assets/css/unstructured-annotation.css

@@ -2,16 +2,6 @@ body, html {
     height: 100vh;
     width: 100vw;
 }
-ol {
-    padding: 0px;
-    margin: 0px;
-    list-style-type: none;
-    height: 100%;
-}
-li {
-    height: calc((100% - 70px) / 8);
-    min-height: 40px;
-}
 .content-mainpage {
     display: flex;
     box-sizing: border-box;
@@ -37,6 +27,16 @@ li {
 .rightcontent {
     height: 100%;
 }
+.rightcontent ol {
+    padding: 0px;
+    margin: 0px;
+    list-style-type: none;
+    height: 100%;
+}
+.rightcontent li {
+    height: calc((100% - 70px) / 8);
+    min-height: 40px;
+}
 .leftcontent {
     max-height: 100%;
     display: flex;

gemeinsamforschen/src/main/webapp/assets/js/unstructuredAnnotation.js

+var documentText;
+
 /**
  * This function will fire when the DOM is ready
  */
@@ -7,11 +9,14 @@ $(document).ready(function() {
     getFullSubmission(getSubmissionIdFromUrl(), function (response) {
         // set text in div
         $('#documentText').html(response.text);
+
     }, function () {
-        // jump to previous page on error
+        // jump to upload page on error
         location.href="unstructured-upload.jsp?token="+getUserTokenFromUrl();
     });
 
+
+
     /**
      * Context menu handler
      */
@@ -20,14 +25,41 @@ $(document).ready(function() {
         callback: function(key, options) {
 
             // TODO - show and handle more options
+            if (key === "titel" ||
+                key === "recherche" ||
+                key === "literaturverzeichnis" ||
+                key === "forschungsfrage" ||
+                key === "untersuchungskonzept" ||
+                key === "methodik" ||
+                key === "durchfuehrung" ||
+                key === "auswertung") {
+                if (getSelectedText().length > 0) {
+                    let startCharacter = window.getSelection().getRangeAt(0).startOffset;
+                    let endCharacter = window.getSelection().getRangeAt(0).endOffset;
+                    let selectedText = getSelectedText();
+
+                    handleCategorySelection(selectedText, key, startCharacter, endCharacter);
 
-            // action for 'annotation' click
-            if (key == 'annotation') {
+                }
             }
 
         },
         items: {
-            "annotation": {name: "Annotation", icon: "edit"}
+            "annotation": {
+                name: "Annotation",
+                icon: "edit",
+                items: {
+                    "titel": {name: "Titel"},
+                    "recherche": {name: "Recherche"},
+                    "literaturverzeichnis": {name: "Literaturverzeichnis"},
+                    "forschungsfrage": {name: "Forschungsfrage"},
+                    "untersuchungskonzept": {name: "Untersuchungskonzept"},
+                    "methodik": {name: "Methodik"},
+                    "durchfuehrung": {name: "Durchführung"},
+                    "auswertung": {name: "Auswertung"}
+                }
+            }
+
         }
     });
 
@@ -50,3 +82,62 @@ function getSubmissionIdFromUrl() {
 }
 
 
+function handleCategorySelection(text, category, startCharacter, endCharacter) {
+    var elem = $('#' + category);
+    elem.toggleClass("not-added added");
+
+    addHighlightedText(startCharacter, endCharacter);
+
+    isAlreadyHighlighted(startCharacter, endCharacter);
+
+}
+
+/**
+ * Get the text value of the selected text
+ *
+ * @returns {string} The text
+ */
+function getSelectedText() {
+    if(window.getSelection){
+        return window.getSelection().toString();
+    }
+    else if(document.getSelection){
+        return document.getSelection();
+    }
+    else if(document.selection){
+        return document.selection.createRange().text;
+    }
+}
+
+/**
+ * Add a highlighted text at specific position
+ *
+ * @param startCharacter The offset of the start character
+ * @param endCharacter The offset of the end character
+ */
+function addHighlightedText(startCharacter, endCharacter) {
+
+    var documentText = $('#documentText').text();
+    var documentHtml = $('#documentText').html();
+
+    // create <span> tag with the annotated text
+    var replacement = $('<span></span>').css('background-color', 'lightgreen').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 = documentText.slice(0, startCharacter) + replacementHtml + documentText.slice(endCharacter);
+
+    // set new document text
+    $('#documentText').html(newDocument);
+}
+
+function isAlreadyHighlighted(startCharacter, endCharacter) {
+    $('#annotations').each(function () {
+        if ($(this).find(".category-card").attr("added")) {
+            console.log("hi")
+        }
+    });
+    return false;
+}

gemeinsamforschen/src/main/webapp/assets/js/unstructuredRest.js

@@ -41,4 +41,49 @@ function getFullSubmission(id, responseHandler, errorHandler) {
             errorHandler();
         }
     })
+}
+
+/**
+ * POST: Save an submission part in the database
+ *
+ * @param submissionPartPostRequest The post request
+ * @param responseHandler The response handler
+ */
+function createSubmissionPart(submissionPartPostRequest, responseHandler) {
+    var url = "../rest/submissions/part/";
+    var json = JSON.stringify(fullSubmissionPostRequest);
+    $.ajax({
+        url: url,
+        type: "POST",
+        data: json,
+        contentType: "application/json",
+        dataType: "json",
+        success: function (response) {
+            responseHandler(response);
+        }
+    });
+}
+
+/**
+ * GET: Get a specific submission part for a given id
+ *
+ * @param id The id of the submission part
+ * @param responseHandler The response handler
+ * @param errorHandler The error handler
+ */
+function getSubmissionPart(id, responseHandler, errorHandler) {
+    var url = "../rest/submissions/part/" + id;
+    $.ajax({
+        url: url,
+        type: "GET",
+        dataType: "json",
+        success: function (response) {
+            // handle the response
+            responseHandler(response);
+        },
+        error: function () {
+            // handle the error
+            errorHandler();
+        }
+    })
 }
\ No newline at end of file

gemeinsamforschen/src/main/webapp/pages/unstructured-annotation.jsp

@@ -14,14 +14,16 @@
     <!-- css - contextMenu -->
     <link href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
 
+    <!-- js - jQuery validation plugin -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
     <!-- js - jQuery ui position -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type="text/javascript"></script>
     <!-- js - contextMenu script -->
     <script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js" type="text/javascript"></script>
-    <!-- js - unstructuredUpload -->
-    <script src="../assets/js/unstructuredAnnotation.js"></script>
     <!-- js - unstructuredRest -->
     <script src="../assets/js/unstructuredRest.js"></script>
+    <!-- js - unstructuredUpload -->
+    <script src="../assets/js/unstructuredAnnotation.js"></script>
 
 
 </head>