interq.ens.fr/www/js/calendar.js

// Interval graph coloring algorithm, by Twal
class IntervalColoration {
  constructor(intervals) {
    this.intervals = intervals;
    this.n = this.intervals.length;
    this.computeInterferenceGraph();
    this.computePEO();
    this.computeColoration();
  }

  computeInterferenceGraph() {
    this.adj = new Array(this.n);
    for (let i = 0; i < this.n; ++i) {
      this.adj[i] = [];
    }
    for (let i = 0; i < this.n; ++i) {
      for (let j = 0; j < i; ++j) {
        let inti = this.intervals[i];
        let intj = this.intervals[j];
        if (inti[0] < intj[1] && intj[0] < inti[1]) {
          this.adj[i].push(j);
          this.adj[j].push(i);
        }
      }
    }
  }

  //Perfect elimination order using Maximum Cardinality Search
  //Runs in O(n^2), could be optimized in O(n log n)
  computePEO() {
    let marked = new Array(this.n);
    let nbMarkedNeighbor = new Array(this.n);
    this.perm = new Array(this.n);
    for (let i = 0; i < this.n; ++i) {
      marked[i] = false;
      nbMarkedNeighbor[i] = 0;
    }
    for (let k = this.n - 1; k >= 0; --k) {
      let maxi = -1;
      for (let i = 0; i < this.n; ++i) {
        if (
          !marked[i] &&
          (maxi == -1 || nbMarkedNeighbor[i] >= nbMarkedNeighbor[maxi])
        ) {
          maxi = i;
        }
      }
      for (let i = 0; i < this.adj[maxi].length; ++i) {
        nbMarkedNeighbor[this.adj[maxi][i]] += 1;
      }
      this.perm[maxi] = k;
      marked[maxi] = true;
    }
    // console.log(this.perm);
  }

  computeColoration() {
    this.colors = new Array(this.n);
    let isColorUsed = new Array(this.n);
    for (let i = 0; i < this.n; ++i) {
      this.colors[i] = -1;
      isColorUsed[i] = false;
    }
    for (let i = 0; i < this.n; ++i) {
      let ind = this.perm[i];
      for (let j = 0; j < this.adj[ind].length; ++j) {
        let neigh = this.adj[ind][j];
        if (this.colors[neigh] >= 0) {
          isColorUsed[this.colors[neigh]] = true;
        }
      }
      for (let j = 0; j < this.n; ++j) {
        if (!isColorUsed[j]) {
          this.colors[ind] = j;
          break;
        }
      }
      for (let j = 0; j < this.adj[ind].length; ++j) {
        let neigh = this.adj[ind][j];
        if (this.colors[neigh] >= 0) {
          isColorUsed[this.colors[neigh]] = false;
        }
      }
    }
  }
}

// Based on https://stackoverflow.com/a/15289883
function computeDateDifferenceInHours(date1, date2) {
  d1 = new Date(
    date1.getYear(),
    date1.getMonth(),
    date1.getDate(),
    date1.getHours(),
  );
  d2 = new Date(
    date2.getYear(),
    date2.getMonth(),
    date2.getDate(),
    date2.getHours(),
  );

  const msPerHour = 60 * 60 * 1000;
  return Math.abs(d2.getTime() - d1.getTime()) / msPerHour;
}

class Calendar {
  constructor(calendarParameters = {}) {
    this.containerNode =
      calendarParameters.containerNode !== undefined
        ? calendarParameters.containerNode
        : $("#cal-container");

    this.eventContainerNode = null;
    this.timeSlotsContainerNode = null;
    this.eventDetailsContainerNode = null;

    this.startDate =
      calendarParameters.startDate !== undefined
        ? calendarParameters.startDate
        : new Date();
    this.endDate =
      calendarParameters.endDate !== undefined
        ? calendarParameters.endDate
        : new Date(Date.now() + 24 * 60 * 60 * 1000);

    this.nbHoursToDisplay = 0;
    this.firstHourToDisplay = 0;
    this.endHourToDisplay = 0;

    this.events = [];

    this.onlyDisplaySubscribedEvents =
      calendarParameters.onlyDisplaySubscribedEvents !== undefined
        ? calendarParameters.onlyDisplaySubscribedEvents
        : false;
    this.groupEventsByLocation =
      calendarParameters.groupEventsByLocation !== undefined
        ? calendarParameters.groupEventsByLocation
        : true;

    this.eventDetailURLFormat =
      calendarParameters.eventDetailURLFormat !== undefined
        ? calendarParameters.eventDetailURLFormat
        : "";
    this.subscriptionURLFormat =
      calendarParameters.subscriptionURLFormat !== undefined
        ? calendarParameters.subscriptionURLFormat
        : "";
    this.csrfToken =
      calendarParameters.csrfToken !== undefined
        ? calendarParameters.csrfToken
        : "";

    // Map from locations to their CSS styles
    this.locationStyles = new Map();

    this.init();
  }

