Add sortable exercise list to exercise collection new/edit page

app/assets/javascripts/exercise_collections.js.erb

@@ -1,9 +1,13 @@
 $(function() {
   if ($.isController('exercise_collections')) {
-    var data = $('#data').data('working-times');
-    var averageWorkingTimeValue = parseFloat($('#data').data('average-working-time'));
+    var data = $('#data');
+    var exerciseList = $('#exercise-list');
 
-    var margin = { top: 30, right: 40, bottom: 30, left: 50 },
+    if (data.isPresent()) {
+      data.data('working-times');
+      var averageWorkingTimeValue = parseFloat(data.data('average-working-time'));
+
+      var margin = {top: 30, right: 40, bottom: 30, left: 50},
         width = 720 - margin.left - margin.right,
         height = 500 - margin.top - margin.bottom;
 
@@ -16,16 +20,28 @@ $(function() {
       var tooltip = d3.select("#graph").append("div").attr("class", "exercise-id-tooltip");
 
       var averageWorkingTime = d3.line()
-      .x(function (d) { return x(d.index) + x.bandwidth()/2; })
-      .y(function () { return y(averageWorkingTimeValue); });
+        .x(function (d) {
+          return x(d.index) + x.bandwidth() / 2;
+        })
+        .y(function () {
+          return y(averageWorkingTimeValue);
+        });
 
       var minWorkingTime = d3.line()
-      .x(function (d) { return x(d.index) + x.bandwidth()/2; })
-      .y(function () { return y(0.1*averageWorkingTimeValue); });
+        .x(function (d) {
+          return x(d.index) + x.bandwidth() / 2;
+        })
+        .y(function () {
+          return y(0.1 * averageWorkingTimeValue);
+        });
 
       var maxWorkingTime = d3.line()
-      .x(function (d) { return x(d.index) + x.bandwidth()/2; })
-      .y(function () { return y(2*averageWorkingTimeValue); });
+        .x(function (d) {
+          return x(d.index) + x.bandwidth() / 2;
+        })
+        .y(function () {
+          return y(2 * averageWorkingTimeValue);
+        });
 
       var svg = d3.select('#graph')
         .append("svg")
@@ -45,8 +61,12 @@ $(function() {
       });
 
       // Scale the range of the data
-    x.domain(data.map(function (d) { return d.index; }));
-    y.domain([0, d3.max(data, function (d) { return d.working_time; })]);
+      x.domain(data.map(function (d) {
+        return d.index;
+      }));
+      y.domain([0, d3.max(data, function (d) {
+        return d.working_time;
+      })]);
 
       // Add the X Axis
       svg.append("g")
@@ -66,7 +86,7 @@ $(function() {
         .enter()
         .append("rect")
         .attr("class", "value-bar")
-      .on("mousemove", function (d){
+        .on("mousemove", function (d) {
           tooltip
             .style("left", d3.event.pageX - 50 + "px")
             .style("top", d3.event.pageY + 50 + "px")
@@ -74,14 +94,22 @@ $(function() {
             .html("<%= I18n.t('activerecord.models.exercise.one') %> ID: " + d.exercise_id + "<br>" +
               "<%= I18n.t('exercises.statistics.average_worktime') %>: " + d.working_time + "s");
         })
-      .on("mouseout", function (){ tooltip.style("display", "none");})
+        .on("mouseout", function () {
+          tooltip.style("display", "none");
+        })
         .on("click", function (d) {
           window.location.href = "/exercises/" + d.exercise_id + "/statistics";
         })
-      .attr("x", function (d) { return x(d.index); })
+        .attr("x", function (d) {
+          return x(d.index);
+        })
         .attr("width", x.bandwidth())
-      .attr("y", function (d) { return y(d.working_time); })
-      .attr("height", function (d) { return height - y(d.working_time); });
+        .attr("y", function (d) {
+          return y(d.working_time);
+        })
+        .attr("height", function (d) {
+          return height - y(d.working_time);
+        });
 
       // Add the average working time path
       svg.append("path")
@@ -98,5 +126,10 @@ $(function() {
         .datum(data)
         .attr("class", "line maximum-working-time")
         .attr("d", maxWorkingTime);
+    } else if (exerciseList.isPresent()) {
+      var list = $("#sortable");
+      list.sortable();
+      list.disableSelection();
+    }
   }
 });

app/views/exercise_collections/_form.html.slim

@@ -15,4 +15,24 @@
   .form-group
     = f.label(t('activerecord.attributes.exercise_collections.exercises'))
     = f.collection_select(:exercise_ids, exercises, :id, :title, {}, {class: 'form-control', multiple: true})
+
+  .table-responsive#exercise-list
+    table.table
+      thead
+        tr
+          th
+          th = t('activerecord.attributes.exercise_collection_item.exercise')
+          th = t('activerecord.attributes.exercise.user')
+          th colspan=2 = t('shared.actions')
+      tbody#sortable
+        - @exercise_collection.items.order(:position).each do |item|
+          tr
+            td
+              span.fa.fa-bars
+            td = item.exercise.title
+            td = item.exercise.author
+            td = link_to(t('shared.show'), item.exercise)
+            td
+              a.remove-exercise href="#" = t('shared.destroy')
+
   .actions = render('shared/submit_button', f: f, object: @exercise_collection)

config/locales/de.yml

@@ -131,6 +131,8 @@ de:
         user: "Autor"
         exercise: "Aufgabe"
         feedback_text: "Feedback Text"
+      exercise_collection_item:
+        exercise: "Aufgabe"
     models:
       code_harbor_link:
         one: CodeHarbor-Link

config/locales/en.yml

@@ -131,6 +131,8 @@ en:
         user: "Author"
         exercise: "Exercise"
         feedback_text: "Feedback Text"
+      exercise_collection_item:
+        exercise: "Exercise"
     models:
       code_harbor_link:
         one: CodeHarbor Link