Merge pull request #1094 from Ana06/schedule-versioning

Schedule versioning

app/assets/javascripts/application.js

@@ -13,6 +13,8 @@
 //= require jquery
 //= require jquery_ujs
 //= require jquery.mobile.custom.min
+//= require jquery.ui.draggable
+//= require jquery.ui.droppable
 //= require waypoints/jquery.waypoints
 //= require dataTables/jquery.dataTables
 //= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
@@ -36,6 +38,7 @@
 //= require osem-datatables
 //= require osem-tickets
 //= require bootstrap-switch
+//= require osem-schedule
 //= require osem-switch
 //= require osem-bootstrap
 //= require osem-commercials

app/assets/javascripts/osem-schedule.js

@@ -0,0 +1,118 @@
+var url; // Should be initialize in Schedule.initialize
+var schedule_id; // Should be initialize in Schedule.initialize
+
+function showError(error){
+  // Delete other error messages before showing the new one
+  $('.unobtrusive-flash-container').empty();
+  UnobtrusiveFlash.showFlashMessage(error, {type: 'error'});
+}
+
+var Schedule = {
+  initialize: function(url_param, schedule_id_param) {
+    url = url_param;
+    schedule_id = schedule_id_param;
+  },
+  remove: function(element) {
+    var e =  $("#" + element);
+    var event_schedule_id = e.attr("event_schedule_id");
+    if(event_schedule_id != null){
+      var my_url = url + '/' + event_schedule_id;
+      var success_callback = function(data) {
+        console.log(data);
+        e.attr("event_schedule_id", null);
+        e.appendTo($(".unscheduled-events"));
+        e.find(".schedule-event-delete-button").hide();
+      }
+      var error_callback = function(data) {
+        console.log(data);
+        showError($.parseJSON(data.responseText).errors);
+      }
+      $.ajax({
+        url: my_url,
+        type: 'DELETE',
+        success: success_callback,
+        error: error_callback,
+        dataType : 'json'
+      });
+    }
+    else{
+      showError("The event couldn't be unscheduled");
+    }
+  },
+  add: function (previous_parent, new_parent, event) {
+    event.appendTo(new_parent);
+    var event_schedule_id = event.attr("event_schedule_id");
+    var my_url = url;
+    var type = 'POST';
+    var params = { event_schedule: {
+      room_id: new_parent.attr("room_id"),
+      start_time: (new_parent.attr("date") + ' ' + new_parent.attr("hour"))
+    }};
+    if(event_schedule_id != null){
+      type = 'PUT';
+      my_url += ('/' + event_schedule_id);
+    }
+    else{
+      params['event_schedule']['event_id'] = event.attr("event_id");
+      params['event_schedule']['schedule_id'] = schedule_id;
+    }
+    var success_callback = function(data) {
+      console.log(data);
+      event.attr("event_schedule_id", data.event_schedule_id);
+      event.find(".schedule-event-delete-button").show();
+      }
+    var error_callback = function(data) {
+      console.log(data);
+      showError($.parseJSON(data.responseText).errors);
+      event.appendTo(previous_parent);
+    }
+    $.ajax({
+      url: my_url,
+      type: type,
+      data: params,
+      success: success_callback,
+      error: error_callback,
+      dataType : 'json'
+    });
+  }
+};
+
+$(document).ready( function() {
+  // hide the remove button for unscheduled events
+  $('.unscheduled-events .schedule-event-delete-button').hide();
+
+  // set events as draggable
+  $('.schedule-event').draggable({
+    snap: '.schedule-room-slot',
+    revertDuration: 200,
+    revert: function (event, ui) {
+        console.log(event.attr);
+        return !event;
+    },
+    stop: function(event, ui) {
+        this._originalPosition = this._originalPosition || ui.originalPosition;
+        ui.helper.animate( this._originalPosition );
+    },
+    opacity: 0.7,
+    snapMode: "inner",
+    zIndex: 2
+  });
+
+  // set room cells as droppable
+  $('.schedule-room-slot').droppable({
+    accept: '.schedule-event',
+    tolerance: "pointer",
+    drop: function(event, ui) {
+        $(ui.draggable).css("left", 0);
+        $(ui.draggable).css("top", 0);
+        $(this).css("background-color", "#ffffff");
+        Schedule.add($(ui.draggable).parent(), $(this), $(ui.draggable));
+    },
+    over: function(event, ui) {
+      $(this).css("background-color", "#009ED8");
+    },
+    out: function(event, ui) {
+      $(this).css("background-color", "#ffffff");
+      }
+  });
+});

app/assets/javascripts/osem-switch.js

@@ -11,4 +11,25 @@ $(function () {
       dataType: 'script'
     });
   });
+
+  $("[class='switch-checkbox-schedule']").bootstrapSwitch();
+
+  $('input[class="switch-checkbox-schedule"]').on('switchChange.bootstrapSwitch', function(event, state) {
+    var url = $(this).attr('url');
+    var method = $(this).attr('method');
+
+    if(state){
+      url += $(this).attr('value');
+    }
+
+    var callback = function(data) {
+      showError($.parseJSON(data.responseText).errors);
+    }
+    $.ajax({
+      url: url,
+      type: method,
+      error: callback,
+      dataType: 'json'
+    });
+  });
 });

app/assets/stylesheets/osem-schedule.css.scss

@@ -1,3 +1,52 @@
+
+.room-name{
+  font-weight: bold;
+  padding:10px;
+  margin-top: 30px;
+  border: 1px solid #848484;
+  background-color: #E6E6E6;
+
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  height: 40px;
+  line-height: 25px;
+  overflow: hidden;
+}
+
+.schedule-room-slot{
+  padding: 2px 5px;
+  border: 1px solid #848484;
+  height: 58px;
+  line-height: 20px;
+  font-size: 13px;
+}
+
+.schedule-event{
+  padding: 7px;
+  border: 2px solid #151515;
+  position:relative;
+  z-index:1;
+  cursor:move;
+}
+
+.schedule-event-text{
+  display: -webkit-box;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  line-height: 23px;
+  overflow: hidden;
+}
+
+.schedule-event-delete-button {
+    font-weight:bold;
+    cursor: pointer;
+    padding: 0px 3px;
+    border: 1px solid grey;
+    margin-right: 5px;
+}
+
 #schedule td.event {
 background-image: linear-gradient(bottom, rgb(247,250,242) 24%, rgb(194,232,190) 97%, rgb(194,232,190) 100%);
 background-image: -o-linear-gradient(bottom, rgb(247,250,242) 24%, rgb(194,232,190) 97%, rgb(194,232,190) 100%);