  init() {
    this.updateHoursToDisplay();

    this.createTimeSlotContainer();
    this.createEventContainer();
    this.createEventDetailsContainer();

    this.updateTimeSlotContainerGridStyle();
    this.updateEventContainerGridStyle();

    this.createTimeSlots();
    this.createEvents();

    this.createLocationStyles();
    this.applyLocationStylesAsCSS();
    this.updateEventLocationStyleID();

    //this.sortEventNodesByEndTimeAndLocation();
    this.sortEventNodesByIntervalGraphColoring();
    this.updateCalendarNodeHeight();

    this.updateEventVisibilities();
    this.initEventOverflowTooltips();
  }

  // Date change

  setStartDate(newStartDate) {
    this.startDate = newStartDate;

    this.updateHoursToDisplay();
    this.updateEventContainerGridStyle();
    this.updateTimeSlots();

    this.updateEventVisibilities();
    this.updateCalendarNodeHeight();
    this.sortEventNodesByIntervalGraphColoring();

    this.startShowingEventOverflowTooltips();
  }

  setEndDate(newEndDate) {
    this.endDate = newEndDate;

    this.updateHoursToDisplay();
    this.updateEventContainerGridStyle();
    this.updateTimeSlots();

    this.updateEventVisibilities();
    this.updateCalendarNodeHeight();
    this.sortEventNodesByIntervalGraphColoring();

    this.startShowingEventOverflowTooltips();
  }

  updateHoursToDisplay() {
    this.startHourToDisplay = this.startDate.getHours();
    this.endHourToDisplay = this.endDate.getHours();

    this.nbHoursToDisplay = Math.floor(
      computeDateDifferenceInHours(this.startDate, this.endDate),
    );
  }

  // Calendar container

  updateCalendarNodeHeight() {
    // Time slot hour row
    let timeSlotHourRowHeight = $(".cal-time-slot-hour").outerHeight();

    // Event grid
    this.containerNode.css("height", "calc(100% )");

    let eventContainerHeight = this.eventContainerNode
      .css("grid-template-rows")
      .split("px ")
      .reduce((heightAccumulator, currentRowHeight) => {
        return heightAccumulator + parseInt(currentRowHeight);
      }, 0);

    this.containerNode.css(
      "height",
      timeSlotHourRowHeight + eventContainerHeight,
    );
  }

  // Time slots

  createTimeSlotContainer() {
    this.timeSlotsContainerNode = $("<div>")
      .addClass("cal-time-slot-container")
      .appendTo(this.containerNode);
  }

  createTimeSlots() {
    // Populate the container hour by hour
    let self = this;
    function getHourStringToDisplay(index, hour) {
      if (index === self.nbHoursToDisplay - 1 || hour === 23) {
        return "";
      }

      if (hour >= 10) {
        return hour + 1;
      } else {
        return "&nbsp;" + (hour + 1);
      }
    }

    for (let i = 0; i < this.nbHoursToDisplay; i++) {
      let hour = (this.startHourToDisplay + i) % 24;

      // Time slot hour
      let timeSlotHourNode = $("<div>")
        .addClass("cal-time-slot-hour")
        .css({
          "grid-column-start": `${i + 1}`,
          "grid-column-end": "span 1",
          "grid-row-start": "1",
          "grid-row-end": "1",
        })
        .html(getHourStringToDisplay(i, hour))
        .prependTo(this.timeSlotsContainerNode);

      // Time slot block
      let timeSlotBlockNode = $("<div>")
        .addClass("cal-time-slot")
        .css({
          "grid-column-start": `${i + 1}`,
          "grid-column-end": "span 1",
          "grid-row-start": "2",
          "grid-row-end": "2",
        })
        .appendTo(this.timeSlotsContainerNode);

      if (hour === 23) {
        timeSlotHourNode.addClass("cal-last-hour");
        timeSlotBlockNode.addClass("cal-last-hour");
      }

      if (hour === 0) {
        timeSlotHourNode.addClass("cal-first-hour");
        timeSlotBlockNode.addClass("cal-first-hour");
      }
    }
  }

