Show editor for code commenting, and allow commenting as well

app/assets/javascripts/editor.js

@@ -344,7 +344,7 @@ $(function() {
         commentModal.find('#removeAllButton').off('click')
 
         commentModal.find('#addCommentButton').on('click', function(e){
-          var user_id = element.data('user-id')
+          var user_id = $(element).data('user-id')
           var commenttext = commentModal.find('textarea').val()
 
           if (commenttext !== "") {
@@ -354,7 +354,7 @@ $(function() {
         })
 
         commentModal.find('#removeAllButton').on('click', function(e){
-          var user_id = element.data('user-id')
+          var user_id = $(element).data('user-id')
           deleteComment(user_id,file_id,row,editor);
           commentModal.modal('hide')
         })

app/assets/stylesheets/request-for-comments.css.scss

@@ -0,0 +1,4 @@
+#commentitor {
+    margin-top: 2rem;
+    height: 600px;
+}

app/views/request_for_comments/show.html.erb

@@ -5,5 +5,84 @@
   </p>
 </div>
 
-<div id='editor' class='editor' data-read-only='true' data-file-id='<%=@request_for_comment.fileid%>'>
-</div>
+<form class="form-inline">
+  <div class="form-group">
+    <p style='display:inline-block'>Line</p>
+    <input type="number" class="form-control" id="lineInput" placeholder="1" required>
+  </div>
+  <div class="form-group">
+    <p style='display:inline-block'>Comment</p>
+    <input type="text" class="form-control" id="commentInput" placeholder="I'd suggest a variable here" required>
+  </div>
+  <button id='submitComment' type="submit" class="btn btn-default">Comment!</button>
+</form>
+
+<div id='commentitor' class='editor' data-read-only='true' data-file-id='<%=@request_for_comment.fileid%>'>
+  <%= CodeOcean::File.find(@request_for_comment.fileid).content %>
+</div>
+
+<script type="text/javascript">
+  //(function() {
+    var commentitor = $('#commentitor')
+    var userid = commentitor.data('user-id')
+    var fileid = commentitor.data('file-id')
+    var lineInput = $('#lineInput')
+    var commentInput = $('#commentInput')
+    commentitor = ace.edit(commentitor[0])
+
+    $('#submitComment').click(addComment)
+    setAnnotations()
+
+    function setAnnotations() {
+      var session = commentitor.getSession()
+
+      var jqrequest = $.ajax({
+          dataType: 'json',
+          method: 'GET',
+          url: '/comments',
+          data: {
+            file_id: fileid
+          }
+      });
+
+      jqrequest.done(function(response){
+        $.each(response, function(index, comment) {
+          comment.className = "code-ocean_comment"
+          comment.text = comment.user_id + ": " + comment.text
+        })
+
+        commentitor.getSession().setAnnotations(response)
+      })
+    }
+
+    function addComment() {
+      var line = lineInput.val()
+      var comment = commentInput.val()
+
+      if (line == '' || comment == '') {
+        return
+      } else {
+        line = parseInt(line) - 1
+      }
+
+
+      var jqxhr = $.ajax({
+        data: {
+          comment: {
+            user_id: userid,
+            file_id: fileid,
+            row: line,
+            column: 0,
+            text: comment
+          }
+        },
+        dataType: 'json',
+        method: 'POST',
+        url:  "/comments"
+      })
+
+      jqxhr.done(setAnnotations)
+      lineInput.val(''); commentInput.val('');
+    }
+  //})()
+</script>