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

<div class="list-group">
  <h4 id ="exercise_caption" class="list-group-item-heading" data-rfc-id = "<%= @request_for_comment.id %>" ><%= 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>
  <% if (policy(@request_for_comment).mark_as_solved? and not @request_for_comment.solved?)  %>
      <button class="btn btn-default" id="mark-as-solved-button">Bla</button>
  <% else %>

  <% end %>
</div>

<!--
do not put a carriage return in the line below. it will be present in the presentation of the source code, otherwise.
also, all settings from the rails model needed for the editor configuration in the JavaScript are attached to the editor as data attributes here.
-->
<% 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%>' data-mode='<%=file.file_type.editor_mode%>'><%= 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 solvedButton = $('#mark-as-solved-button');

  solvedButton.on('click', function(event){
    var jqrequest = $.ajax({
      dataType: 'json',
      method: 'GET',
      url: location + '/mark_as_solved'
    });

    jqrequest.done(function(response){
      if(response.solved){
        solvedButton.hide();
      }
    });
  });

  // set file paths for ace
  var ACE_FILES_PATH = '/assets/ace/';
  _.each(['modePath', 'themePath', 'workerPath'], function(attribute) {
    ace.config.set(attribute, ACE_FILES_PATH);
  });

  var commentitor = $('.editor');
  var userid = commentitor.data('user-id');

  commentitor.each(function (index, editor) {
    var currentEditor = ace.edit(editor);
    currentEditor.setReadOnly(true);
    // set editor mode (used for syntax highlighting
    currentEditor.getSession().setMode($(editor).data('mode'));

    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,
          request_id: $('h4#exercise_caption').data('rfc-id')
        }
      },
      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>