  updateTimeSlotContainerGridStyle() {
    this.timeSlotsContainerNode.css(
      "grid-template-columns",
      `repeat(${this.nbHoursToDisplay}, ${100 / this.nbHoursToDisplay}%)`,
    );
  }

  updateTimeSlots() {
    this.timeSlotsContainerNode.empty();

    this.createTimeSlots();
    this.updateTimeSlotContainerGridStyle();
  }

  getHourSlotWidth() {
    return this.timeSlotsContainerNode.width() / this.nbHoursToDisplay;
  }

  // Events

  createEventContainer() {
    this.eventContainerNode = $("<div>")
      .addClass("cal-event-container")
      .appendTo(this.containerNode);
  }

  createEvents() {
    // Move all event nodes into the event container
    let eventElements = this.containerNode.find(".cal-event");
    eventElements.appendTo(this.eventContainerNode);

    // Create event objects from them all
    for (let element of eventElements) {
      let newEvent = new Event($(element), this);
      this.events.push(newEvent);
    }
  }

  updateEventContainerGridStyle() {
    this.eventContainerNode.css(
      "grid-template-columns",
      `repeat(${this.nbHoursToDisplay}, ${100 / this.nbHoursToDisplay}%)`,
    );
  }

  updateEventVisibilities() {
    for (let event of this.events) {
      event.updateVisibility();
    }
  }

  // Event details

  createEventDetailsContainer() {
    this.eventDetailsContainerNode = $("<div>")
      .addClass("cal-details-container")
      .appendTo(this.containerNode);
  }

  // Location styles

  createLocationStyles() {
    let locationIndices = new Map();
    for (let event of this.events) {
      if (!locationIndices.has(event.location)) {
        locationIndices.set(event.location, [...locationIndices.keys()].length);
      }
    }

    let nbUniqueLocations = [...locationIndices.keys()].length;

    let styleID = 0;
    for (let [location, index] of locationIndices.entries()) {
      let hue = (index / (nbUniqueLocations + 1)) * 255;
      styleID += 1;

      this.locationStyles.set(location, {
        id: styleID,

        normal: [
          `background-color: hsl(${hue}, 40%, 80%);`,
          `border-color: hsl(${hue}, 40%, 50%);`,
          `color: #000;`,
        ],

        hover: [
          `background-color: hsl(${hue}, 55%, 85%);`,
          `border-color: hsl(${hue}, 45%, 55%);`,
          `color: #000;`,
        ],

        subscribed: [
          `background-color: hsl(${hue}, 75%, 75%);`,
          `border-color: hsl(${hue}, 60%, 50%);`,
          `color: #000;`,
        ],

        selected: [
          `background-color: hsl(${hue}, 45%, 50%);`,
          `border-color: hsl(${hue}, 40%, 35%);`,
          `color: #FFF;`,
        ],
      });
    }
  }

  applyLocationStylesAsCSS() {
    let styleNode = $("<style>");
    let styleNodeContent = "";

    for (let styles of this.locationStyles.values()) {
      let normalRules = styles.normal.join("\n");
      styleNodeContent += `.cal-location-${styles.id} {${normalRules}}\n`;

      let hoverRules = styles.hover.join("\n");
      styleNodeContent += `.cal-location-${styles.id}:hover {${hoverRules}}\n`;

      let subscribedRules = styles.subscribed.join("\n");
      styleNodeContent += `.cal-location-${styles.id}.cal-event-subscribed {${subscribedRules}}\n`;

      let selectedRules = styles.selected.join("\n");
      styleNodeContent += `.cal-location-${styles.id}.cal-selected {${selectedRules}}\n`;
    }

    styleNode.html(styleNodeContent).appendTo($("head"));
  }

  updateEventLocationStyleID() {
    for (let event of this.events) {
      let style = this.locationStyles.get(event.location);
      event.setLocationStyleID(style.id);
    }
  }

  // Event node sorting

