Commit just for you, Ralf :)

Gemfile.lock

@@ -247,7 +247,7 @@ GEM
       rainbow (>= 1.99.1, < 3.0)
       ruby-progressbar (~> 1.4)
     rubocop-rspec (1.2.2)
-    ruby-progressbar (1.7.4)
+    ruby-progressbar (1.7.5)
     rubytree (0.9.4)
       json (~> 1.8)
       structured_warnings (~> 0.1)

app/assets/javascripts/editor.js

@@ -17,7 +17,8 @@ $(function() {
   var active_frame;
   var running = false;
 
-  var flowrResultHtml = '<div class="panel panel-default"><div id="{{headingId}}" role="tab" class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#flowrHint" href="#{{collapseId}}" aria-expanded="true" aria-controls="{{collapseId}}"></a></h4></div><div id="{{collapseId}}" role="tabpanel" aria-labelledby="{{headingId}}" class="panel-collapse collapse"><div class="panel-body"></div></div></div>';
+  var flowrUrl = 'http://vm-teusner-webrtc.eaalab.hpi.uni-potsdam.de:3000/api/exceptioninfo?id=&lang=auto'
+  var flowrResultHtml = '<div class="panel panel-default"><div id="{{headingId}}" role="tab" class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#flowrHint" href="#{{collapseId}}" aria-expanded="true" aria-controls="{{collapseId}}"></a></h4></div><div id="{{collapseId}}" role="tabpanel" aria-labelledby="{{headingId}}" class="panel-collapse collapse"><div class="panel-body"></div></div></div>'
 
   var ajax = function(options) {
     return $.ajax(_.extend({
@@ -221,27 +222,42 @@ $(function() {
     showTab(3);
   };
 
+  var stderrOutput = ''
   var handleStderrOutputForFlowr = function(event) {
-    var flowrUrl = $('#flowrHint').data('url');
     var json = JSON.parse(event.data);
-    var stderrOutput = '';
 
     if (json.stderr) {
       stderrOutput += json.stderr;
     } else if (json.code) {
-      var flowrHintBody = $('#flowrHint .panel-body');
+      if (stderrOutput == '') {
+        return
+      }
 
-      $.getJSON(flowrUrl + '&query=' + escape(stderrOutput), function(data) {
+      var flowrHintBody = $('#flowrHint .panel-body')
-        _.each(_.compact(data.queryResults), function(question, index) {
+      var queryParameters = {
-          var collapsibleTileHtml = flowrResultHtml.replace(/{{collapseId}}/g, 'collapse-' + index).replace(/{{headingId}}/g, 'heading-' + index);
+        query: stderrOutput
-          var resultTile = $(collapsibleTileHtml);
+      }
-          resultTile.find('h4 > a').text(question.title);
-          resultTile.find('.panel-body').append(question.body);
-          flowrHintBody.append(resultTile);
-        });
 
-        $('#flowrHint').fadeIn();
+      flowrHintBody.empty()
-      });
+
+      jQuery.getJSON(flowrUrl, queryParameters, function(data) {
+        for (var question in data.queryResults) {
+          var collapsibleTileHtml = flowrResultHtml.replace(/{{collapseId}}/g, 'collapse-' + question).replace(/{{headingId}}/g, 'heading-' + question)
+          var resultTile = $(collapsibleTileHtml)
+
+          resultTile.find('h4 > a').text(data.queryResults[question].title + ' | Found via ' + data.queryResults[question].source)
+          resultTile.find('.panel-body').html(data.queryResults[question].body)
+          resultTile.find('.panel-body').append('<a href="' + data.queryResults[question].url  + '" class="btn btn-primary btn-block">Open this question</a>')
+
+          flowrHintBody.append(resultTile)
+        }
+
+        if (data.queryResults.length !== 0) {
+          $('#flowrHint').fadeIn()
+        }
+      })
+
+      stderrOutput = ''
     }
   };
 
@@ -269,9 +285,173 @@ $(function() {
       session.setTabSize($(element).data('indent-size'));
       session.setUseSoftTabs(true);
       session.setUseWrapMode(true);
+
+      var file_id =  $(element).data('file-id');
+      setAnnotations(editor, file_id);
+
+      session.on('annotationRemoval', handleAnnotationRemoval)
+      session.on('annotationChange', handleAnnotationChange)
+
+      // TODO refactor here
+      // Code for clicks on gutter / sidepanel
+      editor.on("guttermousedown", function(e){
+        var target = e.domEvent.target;
+        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 user_id = 18
+          var commenttext = commentModal.find('textarea').val()
+
+          if (commenttext !== "") {
+            createComment(user_id, file_id, row, editor, commenttext)
+            commentModal.modal('hide')
+          }
+        })
+
+        commentModal.find('#removeAllButton').on('click', function(e){
+          var user_id = 18;
+          deleteComment(user_id,file_id,row,editor);
+          commentModal.modal('hide')
+        })
+
+        commentModal.modal('show')
+      });
     });
   };
 
+    var hasCommentsInRow = function (editor, row){
+    return editor.getSession().getAnnotations().some(function(element) {
+      return element.row === row
+    })
+  }
+
+  var getCommentsForRow = function (editor, row){
+    return editor.getSession().getAnnotations().filter(function(element) {
+      return element.row === row
+    })
+  }
+
+  var setAnnotations = function (editor, file_id){
+
+      var session = editor.getSession();
+
+      // Retrieve comments for file and set them as annotations
+      var url = "/comments";
+
+      var jqrequest = $.ajax({
+          dataType: 'json',
+          method: 'GET',
+          url: url,
+          data: {
+            file_id: file_id
+          }
+      });
+
+      jqrequest.done(function(response){
+          setAnnotationsCallback(response, session);
+      });
+      jqrequest.fail(ajaxError);
+  }
+
+  var setAnnotationsCallback = function (response, session) {
+      var annotations = response;
+
+      $.each(annotations, function(index, comment){
+          comment.className = "code-ocean_comment";
+          comment.text = comment.user_id + ": " + comment.text;
+      });
+
+      session.setAnnotations(annotations);
+  }
+
+  var deleteComment = function (user_id, file_id, row, editor) {
+      var jqxhr = $.ajax({
+          type: 'DELETE',
+          url: "/comments",
+          data: {
+            row: row,
+            file_id: file_id,
+            user_id: user_id
+          }
+      });
+      jqxhr.done(function (response) {
+          setAnnotations(editor, file_id);
+      });
+      jqxhr.fail(ajaxError);
+  }
+
+  var createComment = function (user_id, file_id, row, editor, commenttext){
+      var jqxhr = $.ajax({
+        data: {
+          comment: {
+            user_id: user_id,
+            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);
+  }
+
+  var handleAnnotationRemoval = function(removedAnnotations) {
+    removedAnnotations.forEach(function(annotation) {
+      $.ajax({
+        method: 'DELETE',
+        url:  '/comment_by_id',
+        data: {
+          id: annotation.id,
+        }
+      })
+    })
+  }
+
+  var handleAnnotationChange = function(changedAnnotations) {
+    changedAnnotations.forEach(function(annotation) {
+      $.ajax({
+        method: 'PUT',
+        url:  '/comments',
+        data: {
+          id: annotation.id,
+          user_id: 18,
+          comment: {
+            row: annotation.row,
+            text: annotation.text
+          }
+        }
+      })
+    })
+  }
+
   var initializeEventHandlers = function() {
     $(document).on('click', '#results a', showOutput);
     $(document).on('keypress', handleKeyPress);

app/assets/stylesheets/comments.css.scss

@@ -0,0 +1,8 @@
+// Place all the styles related to the Comments controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
+
+.ace_gutter-cell.code-ocean_comment {
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wIUDTMn077U+gAAANhJREFUOMvV0jFOQkEURuEPfCFKaChwASQWhsIOaxYgW7Ci0c4VuBBM6GmsWIC2JsbCykJiRSD0GMVHMy+ZTPSBlfHvZu7NyZ1zh79O5Zu7Bi7RRz30TDHC7TbACB1UkSe1Kt5xg2FxuRc1jHFcMm0e+k/xgceCCmc4wtcOz17jCs0YMMDnL9ytcBgDVj8ILZO/jgHXiY9t2cdbLHGBFk4KcklqYcXLdAt3wXQ3kVlBhgM84AKvRTFL6O0gM8MTZuH8ggnmZaP18Ix7nO8qI0t+Wi/4yP2bbAA4rSby6Nz4AwAAAABJRU5ErkJggg==");
+    background-position: 2px center;
+}

app/controllers/comments_controller.rb

@@ -0,0 +1,90 @@
+class CommentsController < ApplicationController
+  before_action :set_comment, only: [:show, :edit, :update, :destroy_by_id]
+
+  # disable authorization check. TODO: turn this on later.
+  skip_after_action :verify_authorized
+
+  # GET /comments
+  # GET /comments.json
+  def index
+    #@comments = Comment.all
+    @comments = Comment.where(file_id: params[:file_id])
+  end
+
+  # GET /comments/1
+  # GET /comments/1.json
+  def show
+  end
+
+  # GET /comments/new
+  def new
+    @comment = Comment.new
+  end
+
+  # GET /comments/1/edit
+  def edit
+  end
+
+  # POST /comments
+  # POST /comments.json
+  def create
+    @comment = Comment.new(comment_params.merge(user_type: 'InternalUser'))
+
+    respond_to do |format|
+      if @comment.save
+        format.html { redirect_to @comment, notice: 'Comment was successfully created.' }
+        format.json { render :show, status: :created, location: @comment }
+      else
+        format.html { render :new }
+        format.json { render json: @comment.errors, status: :unprocessable_entity }
+      end
+    end
+  end
+
+  # PATCH/PUT /comments/1
+  # PATCH/PUT /comments/1.json
+  def update
+    respond_to do |format|
+      if @comment.update(comment_params)
+        format.html { head :no_content, notice: 'Comment was successfully updated.' }
+        format.json { render :show, status: :ok, location: @comment }
+      else
+        format.html { render :edit }
+        format.json { render json: @comment.errors, status: :unprocessable_entity }
+      end
+    end
+  end
+
+  # DELETE /comments/1
+  # DELETE /comments/1.json
+  def destroy_by_id
+    @comment.destroy
+    respond_to do |format|
+      format.html { head :no_content, notice: 'Comment was successfully destroyed.' }
+      format.json { head :no_content }
+    end
+  end
+
+  def destroy
+    @comments = Comment.where(file_id: params[:file_id], row: params[:row])
+    @comments.delete_all
+    respond_to do |format|
+      #format.html { redirect_to comments_url, notice: 'Comments were successfully destroyed.' }
+      format.html { head :no_content, notice: 'Comments were successfully destroyed.' }
+      format.json { head :no_content }
+    end
+  end
+
+  private
+    # Use callbacks to share common setup or constraints between actions.
+    def set_comment
+      @comment = Comment.find(params[:id])
+    end
+
+    # Never trust parameters from the scary internet, only allow the white list through.
+    def comment_params
+      #params.require(:comment).permit(:user_id, :file_id, :row, :column, :text)
+      # fuer production mode, damit böse menschen keine falsche user_id uebergeben:
+      params.require(:comment).permit(:file_id, :row, :column, :text).merge(user_id: current_user.id)
+    end
+end

app/controllers/submissions_controller.rb

@@ -20,9 +20,31 @@ class SubmissionsController < ApplicationController
   def create
     @submission = Submission.new(submission_params)
     authorize!
+    copy_comments
     create_and_respond(object: @submission)
   end
 
+  def copy_comments
+    # copy each annotation and set the target_file.id
+    unless(params[:annotations_arr].nil?)
+      params[:annotations_arr].each do | annotation |
+        comment = Comment.new(:user_id => annotation[1][:user_id], :file_id => annotation[1][:file_id], :user_type => 'InternalUser', :row => annotation[1][:row], :column => annotation[1][:column], :text => annotation[1][:text])
+        source_file = CodeOcean::File.find(annotation[1][:file_id])
+
+        #comment = Comment.new(annotation[1].permit(:user_id, :file_id, :user_type, :row, :column, :text, :created_at, :updated_at))
+        target_file = @submission.files.detect do |file|
+          # file_id has to be that of a the former iteration OR of the initial file (if this is the first run)
+          file.file_id == source_file.file_id || file.file_id == source_file.id #seems to be needed here: (check this): || file.file_id == source_file.id
+        end
+
+        #save to assign an id
+        target_file.save!
+
+        comment.file_id = target_file.id
+        comment.save!
+      end
+    end
+
   def download_file
     if @file.native_file?
       send_file(@file.native_file.path)

app/views/exercises/_comment_dialogcontent.html.slim

@@ -0,0 +1,9 @@
+h5 =t('exercises.implement.comment.others')
+pre#other-comments
+
+h5 =t('exercises.implement.comment.addyours')
+
+textarea.form-control(style='resize:none;')
+p = ''
+button#addCommentButton.btn.btn-block.btn-primary(type='button') =t('exercises.implement.comment.addComment')
+button#removeAllButton.btn.btn-block.btn-warning(type='button') =t('exercises.implement.comment.removeAllOnLine')

app/views/exercises/_editor.html.slim

@@ -33,3 +33,5 @@
               i.fa.fa-rocket
               = t('exercises.editor.test')
       = render('editor_button', data: {:'data-placement' => 'top', :'data-tooltip' => true}, icon: 'fa fa-trophy', id: 'assess', label: t('exercises.editor.score'), title: t('shared.tooltips.shortcut', shortcut: 'ALT + s'))
+
+= render('shared/modal', id: 'comment-modal', title: t('exercises.implement.comment.dialogtitle'), template: 'exercises/_comment_dialogcontent')

config/locales/de.yml

@@ -209,6 +209,12 @@ de:
       start: Mit dem Programmieren beginnen
       test_count: '<span class="number">%{count}</span> Test-Dateien wurden ausgeführt.'
       workspace: Arbeitsbereich
+      comment:
+        dialogtitle: Kommentieren Sie diese Zeile!
+        others: Andere Kommentare auf dieser Zeile
+        addyours: Fügen Sie Ihren Kommentar hinzu
+        addComment: Hinzufügen
+        removeAllOnLine: Alle Kommentare auf dieser Zeile löschen
     index:
       clone: Duplizieren
       implement: Implementieren

config/locales/en.yml

@@ -209,6 +209,12 @@ en:
       start: Start Coding
       test_count: '<span class="number">%{count}</span> test files have been executed.'
       workspace: Workspace
+      comment:
+        dialogtitle: Comment on this line!
+        others: Other comments on this line
+        addyours: Add your comment
+        addComment: Add comment
+        removeAllOnLine: Remove all comments on this line
     index:
       clone: Duplicate
       implement: Implement

config/routes.rb

@@ -1,6 +1,15 @@
 FILENAME_REGEXP = /[\w\.]+/ unless Kernel.const_defined?(:FILENAME_REGEXP)
 
 Rails.application.routes.draw do
+  resources :comments, except: [:destroy] do
+    collection do
+      delete :destroy
+    end
+  end
+
+  delete '/comment_by_id', to: 'comments#destroy_by_id'
+  put '/comments', to: 'comments#update'
+
   root to: 'application#welcome'
 
   namespace :admin do