Skip to content

GitLab

Verified Commit ed9ae402 authored by Sébastiaan Versteeg's avatar Sébastiaan Versteeg
Browse files
Options

Finish migration

parent e72c1da9
Hide whitespace changes
Inline Side-by-side
Showing with 170 additions and 415 deletions
website/events/api/serializers.py
View file @ ed9ae402
......@@ -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
View file @ ed9ae402
......@@ -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 deleted 100644 → 0
View file @ e72c1da9
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
View file @ ed9ae402
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
View file @ ed9ae402
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 deleted 100644 → 0
View file @ e72c1da9
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'
});