  // The following method requires the IntervalColoration class,
  // which provides the algorithm (see interval_coloring.js)
  sortEventNodesByIntervalGraphColoring() {
    let eventGroupIterator = [this.events];

    // If required, group events by location
    if (this.groupEventsByLocation) {
      let locationsToEvents = new Map();

      for (let event of this.events) {
        let location = event.location;

        if (!locationsToEvents.has(location)) {
          locationsToEvents.set(location, [event]);
        } else {
          locationsToEvents.get(location).push(event);
        }
      }

      eventGroupIterator = locationsToEvents.values();
    }

    // Assign a color to all events and a grid row to each event node,
    // by applying the interval graph coloration algorithm
    // to each subset of events with the same location
    let currentLocationFirstGridRow = 1;
    let eventsToColors = new Map();

    for (let eventsAtSameLocation of eventGroupIterator) {
      // Build intervals for each event
      let intervals = [];
      for (let event of eventsAtSameLocation) {
        intervals.push([event.startDate.getTime(), event.endDate.getTime()]);
      }

      // Get the graph coloring
      let intervalGraphColors = new IntervalColoration(intervals).colors;

      // Assign a color to each event, and a grid row to each event node
      let maximumColor = 0;

      for (let i = 0; i < eventsAtSameLocation.length; i++) {
        let event = eventsAtSameLocation[i];
        let color = intervalGraphColors[i];

        eventsToColors.set(event, color);

        if (color > maximumColor) {
          maximumColor = color;
        }

        event.node.css({
          "grid-row-start": `${currentLocationFirstGridRow + color}`,
          "grid-row-end": `${currentLocationFirstGridRow + color}`,
        });
      }

      // Update the start row of the next location
      currentLocationFirstGridRow += 1 + maximumColor;

      // Sort the events by color
      eventsAtSameLocation.sort((event1, event2) => {
        return eventsToColors.get(event1) - eventsToColors.get(event2);
      });
    }

    // Finally sort all event nodes (by (1) location and (2) color)
    // Note: the container is detached from the DOM for better performances
    this.eventContainerNode.detach();

    for (let eventsAtSameLocation of eventGroupIterator) {
      for (let event of eventsAtSameLocation) {
        this.eventContainerNode.prepend(event.node);
      }
    }

    this.eventContainerNode.appendTo(this.containerNode);
  }

  /*
  sortEventNodesByEndTimeAndLocation () {
    this.events.sort((event1, event2) => {
      return event2.endDate.getTime() - event1.endDate.getTime();
    });

    this.events.sort((event1, event2) => {
      return event2.location.localeCompare(event1.location);
    });

    this.eventContainerNode.detach();

    for (let event of this.events) {
      event.node.prependTo(this.eventContainerNode);
    }

    this.eventContainerNode.appendTo(this.containerNode);
  }
  */

  // Event overflow tooltip (using tipso library)

  initEventOverflowTooltips() {
    $(".cal-has-tooltip").tipso({
      speed: 0,
      delay: 20,
      size: "cal_small",
      background: "#000",
    });
  }

  // Event filtering

  showEventsNotSubscribedByUser() {
    this.onlyDisplaySubscribedEvents = false;

    this.updateEventVisibilities();
    this.updateCalendarNodeHeight();
  }

  hideEventsNotSubscribedByUser() {
    this.onlyDisplaySubscribedEvents = true;

    this.updateEventVisibilities();
    this.updateCalendarNodeHeight();
  }

  toggleEventsNotSubscribedByUser() {
    if (this.onlyDisplaySubscribedEvents) {
      this.showEventsNotSubscribedByUser();
    } else {
      this.hideEventsNotSubscribedByUser();
    }
  }
}

class Event {
  constructor(eventNode, calendar) {
    this.node = eventNode;

    this.calendar = calendar;
    this.details = null;

    this.detailsNodeRemovalTimer = null;

    this.id = null;
    this.name = null;
    this.startDate = null;
    this.endDate = null;
    this.location = null;
    this.description = null;
    this.hasPerms = false;
    this.nbPerms = null;
    this.minNbPerms = null;
    this.maxNbPerms = null;
    this.subscribedByUser = false;
    this.tags = [];

    this.displayed = false;
    this.selected = false;

    this.locationStyleID = 0;

    // TODO: move this elsewhere
    // Callback to display the details popup on click on the event node
    this.showDetailPopupOnClickCallback = (event) => {
      if ($(event.target).closest(".cal-event-details").length === 0) {
        this.details.showPopup(event);
      }
    };

    this.init();
  }

  init() {
    this.parseAndSetID();
    this.parseAndSetName();
    this.parseAndSetDates();
    this.parseAndSetLocation();
    this.parseAndSetDescription();
    this.parseAndSetPermRelatedFields();
    this.parseAndSetTags();

    this.addPermCounter();
    this.updateOverflowTooltipContent();

    this.createDetails();

    this.updateVisibility();
  }

  // Event data parsers + setters

