Make grouping by location an option, and set grid rows of event nodes.

Event nodes used to only be sorted. This commit explictly set their CSS 
grid rows.

event/static/js/calendar.js

@@ -36,6 +36,9 @@ class Calendar {
     this.onlyDisplaySubscribedEvents = calendarParameters.onlyDisplaySubscribedEvents !== undefined
                               ? calendarParameters.onlyDisplaySubscribedEvents
                               : false;
+    this.groupEventsByLocation = calendarParameters.groupEventsByLocation !== undefined
+                              ? calendarParameters.groupEventsByLocation
+                              : true;
 
     this.eventDetailURLFormat = calendarParameters.eventDetailURLFormat !== undefined
                               ? calendarParameters.eventDetailURLFormat
@@ -71,7 +74,7 @@ class Calendar {
     this.updateEventLocationStyleID();
 
     //this.sortEventNodesByEndTimeAndLocation();
-    this.sortEventNodesByLocationAndIntervalGraphColoring();
+    this.sortEventNodesByIntervalGraphColoring();
     this.updateCalendarNodeHeight();
 
     this.initEventOverflowTooltips();
@@ -89,6 +92,7 @@ class Calendar {
 
     this.updateEventVisibilities();
     this.updateCalendarNodeHeight();
+    this.sortEventNodesByIntervalGraphColoring();
 
     this.startShowingEventOverflowTooltips();
   }
@@ -102,6 +106,7 @@ class Calendar {
 
     this.updateEventVisibilities();
     this.updateCalendarNodeHeight();
+    this.sortEventNodesByIntervalGraphColoring();
 
     this.startShowingEventOverflowTooltips();
   }
@@ -337,29 +342,36 @@ class Calendar {
 
   // The following method requires the IntervalColoration class,
   // which provides the algorithm (see interval_coloring.js)
-  sortEventNodesByLocationAndIntervalGraphColoring () {
-    // Group events by location
-    let locationsToEvents = new Map();
-    for (let event of this.events) {
-      let location = event.location;
+  sortEventNodesByIntervalGraphColoring () {
+    let eventGroupIterator = [this.events];
 
-      if (! locationsToEvents.has(location)) {
-        locationsToEvents.set(location, [event]);
-      }
-      else {
-        locationsToEvents
-          .get(location)
-          .push(event);
+    // 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,
-    // by using the interval graph coloration algorithm
-    // on each subset of events with the same location
-    let allEventColors = [];
-    let nbAlreadyColoredEvents = 0;
+    // 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 locationsToEvents.values()) {
+    for (let eventsAtSameLocation of eventGroupIterator) {
       // Build intervals for each event
       let intervals = [];
       for (let event of eventsAtSameLocation) {
@@ -369,26 +381,42 @@ class Calendar {
         ]);
       }
 
-      // Get the graph coloring, and assign each color to each event
+      // Get the graph coloring
       let intervalGraphColors = new IntervalColoration(intervals).colors;
-      let eventsToColors = new Map();
-      for (let i = 0; i < eventsAtSameLocation; i++) {
-        eventsToColors.set(event, intervalGraphColors[i]);
+
+      // 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(event2) - eventsToColors.get(event1);
+        return eventsToColors.get(event1) - eventsToColors.get(event2);
       });
     }
 
-    // Finally sort all event nodes,
-    // (1) by their location and (2) by their color
-
+    // 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 locationsToEvents.values()) {
+    for (let eventsAtSameLocation of eventGroupIterator) {
       for (let event of eventsAtSameLocation) {
         this.eventContainerNode.prepend(event.node);
       }

event/templates/event/calendar.html

@@ -36,7 +36,8 @@
           endDate: new Date(2018, 11, 2, 6),
           eventDetailURLFormat: "https://cof.ens.fr/poulpe/event/activity/999999",
           subscriptionURLFormat: "{% url "event:enrol_activity" 999999 %}?ajax=json",
-          csrfToken: $(".planning [name=csrfmiddlewaretoken]").val()
+          csrfToken: $(".planning [name=csrfmiddlewaretoken]").val(),
+          groupEventsByLocation: true
         });
 
         // TODO: move this elsewhere