Finish migration

website/events/api/serializers.py

@@ -87,6 +87,9 @@ class EventCalenderJSSerializer(CalenderJSSerializer):
             pass
         return "#616161"
 
+    def _text_color(self, instance):
+        return "#FFFFFF"
+
 
 class UnpublishedEventSerializer(CalenderJSSerializer):
     """

website/events/static/events/css/style.scss

@@ -81,14 +81,15 @@
         border-radius: 0;
         border: none;
         overflow: hidden;
+        transition-property: opacity;
 
         .fc-content {
             padding: 5px;
 
-            transition: opacity 300ms ease-in-out 0s;
-            -moz-transition: opacity 300ms ease-in-out 0s;
-            -webkit-transition: opacity 300ms ease-in-out 0s;
-            -o-transition: opacity 300ms ease-in-out 0s;
+            transition: all 300ms ease-in-out 0s;
+            -moz-transition: all 300ms ease-in-out 0s;
+            -webkit-transition: all 300ms ease-in-out 0s;
+            -o-transition: all 300ms ease-in-out 0s;
         }
 
         .fc-bg {

website/events/static/events/js/calendarlistview.js

-var FC = $.fullCalendar; // a reference to FullCalendar's root namespace
-var View = FC.View;      // the class that all views must inherit from
-var ListView;          // our subclass
-
-ListView = View.extend({
-    title: gettext("Upcoming Events"),
-
-    initialize: function () {
-        this.title = gettext("Upcoming Events");
-    }
-
-    computeTitle: function (d) {
-        return this.title;
-    },
-
-    fetchInitialEvents: function (dateProfile) {
-        var calendar = this.calendar;
-        var today = new Date();
-
-        return calendar.requestEvents(
-            calendar.msToMoment(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0), false),
-            calendar.msToMoment(Date.UTC(today.getFullYear() + 2, today.getMonth(), today.getDate(), 0, 0, 0), false)
-        );
-    },
-
-    renderEvents: function (events) {
-        var root = $("<div>").addClass("accordion bordered");
-
-        events.sort(function (a, b) {
-            return a.start < b.start ? -1 : a.start > b.start ? 1 : 0;
-        });
-
-        if (events.length === 0) {
-            this.el.html('<div class="alert alert-info">' + gettext('No events planned in the selected period.') +'</div>');
-        }
-
-        for (var i = 0; i < events.length; i++) {
-            var e = events[i];
-            if (e.is_birthday) {
-                break;
-            }
-
-            var date = e.start.format('LLLL');
-
-            var eventCard = $("<div>").addClass("card mb-0");
-
-            var eventIndicator = $("<div>")
-                .addClass("event-indication")
-                .attr("style", "background-color: " + e.backgroundColor);
-            var cardHead = $("<div>").addClass("card-header collapsed")
-                .attr("data-toggle", "collapse")
-                .attr("data-target", "#event-content-" + i);
-
-            cardHead.append(eventIndicator);
-            cardHead.append("<div class=\"title\">" + e.title + " " +
-                "(<span class=\"date\">" + date + "</span>)</div>");
-
-            var cardContent = $("<div>")
-                .addClass("collapse")
-                .attr("id", "event-content-" + i);
-
-            var url = $("<a>")
-                .addClass("btn btn-primary")
-                .attr("href", e.url)
-                .attr("target", e.blank ? "_blank" : "_self")
-                .html(gettext("Go to event"));
-
-            var cardBody = $("<div>")
-                .addClass("card-body")
-                .html("<p>" + e.description + "</p>");
-            cardBody.append(url);
-
-            cardContent.append(cardBody);
-            eventCard.append(cardHead);
-            eventCard.append(cardContent);
-
-            root.append(eventCard);
-            this.el.html(root);
-        }
-    },
-});
-
-FC.views.list = ListView; // register our class with the view system

website/events/static/events/js/listview.js

 class ListView extends FullCalendar.View {
-    renderSkeleton() {
-        // responsible for displaying the skeleton of the view within the already-defined
-        // this.el, an HTML element
-        console.log(this);
-    }
-
-    unrenderSkeleton() {
-        // should undo what renderSkeleton did
-    }
-
-    renderDates(dateProfile) {
-        // responsible for rendering the given dates
-    }
-
-    unrenderDates() {
-        // should undo whatever renderDates does
-    }
-
     renderEvents(eventStore, eventUiHash) {
-        const events = Object.values(eventStore.instances);
+        const skeleton = document.createElement('div');
+        skeleton.id = 'fc-listview';
+        skeleton.classList.add('accordion', 'bordered');
 
-        var root = $("<div>").addClass("accordion bordered");
+        const locale = this.dateEnv.locale.codeArg;
+        const events = Object.values(eventStore.instances);
 
         events.sort(function (a, b) {
             return a.range.start < b.range.start ? -1 :
@@ -31,70 +16,88 @@ class ListView extends FullCalendar.View {
             var alertEl = document.createElement('div');
             alertEl.id = 'fc-no-events';
             alertEl.classList.add('alert', 'alert-info');
-            var text = document.createTextNode(gettext('No events planned in the selected period.'));
-            alertEl.appendChild(text);
-            this.el.appendChild(alertEl);
+            alertEl.append(gettext('No events planned in the selected period.'));
+            this.el.append(alertEl);
         }
 
         for (let i = 0; i < events.length; i++) {
             const instance = events[i];
             const def = eventStore.defs[instance.defId];
 
-            console.log(instance, def);
-            console.log(def.extendedProps);
-
             if (def.extendedProps.isBirthday) {
                 break;
             }
 
-            // var date = def.range.start.toLocaleString();
-            // console.log(def.range.start);
-
-            // var eventCard = $("<div>").addClass("card mb-0");
-            //
-            // var eventIndicator = $("<div>")
-            //     .addClass("event-indication")
-            //     .attr("style", "background-color: " + e.backgroundColor);
-            // var cardHead = $("<div>").addClass("card-header collapsed")
-            //     .attr("data-toggle", "collapse")
-            //     .attr("data-target", "#event-content-" + i);
-            //
-            // cardHead.append(eventIndicator);
-            // cardHead.append("<div class=\"title\">" + e.title + " " +
-            //     "(<span class=\"date\">" + date + "</span>)</div>");
-            //
-            // var cardContent = $("<div>")
-            //     .addClass("collapse")
-            //     .attr("id", "event-content-" + i);
-            //
-            // var url = $("<a>")
-            //     .addClass("btn btn-primary")
-            //     .attr("href", e.url)
-            //     .attr("target", e.blank ? "_blank" : "_self")
-            //     .html(gettext("Go to event"));
-            //
-            // var cardBody = $("<div>")
-            //     .addClass("card-body")
-            //     .html("<p>" + e.description + "</p>");
-            // cardBody.append(url);
-            //
-            // cardContent.append(cardBody);
-            // eventCard.append(cardHead);
-            // eventCard.append(cardContent);
-            //
-            // root.append(eventCard);
-            // this.el.appendChild(root);
+            var date = instance.range.start.toLocaleDateString(locale, {
+                hour: '2-digit',
+                minute: '2-digit',
+                day: 'numeric',
+                month: 'long',
+                weekday: 'long',
+                year: 'numeric',
+                hour12: false,
+            });
+
+            const eventCard = document.createElement('div');
+            eventCard.classList.add('card', 'mb-0');
+
+            const eventIndicator = document.createElement('div');
+            eventIndicator.classList.add('event-indication');
+            eventIndicator.style = 'background-color: ' + def.ui.backgroundColor;
+
+            const cardHead = document.createElement('div');
+            cardHead.classList.add('card-header', 'collapsed');
+            cardHead.dataset.toggle = 'collapse';
+            cardHead.dataset.target = '#event-content-' + i;
+
+            const cardTitle = document.createElement('div');
+            cardTitle.classList.add('title');
+            const cardDate = document.createElement('span');
+            cardDate.append(date);
+            cardTitle.append(def.title + ' (');
+            cardTitle.append(cardDate);
+            cardTitle.append(')');
+
+            cardHead.append(eventIndicator);
+            cardHead.append(cardTitle);
+
+            const cardContent = document.createElement('div');
+            cardContent.classList.add('collapse');
+            cardContent.id = 'event-content-' + i;
+
+            const url = document.createElement('a');
+            url.classList.add('btn', 'btn-primary');
+            url.href = def.url;
+            url.target = def.extendedProps.blank ? '_blank' : '_self';
+            url.append(gettext("Go to event"));
+
+            const cardBody = document.createElement('div');
+            cardBody.classList.add('card-body');
+            const cardBodyText = document.createElement('p');
+            cardBodyText.append(def.extendedProps.description);
+            cardBody.append(cardBodyText);
+            cardBody.append(url);
+
+            cardContent.append(cardBody);
+            eventCard.append(cardHead);
+            eventCard.append(cardContent);
+
+            skeleton.append(eventCard);
         }
+        this.el.append(skeleton);
     }
 
     unrenderEvents() {
-        const noEventsEl = document.getElementById('fc-no-events');
+        const noEventsEl = this.el.querySelector('#fc-no-events');
         if (noEventsEl) {
             noEventsEl.remove();
         }
-        // should undo whatever renderEvents does
-    }
 
+        const listView = this.el.querySelector('#fc-listview');
+        if (listView) {
+            listView.remove();
+        }
+    }
 }
 
 const listViewPlugin = FullCalendar.createPlugin({

website/events/static/events/js/main.js

-var BIRTHDAYS_COOKIE = 'showbirthdays';
-var VIEW_COOKIE = 'agendaview';
-var SOURCES = {
-    events: "/api/v1/events/calendarjs",
-    birthdays: "/api/v1/members/birthdays",
-    partners: "/api/v1/partners/calendarjs",
-    unpublishedEvents: "/api/v1/events/unpublished"
+const BIRTHDAYS_COOKIE = 'showbirthdays';
+const VIEW_COOKIE = 'calendarview';
+const SOURCES = {
+    events: {
+        id: 'event',
+        url: '/api/v1/events/calendarjs/',
+    },
+    birthdays: {
+        id: 'birthdays',
+        url: '/api/v1/members/birthdays/',
+    },
+    partners: {
+        id: 'partners',
+        url: '/api/v1/partners/calendarjs/',
+    },
+    unpublished: {
+        id: 'unpublished',
+        url: '/api/v1/events/unpublished/',
+    },
 };
 
-function checkResponsiveState(calendarElement, windowWidth, view) {
+function checkResponsiveState(calendar, windowWidth, view) {
     var buttonText = gettext('show birthdays');
-    calendarElement.fullCalendar('removeEventSource', SOURCES.birthdays);
+    if (calendar.getEventSourceById(SOURCES.birthdays.id)) {
+        calendar.getEventSourceById(SOURCES.birthdays.id).remove();
+    }
     if (windowWidth <= 768) {
-        calendarElement.fullCalendar('option', 'header', {
+        calendar.setOption('header', {
             right: ''
         });
     } else {
-        if (view.name === 'list') {
-            calendarElement.fullCalendar('option', 'header', {
-                right: 'list,agendaWeek,month'
+        if (view.type === 'list') {
+            calendar.setOption('header', {
+                right: 'list,timeGridWeek,dayGridMonth'
             });
         } else {
             if (Cookies.get(BIRTHDAYS_COOKIE)) {
-                calendarElement.fullCalendar('addEventSource', SOURCES.birthdays);
+                calendar.addEventSource(SOURCES.birthdays);
                 buttonText = gettext('hide birthdays');
             }
-            calendarElement.fullCalendar('option', 'header', {
-                right: 'showBirthdays, list,agendaWeek,month prev,next today'
+            calendar.setOption('header', {
+                right: 'showBirthdays, list,timeGridWeek,dayGridMonth prev,next today'
             });
         }
     }
     $('.fc-showBirthdays-button').html(buttonText);
 }
 
-$(function () {
-    var calendarElement = $('#calendar');
+document.addEventListener('DOMContentLoaded', function () {
+    const calendarEl = document.getElementById('calendar');
 
-    var showUnpublished = calendarElement.data('show-unpublished');
-    var defaultDate = calendarElement.data('default-date');
-    var isAuthenticated = calendarElement.data('authenticated');
-    var language = calendarElement.data('language');
+    const showUnpublished = calendarEl.dataset['show-unpublished'];
+    let defaultDate = calendarEl.dataset['default-date'];
+    const isAuthenticated = calendarEl.dataset.authenticated;
+    const language = calendarEl.dataset.language;
 
-    var eventSources = [SOURCES.events, SOURCES.partners];
+    const eventSources = [SOURCES.events, SOURCES.partners];
     if (showUnpublished) {
-        eventSources.push(SOURCES.unpublishedEvents);
+        eventSources.push(SOURCES.unpublished);
     }
     if (Cookies.get(BIRTHDAYS_COOKIE)) {
         eventSources.push(SOURCES.birthdays);
     }
-    var tmpView = ($(window).width() < 979) ? 'list' : 'agendaWeek';
+    let tmpView = window.innerWidth < 979 ? 'list' : 'timeGridWeek';
     if (Cookies.get(VIEW_COOKIE) !== undefined) {
         tmpView = Cookies.get(VIEW_COOKIE);
     }
 
-    // History idea and code parts from
-    // https://github.com/fullcalendar/fullcalendar/issues/659#issuecomment-132535804
-    // and https://github.com/fullcalendar/fullcalendar/issues/659#issuecomment-245544401
-    var startDate = new Date(defaultDate);
-    var tmpYear = startDate.getFullYear();
-    var tmpMonth = startDate.getMonth();
-    var tmpDay = startDate.getDate();
-    var vars = window.location.hash.split("&");
-    for (var i = 0; i < vars.length; i++) {
-        if (vars[i].match("^#year")) tmpYear = vars[i].substring(6);
-        if (vars[i].match("^month")) tmpMonth = vars[i].substring(6) - 1;
-        if (vars[i].match("^day")) tmpDay = vars[i].substring(4);
-        if (vars[i].match("^view")) tmpView = vars[i].substring(5);
+    if (window.location.hash.indexOf('date') > -1) {
+        defaultDate = window.location.hash.substr(window.location.hash.indexOf('date') + 5, 24);
     }
 
-    calendarElement.fullCalendar({
+    const calendar = new FullCalendar.Calendar(calendarEl, {
+        plugins: ['timeGrid', 'dayGrid', 'bootstrap', listViewPlugin],
         aspectRatio: 1.8,
-        theme: 'bootstrap4',
-        eventSources: eventSources,
+        themeSystem: 'bootstrap',
         defaultView: tmpView,
+        defaultDate: defaultDate,
+        eventSources: eventSources,
         firstDay: 1,
         scrollTime: '14:00:00',
-        timeFormat: 'HH:mm',
+        eventTimeFormat: {
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false,
+        },
         eventLimit: true,
         locale: language,
+        nowIndicator: true,
         views: {
             list: {
                 buttonText: gettext('list'),
-                duration: {years: 5}
+                duration: { years: 5 },
+                type: 'list',
+                titleFormat: function() { return gettext("Upcoming Events") },
             }
         },
-        defaultDate: defaultDate,
         customButtons:
             isAuthenticated ? {
                 showBirthdays: {
@@ -92,71 +103,63 @@ $(function () {
                         if (Cookies.get(BIRTHDAYS_COOKIE)) {
                             e.target.innerHTML = gettext('show birthdays');
                             Cookies.remove(BIRTHDAYS_COOKIE);
-                            calendarElement.fullCalendar('removeEventSource', SOURCES.birthdays);
+                            calendar.getEventSourceById(SOURCES.birthdays.id).remove();
                         } else {
                             e.target.innerHTML = gettext('hide birthdays');
                             Cookies.set(BIRTHDAYS_COOKIE, 1);
-                            calendarElement.fullCalendar('addEventSource', SOURCES.birthdays);
+                            calendar.addEventSource(SOURCES.birthdays);
                         }
                     }
                 }
-            } : {}
-        ,
+            } : {},
         header: {
-            right: 'showBirthdays, list,agendaWeek,month prev,next today'
+            right: 'showBirthdays, list,timeGridWeek,dayGridMonth prev,next today'
         },
-        eventClick: function (event) {
-            if (event.url && event.blank) {
+        eventClick: function ({ jsEvent, event }) {
+            console.log(event);
+            if (event.url && event.extendedProps.blank) {
+                jsEvent.preventDefault();
                 window.open(event.url, '_blank');
-                return false;
-            } else if (event.url) {
-                window.replace(event.url);
-                return false;
             }
         },
-        eventRender: function (event, element) {
-            element.attr('title', event.description);
+        eventRender: function ({ el, event }) {
+            el.setAttribute(
+                'title', event.extendedProps.description);
         },
-        viewRender: function (view) {
-            var prevView = Cookies.get(VIEW_COOKIE);
-            var moment = calendarElement.fullCalendar('getDate');
-            if (moment && moment.isValid()) {
-                window.location.hash = 'year=' + moment.format('YYYY') + '&month=' + (moment.format('M')) + '&day=' + moment.format('DD') + '&view=' + view.name;
-            }
+        viewSkeletonRender: function ({ view }) {
+            const prevView = Cookies.get(VIEW_COOKIE);
+
+            const date = calendar.getDate();
+            window.location.hash = 'date=' + date.toISOString() + '&view=' + view.type;
 
-            if (view.name !== prevView) {
-                var windowWidth = $(window).width();
-                Cookies.set(VIEW_COOKIE, view.name);
-                checkResponsiveState(calendarElement, windowWidth, view);
+            if (view.type !== prevView) {
+                const windowWidth = window.innerWidth;
+                Cookies.set(VIEW_COOKIE, view.type);
+                checkResponsiveState(calendar, windowWidth, view);
             }
-        }
-        ,
+        },
+        datesRender: function ({ view }) {
+            const date = calendar.getDate();
+            window.location.hash = 'date=' + date.toISOString() + '&view=' + view.type;
+        },
         windowResize: function () {
-            var windowWidth = $(window).width();
-            var view = (windowWidth <= 768) ? 'list' : Cookies.get(VIEW_COOKIE);
-            var currentView = $('#calendar').fullCalendar('getView');
-            if (view !== currentView.name) {
-                calendarElement.fullCalendar('changeView', view);
+            const windowWidth = window.innerWidth;
+            const view = (windowWidth <= 768) ? 'list' : Cookies.get(VIEW_COOKIE);
+            const currentView = calendar.view;
+            if (view !== currentView.type) {
+                calendar.changeView(view);
             } else {
-                checkResponsiveState(calendarElement, windowWidth, currentView);
+                checkResponsiveState(calendar, windowWidth, currentView);
             }
         }
-    })
-    ;
+    });
 
-    var date = new Date(tmpYear, tmpMonth, tmpDay, 0, 0, 0);
-    var moment = calendarElement.fullCalendar('getDate');
-    var view = calendarElement.fullCalendar('getView');
-    if (date.getFullYear() !== moment.format('YYYY') ||
-        date.getMonth() !== moment.format('M') ||
-        date.getDate() !== moment.format('DD')) {
-        calendarElement.fullCalendar('gotoDate', date);
-    }
+    calendar.render();
 
-    if (view.name !== tmpView) {
-        calendarElement.fullCalendar('changeView', tmpView);
+    if (calendar.view.type !== tmpView) {
+        calendar.changeView(tmpView);
     } else {
-        var windowWidth = $(window).width();
-        checkResponsiveState(calendarElement, windowWidth, view);
+        var windowWidth = window.innerWidth;
+        checkResponsiveState(calendar, windowWidth, calendar.view);
     }
 });

website/events/static/events/js/new.js

-const BIRTHDAYS_COOKIE = 'showbirthdays';
-const VIEW_COOKIE = 'calendarview';
-const SOURCES = {
-    events: {
-        id: 'event',
-        url: '/api/v1/events/calendarjs/',
-    },
-    birthdays: {
-        id: 'birthdays',
-        url: '/api/v1/members/birthdays/',
-    },
-    partners: {
-        id: 'partners',
-        url: '/api/v1/partners/calendarjs/',
-    },
-    unpublished: {
-        id: 'unpublished',
-        url: '/api/v1/events/unpublished/',
-    },
-};
-
-function checkResponsiveState(calendar, windowWidth, view) {
-    var buttonText = gettext('show birthdays');
-    if (calendar.getEventSourceById(SOURCES.birthdays.id)) {
-        calendar.getEventSourceById(SOURCES.birthdays.id).remove();
-    }
-    if (windowWidth <= 768) {
-        calendar.setOption('header', {
-            right: ''
-        });
-    } else {
-        if (view.type === 'list') {
-            calendar.setOption('header', {
-                right: 'list,timeGridWeek,dayGridMonth'
-            });
-        } else {
-            if (Cookies.get(BIRTHDAYS_COOKIE)) {
-                calendar.addEventSource(SOURCES.birthdays);
-                buttonText = gettext('hide birthdays');
-            }
-            calendar.setOption('header', {
-                right: 'showBirthdays, list,timeGridWeek,dayGridMonth prev,next today'