  parseAndSetID() {
    this.id = this.node.find(".cal-event-id").text();
  }

  parseAndSetName() {
    this.name = this.node.find(".cal-event-name").text();
  }

  parseDate(dateString) {
    let regex = /(\d+)\/(\d+)\/(\d+) (\d+)\:(\d+)/g;
    let [day, month, year, hours, minutes] = regex
      .exec(dateString)
      .slice(1)
      .map((intString) => {
        return parseInt(intString);
      });

    return new Date(year, month - 1, day, hours, minutes);
  }

  parseAndSetStartDate() {
    let startDateString = this.node.find(".cal-event-start-date").text();
    let startDate = this.parseDate(startDateString);
    this.startDate = startDate;
  }

  parseAndSetEndDate() {
    let endDateString = this.node.find(".cal-event-end-date").text();
    let endDate = this.parseDate(endDateString);
    this.endDate = endDate;
  }

  parseAndSetDates() {
    this.parseAndSetStartDate();
    this.parseAndSetEndDate();
  }

  parseAndSetLocation() {
    this.location = this.node.find(".cal-event-location").text();
  }

  parseAndSetDescription() {
    this.description = this.node.find(".cal-event-description").html();
  }

  parseAndSetPermRelatedFields() {
    let hasPerms = !!parseInt(this.node.find(".cal-event-has-perms").text());

    if (hasPerms) {
      this.hasPerms = true;

      this.nbPerms = parseInt(this.node.find(".cal-event-nb-perms").text());

      this.minNbPerms = parseInt(
        this.node.find(".cal-event-min-nb-perms").text(),
      );
      this.maxNbPerms = parseInt(
        this.node.find(".cal-event-max-nb-perms").text(),
      );

      this.subscribedByUser = !!parseInt(
        this.node.find(".cal-event-subscribed").text(),
      );
    }
  }

  parseAndSetTags() {
    this.node.find(".cal-event-tag").each((_, element) => {
      this.tags.push(element.innerText);
    });
  }

  // Event details

  createDetails() {
    this.details = new EventDetails(this);
  }

  startDisplayingDetailsPopupOnClick() {
    this.node.on("click", this.showDetailPopupOnClickCallback);
  }

  stopDisplayingDetailsPopupOnClick() {
    this.node.off("click", this.showDetailPopupOnClickCallback);
  }

  // Event node content

  addPermCounter() {
    if (!this.hasPerms) {
      return;
    }

    let permCounterNode = $("<div>")
      .addClass("cal-event-perm-count")
      .appendTo(this.node);

    this.updatePermCounter();
  }

  updatePermCounter() {
    let permCounterNode = this.node
      .find(".cal-event-perm-count")
      .html(`<span>&#x1f464; ${this.nbPerms}/${this.maxNbPerms}</span>`);

    if (this.minNbPerms > this.nbPerms) {
      permCounterNode.addClass("cal-perms-missing");
    } else {
      permCounterNode.removeClass("cal-perms-missing");
    }
  }

  // Grid position

  // Assuming the events can appear in the calendar
  getGridStartColumn() {
    if (this.startDate.getTime() < this.calendar.startDate.getTime()) {
      return 1;
    }

    return (
      1 +
      Math.floor(
        computeDateDifferenceInHours(this.calendar.startDate, this.startDate),
      )
    );
  }

  // Assuming the events can appear in the calendar
  getGridEndColumn() {
    if (this.endDate.getTime() > this.calendar.endDate.getTime()) {
      return 1 + this.calendar.nbHoursToDisplay;
    }

    let shiftedEndDate = new Date(this.endDate.getTime() + 1000 * 60 * 59);

    return (
      1 +
      this.calendar.nbHoursToDisplay -
      Math.ceil(
        computeDateDifferenceInHours(shiftedEndDate, this.calendar.endDate),
      )
    );
  }

  updatePositionInGrid() {
    // Align on the grid according to the hours
    this.node.css({
      "grid-column-start": `${this.getGridStartColumn()}`,
      "grid-column-end": `${this.getGridEndColumn()}`,
    });

    // Add left and right padding according to the minutes
    let columnWidth = this.calendar.getHourSlotWidth();

    let startMinutes = this.startDate.getMinutes();
    let endMinutes = this.endDate.getMinutes();

    let marginLeft = 0;
    if (
      this.startDate.getTime() >= this.calendar.startDate.getTime() &&
      startMinutes !== 0
    ) {
      marginLeft = columnWidth * (startMinutes / 60);
    }

    let marginRight = 0;
    if (
      this.endDate.getTime() <= this.calendar.endDate.getTime() &&
      endMinutes !== 0
    ) {
      marginRight = columnWidth * ((60 - endMinutes) / 60);
    }

    this.node.css({
      "margin-left": marginLeft,
      "margin-right": marginRight,
    });
  }

