016ee71855
This adds a POST action to the edit_meeting_schedule view that sets a list of currently visible timeslot types in the user's session. On display of the schedule editor, this is consulted before defaulting to show only 'regular' timeslots. An ajax request is made to update the session when changing the settings in the editor.
1008 lines
39 KiB
JavaScript
1008 lines
39 KiB
JavaScript
$(function () {
|
|
'use strict';
|
|
|
|
let schedEditor = $(".edit-meeting-schedule");
|
|
/* Drag data stored via the drag event dataTransfer interface is only accessible on
|
|
* dragstart and dragend events. Other drag events can see only the MIME types that have
|
|
* data. Use a non-registered type to identify our session drags. Unregistered MIME
|
|
* types are strongly discouraged by RFC6838, but we are not actually attempting to
|
|
* exchange data with anything outside this script so that really does not apply. */
|
|
const dnd_mime_type = 'text/x.session-drag';
|
|
const meetingTimeZone = schedEditor.data('timezone');
|
|
const lockSeconds = Number(schedEditor.data('lock-seconds') || 0);
|
|
|
|
function reportServerError(xhr, textStatus, error) {
|
|
let errorText = error || textStatus;
|
|
if (xhr && xhr.responseText) {
|
|
errorText += '\n\n' + xhr.responseText;
|
|
}
|
|
alert("Error: " + errorText);
|
|
}
|
|
|
|
function ajaxCall(action, data) {
|
|
const ajaxData = { action: action };
|
|
Object.assign(ajaxData, data);
|
|
return jQuery.ajax({
|
|
url: window.location.href,
|
|
method: "post",
|
|
timeout: 5 * 1000,
|
|
data: ajaxData,
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Time to treat as current time for computing whether to lock timeslots
|
|
* @returns {*} Moment object equal to lockSeconds in the future
|
|
*/
|
|
function effectiveNow() {
|
|
return moment().add(lockSeconds, 'seconds');
|
|
}
|
|
|
|
let sessions = schedEditor.find(".session").not(".readonly");
|
|
let sessionConstraints = sessions.find('.constraints > span');
|
|
let timeslots = schedEditor.find(".timeslot");
|
|
let timeslotLabels = schedEditor.find(".time-label");
|
|
let swapDaysButtons = schedEditor.find('.swap-days');
|
|
let swapTimeslotButtons = schedEditor.find('.swap-timeslot-col');
|
|
let days = schedEditor.find(".day-flow .day");
|
|
let officialSchedule = schedEditor.hasClass('official-schedule');
|
|
let timeSlotTypeInputs = schedEditor.find('.timeslot-type-toggles input');
|
|
let sessionPurposeInputs = schedEditor.find('.session-purpose-toggles input');
|
|
let timeSlotGroupInputs = schedEditor.find("#timeslot-group-toggles-modal .modal-body .individual-timeslots input");
|
|
let sessionParentInputs = schedEditor.find(".session-parent-toggles input");
|
|
const classes_to_hide = '.hidden-timeslot-group,.hidden-timeslot-type';
|
|
|
|
// hack to work around lack of position sticky support in old browsers, see https://caniuse.com/#feat=css-sticky
|
|
if (schedEditor.find(".scheduling-panel").css("position") !== "sticky") {
|
|
schedEditor.find(".scheduling-panel").css("position", "fixed");
|
|
schedEditor.css("padding-bottom", "14em");
|
|
}
|
|
|
|
/**
|
|
* Parse a timestamp using meeting-local time zone if the timestamp does not specify one.
|
|
*/
|
|
function parseISOTimestamp(s) {
|
|
return moment.tz(s, moment.ISO_8601, meetingTimeZone);
|
|
}
|
|
|
|
function startMoment(timeslot) {
|
|
return parseISOTimestamp(timeslot.data('start'));
|
|
}
|
|
|
|
function endMoment(timeslot) {
|
|
return parseISOTimestamp(timeslot.data('end'));
|
|
}
|
|
|
|
function findTimeslotsOverlapping(intervals) {
|
|
let res = [];
|
|
|
|
timeslots.each(function () {
|
|
const timeslot = jQuery(this);
|
|
let start = startMoment(timeslot);
|
|
let end = endMoment(timeslot);
|
|
|
|
for (let i = 0; i < intervals.length; ++i) {
|
|
if (end >= intervals[i][0] && intervals[i][1] >= start) {
|
|
res.push(timeslot);
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
|
|
return res;
|
|
}
|
|
|
|
// selecting
|
|
function selectSessionElement(element) {
|
|
sessions.removeClass("other-session-selected");
|
|
if (element) {
|
|
sessions.not(element).removeClass("selected");
|
|
jQuery(element).addClass("selected");
|
|
|
|
showConstraintHints(element);
|
|
showTimeSlotTypeIndicators(element.dataset.type);
|
|
|
|
let sessionInfoContainer = schedEditor.find(".scheduling-panel .session-info-container");
|
|
sessionInfoContainer.html(jQuery(element).find(".session-info").html());
|
|
|
|
sessionInfoContainer.find("[data-original-title]").tooltip();
|
|
|
|
sessionInfoContainer.find(".time").text(jQuery(element).closest(".timeslot").data('scheduledatlabel'));
|
|
|
|
sessionInfoContainer.find(".other-session").each(function () {
|
|
let otherSessionElement = sessions.filter("#session" + this.dataset.othersessionid).first();
|
|
let scheduledAt = otherSessionElement.closest(".timeslot").data('scheduledatlabel');
|
|
let timeElement = jQuery(this).find(".time");
|
|
|
|
otherSessionElement.addClass("other-session-selected");
|
|
if (scheduledAt) {
|
|
timeElement.text(timeElement.data('scheduled').replace('{time}', scheduledAt));
|
|
} else {
|
|
timeElement.text(timeElement.data('notscheduled'));
|
|
}
|
|
});
|
|
} else {
|
|
sessions.removeClass("selected");
|
|
showConstraintHints();
|
|
resetTimeSlotTypeIndicators();
|
|
schedEditor.find(".scheduling-panel .session-info-container").html("");
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Mark or unmark a session that conflicts with the selected session
|
|
*
|
|
* @param constraintElt The element corresponding to the specific constraint
|
|
* @param wouldViolate True to mark or false to unmark
|
|
*/
|
|
function setSessionWouldViolate(constraintElt, wouldViolate) {
|
|
constraintElt = jQuery(constraintElt);
|
|
let constraintDiv = constraintElt.closest('div.session'); // find enclosing session div
|
|
constraintDiv.toggleClass('would-violate-hint', wouldViolate); // mark the session container
|
|
constraintElt.toggleClass('would-violate-hint', wouldViolate); // and the specific constraint
|
|
}
|
|
|
|
/**
|
|
* Mark or unmark a timeslot that conflicts with the selected session
|
|
*
|
|
* If wholeInterval is true, marks the entire column in addition to the timeslot.
|
|
* This currently works by setting the class for the timeslot and the time-label
|
|
* in its column. Because this is called for every timeslot in the interval, the
|
|
* overall effect is to highlight the entire column.
|
|
*
|
|
* @param timeslotElt Timeslot element to be marked/unmarked
|
|
* @param wouldViolate True to mark or false to unmark
|
|
* @param wholeInterval Should the entire time interval be flagged or just the timeslot?
|
|
*/
|
|
function setTimeslotWouldViolate(timeslotElt, wouldViolate, wholeInterval) {
|
|
timeslotElt = jQuery(timeslotElt);
|
|
timeslotElt.toggleClass('would-violate-hint', wouldViolate);
|
|
if (wholeInterval) {
|
|
let index = timeslotElt.index(); // position of this timeslot relative to its container
|
|
let label = timeslotElt
|
|
.closest('div.room-group')
|
|
.find('div.time-header .time-label')
|
|
.get(index); // get time-label corresponding to this timeslot
|
|
jQuery(label).toggleClass('would-violate-hint', wouldViolate);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Remove all would-violate-hint classes on timeslots
|
|
*/
|
|
function resetTimeslotsWouldViolate() {
|
|
timeslots.removeClass("would-violate-hint");
|
|
timeslotLabels.removeClass("would-violate-hint");
|
|
}
|
|
|
|
/**
|
|
* Remove all would-violate-hint classes on sessions and their formatted constraints
|
|
*/
|
|
function resetSessionsWouldViolate() {
|
|
sessions.removeClass("would-violate-hint");
|
|
sessionConstraints.removeClass("would-violate-hint");
|
|
}
|
|
|
|
function showConstraintHints(selectedSession) {
|
|
let sessionId = selectedSession ? selectedSession.id.slice("session".length) : null;
|
|
// hints on the sessions
|
|
resetSessionsWouldViolate();
|
|
if (sessionId) {
|
|
sessionConstraints.each(function () {
|
|
let sessionIds = this.dataset.sessions;
|
|
if (sessionIds && (sessionIds.split(",").indexOf(sessionId) !== -1)) {
|
|
setSessionWouldViolate(this, true);
|
|
}
|
|
});
|
|
}
|
|
|
|
// hints on timeslots
|
|
resetTimeslotsWouldViolate();
|
|
if (selectedSession) {
|
|
let intervals = [];
|
|
timeslots.filter(":has(.session .constraints > span.would-violate-hint)").each(function () {
|
|
intervals.push(
|
|
[parseISOTimestamp(this.dataset.start), parseISOTimestamp(this.dataset.end)]
|
|
);
|
|
});
|
|
|
|
let overlappingTimeslots = findTimeslotsOverlapping(intervals);
|
|
for (let i = 0; i < overlappingTimeslots.length; ++i) {
|
|
setTimeslotWouldViolate(overlappingTimeslots[i], true, true);
|
|
}
|
|
|
|
// check room sizes
|
|
let attendees = +selectedSession.dataset.attendees;
|
|
if (attendees) {
|
|
timeslots.not(".would-violate-hint").each(function () {
|
|
if (attendees > +jQuery(this).closest(".timeslots").data("roomcapacity")) {
|
|
setTimeslotWouldViolate(this, true, false);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Remove timeslot classes indicating timeslot type disagreement
|
|
*/
|
|
function resetTimeSlotTypeIndicators() {
|
|
timeslots.removeClass('wrong-timeslot-type');
|
|
}
|
|
|
|
/**
|
|
* Add timeslot classes indicating timeslot type disagreement
|
|
*
|
|
* @param timeslot_type
|
|
*/
|
|
function showTimeSlotTypeIndicators(timeslot_type) {
|
|
timeslots.removeClass('wrong-timeslot-type');
|
|
timeslots.filter('[data-type!="' + timeslot_type + '"]').addClass('wrong-timeslot-type');
|
|
}
|
|
|
|
/**
|
|
* Should this timeslot be treated as a future timeslot?
|
|
*
|
|
* @param timeslot timeslot to test
|
|
* @param now (optional) threshold time (defaults to effectiveNow())
|
|
* @returns Boolean true if the timeslot is in the future
|
|
*/
|
|
function isFutureTimeslot(timeslot, now) {
|
|
// resist the temptation to use native JS Date parsing, it is hopelessly broken
|
|
const timeslot_time = startMoment(timeslot);
|
|
return timeslot_time.isAfter(now || effectiveNow());
|
|
}
|
|
|
|
function hidePastTimeslotHints() {
|
|
timeslots.removeClass('past-hint');
|
|
}
|
|
|
|
function showPastTimeslotHints() {
|
|
timeslots.filter('.past').addClass('past-hint');
|
|
}
|
|
|
|
function updatePastTimeslots() {
|
|
const now = effectiveNow();
|
|
|
|
// mark timeslots
|
|
timeslots.filter(':not(.past)')
|
|
.filter((_, ts) => !isFutureTimeslot(jQuery(ts), now))
|
|
.addClass('past');
|
|
|
|
// hide swap day/timeslot column buttons
|
|
if (officialSchedule) {
|
|
swapDaysButtons.filter(
|
|
(_, elt) => parseISOTimestamp(elt.closest('*[data-start]').dataset.start).isSameOrBefore(now, 'day')
|
|
).hide();
|
|
swapTimeslotButtons.filter(
|
|
(_, elt) => parseISOTimestamp(elt.closest('*[data-start]').dataset.start).isSameOrBefore(now, 'minute')
|
|
).hide();
|
|
}
|
|
}
|
|
|
|
function canEditSession(session) {
|
|
if (!officialSchedule) {
|
|
return true;
|
|
}
|
|
|
|
const timeslot = jQuery(session).closest('div.timeslot');
|
|
if (timeslot.length === 0) {
|
|
return true;
|
|
}
|
|
|
|
return isFutureTimeslot(timeslot);
|
|
}
|
|
|
|
schedEditor.on("click", function (event) {
|
|
if (!(
|
|
jQuery(event.target).is('.session-info-container') ||
|
|
jQuery(event.target).closest('.session-info-container').length > 0
|
|
)) {
|
|
selectSessionElement(null);
|
|
}
|
|
});
|
|
|
|
sessions.on("click", function (event) {
|
|
event.stopPropagation();
|
|
// do not allow hidden sessions to be selected
|
|
if (!jQuery(this).hasClass('hidden-parent')) {
|
|
selectSessionElement(this);
|
|
}
|
|
});
|
|
|
|
// Was this drag started by dragging a session?
|
|
function isSessionDragEvent(event) {
|
|
return Boolean(event.originalEvent.dataTransfer.getData(dnd_mime_type));
|
|
}
|
|
|
|
/**
|
|
* Get the session element being dragged
|
|
*
|
|
* @param event drag-related event
|
|
*/
|
|
function getDraggedSession(event) {
|
|
if (!isSessionDragEvent(event)) {
|
|
return null;
|
|
}
|
|
const sessionId = event.originalEvent.dataTransfer.getData(dnd_mime_type);
|
|
const sessionElements = sessions.filter("#" + sessionId);
|
|
if (sessionElements.length > 0) {
|
|
return sessionElements[0];
|
|
}
|
|
return null;
|
|
}
|
|
|
|
/**
|
|
* Can a session be dropped in this element?
|
|
*
|
|
* Drop is allowed in drop-zones that are in unassigned-session or timeslot containers
|
|
* not marked as 'past'.
|
|
*/
|
|
function sessionDropAllowed(dropElement, sessionElement) {
|
|
const relevant_parent = dropElement.closest('.timeslot, .unassigned-sessions');
|
|
if (!relevant_parent || !sessionElement) {
|
|
return false;
|
|
}
|
|
|
|
if (officialSchedule && relevant_parent.classList.contains('past')) {
|
|
return false;
|
|
}
|
|
|
|
return !relevant_parent.dataset.type || (
|
|
relevant_parent.dataset.type === sessionElement.dataset.type
|
|
);
|
|
}
|
|
|
|
if (!schedEditor.find(".edit-grid").hasClass("read-only")) {
|
|
// dragging
|
|
sessions.on("dragstart", function (event) {
|
|
if (canEditSession(this)) {
|
|
event.originalEvent.dataTransfer.setData(dnd_mime_type, this.id);
|
|
jQuery(this).addClass("dragging");
|
|
selectSessionElement(this);
|
|
showPastTimeslotHints();
|
|
} else {
|
|
event.preventDefault(); // do not start the drag
|
|
}
|
|
});
|
|
sessions.on("dragend", function () {
|
|
jQuery(this).removeClass("dragging");
|
|
hidePastTimeslotHints();
|
|
});
|
|
|
|
sessions.prop('draggable', true);
|
|
|
|
// dropping
|
|
let dropElements = schedEditor.find(".timeslot .drop-target,.unassigned-sessions .drop-target");
|
|
dropElements.on('dragenter', function (event) {
|
|
if (sessionDropAllowed(this, getDraggedSession(event))) {
|
|
event.preventDefault(); // default action is signalling that this is not a valid target
|
|
jQuery(this).parent().addClass("dropping");
|
|
}
|
|
});
|
|
|
|
dropElements.on('dragover', function (event) {
|
|
// we don't actually need this event, except we need to signal
|
|
// that this is a valid drop target, by cancelling the default
|
|
// action
|
|
if (sessionDropAllowed(this, getDraggedSession(event))) {
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
|
|
dropElements.on('dragleave', function (event) {
|
|
// skip dragleave events if they are to children
|
|
const leaving_child = event.originalEvent.currentTarget.contains(event.originalEvent.relatedTarget);
|
|
if (!leaving_child && sessionDropAllowed(this, getDraggedSession(event))) {
|
|
jQuery(this).parent().removeClass('dropping');
|
|
}
|
|
});
|
|
|
|
dropElements.on('drop', function (event) {
|
|
let dropElement = jQuery(this);
|
|
|
|
const sessionElement = getDraggedSession(event);
|
|
if (!sessionElement) {
|
|
// not drag event or not from a session we recognize
|
|
dropElement.parent().removeClass("dropping");
|
|
return;
|
|
}
|
|
|
|
if (!sessionDropAllowed(this, sessionElement)) {
|
|
dropElement.parent().removeClass("dropping"); // just in case
|
|
return; // drop not allowed
|
|
}
|
|
|
|
event.preventDefault(); // prevent opening as link
|
|
|
|
let dragParent = jQuery(sessionElement).parent();
|
|
if (dragParent.is(this)) {
|
|
dropElement.parent().removeClass("dropping");
|
|
return;
|
|
}
|
|
|
|
let dropParent = dropElement.parent();
|
|
|
|
function failHandler(xhr, textStatus, error) {
|
|
dropElement.parent().removeClass("dropping");
|
|
reportServerError(xhr, textStatus, error);
|
|
}
|
|
|
|
function done(response) {
|
|
dropElement.parent().removeClass("dropping");
|
|
|
|
if (!response.success) {
|
|
reportServerError(null, null, response);
|
|
return;
|
|
}
|
|
|
|
dropElement.append(sessionElement); // move element
|
|
if (response.tombstone) {
|
|
dragParent.append(response.tombstone);
|
|
}
|
|
|
|
updateCurrentSchedulingHints();
|
|
if (dropParent.hasClass("unassigned-sessions")) {
|
|
sortUnassigned();
|
|
}
|
|
}
|
|
|
|
if (dropParent.hasClass("unassigned-sessions")) {
|
|
ajaxCall(
|
|
"unassign",
|
|
{ session: sessionElement.id.slice('session'.length) }
|
|
).fail(failHandler)
|
|
.done(done);
|
|
} else {
|
|
ajaxCall(
|
|
"assign",
|
|
{
|
|
session: sessionElement.id.slice("session".length),
|
|
timeslot: dropParent.attr("id").slice("timeslot".length)
|
|
}
|
|
).fail(failHandler)
|
|
.done(done);
|
|
}
|
|
});
|
|
|
|
|
|
// Helpers for swap days / timeslots
|
|
// Enable or disable a swap modal's submit button
|
|
let updateSwapSubmitButton = function (modal, inputName) {
|
|
modal.find("button[type=submit]").prop(
|
|
"disabled",
|
|
modal.find("input[name='" + inputName + "']:checked").length === 0
|
|
);
|
|
};
|
|
|
|
// Disable a particular swap modal radio input
|
|
let updateSwapRadios = function (labels, radios, disableValue, datePrecision) {
|
|
labels.removeClass('text-muted');
|
|
radios.prop('disabled', false);
|
|
radios.prop('checked', false);
|
|
// disable the input requested by value
|
|
let disableInput = radios.filter('[value="' + disableValue + '"]');
|
|
if (disableInput) {
|
|
disableInput.parent().addClass('text-muted');
|
|
disableInput.prop('disabled', true);
|
|
}
|
|
if (officialSchedule) {
|
|
// disable any that have passed
|
|
const now=effectiveNow();
|
|
const past_radios = radios.filter(
|
|
(_, radio) => parseISOTimestamp(radio.closest('*[data-start]').dataset.start).isSameOrBefore(now, datePrecision)
|
|
);
|
|
past_radios.parent().addClass('text-muted');
|
|
past_radios.prop('disabled', true);
|
|
}
|
|
return disableInput; // return the input that was specifically disabled, if any
|
|
};
|
|
|
|
// swap days
|
|
let swapDaysModal = schedEditor.find("#swap-days-modal");
|
|
let swapDaysLabels = swapDaysModal.find(".modal-body label");
|
|
let swapDaysRadios = swapDaysLabels.find('input[name=target_day]');
|
|
let updateSwapDaysSubmitButton = function () {
|
|
updateSwapSubmitButton(swapDaysModal, 'target_day');
|
|
};
|
|
// handler to prep and open the modal
|
|
schedEditor.find(".swap-days").on("click", function () {
|
|
let originDay = this.dataset.dayid;
|
|
let originRadio = updateSwapRadios(swapDaysLabels, swapDaysRadios, originDay, 'day');
|
|
|
|
// Fill in label in the modal title
|
|
swapDaysModal.find(".modal-title .day").text(originRadio.parent().text().trim());
|
|
|
|
// Fill in the hidden form fields
|
|
swapDaysModal.find("input[name=source_day]").val(originDay);
|
|
|
|
updateSwapDaysSubmitButton();
|
|
swapDaysModal.modal('show'); // show via JS so it won't open until it is initialized
|
|
});
|
|
swapDaysRadios.on("change", function () {updateSwapDaysSubmitButton();});
|
|
|
|
// swap timeslot columns
|
|
let swapTimeslotsModal = schedEditor.find('#swap-timeslot-col-modal');
|
|
let swapTimeslotsLabels = swapTimeslotsModal.find(".modal-body label");
|
|
let swapTimeslotsRadios = swapTimeslotsLabels.find('input[name=target_timeslot]');
|
|
let updateSwapTimeslotsSubmitButton = function () {
|
|
updateSwapSubmitButton(swapTimeslotsModal, 'target_timeslot');
|
|
};
|
|
// handler to prep and open the modal
|
|
schedEditor.find('.swap-timeslot-col').on('click', function() {
|
|
let roomGroup = this.closest('.room-group').dataset;
|
|
updateSwapRadios(swapTimeslotsLabels, swapTimeslotsRadios, this.dataset.timeslotPk, 'minute');
|
|
|
|
// show only options for this room group
|
|
swapTimeslotsModal.find('.room-group').hide();
|
|
swapTimeslotsModal.find('.room-group-' + roomGroup.index).show();
|
|
|
|
// Fill in label in the modal title
|
|
swapTimeslotsModal.find('.modal-title .origin-label').text(this.dataset.originLabel);
|
|
|
|
// Fill in the hidden form fields
|
|
swapTimeslotsModal.find('input[name="origin_timeslot"]').val(this.dataset.timeslotPk);
|
|
swapTimeslotsModal.find('input[name="rooms"]').val(roomGroup.rooms);
|
|
|
|
// Open the modal via JS so it won't open until it is initialized
|
|
updateSwapTimeslotsSubmitButton();
|
|
swapTimeslotsModal.modal('show');
|
|
});
|
|
swapTimeslotsRadios.on("change", function () {updateSwapTimeslotsSubmitButton();});
|
|
}
|
|
|
|
// hints for the current schedule
|
|
|
|
/** Find all pairs of overlapping intervals
|
|
*
|
|
* @param data Array of arbitrary interval-like objects with 'start' and 'end' properties
|
|
* @returns Map from data item index to a list of overlapping data item indexes
|
|
*/
|
|
function findOverlappingIntervals(data) {
|
|
const overlaps = {}; // results
|
|
// Build ordered lists of start/end times, keeping track of the original index for each item
|
|
const startIndexes = data.map((d, i) => ({time: d.start, index: i}));
|
|
startIndexes.sort((a, b) => (b.time - a.time)); // sort reversed
|
|
const endIndexes = data.map((d, i) => ({time: d.end, index: i}));
|
|
endIndexes.sort((a, b) => (b.time - a.time)); // sort reversed
|
|
|
|
// items are sorted in reverse, so pop() will get the earliest item from each list
|
|
let nextStart = startIndexes.pop();
|
|
let nextEnd = endIndexes.pop();
|
|
const openIntervalIndexes = [];
|
|
while (nextStart && nextEnd) {
|
|
if (nextStart.time < nextEnd.time) {
|
|
// an interval opened - it overlaps all open intervals and all open intervals overlap it
|
|
for (const intervalIndex of openIntervalIndexes) {
|
|
overlaps[intervalIndex].push(nextStart.index);
|
|
}
|
|
overlaps[nextStart.index] = [...openIntervalIndexes]; // make a copy of the open list
|
|
openIntervalIndexes.push(nextStart.index);
|
|
nextStart = startIndexes.pop();
|
|
} else {
|
|
// an interval closed - remove its index from the list of open intervals
|
|
openIntervalIndexes.splice(openIntervalIndexes.indexOf(nextEnd.index), 1);
|
|
nextEnd = endIndexes.pop();
|
|
}
|
|
}
|
|
return overlaps;
|
|
}
|
|
|
|
function updateSessionConstraintViolations() {
|
|
let scheduledSessions = [];
|
|
sessions.each(function () {
|
|
let timeslot = jQuery(this).closest(".timeslot");
|
|
if (timeslot.length === 1) {
|
|
scheduledSessions.push({
|
|
start: startMoment(timeslot),
|
|
end: endMoment(timeslot),
|
|
id: this.id.slice('session'.length),
|
|
element: jQuery(this),
|
|
timeslot: timeslot.get(0)
|
|
});
|
|
}
|
|
});
|
|
|
|
// helper function to mark constraint violations
|
|
const markSessionConstraintViolations = function (sess, currentlyOpen) {
|
|
sess.element.find(".constraints > span").each(function() {
|
|
let sessionIds = this.dataset.sessions;
|
|
|
|
let violated = sessionIds && sessionIds.split(",").filter(function (v) {
|
|
return (
|
|
v !== sess.id &&
|
|
v in currentlyOpen &&
|
|
// ignore errors within the same timeslot
|
|
// under the assumption that the sessions
|
|
// in the timeslot happen sequentially
|
|
sess.timeslot !== currentlyOpen[v].timeslot
|
|
);
|
|
}).length > 0;
|
|
|
|
jQuery(this).toggleClass("violated-hint", violated);
|
|
});
|
|
};
|
|
|
|
// now go through the sessions and mark constraint violations
|
|
const overlaps = findOverlappingIntervals(scheduledSessions);
|
|
for (const index in overlaps) {
|
|
const currentlyOpen = {};
|
|
for (const overlapIndex of overlaps[index]) {
|
|
const otherSess = scheduledSessions[overlapIndex];
|
|
currentlyOpen[otherSess.id] = otherSess;
|
|
}
|
|
markSessionConstraintViolations(scheduledSessions[index], currentlyOpen);
|
|
}
|
|
}
|
|
|
|
function updateTimeSlotDurationViolations() {
|
|
timeslots.each(function () {
|
|
let total = 0;
|
|
jQuery(this).find(".session").each(function () {
|
|
total += +jQuery(this).data("duration");
|
|
});
|
|
|
|
jQuery(this).toggleClass("overfull", total > +jQuery(this).data("duration"));
|
|
});
|
|
}
|
|
|
|
function updateAttendeesViolations() {
|
|
sessions.each(function () {
|
|
let roomCapacity = jQuery(this).closest(".timeslots").data("roomcapacity");
|
|
if (roomCapacity && this.dataset.attendees) {
|
|
jQuery(this).toggleClass("too-many-attendees", +this.dataset.attendees > +roomCapacity);
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateCurrentSchedulingHints() {
|
|
updateSessionConstraintViolations();
|
|
updateAttendeesViolations();
|
|
updateTimeSlotDurationViolations();
|
|
}
|
|
|
|
updateCurrentSchedulingHints();
|
|
|
|
// sorting unassigned
|
|
function sortArrayWithKeyFunctions(array, keyFunctions) {
|
|
function compareArrays(a, b) {
|
|
for (let i = 1; i < a.length; ++i) {
|
|
let ai = a[i];
|
|
let bi = b[i];
|
|
|
|
if (ai > bi) {
|
|
return 1;
|
|
} else if (ai < bi) {
|
|
return -1;
|
|
}
|
|
}
|
|
|
|
return 0;
|
|
}
|
|
|
|
let arrayWithSortKeys = array.map(function (a) {
|
|
let res = [a];
|
|
for (let i = 0; i < keyFunctions.length; ++i) {
|
|
res.push(keyFunctions[i](a));
|
|
}
|
|
return res;
|
|
});
|
|
|
|
arrayWithSortKeys.sort(compareArrays);
|
|
|
|
return arrayWithSortKeys.map(function (l) {
|
|
return l[0];
|
|
});
|
|
}
|
|
|
|
function sortUnassigned() {
|
|
let sortBy = schedEditor.find("select[name=sort_unassigned]").val();
|
|
|
|
function extractId(e) {
|
|
return e.id.slice("session".length);
|
|
}
|
|
|
|
function extractName(e) {
|
|
let labelElement = e.querySelector(".session-label");
|
|
return labelElement ? labelElement.innerHTML : '';
|
|
}
|
|
|
|
function extractParent(e) {
|
|
let parentElement = e.querySelector(".session-parent");
|
|
return parentElement ? parentElement.innerHTML : '';
|
|
}
|
|
|
|
function extractDuration(e) {
|
|
return +e.dataset.duration;
|
|
}
|
|
|
|
function extractComments(e) {
|
|
return e.querySelector(".session-info .comments") ? 0 : 1;
|
|
}
|
|
|
|
const keyFunctionMap = {
|
|
name: [extractName, extractDuration, extractId],
|
|
parent: [extractParent, extractName, extractDuration, extractId],
|
|
duration: [extractDuration, extractParent, extractName, extractId],
|
|
comments: [extractComments, extractParent, extractName, extractDuration, extractId]
|
|
};
|
|
let keyFunctions = keyFunctionMap[sortBy];
|
|
|
|
let unassignedSessionsContainer = schedEditor.find(".unassigned-sessions .drop-target");
|
|
|
|
let sortedSessions = sortArrayWithKeyFunctions(unassignedSessionsContainer.children(".session").toArray(), keyFunctions);
|
|
for (let i = 0; i < sortedSessions.length; ++i) {
|
|
unassignedSessionsContainer.append(sortedSessions[i]);
|
|
}
|
|
}
|
|
|
|
schedEditor.find("select[name=sort_unassigned]").on("change click", function () {
|
|
sortUnassigned();
|
|
});
|
|
|
|
sortUnassigned();
|
|
|
|
// toggling visible sessions by session parents
|
|
|
|
function setSessionHiddenParent(sess, hide) {
|
|
sess.toggleClass('hidden-parent', hide);
|
|
sess.prop('draggable', !hide);
|
|
}
|
|
|
|
function updateSessionParentToggling() {
|
|
let checked = [];
|
|
sessionParentInputs.filter(":checked").each(function () {
|
|
checked.push(".parent-" + this.value);
|
|
});
|
|
|
|
setSessionHiddenParent(sessions.not(".untoggleable-by-parent").filter(checked.join(",")), false);
|
|
setSessionHiddenParent(sessions.not(".untoggleable-by-parent").not(checked.join(",")), true);
|
|
}
|
|
|
|
sessionParentInputs.on("click", updateSessionParentToggling);
|
|
updateSessionParentToggling();
|
|
|
|
// Toggling timeslot types
|
|
function updateTimeSlotTypeToggling() {
|
|
const checkedTypes = jQuery.map(timeSlotTypeInputs.filter(":checked"), elt => elt.value);
|
|
const checkedSelectors = checkedTypes.map(t => '[data-type="' + t + '"]').join(",");
|
|
|
|
sessions.filter(checkedSelectors).removeClass('hidden-timeslot-type');
|
|
sessions.not(checkedSelectors).addClass('hidden-timeslot-type');
|
|
timeslots.filter(checkedSelectors).removeClass('hidden-timeslot-type');
|
|
timeslots.not(checkedSelectors).addClass('hidden-timeslot-type');
|
|
updateGridVisibility();
|
|
return checkedTypes;
|
|
}
|
|
|
|
function updateTimeSlotTypeTogglingAndSave() {
|
|
const checkedTypes = updateTimeSlotTypeToggling();
|
|
ajaxCall('updateview', {enabled_timeslot_types: checkedTypes});
|
|
}
|
|
|
|
// Toggling session purposes
|
|
function updateSessionPurposeToggling() {
|
|
let checked = [];
|
|
sessionPurposeInputs.filter(":checked").each(function () {
|
|
checked.push(".purpose-" + this.value);
|
|
});
|
|
|
|
sessions.filter(checked.join(",")).removeClass('hidden-purpose');
|
|
sessions.not(checked.join(",")).addClass('hidden-purpose');
|
|
}
|
|
|
|
if (timeSlotTypeInputs.length > 0) {
|
|
timeSlotTypeInputs.on("change", updateTimeSlotTypeTogglingAndSave);
|
|
updateTimeSlotTypeToggling();
|
|
schedEditor.find('#timeslot-type-toggles-modal .timeslot-type-toggles .select-all')
|
|
.get(0)
|
|
.addEventListener(
|
|
'click',
|
|
function() {
|
|
timeSlotTypeInputs.prop('checked', true);
|
|
updateTimeSlotTypeTogglingAndSave();
|
|
});
|
|
schedEditor.find('#timeslot-type-toggles-modal .timeslot-type-toggles .clear-all')
|
|
.get(0)
|
|
.addEventListener(
|
|
'click',
|
|
function() {
|
|
timeSlotTypeInputs.prop('checked', false);
|
|
updateTimeSlotTypeTogglingAndSave();
|
|
});
|
|
}
|
|
|
|
if (sessionPurposeInputs.length > 0) {
|
|
sessionPurposeInputs.on("change", updateSessionPurposeToggling);
|
|
updateSessionPurposeToggling();
|
|
schedEditor.find('#session-toggles-modal .select-all')
|
|
.get(0)
|
|
.addEventListener(
|
|
'click',
|
|
function() {
|
|
sessionPurposeInputs.not(':disabled').prop('checked', true);
|
|
updateSessionPurposeToggling();
|
|
});
|
|
schedEditor.find('#session-toggles-modal .clear-all')
|
|
.get(0)
|
|
.addEventListener(
|
|
'click',
|
|
function() {
|
|
sessionPurposeInputs.not(':disabled').prop('checked', false);
|
|
updateSessionPurposeToggling();
|
|
});
|
|
}
|
|
|
|
// toggling visible timeslots
|
|
function updateTimeSlotGroupToggling() {
|
|
let checked = [];
|
|
timeSlotGroupInputs.filter(":checked").each(function () {
|
|
checked.push("." + this.value);
|
|
});
|
|
|
|
timeslots.filter(checked.join(",")).removeClass("hidden-timeslot-group");
|
|
timeslots.not(checked.join(",")).addClass("hidden-timeslot-group");
|
|
updateGridVisibility();
|
|
}
|
|
|
|
function updateSessionPurposeOptions() {
|
|
sessionPurposeInputs.each((_, purpose_input) => {
|
|
if (sessions
|
|
.filter('.purpose-' + purpose_input.value)
|
|
.not('.hidden')
|
|
.length === 0) {
|
|
purpose_input.setAttribute('disabled', 'disabled');
|
|
purpose_input.closest('.session-purpose-toggle').classList.add('text-muted');
|
|
} else {
|
|
purpose_input.removeAttribute('disabled');
|
|
purpose_input.closest('.session-purpose-toggle').classList.remove('text-muted');
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Hide timeslot toggles for hidden timeslots
|
|
*/
|
|
function updateTimeSlotOptions() {
|
|
timeSlotGroupInputs.each((_, timeslot_input) => {
|
|
if (timeslots
|
|
.filter('.' + timeslot_input.value)
|
|
.not('.hidden-timeslot-type')
|
|
.length === 0) {
|
|
timeslot_input.setAttribute('disabled', 'disabled');
|
|
} else {
|
|
timeslot_input.removeAttribute('disabled');
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Make timeslots visible/invisible/hidden
|
|
*
|
|
* Responsible for final determination of whether a timeslot is visible, invisible, or hidden.
|
|
*/
|
|
function updateTimeSlotVisibility() {
|
|
timeslots.not(classes_to_hide).removeClass('hidden');
|
|
timeslots.filter(classes_to_hide).addClass('hidden');
|
|
}
|
|
|
|
/**
|
|
* Make sessions visible/invisible/hidden
|
|
*
|
|
* Responsible for final determination of whether a session is visible or hidden.
|
|
*/
|
|
function updateSessionVisibility() {
|
|
sessions.not(classes_to_hide).removeClass('hidden');
|
|
sessions.filter(classes_to_hide).addClass('hidden');
|
|
}
|
|
|
|
/**
|
|
* Make day / time headers visible / hidden to match visible grid contents
|
|
*/
|
|
function updateHeaderVisibility() {
|
|
days.each(function () {
|
|
jQuery(this).toggle(jQuery(this).find(".timeslot").not(".hidden").length > 0);
|
|
});
|
|
|
|
const rgs = schedEditor.find('.day-flow .room-group');
|
|
rgs.each(function (index, roomGroup) {
|
|
const headerLabels = jQuery(roomGroup).find('.time-header .time-label');
|
|
const rgTimeslots = jQuery(roomGroup).find('.timeslot');
|
|
headerLabels.each(function(index, label) {
|
|
jQuery(label).toggle(
|
|
rgTimeslots
|
|
.filter('[data-start="' + label.dataset.start + '"][data-end="' + label.dataset.end + '"]')
|
|
.not('.hidden')
|
|
.length > 0
|
|
);
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Update visibility of room rows
|
|
*/
|
|
function updateRoomVisibility() {
|
|
const tsContainers = { toShow: [], toHide: [] };
|
|
const roomGroups = { toShow: [], toHide: [] };
|
|
// roomsWithVisibleSlots is an array of room IDs that have at least one visible timeslot
|
|
let roomsWithVisibleSlots = schedEditor.find('.day-flow .timeslots')
|
|
.has('.timeslot:not(.hidden)')
|
|
.map((_, e) => e.dataset.roomId).get();
|
|
roomsWithVisibleSlots = [...new Set(roomsWithVisibleSlots)]; // unique-ify by converting to Set and back
|
|
|
|
/* The "timeslots" class identifies elements (now and probably always <div>s) that are containers (i.e.,
|
|
* parents) of timeslots (elements with the "timeslot" class). Sort these containers based on whether
|
|
* their room has at least one timeslot visible - if so, we will show it, if not it will be hidden.
|
|
* This will hide containers both in the day-flow and room label sections, so it will hide the room
|
|
* labels for rooms with no visible timeslots. */
|
|
schedEditor.find('.timeslots').each((_, e) => {
|
|
if (roomsWithVisibleSlots.indexOf(e.dataset.roomId) === -1) {
|
|
tsContainers.toHide.push(e);
|
|
} else {
|
|
tsContainers.toShow.push(e);
|
|
}
|
|
});
|
|
|
|
/* Now check whether each room group has any rooms not being hidden. If not, entirely hide the
|
|
* room group so that all its headers, etc, do not take up space. */
|
|
schedEditor.find('.room-group').each((_, e) => {
|
|
if (jQuery(e).has(tsContainers.toShow).length > 0) {
|
|
roomGroups.toShow.push(e);
|
|
} else {
|
|
roomGroups.toHide.push(e);
|
|
}
|
|
});
|
|
jQuery(roomGroups.toShow).show();
|
|
jQuery(roomGroups.toHide).hide();
|
|
jQuery(tsContainers.toShow).show();
|
|
jQuery(tsContainers.toHide).hide();
|
|
}
|
|
|
|
/**
|
|
* Update visibility of UI elements
|
|
*
|
|
* Call this after changing 'hidden-*' classes on timeslots
|
|
*/
|
|
function updateGridVisibility() {
|
|
updateTimeSlotVisibility();
|
|
updateSessionVisibility();
|
|
updateHeaderVisibility();
|
|
updateRoomVisibility();
|
|
updateTimeSlotOptions();
|
|
updateSessionPurposeOptions();
|
|
schedEditor.find('div.edit-grid').removeClass('hidden');
|
|
}
|
|
|
|
timeSlotGroupInputs.on("click change", updateTimeSlotGroupToggling);
|
|
schedEditor.find('#timeslot-group-toggles-modal .timeslot-group-buttons .select-all')
|
|
.get(0)
|
|
.addEventListener(
|
|
'click',
|
|
function() {
|
|
timeSlotGroupInputs.not(':disabled').prop('checked', true);
|
|
updateTimeSlotGroupToggling();
|
|
});
|
|
schedEditor.find('#timeslot-group-toggles-modal .timeslot-group-buttons .clear-all')
|
|
.get(0)
|
|
.addEventListener(
|
|
'click',
|
|
function() {
|
|
timeSlotGroupInputs.not(':disabled').prop('checked', false);
|
|
updateTimeSlotGroupToggling();
|
|
});
|
|
|
|
updateTimeSlotGroupToggling();
|
|
updatePastTimeslots();
|
|
setInterval(updatePastTimeslots, 10 * 1000 /* ms */);
|
|
|
|
// session info
|
|
schedEditor.find(".session-info-container")
|
|
.on("mouseover", ".other-session", function () {
|
|
sessions.filter("#session" + this.dataset.othersessionid)
|
|
.addClass("highlight");
|
|
})
|
|
.on("mouseleave", ".other-session", function () {
|
|
sessions.filter("#session" + this.dataset.othersessionid).removeClass("highlight");
|
|
});
|
|
}); |