feat: Implement logic of annotation creation process

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

@@ -4,8 +4,8 @@ var userColors = new Map();
 var userColorsDark = new Map();
 var targetId = 200;
 
-// declare document text
-var documentText;
+// declare document text, start and end character
+var documentText, startCharacter, endCharacter;
 
 /**
  * This function will fire when the DOM is ready
@@ -19,36 +19,17 @@ $(document).ready(function() {
         selector: '.context-menu-one',
         callback: function(key, options) {
 
-            // close context menu
-            window.close;
-
-            // initialize selected body
-            var body = getSelectedText();
-
-            // if user selected something
-            if (body.length > 0) {
-                // annotationPostRequest
-                var annotationPostRequest = {
-                    userToken: userToken,
-                    targetId: targetId,
-                    body: {
-                        title: "title",
-                        comment: body,
-                        startCharacter: window.getSelection().getRangeAt(0).startOffset,
-                        endCharacter: window.getSelection().getRangeAt(0).endOffset
-                    }
-                };
-
-                console.log(annotationPostRequest);
-
-                createAnnotation(annotationPostRequest, function(response) {
-                    // display the new annotation
-                    displayAnnotation(response);
-
-                });
-            }
+            // action for 'annotation' click
+            if (key == 'annotation') {
+                // show modal if something is selected
+                if (getSelectedText().length > 0) {
+                    startCharacter = window.getSelection().getRangeAt(0).startOffset;
+                    endCharacter = window.getSelection().getRangeAt(0).endOffset;
 
-            $('#annotation-create-modal').modal('show');
+                    // display annotation create modal
+                    $('#annotation-create-modal').modal("show");
+                }
+            }
 
         },
         items: {
@@ -63,6 +44,62 @@ $(document).ready(function() {
         location.href="givefeedback.jsp?token=" + getUserTokenFromUrl();
     });
 
+
+
+    /**
+     * validation of annotation create form inside the modal
+     */
+    $('#annotation-create-form').validate({
+        rules: {
+            title: {
+                required: true,
+                maxlength: 120
+            },
+            comment: {
+                required: true,
+                maxlength: 400
+            }
+        },
+        messages: {
+            title: {
+                required: "Bitte geben Sie einen Titel ein",
+                maxlength: "Ihr Titel darf maximal 120 Zeichen lang sein"
+            },
+            comment: {
+                required: "Bitte geben Sie einen Kommentar ein",
+                maxlength: "Ihr Kommentar darf maximal 400 Zeichen lang sein"
+            }
+        }
+    });
+
+    /**
+     * Save button of the annotation create modal
+     * hide modal and build new annotation
+     */
+    $('#btnSave').click(function () {
+        if ($('#annotation-create-form').valid()) {
+            // get title and comment from form
+            var title = $('#annotation-form-title').val();
+            var comment = $('#annotation-form-comment').val();
+
+            // hide and clear the modal
+            $('#annotation-create-modal').modal('hide');
+
+            // save the new annotation in db and display it
+            saveNewAnnotation(title, comment, startCharacter, endCharacter);
+        }
+    });
+
+    /**
+     * Clear the title and comment input field of the modal
+     */
+    $('#annotation-create-modal').on('hidden.bs.modal', function(){
+        // clear title
+        $('#annotation-form-title').val('');
+        // clear comment
+        $('#annotation-form-comment').val('')
+    });
+
     documentText = $('#documentText').html();
 
     // fetch annotations from server on page start
@@ -462,3 +499,32 @@ function toggleButtonHandler(element) {
     // toggle between up and down button
     element.children("i").toggleClass("fa-chevron-down fa-chevron-up")
 }
+
+/**
+ * Save a new annotation in database and list
+ *
+ * @param title The title of the new annotation
+ * @param comment The comment of the new annotation
+ * @param startCharacter The startCharacter based on the annotated text
+ * @param endCharacter The endCharacter based on the annotated text
+ */
+function saveNewAnnotation(title, comment, startCharacter, endCharacter) {
+    // build annotationPostRequest
+    var annotationPostRequest = {
+        userToken: userToken,
+        targetId: targetId,
+        body: {
+            title: title,
+            comment: comment,
+            startCharacter: startCharacter,
+            endCharacter: endCharacter
+        }
+    };
+
+    // send new annotation to back-end and display it in list
+    createAnnotation(annotationPostRequest, function(response) {
+        // display the new annotation
+        displayAnnotation(response);
+
+    });
+}

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

@@ -24,6 +24,8 @@
 
     <!-- js - jQuery -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <!-- js - jQuery validation plugin -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
     <!-- js - bootstrap -->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <!-- js - jQuery ui position -->
@@ -91,24 +93,22 @@
 
                     <!-- modal body -->
                     <div class="modal-body">
-                        <form>
+                        <form id="annotation-create-form">
                             <div class="form-group">
                                 <label for="annotation-form-title" class="col-form-label">Titel:</label>
-                                <input type="text" class="form-control" id="annotation-form-title">
+                                <input type="text" class="form-control" id="annotation-form-title" name="title">
                             </div>
                             <div class="form-group">
                                 <label for="annotation-form-comment" class="col-form-label">Kommentar:</label>
-                                <textarea class="form-control resize-vertical" id="annotation-form-comment"></textarea>
+                                <textarea class="form-control resize-vertical" id="annotation-form-comment" name="comment"></textarea>
                             </div>
                         </form>
+                        <!-- modal footer -->
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
+                            <button id="btnSave" type="button" class="btn btn-success">Speichern</button>
+                        </div>
                     </div>
-
-                    <!-- modal footer -->
-                    <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
-                        <button type="button" class="btn btn-primary">Speichern</button>
-                    </div>
-
                 </div>
             </div>
         </div>