From c4e70840adf95de1b48ef0c883d9483470a4da93 Mon Sep 17 00:00:00 2001
From: Daru13 <daru14@gmail.com>
Date: Sun, 25 Nov 2018 16:08:43 +0100
Subject: [PATCH] Add a button to switch between calendar display modes.

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.
---
 event/templates/event/calendar.html | 55 ++++++++++++++++++++++++++---
 1 file changed, 51 insertions(+), 4 deletions(-)

diff --git a/event/templates/event/calendar.html b/event/templates/event/calendar.html
index 73750a9..2e4a1dc 100644
--- a/event/templates/event/calendar.html
+++ b/event/templates/event/calendar.html
@@ -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 %}