Avoid overlapping in the admin schedule

Not allow that an event is scheduled at the same time than other event in the admin schedule.

app/assets/javascripts/osem-schedule.js

@@ -16,6 +16,18 @@ var Schedule = {
     conference_id = conference_id_param;
     schedule_id = schedule_id_param;
   },
+  invalidateCells: function(element, length) {
+    for (i = 0; i < length; i++) {
+      element.addClass('with-event');
+      element = element.next();
+    }
+  },
+  validateCells: function(element, length) {
+    for (i = 0; i < length; i++) {
+      element.removeClass('with-event');
+      element = element.next();
+    }
+  },
   remove: function(element) {
     var e =  $("#" + element);
     var event_id = e.attr("event_id");
@@ -25,6 +37,7 @@ var Schedule = {
     }
     delete events_to_create[event_id];
     delete events_to_update[event_id];
+    Schedule.validateCells(e.parent(), e.attr("length"));
     var unscheduled = $(".unscheduled-events");
     e.appendTo(unscheduled);
     e.find(".schedule-event-delete-button").hide();
@@ -53,6 +66,7 @@ var Schedule = {
       delete events_to_update[event_id];
     }
     delete events_to_remove[event_id];
+    Schedule.invalidateCells(event, event.attr("length"));
     event.appendTo(new_parent);
     $("#event-" + event_id).find(".schedule-event-delete-button").show();
   },
@@ -119,8 +133,17 @@ $(document).ready( function() {
     snap: '.schedule-room-slot',
     revertDuration: 200,
     revert: function (event, ui) {
-        console.log(event.attr);
-        return !event;
+      var dropable = $(this).parent();
+      if(!dropable.hasClass('unscheduled-events')){
+        Schedule.invalidateCells(dropable, $(this).attr("length"));
+      }
+      return !event;
+    },
+    start: function(event, ui) {
+      var dropable = $(this).parent();
+      if(!dropable.hasClass('unscheduled-events')){
+        Schedule.validateCells(dropable, $(this).attr("length"));
+      }
     },
     stop: function(event, ui) {
         this._originalPosition = this._originalPosition || ui.originalPosition;
@@ -135,6 +158,18 @@ $(document).ready( function() {
   $('.schedule-room-slot').droppable({
     accept: '.schedule-event',
     tolerance: "pointer",
+    accept: function(dropElem){
+      var free = true;
+      var i = 0;
+      var elem = $(this);
+      while(free && i < dropElem.attr("length")){
+        if(elem.hasClass('with-event'))
+          free = false;
+        elem = elem.next();
+        i++;
+      }
+      return free;
+    },
     drop: function(event, ui) {
         $(ui.draggable).css("left", 0);
         $(ui.draggable).css("top", 0);

app/views/admin/schedules/_day_tab.html.haml

@@ -5,17 +5,22 @@
       .room-name
         - room_date_event_schedules = date_event_schedules.select{ |e| e.room == room }
         = room.name
+        - cells_with_event = 0
       - (9*4..18*4).each do |slot|
         - hour = slot / 4
         - minutes = (15 * (slot % 4) == 0) ? '00' : 15 * (slot % 4)
         - time = "#{hour}:#{minutes}"
-        .schedule-room-slot{ id: "schedule-room-#{room.guid}-#{hour}-#{minutes}", |
-                             room_id: room.id, |
-                             hour: time, |
-                             date: date}
+        - event_schedules = room_date_event_schedules.select{ |e| (e.start_time.hour.to_s + e.start_time.strftime(':%M')).eql? time }
+        - if event_schedules.any?
+          - event_schedule = event_schedules.first
+          - cells_with_event = event_schedule.event.event_type.length / EventType::LENGTH_STEP
+        %div{ class: "schedule-room-slot #{'with-event' if cells_with_event > 0}", |
+              id: "schedule-room-#{room.guid}-#{hour}-#{minutes}", |
+              room_id: room.id, |
+              hour: time, |
+              date: date}
           .div
             = time
-          - event_schedules = room_date_event_schedules.select{ |e| (e.start_time.hour.to_s + e.start_time.strftime(':%M')).eql? time }
-          - if event_schedules.any?
-            - event_schedule = event_schedules.first
+          - if event_schedule
             = render partial: 'event', locals: { event: event_schedule.event, event_schedule_id: event_schedule.id}
+        - (cells_with_event = cells_with_event - 1) if cells_with_event > 0