  // Event style

  updateNodeStyle() {
    if (this.subscribedByUser) {
      this.node.addClass("cal-event-subscribed");
    } else {
      this.node.removeClass("cal-event-subscribed");
    }
  }

  // Location style

  setLocationStyleID(styleID) {
    this.locationStyleID = styleID;
    this.node.addClass(`cal-location-${styleID}`);
  }

  // Selection

  select() {
    this.selected = true;
    this.node.addClass("cal-selected");
  }

  deselect() {
    this.selected = false;
    this.node.removeClass("cal-selected");
  }

  // Visibility

  hide() {
    this.stopDisplayingDetailsPopupOnClick();

    this.node.hide();
    this.displayed = false;
  }

  show() {
    this.node.show();

    this.updateNodeStyle();
    this.updatePositionInGrid();
    this.updateOverflowTooltipTriggering();
    this.startDisplayingDetailsPopupOnClick();

    this.displayed = true;
  }

  updateVisibility() {
    // If required, hide events which are not subscribed by the current user
    if (this.calendar.onlyDisplaySubscribedEvents && !this.subscribedByUser) {
      this.hide();
      return;
    }

    // Hide events which cannot apear in the calendar time span
    if (
      this.calendar.startDate.getTime() >= this.endDate.getTime() ||
      this.calendar.endDate.getTime() <= this.startDate.getTime()
    ) {
      this.hide();
      return;
    }

    // Otherwise, show the current event
    this.show();
  }

  // Overflow tooltip (using tipso library)

  updateOverflowTooltipContent() {
    this.node
      .find(".cal-event-name")
      .attr("data-tipso-titleContent", this.name)
      .attr("data-tipso-content", this.location);

    this.node
      .find(".cal-event-location")
      .attr("data-tipso-titleContent", this.name)
      .attr("data-tipso-content", this.location);
  }

  updateOverflowTooltipTriggering() {
    let eventNameNode = this.node.find(".cal-event-name");
    let eventLocationNode = this.node.find(".cal-event-location");

    let eventNameElement = eventNameNode[0];
    let eventLocationElement = eventLocationNode[0];

    if (
      (eventNameElement !== undefined &&
        eventNameElement.clientWidth < eventNameElement.scrollWidth) ||
      (eventLocationElement !== undefined &&
        eventLocationElement.clientWidth < eventLocationElement.scrollWidth)
    ) {
      eventNameNode.addClass("cal-has-tooltip");
      eventLocationNode.addClass("cal-has-tooltip");
    } else {
      eventNameNode.removeClass("cal-has-tooltip");
      eventLocationNode.removeClass("cal-has-tooltip");
    }
  }
}

class EventDetails {
  constructor(event) {
    this.event = event;
    this.node = null;

    // TODO: move this elsewhere
    // Callback to close the details popup on click outside the popup
    this.closePopupOnClickOutsideCallback = (event) => {
      if ($(event.target).closest(".cal-event-details").length === 0) {
        this.hidePopup();
      }
    };

    this.init();
  }

  init() {
    // Create the container node
    this.node = $("<div>")
      .addClass("cal-event-details")
      .appendTo(this.event.calendar.eventDetailsContainerNode)
      .hide();

    this.createAndAppendTitle();
    this.createAndAppendCloseButton();

    // Table of (label, value) details
    let tableNode = $("<table>").appendTo(this.node);

    function addRowToDetailTable(label, value) {
      let rowNode = $("<tr>").addClass("cal-detail-list").appendTo(tableNode);

      $("<td>").addClass("cal-detail-label").html(label).appendTo(rowNode);

      $("<td>").addClass("cal-detail-value").html(value).appendTo(rowNode);
    }

    this.createAndAppendLocation(addRowToDetailTable);
    this.createAndAppendStartDate(addRowToDetailTable);
    this.createAndAppendEndDate(addRowToDetailTable);
    this.createAndAppendDuration(addRowToDetailTable);

    this.createAndAppendPermManagementArea();

    this.createAndAppendDescription();
    this.createAndAppendTags();
  }

