thubrecht/poulpe
1
0
Fork 0
Code Issues 5 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Add a button to switch between calendar display modes.

Browse source 
It switches between:
* displaying all events;
* only displaying events the user subscribed to.

Note that the button has not been included in the calendar library/files 
(yet?). Its code should be moved somewhere else at a later time.
This commit is contained in:
Daru13 2018-11-25 16:08:43 +01:00
parent 81eb6bebac
commit c4e70840ad
1 changed files with 51 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
event/templates/event/calendar.html
View file

@ -5,6 +5,22 @@
{{ block.super }}
<link rel="stylesheet" href="{% static "css/tipso.css" %}">
<link rel="stylesheet" href="{% static "css/calendar.css" %}">
<style>
#cal-toggle-unsubscribed-events-display {
display: block;
position: fixed;
bottom: 30px;
left: 30px;
border-bottom: 2px solid rgb(150, 50, 50);
font-size: 1.6rem;
font-weight: bold;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4),
0 1px 1px rgba(150, 50, 50, 0.7);
text-shadow: 0 0 7px rgb(150, 50, 50);
z-index: 5000;
}
</style>
{% endblock %}
{% block extra_js %}
@ -14,7 +30,7 @@
<script type="text/javascript">
$(document).ready(() => {
let cal = new Calendar({
let calendar = new Calendar({
startDate: new Date(2018, 10, 30, 8),
endDate: new Date(2018, 11, 2, 6),
eventDetailURLFormat: "https://cof.ens.fr/poulpe/event/activity/999999",
@ -22,9 +38,40 @@
csrfToken: $(".planning [name=csrfmiddlewaretoken]").val()
});
// Debug (to be removed when working)
console.log(cal);
window["cal"] = cal;
// TODO: move this elsewhere
// Button to switch between:
// - displaying all events (default);
// - only displaying events for which the current user is enroled.
// Create the button
let toggleUnsubscribedEventDisplayButton = $("<button>")
.attr("type", "button")
.attr("id", "cal-toggle-unsubscribed-events-display")
.addClass("btn btn-primary")
.appendTo(calendar.containerNode);
// Set/update its label
function updateToggleButtonLabel () {
if (calendar.onlyDisplaySubscribedEvents) {
toggleUnsubscribedEventDisplayButton.html("Afficher toutes les activités");
}
else {
toggleUnsubscribedEventDisplayButton.html("Afficher seulement mes permanences");
}
}
updateToggleButtonLabel();
// Switch between display modes on click
toggleUnsubscribedEventDisplayButton.on("click", () => {
calendar.toggleEventsNotSubscribedByUser();
updateToggleButtonLabel();
});
// DEBUG: js console helpers, to be removed
console.log(calendar);
window["cal"] = calendar;
});
</script>
{% endblock %}