Do not use JS to initialize the schedule

- Only use JS for the drag&drop functionality and to the set/alter the time and rooms of the EventSchedule object.

- Introduce has_many :events, through: :event_schedules association to get unscheduled event easily
This commit is contained in:
Ana 2016-07-31 18:41:27 +02:00
parent 71dab6b79c
commit a394293500
12 changed files with 66 additions and 125 deletions

View file

@ -1,76 +1,14 @@
var conference; // Should be initialize in Schedule.loadEvents
var schedule_id; // Should be initialize in Schedule.loadEvents
var conference; // Should be initialize in Schedule.initialize
var schedule_id; // Should be initialize in Schedule.initialize
var Schedule = {
loadEvents: function(conference_param, schedule_id_param) {
initialize: function(conference_param, schedule_id_param) {
conference = conference_param;
schedule_id = schedule_id_param;
var url = '/admin/conference/' + conference + '/program/events';
var callback = function(data) {
$.each(data, function(key, val) {
Schedule.newEvent(val);
});
};
$.getJSON(url, callback);
},
newEvent: function(vars) {
var height = (vars["length"] / 15 * 58) - 23; // this height fits the room cells
var lines = Math.floor((height - 7) / 23); // subtracting the padding before calculate the number of lines
var newEvent = $('<div class="schedule-event">'
+ '<div class="schedule-event-text" style="-webkit-line-clamp: '+ lines + '; height: ' + (lines * 23) + 'px;">'
+ '<span onclick="Schedule.remove(\'event-' + vars["guid"] + '\', \'' + conference +'\');" class="schedule-event-delete-button">X</span>'
+ vars["title"] + '</div></div>');
newEvent.attr("id", "event-" + vars["guid"]);
newEvent.attr("guid", vars["guid"]);
newEvent.css("height", height);
newEvent.css('background-color',vars["track_color"]);
newEvent.css('color',vars["track_text_color"]);
var date = "none";
var room = "none"
var time = "none";
for (i = 0; i < vars["event_schedules"].length; i++) {
event_schedule = vars["event_schedules"][i];
if(event_schedule["schedule_id"] == schedule_id){
room = event_schedule["room_guid"];
var d = new Date(event_schedule["start_time"]);
date = d.getUTCFullYear() + "-"
+ ('0' + (d.getUTCMonth() +1)).slice(-2) + '-'
+ ('0' + d.getUTCDate()).slice(-2);
minutes = d.getUTCMinutes();
time = d.getUTCHours() + ':' + (minutes == 0 ? '00' : minutes);
console.log("date: " + d);
newEvent.attr("room", room);
newEvent.attr("date", date);
newEvent.attr("hour", time);
}
}
newEvent.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
});
if (date == "none" || room == "none") {
newEvent.find(".schedule-event-delete-button").hide();
$('.unscheduled-events').append(newEvent);
} else {
var element = "[date='" + date +"'][hour='" + time + "'][room-guid='" + room + "']";
$(element).append(newEvent);
}
},
remove: function(element) {
var e = $("#" + element);
var unscheduled = $(".unscheduled-events");
var url = '/admin/conference/' + conference + '/schedule/' + schedule_id;
var params = {
event: e.attr("guid"),
@ -92,7 +30,7 @@ var Schedule = {
dataType : 'json'
});
},
save: function (event_id, room_id, date, time) {
add: function (event_id, room_id, date, time) {
var url = '/admin/conference/' + conference + '/schedule/' + schedule_id;
var params = {
event: event_id,
@ -116,6 +54,27 @@ var Schedule = {
};
$(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",
@ -128,7 +87,7 @@ $(document).ready( function() {
$(ui.draggable).css("left", 0);
$(ui.draggable).css("top", 0);
$(this).css("background-color", "#ffffff");
Schedule.save(myId, myRoom, myDate, myTime);
Schedule.add(myId, myRoom, myDate, myTime);
},
over: function(event, ui) {
$(this).css("background-color", "#009ED8");