  createAndAppendCloseButton() {
    $("<button>")
      .attr("type", "button")
      .addClass("cal-detail-close-button")
      .html("&#x2715;") // cancelation cross
      .appendTo(this.node)
      .on("click", (event) => {
        this.hidePopup();
      });
  }

  createAndAppendTitle() {
    let eventDetailURL = this.event.calendar.eventDetailURLFormat.replace(
      "999999",
      this.event.id,
    );

    let linkToEventPageNode = $("<a>")
      .attr("href", eventDetailURL)
      .attr("target", "_blank")
      .addClass("cal-detail-name")
      .appendTo(this.node);

    $("<h3>").html(this.event.name).appendTo(linkToEventPageNode);
  }

  createAndAppendLocation(addRowToDetailTable) {
    addRowToDetailTable("Lieu", this.event.location);
  }

  createAndAppendStartDate(addRowToDetailTable) {
    let startDateString = this.event.startDate.toLocaleDateString("fr-FR", {
      year: "2-digit",
      month: "2-digit",
      day: "2-digit",
    });
    let startTimeString = this.event.startDate
      .toLocaleDateString("fr-FR", { hour: "2-digit", minute: "2-digit" })
      .slice(-5);

    addRowToDetailTable("Début", `Le ${startDateString} à ${startTimeString}`);
  }

  createAndAppendEndDate(addRowToDetailTable) {
    let endDateString = this.event.endDate.toLocaleDateString("fr-FR", {
      year: "2-digit",
      month: "2-digit",
      day: "2-digit",
    });
    let endTimeString = this.event.endDate
      .toLocaleDateString("fr-FR", { hour: "2-digit", minute: "2-digit" })
      .slice(-5);

    addRowToDetailTable("Fin", `Le ${endDateString} à ${endTimeString}`);
  }

  createAndAppendDuration(addRowToDetailTable) {
    const msPerMinute = 60 * 1000;
    const msPerHour = 60 * msPerMinute;

    let durationInMs = Math.abs(
      this.event.startDate.getTime() - this.event.endDate.getTime(),
    );

    let hours = Math.floor(durationInMs / msPerHour);
    let minutes = Math.abs((durationInMs % msPerHour) / msPerMinute);

    addRowToDetailTable(
      "Durée",
      hours !== 0 ? `${hours}h ${minutes}min` : `${minutes}min`,
    );
  }

  createAndAppendPermManagementArea() {
    if (!this.event.hasPerms) {
      return;
    }

    let permAreaNode = $("<div>")
      .addClass("cal-detail-perm-area")
      .appendTo(this.node);

    let permTitleNode = this.createPermManagementTitle().appendTo(permAreaNode);

    let permCountNode =
      this.createPermManagementCounter().appendTo(permAreaNode);

    let permSubscribeButtonNode =
      this.createPermManagementSwitchButton().appendTo(permAreaNode);

    this.updatePermManagementArea();
  }

  updatePermManagementArea() {
    let permAreaNode = this.node.find(".cal-detail-perm-area");

    this.updatePermManagementCounter();
    this.updatePermManagementSwitchButton();

    // Additional warning message if there are too little perms,
    // and if the user has not subscribed to this event
    permAreaNode.find(".cal-detail-perm-nb-missing-perms").remove();

    if (
      !this.event.subscribedByUser &&
      this.event.minNbPerms > this.event.nbPerms
    ) {
      let nbMissingPerms = this.event.minNbPerms - this.event.nbPerms;
      let optionnalPluralMark = nbMissingPerms > 1 ? "s" : "";

      $("<p>")
        .addClass("cal-detail-perm-nb-missing-perms")
        .html(
          `${nbMissingPerms} personne${optionnalPluralMark}</br>min. manquante${optionnalPluralMark} !`,
        )
        .appendTo(permAreaNode);
    }
  }

  createPermManagementTitle() {
    return $("<h4>").addClass("cal-detail-perm-title").html("Permanences");
  }

  createPermManagementCounter() {
    return $("<span>")
      .addClass("cal-detail-perm-count")
      .html(`&#x1f464; ${this.event.nbPerms}/${this.event.maxNbPerms}`);
  }

  updatePermManagementCounter() {
    let permCounterNode = this.node
      .find(".cal-detail-perm-count")
      .html(`&#x1f464; ${this.event.nbPerms}/${this.event.maxNbPerms}`);

    if (this.event.minNbPerms > this.event.nbPerms) {
      permCounterNode.addClass("cal-perms-missing");
    } else if (this.event.nbPerms === this.event.maxNbPerms) {
      permCounterNode.addClass("cal-perms-full");
    }
  }

