codeocean/app/views/request_for_comments/show.html.erb

<div class="list-group">
  <h4 class="list-group-item-heading"><%= Exercise.find(@request_for_comment.exercise_id) %></h4>
  <p class="list-group-item-text">
      <%
        user = @request_for_comment.user
        submission_id =  ActiveRecord::Base.connection.execute("select id from submissions
          where exercise_id =
          #{@request_for_comment.exercise_id} AND
          user_id =  #{@request_for_comment.user_id} AND
          '#{@request_for_comment.created_at}' > created_at
          order by created_at desc
          limit 1").first['id'].to_i
        submission = Submission.find(submission_id)
      %>
    <%= user.displayname %> | <%= @request_for_comment.requested_at %>
  </p>
  <h5>
    <% if @request_for_comment.question and not @request_for_comment.question == '' %>
      <%= t('activerecord.attributes.request_for_comments.question')%>: "<%= @request_for_comment.question %>"
    <% else %>
      <%= t('request_for_comments.no_question') %>
    <% end %>
  </h5>
</div>

<!--
do not put a carriage return in the line below. it will be present in the presentation of the source code, otherwise.
-->
<% submission.files.each do |file| %>
  <%= (file.path or "") + "/" + file.name +  file.file_type.file_extension %>
  <div id='commentitor' class='editor' data-read-only='true' data-file-id='<%=file.id%>'><%= file.content %>
  </div>
<% end %>

<%= render('shared/modal', id: 'comment-modal', title: t('exercises.implement.comment.dialogtitle'), template: 'exercises/_comment_dialogcontent') %>

<script type="text/javascript">
  var commentitor = $('.editor');
  var userid = commentitor.data('user-id');

  commentitor.each(function (index, editor) {
    var currentEditor = ace.edit(editor);
    currentEditor.setReadOnly(true);

    setAnnotations(currentEditor, $(editor).data('file-id'));
    currentEditor.on("guttermousedown", handleSidebarClick);
  });

  function setAnnotations(editor, fileid) {
    var session = editor.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.username + ": " + comment.text
      });

      session.setAnnotations(response);
    })
  }

  function hasCommentsInRow(editor, row){
    return editor.getSession().getAnnotations().some(function(element) {
      return element.row === row;
    })
  }

  function getCommentsForRow(editor, row){
    return editor.getSession().getAnnotations().filter(function(element) {
      return element.row === row;
    })
  }

  function deleteComment(file_id, row, editor) {
    var jqxhr = $.ajax({
      type: 'DELETE',
      url: "/comments",
      data: {
        row: row,
        file_id: file_id          }
    });
    jqxhr.done(function (response) {
      setAnnotations(editor, file_id);
    });
    jqxhr.fail(ajaxError);
  }

  function createComment(file_id, row, editor, commenttext){
    var jqxhr = $.ajax({
      data: {
        comment: {
          file_id: file_id,
          row: row,
          column: 0,
          text: commenttext
        }
      },
      dataType: 'json',
      method: 'POST',
      url:  "/comments"
    });
    jqxhr.done(function(response){
      setAnnotations(editor, file_id);
    });
    jqxhr.fail(ajaxError);
  }

  function handleSidebarClick(e) {
    var target  = e.domEvent.target;
    var editor =  e.editor;

    if (target.className.indexOf("ace_gutter-cell") == -1) return;
    //if (!editor.isFocused()) return;
    //if (e.clientX > 25 + target.getBoundingClientRect().left) return;


    var row = e.getDocumentPosition().row;
    e.stop();

    var commentModal = $('#comment-modal');

    if (hasCommentsInRow(editor, row)) {
      var rowComments = getCommentsForRow(editor, row);
      var comments = _.pluck(rowComments, 'text').join('\n');
      commentModal.find('#other-comments').text(comments);
    } else {
      commentModal.find('#other-comments').text('none');
    }

    commentModal.find('#addCommentButton').off('click');
    commentModal.find('#removeAllButton').off('click');

    commentModal.find('#addCommentButton').on('click', function(e){
      var commenttext = commentModal.find('textarea').val();
      var file_id = $(editor.container).data('file-id');

      if (commenttext !== "") {
        createComment(file_id, row, editor, commenttext);
        commentModal.modal('hide');
      }
    });

    commentModal.find('#removeAllButton').on('click', function(e){
      var file_id = $(editor.container).data('file-id');
      deleteComment(file_id, row, editor);
      commentModal.modal('hide');
    });

    commentModal.modal('show');
  }

  function ajaxError(response) {
    var message = ((response || {}).responseJSON || {}).message || '';

    $.flash.danger({
      text: message.length > 0 ? message : $('#flash').data('message-failure')
    });
  };
</script>