Merge pull request #77 from openHPI/ace-editor-exercise-edit

Ace editor exercise edit

app/assets/javascripts/editor_edit.js

@@ -0,0 +1,55 @@
+$(function() {
+    var ACE_FILES_PATH = '/assets/ace/';
+    var THEME = 'ace/theme/textmate';
+
+    var configureEditors = function() {
+        _.each(['modePath', 'themePath', 'workerPath'], function(attribute) {
+            ace.config.set(attribute, ACE_FILES_PATH);
+        });
+    };
+
+    var initializeEditors = function() {
+        $('.editor').each(function(index, element) {
+            var editor = ace.edit(element);
+
+            var document = editor.getSession().getDocument();
+            // insert pre-existing code into editor. we have to use insertLines, otherwise the deltas are not properly added
+            var file_id = $(element).data('file-id');
+            var content = $('.editor-content[data-file-id=' + file_id + ']');
+
+            document.insertLines(0, content.text().split(/\n/));
+            // remove last (empty) that is there by default line
+            document.removeLines(document.getLength() - 1, document.getLength() - 1);
+            editor.setReadOnly($(element).data('read-only') !== undefined);
+            editor.setShowPrintMargin(false);
+            editor.setTheme(THEME);
+
+            var textarea = $('textarea[id="exercise_files_attributes_'+index+'_content"]');
+            var content = textarea.val();
+
+            if (content != undefined)
+            {
+                editor.getSession().setValue(content);
+                editor.getSession().on('change', function(){
+                    textarea.val(editor.getSession().getValue());
+                });
+            }
+
+            editor.commands.bindKey("ctrl+alt+0", null);
+            var session = editor.getSession();
+            session.setMode($(element).data('mode'));
+            session.setTabSize($(element).data('indent-size'));
+            session.setUseSoftTabs(true);
+            session.setUseWrapMode(true);
+
+            var file_id = $(element).data('id');
+        }
+    )};
+
+    if ($('#editor-edit').isPresent()) {
+            configureEditors();
+            initializeEditors();
+            $('.frame').show();
+    }
+});
+

app/views/exercises/_code_field.html.slim

@@ -2,5 +2,5 @@
   = form.label(attribute, label)
   |  
   a.toggle-input data={text_initial: t('shared.upload_file'), text_toggled: t('shared.back')} href='#' = t('shared.upload_file')
-  = form.text_area(attribute, class: 'code-field form-control original-input', rows: 16)
+  = form.text_area(attribute, class: 'code-field form-control original-input', rows: 16, style: "display:none;")
   = form.file_field(attribute, class: 'alternative-input form-control', disabled: true)

app/views/exercises/_editor_edit.html.slim

@@ -0,0 +1,5 @@
+#editor-edit.panel-group.row data-exercise-id=@exercise.id
+  #frames
+    .frame
+      .editor-content.hidden
+      .editor

app/views/exercises/_file_form.html.slim

@@ -1,4 +1,5 @@
 - id = f.object.id
+
 li.panel.panel-default
   .panel-heading role="tab" id="heading"
     a.file-heading data-toggle="collapse" data-parent="#files" href="#collapse#{id}"
@@ -37,3 +38,4 @@ li.panel.panel-default
           = f.label(:role, t('activerecord.attributes.file.weight'))
           = f.number_field(:weight, class: 'form-control', min: 1, step: 'any')
       = render('code_field', attribute: :content, form: f, label: t('activerecord.attributes.file.content'))
+      = render partial: 'editor_edit', locals: { exercise: @exercise }

app/views/exercises/_form.html.slim

@@ -9,7 +9,6 @@
   .form-group
     = f.label(:description)
     = f.pagedown_editor :description
-
   .form-group
     = f.label(:execution_environment_id)
     = f.collection_select(:execution_environment_id, @execution_environments, :id, :name, {}, class: 'form-control')
@@ -33,7 +32,9 @@
   ul#files.list-unstyled.panel-group
     = f.fields_for :files do |files_form|
       = render('file_form', f: files_form)
+
   a#add-file.btn.btn-default.btn-sm.pull-right href='#' = t('.add_file')
   ul#dummies.hidden = f.fields_for(:files, CodeOcean::File.new, child_index: 'index') do |files_form|
     = render('file_form', f: files_form)
+
   .actions = render('shared/submit_button', f: f, object: @exercise)

db/schema.rb

@@ -74,6 +74,7 @@ ActiveRecord::Schema.define(version: 20160704143402) do
     t.integer  "file_type_id"
     t.integer  "memory_limit"
     t.boolean  "network_enabled"
+
   end
 
   create_table "exercises", force: true do |t|