  createPermManagementSwitchButton() {
    let buttonNode = $("<button>").addClass(
      "cal-detail-perm-subscription-switch",
    );

    // On click, switch the subscription state
    // and update objects related to the perm count
    let event = this.event;

    buttonNode.on("click", () => {
      let goal = event.subscribedByUser ? "unenrol" : "enrol";
      let url = event.calendar.subscriptionURLFormat.replace(
        "999999",
        event.id,
      );

      $.ajax(url, {
        method: "POST",
        dataType: "json",

        headers: {
          "X-CSRFToken": event.calendar.csrfToken,
        },

        data: {
          goal: goal,
        },

        success: (jsonAnswer) => {
          event.subscribedByUser = jsonAnswer.enrolled;
          event.nbPerms = jsonAnswer.number;

          this.updatePermManagementArea();
          event.updatePermCounter();
          event.updateNodeStyle();
          event.updateOverflowTooltipContent();
        },

        error: () => {
          alert(
            "Erreur lors de l'inscription ou de la désinscription à cette permanence.",
          );
        },
      });
    });

    return buttonNode;
  }

  updatePermManagementSwitchButton() {
    let event = this.event;
    let buttonNode = this.node.find(".cal-detail-perm-subscription-switch");

    // Reset the button state
    buttonNode.prop("disabled", false);

    // Update its content and state
    if (event.subscribedByUser) {
      buttonNode.html("Se désinscrire");
    } else {
      buttonNode.html("S'inscrire");

      // Disable the button if the maximum number of perms is already reached
      if (event.nbPerms === event.maxNbPerms) {
        buttonNode.prop("disabled", true);
      }
    }
  }

  createAndAppendDescription() {
    $("<p>")
      .addClass("cal-detail-description")
      .html(this.event.description)
      .appendTo(this.node);
  }

  createAndAppendTags() {
    let tagContainerNode = $("<div>")
      .addClass("cal-detail-tag-list")
      .appendTo(this.node);

    for (let tag of this.event.tags) {
      $("<span>")
        .addClass("cal-detail-tag")
        .html(tag)
        .appendTo(tagContainerNode);
    }
  }

  setPopupPosition(mouseClickEvent) {
    let calendarOffset = this.event.calendar.containerNode.offset();

    let eventOffset = this.event.node.position();
    let eventNodeHeight = this.event.node.outerHeight();

    let detailNodeOffset = this.node.position();
    let detailsNodeWidth = this.node.outerWidth();
    let detailsNodeHeight = this.node.outerHeight();

    let x = mouseClickEvent.pageX - detailsNodeWidth / 2 - calendarOffset.left;
    let y = eventOffset.top + eventNodeHeight + 50;

    // If the popup is too high to vertically fit in the window,
    // it is displayed above the event instead
    // let bottomMargin = 50; // px
    // let detailsNodeBottom = y
    //                       + calendarOffset.top
    //                       + detailsNodeHeight;

    // if (detailsNodeBottom > $(window).height() - bottomMargin) {
    //   y = eventOffset.top - detailsNodeHeight - 10;
    //   this.node.addClass("above-event")
    // }

    // If the popup is about to be displayed outside of
    // the left/right side of the screen, correct its future x position
    let absoluteX = x + calendarOffset.left;
    let sideMargin = 20; // px

    if (absoluteX < sideMargin) {
      x += sideMargin - absoluteX;
    } else if (absoluteX + detailsNodeWidth > $(window).width() - sideMargin) {
      x -= absoluteX + detailsNodeWidth - ($(window).width() - sideMargin);
    }

    this.node.css({
      left: x,
      top: y,
    });
  }

  showPopup(mouseClickEvent) {
    if (this.node.is(":visible")) {
      return;
    }

    this.event.select();

    this.node.show();
    this.setPopupPosition(mouseClickEvent);

    // TODO: use a clean solution ;)
    window.setTimeout(() => {
      this.startHidingOnOutsideClick();
    }, 20);
  }

  hidePopup() {
    this.event.deselect();

    this.stopHidingOnOutsideClick();
    this.node.hide();
  }

  // TODO: define the callback elsewhere

  startHidingOnOutsideClick() {
    $(document).on("click", this.closePopupOnClickOutsideCallback);
  }

  stopHidingOnOutsideClick() {
    $(document).off("click", this.closePopupOnClickOutsideCallback);
  }
}