StudentSorter: Use jquery.event.drag instead of jqueryUI/sortable

Volunteers are draggable now too. Still doesn't save anywhere.

app/assets/javascripts/application.js

@@ -7,7 +7,6 @@
 //= require jquery
 //= require jquery_ujs
 //= require jquery.ui.datepicker
-//= require jquery.ui.sortable
 //= require twitter/bootstrap/modal
 //= require twitter/bootstrap/transition
 //= require twitter/bootstrap/tooltip
@@ -18,8 +17,11 @@
 //= require underscore
 //= require backbone
 //= require backbone-super
+//= require jquery.event.drag
+//= require jquery.event.drop
 //= require bridgetroll
 //= require_tree ../templates
+//= require_tree ./enums
 //= require_tree ./models
 //= require_tree ./collections
 //= require ./views/base_view

app/assets/javascripts/bridgetroll.js

@@ -1,5 +1,6 @@
 Bridgetroll = {
   Models: {},
   Collections: {},
-  Views: {}
+  Views: {},
+  Enums: {}
 };

app/assets/javascripts/collections/attendee_collection.js

@@ -0,0 +1,3 @@
+Bridgetroll.Collections.Attendee = Backbone.Collection.extend({
+  model: Bridgetroll.Models.Attendee
+});

app/assets/javascripts/enums/role.js

@@ -0,0 +1,4 @@
+Bridgetroll.Enums.Role = {
+  STUDENT: 1,
+  VOLUNTEER: 2
+};

app/assets/javascripts/models/attendee.js

@@ -0,0 +1,2 @@
+Bridgetroll.Models.Attendee = Backbone.Model.extend({
+});

app/assets/javascripts/views/section_organizer_view.js

@@ -7,27 +7,30 @@ Bridgetroll.Views.SectionOrganizer = Bridgetroll.Views.Base.extend({
 
   initialize: function (options) {
     this._super('initialize', arguments);
-    this.students = options.students;
-    this.listenTo(this.students, 'change', this.render);
+    this.attendees = options.attendees;
+
+    this.listenTo(this.attendees, 'change', this.render);
 
     var section = new Bridgetroll.Views.Section({
-      title: 'Unsorted Students',
-      students: options.students,
-      volunteers: options.volunteers
+      title: 'Unsorted Attendees',
+      attendees: options.attendees
     });
+
     this.subViews.push(section);
+    this.listenTo(section, 'section:changed', this.render);
     this.render();
   },
 
   addSection: function () {
-    var sectionStudents = new Bridgetroll.Collections.Student();
-    var sectionVolunteers = new Bridgetroll.Collections.Volunteer();
     var section = new Bridgetroll.Views.Section({
       title: 'New Section',
-      students: sectionStudents,
-      volunteers: sectionVolunteers
+      section_id: _.uniqueId('s'),
+      attendees: this.attendees
     });
+
     this.subViews.push(section);
+    this.listenTo(section, 'section:changed', this.render);
+
     this.render();
   }
 });

app/assets/javascripts/views/section_view.js

@@ -2,31 +2,71 @@ Bridgetroll.Views.Section = Bridgetroll.Views.Base.extend({
   className: 'bridgetroll-section',
   template: 'section_organizer/section',
 
-  events: {
-    'sortreceive .students': 'studentAdded',
-    'sortremove .students': 'studentRemoved'
-  },
-
   initialize: function (options) {
     this._super('initialize', arguments);
 
+    this.section_id = options.section_id;
+
     this.title = options.title;
-    this.students = options.students;
-    this.volunteers = options.volunteers;
+    this.attendees = options.attendees;
   },
 
   context: function () {
     return {
       title: this.title,
-      students: this.students.toJSON(),
-      volunteers: this.volunteers.toJSON()
+      students: _.invoke(this.students(), 'toJSON'),
+      volunteers: _.invoke(this.volunteers(), 'toJSON')
     }
   },
 
-  studentAdded: $.noop,
-  studentRemoved: $.noop,
+  students: function () {
+    var students = this.attendees.where({
+      role_id: Bridgetroll.Enums.Role.STUDENT,
+      section_id: this.section_id
+    });
+    return _.sortBy(students, function (student) {
+      return student.get('class_level');
+    });
+  },
+
+  volunteers: function () {
+    return this.attendees.where({
+      role_id: Bridgetroll.Enums.Role.VOLUNTEER,
+      section_id: this.section_id
+    });
+  },
+
+  attendeeDragging: function (el, dd) {
+    var $attendee = $(dd.drag);
+    $attendee.addClass('dragging');
+    $attendee.css({
+      top: dd.offsetY,
+      left: dd.offsetX
+    });
+  },
+
+  attendeeDropped: function (el, dd) {
+    $(dd.drag).removeClass('dragging');
+    $(dd.drag).css({
+      top: '',
+      left: ''
+    });
+  },
+
+  moveAttendeeToSection: function (attendee_id) {
+    var attendee = this.attendees.where({id: attendee_id})[0];
+    attendee.set('section_id', this.section_id);
+    this.trigger('section:changed');
+  },
 
   postRender: function () {
-    this.$('.students').sortable({connectWith: '.bridgetroll-section .students'});
+    this.$('.attendee').on('drag', this.attendeeDragging);
+    this.$('.attendee').on('dragend', this.attendeeDropped);
+
+    var self = this;
+    this.$el.drop(function (el, dd) {
+      var $attendee = $(dd.drag);
+      self.moveAttendeeToSection($attendee.data('id'));
+    });
   }
 });

app/assets/stylesheets/_section_organizer.css.scss

