Add support for running CodeOcean under a subpath

* Also refactor (JavaScript) routes

app/assets/javascripts/submission_statistics.js.erb

@@ -0,0 +1,142 @@
+$(document).on('turbolinks:load', function() {
+
+  var ACE_FILES_PATH = '<%= "#{Rails.application.config.relative_url_root.chomp('/')}/assets/ace/" %>';
+  var THEME = 'ace/theme/textmate';
+
+  var currentSubmission = 0;
+  var active_file = undefined;
+  var fileTrees = [];
+  var editor = undefined;
+  var fileTypeById = {};
+
+  var showActiveFile = function() {
+    var session = editor.getSession();
+    var fileType = fileTypeById[active_file.file_type_id];
+    session.setMode(fileType.editor_mode);
+    session.setTabSize(fileType.indent_size);
+    session.setValue(active_file.content);
+    session.setUseSoftTabs(true);
+    session.setUseWrapMode(true);
+
+    // The event ready.jstree is fired too early and thus doesn't work.
+    var selectFileInJsTree = function() {
+      if (!filetree.hasClass('jstree-loading')) {
+        filetree.jstree("deselect_all");
+        filetree.jstree().select_node(active_file.file_id);
+      } else {
+        setTimeout(selectFileInJsTree, 250);
+      }
+    };
+
+    filetree = $(fileTrees[currentSubmission]);
+    selectFileInJsTree();
+    // Finally change jstree element to prevent flickering
+    showFileTree(currentSubmission);
+  };
+
+  var initializeFileTree = function() {
+    $('.files').each(function(index, element) {
+      fileTree = $(element).jstree($(element).data('entries'));
+      fileTree.on('click', 'li.jstree-leaf', function() {
+        var id = parseInt($(this).attr('id'));
+        _.each(files[currentSubmission], function(file) {
+          if (file.file_id === id) {
+            active_file = file;
+          }
+        });
+        showActiveFile();
+      });
+      fileTrees.push(fileTree);
+    });
+  };
+
+  var showFileTree = function(index) {
+    $('.files').hide();
+    $(fileTrees[index]).show();
+  };
+
+  if ($.isController('exercises') && $('#timeline').isPresent()) {
+
+    _.each(['modePath', 'themePath', 'workerPath'], function(attribute) {
+      ace.config.set(attribute, ACE_FILES_PATH);
+    });
+
+    var slider = $('#submissions-slider>input');
+    var submissions = $('#data').data('submissions');
+    var files = $('#data').data('files');
+    var filetypes = $('#data').data('file-types');
+    var playButton = $('#play-button');
+    var playInterval = undefined;
+
+    editor = ace.edit('current-file');
+    editor.setShowPrintMargin(false);
+    editor.setTheme(THEME);
+    editor.$blockScrolling = Infinity;
+    editor.setReadOnly(true);
+
+    _.each(filetypes, function (filetype) {
+      filetype = JSON.parse(filetype);
+      fileTypeById[filetype.id] = filetype;
+    });
+
+    $('tr[data-id]>.clickable').each(function(index, element) {
+      element = $(element);
+      element.click(function() {
+        slider.val(index);
+        slider.change()
+      });
+    });
+
+    const onSliderChange = function(event) {
+      currentSubmission = slider.val();
+      var currentFiles = files[currentSubmission];
+      var fileIndex = 0;
+      _.each(currentFiles, function(file, index) {
+        if (file.name === active_file.name) {
+          fileIndex = index;
+        }
+      });
+      active_file = currentFiles[fileIndex];
+      showActiveFile();
+    };
+
+    slider.on('change', onSliderChange);
+
+    stopReplay = function() {
+      clearInterval(playInterval);
+      playInterval = undefined;
+      playButton.find('span.fa').removeClass('fa-pause').addClass('fa-play')
+    };
+
+    playButton.on('click', function(event) {
+      if (playInterval === undefined) {
+        // Reset slider if showing newest submission.
+        if (parseInt(slider.val()) === submissions.length - 1) {
+          slider.val(0);
+          onSliderChange();
+        }
+
+        playInterval = setInterval(function() {
+          if ($.isController('exercises') && $('#timeline').isPresent() && slider.val() < submissions.length - 1) {
+            slider.val(parseInt(slider.val()) + 1);
+            slider.change()
+          } else {
+            stopReplay();
+          }
+        }, 1000);
+        playButton.find('span.fa').removeClass('fa-play').addClass('fa-pause')
+      } else {
+        stopReplay();
+      }
+    });
+
+    active_file = files[0][0];
+    initializeFileTree();
+    showActiveFile();
+
+    // Start with newest submission
+    slider.val(submissions.length - 1);
+    onSliderChange();
+  }
+
+});