From 3f114629f9772b2fe1302cb8b7b7b0fd53b34c3a Mon Sep 17 00:00:00 2001 From: Ana Date: Wed, 27 Jul 2016 21:07:44 +0200 Subject: [PATCH] javascript for the admin schedule moved to a .js Inline javascript for the admin schedule moved to a dedicated .js file. --- app/assets/javascripts/application.js | 1 + app/assets/javascripts/osem-schedule.js | 140 ++++++++++++++++++++++ app/views/admin/schedules/show.html.haml | 141 +---------------------- 3 files changed, 142 insertions(+), 140 deletions(-) create mode 100644 app/assets/javascripts/osem-schedule.js diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 92cdd9ca..14c70269 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -42,6 +42,7 @@ //= require osem-commercials //= require unobtrusive_flash //= require unobtrusive_flash_bootstrap +//= require osem-schedule $(document).ready(function() { $('a[disabled=disabled]').click(function(event){ diff --git a/app/assets/javascripts/osem-schedule.js b/app/assets/javascripts/osem-schedule.js new file mode 100644 index 00000000..0e44a41f --- /dev/null +++ b/app/assets/javascripts/osem-schedule.js @@ -0,0 +1,140 @@ +var conference; // Should be initialize in Schedule.loadEvents +var schedule_id; // Should be initialize in Schedule.loadEvents + +var Schedule = { + loadEvents: 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 = $('
' + + '
' + + 'X' + + vars["title"] + '
'); + 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'; + var params = { + event: e.attr("guid"), + room: "none", + date: "none", + time: "none", + schedule: schedule_id + }; + var callback = function(data) { + console.log(data); + e.appendTo(unscheduled); + e.find(".schedule-event-delete-button").hide(); + } + $.ajax({ + url: url, + type: 'PUT', + data: params, + success: callback, + dataType : 'json' + }); + }, + save: function (event_id, room_id, date, time) { + var url = '/admin/conference/' + conference + '/schedule'; + var params = { + event: event_id, + room: room_id, + date: date, + time: time, + schedule: schedule_id + }; + var callback = function(data) { + console.log(data); + $("#event-" + event_id).find(".schedule-event-delete-button").show(); + } + $.ajax({ + url: url, + type: 'PUT', + data: params, + success: callback, + dataType : 'json' + }); + } +}; + +$(document).ready( function() { + $('.schedule-room-slot').droppable({ + accept: '.schedule-event', + tolerance: "pointer", + drop: function(event, ui) { + $(ui.draggable).appendTo(this); + var myId = $(ui.draggable).attr("guid"); + var myRoom = $(this).attr("room-guid") + var myDate = $(this).attr("date"); + var myTime = $(this).attr("hour"); + $(ui.draggable).css("left", 0); + $(ui.draggable).css("top", 0); + $(this).css("background-color", "#ffffff"); + Schedule.save(myId, myRoom, myDate, myTime); + }, + over: function(event, ui) { + $(this).css("background-color", "#009ED8"); + }, + out: function(event, ui) { + $(this).css("background-color", "#ffffff"); + } + }); +}); diff --git a/app/views/admin/schedules/show.html.haml b/app/views/admin/schedules/show.html.haml index 3b9205f4..afdc7716 100644 --- a/app/views/admin/schedules/show.html.haml +++ b/app/views/admin/schedules/show.html.haml @@ -21,146 +21,7 @@ .tab-pane{ class: "#{ (@dates.first == date) ? 'active' : '' }", id: "#{date}" } = render partial: 'day_tab', locals: { date: date } - :javascript - - var conference = "#{@conference.short_title}" - var schedule_id = "#{@schedule_id}"; - - var Schedule = { - loadEvents: function(conference_id, start_date) { - var url = '/admin/conference/' + conference_id + '/program/events'; - var callback = function(data) { - $.each(data, function(key, val) { - Schedule.newEvent(val, conference_id); - }); - }; - $.getJSON(url, callback); - }, - newEvent: function(vars, conference_id) { - 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 = $('
' - + '
' - + 'X' - + vars["title"] + '
'); - 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, conference_id) { - var e = $("#" + element); - var unscheduled = $(".unscheduled-events"); - - var url = '/admin/conference/' + conference_id + '/schedule'; - var params = { - event: e.attr("guid"), - room: "none", - date: "none", - time: "none", - schedule: schedule_id - }; - var callback = function(data) { - console.log(data); - e.appendTo(unscheduled); - e.find(".schedule-event-delete-button").hide(); - } - $.ajax({ - url: url, - type: 'PUT', - data: params, - success: callback, - dataType : 'json' - }); - }, - save: function (conference_id, event_id, room_id, date, time) { - var url = '/admin/conference/' + conference_id + '/schedule'; - var params = { - event: event_id, - room: room_id, - date: date, - time: time, - schedule: schedule_id - }; - var callback = function(data) { - console.log(data); - $("#event-" + event_id).find(".schedule-event-delete-button").show(); - } - $.ajax({ - url: url, - type: 'PUT', - data: params, - success: callback, - dataType : 'json' - }); - } - }; - - Schedule.loadEvents("#{@conference.short_title}", "#{@dates.first}"); - $(document).ready( function() { - $('.schedule-room-slot').droppable({ - accept: '.schedule-event', - tolerance: "pointer", - drop: function(event, ui) { - $(ui.draggable).appendTo(this); - var myId = $(ui.draggable).attr("guid"); - var myRoom = $(this).attr("room-guid") - var myDate = $(this).attr("date"); - var myTime = $(this).attr("hour"); - $(ui.draggable).css("left", 0); - $(ui.draggable).css("top", 0); - $(this).css("background-color", "#ffffff"); - Schedule.save(conference, myId, myRoom, myDate, myTime); - }, - over: function(event, ui) { - $(this).css("background-color", "#009ED8"); - }, - out: function(event, ui) { - $(this).css("background-color", "#ffffff"); - } - }); + Schedule.loadEvents("#{@conference.short_title}", "#{@schedule_id}"); });