@@ -9,9 +9,11 @@ $bridgetroll-section-border-color: #BBB;
 
 .bridgetroll-section {
   border: 1px solid $bridgetroll-section-border-color;
-  margin-top: 5px;
+  margin: 5px 10px 0 0;
   border-radius: 5px;
   width: 200px;
+  display: inline-block;
+  vertical-align: top;
 
   .title {
     margin: -5px 0 5px 0;
@@ -43,7 +45,7 @@ $bridgetroll-section-border-color: #BBB;
 
     li {
       line-height: 20px;
-      margin-bottom: 5px;
+      padding: 2px 0;
     }
   }
 
@@ -70,6 +72,13 @@ $bridgetroll-section-border-color: #BBB;
     &.level4 { background-color: $orange-color; }
     &.level5 { background-color: $red-color; }
   }
+
+  .attendee.dragging {
+    position: absolute;
+    background-color: white;
+    box-shadow: 0 0 10px rgba(50, 50, 50, 0.75);
+    padding: 2px 5px 2px 0;
+  }
 }
 
 ul {

app/assets/templates/section_organizer/section.hbs

@@ -1,12 +1,12 @@
 <div class='title'>{{title}}</div>
 <ul class='volunteers'>
 {{#each volunteers}}
-  <li><div class="bridgetroll-badge">V</div>{{this.name}}</li>
+  <li class="attendee" data-id="{{this.id}}"><div class="bridgetroll-badge volunteer">V</div>{{this.name}}</li>
 {{/each}}
 </ul>
 
 <ul class='students'>
 {{#each students}}
-  <li><div class="bridgetroll-badge">1</div>{{this.name}}</li>
+  <li class="attendee" data-id="{{this.id}}"><div class="bridgetroll-badge level{{this.class_level}}">{{this.class_level}}</div>{{this.name}}</li>
 {{/each}}
 </ul>

app/views/events/organize_sections.html.erb

@@ -6,16 +6,12 @@
 
 <script>
   $(document).ready(function () {
-    var students = new Bridgetroll.Collections.Student(
-      <%= @event.student_rsvps.map { |rsvp| { name: rsvp.user.full_name } }.to_json.html_safe %>
-    );
-    var volunteers = new Bridgetroll.Collections.Volunteer(
-      <%= @event.volunteer_rsvps.map { |rsvp| { name: rsvp.user.full_name } }.to_json.html_safe %>
+    var attendees = new Bridgetroll.Collections.Attendee(
+      <%= @event.rsvps.where(role_id: [Role::STUDENT.id, Role::VOLUNTEER.id]).map { |rsvp| { id: rsvp.user.id, role_id: rsvp.role_id, class_level: rsvp.class_level, name: rsvp.user.full_name } }.to_json.html_safe %>
     );
 
     Bridgetroll.sectionOrganizer = new Bridgetroll.Views.SectionOrganizer({
-      students: students,
-      volunteers: volunteers
+      attendees: attendees
     });
     Bridgetroll.sectionOrganizer.setElement($('#section-organizer'));
     Bridgetroll.sectionOrganizer.render();

app/views/static_pages/style_guide.html.erb

@@ -77,15 +77,15 @@
     <div class='title'>Conference Room A</div>
 
     <ul class='volunteers'>
-      <li><div class='bridgetroll-badge volunteer'>V</div>Dejuan Gottlieb</li>
-      <li><div class='bridgetroll-badge volunteer'>V</div>Boyd Emard</li>
-      <li><div class='bridgetroll-badge volunteer'>V</div>Addison Dooley</li>
+      <li class='attendee'><div class='bridgetroll-badge volunteer'>V</div>Dejuan Gottlieb</li>
+      <li class='attendee'><div class='bridgetroll-badge volunteer'>V</div>Boyd Emard</li>
+      <li class='attendee'><div class='bridgetroll-badge volunteer'>V</div>Addison Dooley</li>
     </ul>
 
     <ul class='students'>
-      <li><div class='bridgetroll-badge level1'>1</div>Olen Becker</li>
-      <li><div class='bridgetroll-badge level2'>2</div>Arthur Botsford</li>
-      <li><div class='bridgetroll-badge level3'>3</div>Noah Hermiston</li>
+      <li class='attendee'><div class='bridgetroll-badge level1'>1</div>Olen Becker</li>
+      <li class='attendee'><div class='bridgetroll-badge level2'>2</div>Arthur Botsford</li>
+      <li class='attendee'><div class='bridgetroll-badge level3'>3</div>Noah Hermiston</li>
     </ul>
   </div>
 </div>

spec/javascripts/section_organizer/section_organizer_spec.js

@@ -1,18 +1,15 @@
 describe("SectionOrganizer", function() {
-  var sectionOrganizer, students, volunteers;
+  var sectionOrganizer, attendees;
   beforeEach(function() {
-    students = new Bridgetroll.Collections.Student([
-      {name: 'Lana Lang'},
-      {name: 'Sue Storm'},
-      {name: 'Ted Moesby'}
-    ]);
-    volunteers = new Bridgetroll.Collections.Volunteer([
-      {name: 'Paul Graham'},
-      {name: 'Grace Hopper'}
+    attendees = new Bridgetroll.Collections.Attendee([
+      {role_id: Bridgetroll.Enums.Role.STUDENT, name: 'Lana Lang'},
+      {role_id: Bridgetroll.Enums.Role.STUDENT, name: 'Sue Storm'},
+      {role_id: Bridgetroll.Enums.Role.STUDENT, name: 'Ted Moesby'},
+      {role_id: Bridgetroll.Enums.Role.VOLUNTEER, name: 'Paul Graham'},
+      {role_id: Bridgetroll.Enums.Role.VOLUNTEER, name: 'Grace Hopper'}
     ]);
     sectionOrganizer = new Bridgetroll.Views.SectionOrganizer({
-      students: students,
-      volunteers: volunteers
+      attendees: attendees
     });
   });