block shifts exchange if unsuscrubed

members_space/static/css/members-space-shifts-exchange.css

@@ -7,13 +7,13 @@
 
 /* -- Suspended screen */
 
-#suspended_content {
+#suspended_content, #unsuscribed_content {
     align-items: center;
     text-align: center;
 }
 
-.select_makeups {
-    margin: 2rem 0;
+#shifts_exchange .select_makeups, #shifts_exchange .unsuscribed_form_link {
+    margin: 1.5rem 0;
 }
 
 /* -- Calendar screen, shifts list */
@@ -75,7 +75,17 @@
 
 #calendar {
     margin: 2rem 1rem;
+}
+
+.loading-calendar {
+    margin: 3rem auto;
+    display: none;
+}
+
+@media screen and (max-width:768px) {
+    #calendar {
         display: none;
+    }
 }
 
 .fc .fc-event {

members_space/static/js/members-space-shifts-exchange.js

 var calendar = null,
-    selected_shift = null;
+    selected_shift = null,
+    vw = null;
 
 /**
  * A partner can exchange shifts if:
@@ -61,6 +62,7 @@ function add_or_change_shift(new_shift_id) {
                     }
 
                     let msg = "Parfait! ";
+
                     msg += (selected_shift === null)
                         ? "Le service choisi a été ajouté."
                         : "Le service a été échangé.";
@@ -86,7 +88,7 @@ function add_or_change_shift(new_shift_id) {
             },
             error: function(error) {
                 closeModal();
-                selected_shift = null
+                selected_shift = null;
 
                 if (error.status === 400) {
                     alert(`Désolé ! Le service que vous souhaitez échanger démarre dans moins de 24h. ` +
@@ -157,7 +159,8 @@ function init_shifts_list() {
                 }
 
                 // Unselect other checkboxes
-                if ($(this).find(".checkbox").prop("checked")) {
+                if ($(this).find(".checkbox")
+                    .prop("checked")) {
                     for (let cb_item of $("#shifts_list").find(".checkbox")) {
                         if (cb.prop("value") !== $(cb_item).prop("value")) {
                             $(cb_item).prop("checked", false);
@@ -173,6 +176,10 @@ function init_shifts_list() {
  * Inits the page when the calendar is displayed
  */
 function init_calendar_page() {
+    if (vw <= 768) {
+        $(".loading-calendar").show();
+    }
+
     if (incoming_shifts !== null) {
         init_shifts_list();
     } else {
@@ -185,7 +192,6 @@ function init_calendar_page() {
         $("#need_to_select_makeups_message").show();
     }
 
-    const vw = window.innerWidth;
     let default_initial_view = "";
     let header_toolbar = {};
 
@@ -195,19 +201,20 @@ function init_calendar_page() {
             left: 'title',
             center: 'dayGridMonth,listWeek,timeGridDay',
             right: 'prev,next today'
-        }
+        };
     } else {
         default_initial_view = 'dayGridMonth';
         header_toolbar = {
             left: 'prev,next today',
             center: 'title',
             right: 'dayGridMonth,listWeek,timeGridDay'
-        }
+        };
     }
 
     const hidden_days = $.map(days_to_hide.split(", "), Number);
 
     const calendarEl = document.getElementById('calendar');
+
     calendar = new FullCalendar.Calendar(calendarEl, {
         locale: 'fr',
         initialView: default_initial_view,
@@ -231,17 +238,18 @@ function init_calendar_page() {
                 // Set new shift
                 const datetime_new_shift = info.event.start;
                 let new_shift_date = datetime_new_shift.toLocaleDateString("fr-fr", date_options);
-                let new_shift_time = datetime_new_shift.toLocaleTimeString("fr-fr", time_options)
+                let new_shift_time = datetime_new_shift.toLocaleTimeString("fr-fr", time_options);
 
                 if (selected_shift !== null && can_exchange_shifts()) {
                     /* shift exchange */
                     // Set old shift
                     let datetime_old_shift = new Date(selected_shift.date_begin);
                     let old_shift_date = datetime_old_shift.toLocaleDateString("fr-fr", date_options);
-                    let old_shift_time = datetime_old_shift.toLocaleTimeString("fr-fr", time_options)                    
+                    let old_shift_time = datetime_old_shift.toLocaleTimeString("fr-fr", time_options);
 
                     // Display modal
                     let modal_template = $("#modal_shift_exchange_template");
+
                     modal_template.find(".date_old_shift").text(old_shift_date);
                     modal_template.find(".time_old_shift").text(old_shift_time);
                     modal_template.find(".date_new_shift").text(new_shift_date);
@@ -264,6 +272,7 @@ function init_calendar_page() {
                 } else if (can_select_makeup()) {
                     /* choose a makeup service */
                     let modal_template = $("#modal_add_shift_template");
+
                     modal_template.find(".date_new_shift").text(new_shift_date);
                     modal_template.find(".time_new_shift").text(new_shift_time);
 
@@ -278,33 +287,34 @@ function init_calendar_page() {
             }
         },
         eventDidMount: function() {
-            if (vw <=768) {
+            if (vw <= 768) {
                 $(".fc .fc-header-toolbar").addClass("resp-header-toolbar");
-            }
 
+                // Calendar is hidden at first on mobile to hide header change when data is loaded
+                $(".loading-calendar").hide();
                 $("#calendar").show();
             }
+        }
     });
 
     calendar.render();
 }
 
 function init_shifts_exchange() {
-    // TODO : loading
-    // TODO : suspended
-
     $(".shifts_exchange_page_content").hide();
+    vw = window.innerWidth;
 
     if (partner_data.cooperative_state === 'unsubscribed') {
-        // TODO
-        // $(".unsuscribed_form_link")
-        //     .show()
-        //     .attr('href', unsuscribe_form_link)
-        //     .on('click', function() {
-        //         setTimeout(500, () => {
-        //             $(this).removeClass('active');
-        //         });
-        //     });
+        $("#unsuscribed_content").show();
+
+        $(".unsuscribed_form_link")
+            .show()
+            .attr('href', unsuscribe_form_link)
+            .on('click', function() {
+                setTimeout(500, () => {
+                    $(this).removeClass('active');
+                });
+            });
     } else if (partner_data.cooperative_state === 'suspended'
                 && partner_data.date_delay_stop === 'False') {
         $("#suspended_content").show();
@@ -325,5 +335,4 @@ function init_shifts_exchange() {
         $("#shifts_exchange_content").show();
         init_calendar_page();
     }
-
 }
\ No newline at end of file

templates/members_space/shifts_exchange.html

 <div id="shifts_exchange">
+    <div id="unsuscribed_content" class="shifts_exchange_page_content">
+        <h3>Je suis désinscrit.e, je dois remplir un formulaire pour qu'on me réinscrive à un créneau.</h3>
+        <a href="#" target="_blank" class="btn--warning unsuscribed_form_link">
+            J'accède au formulaire
+        </a>
+    </div>
     <div id="suspended_content" class="shifts_exchange_page_content">
         <h3>Je suis suspendu.e, je dois sélectionner mes rattrapages pour pouvoir refaire mes courses.</h3>
         <button type="button" class="btn--danger select_makeups">
@@ -20,6 +26,9 @@
             </div>
             <div id="shifts_list"></div>
         </div>
+        <div class="loading-calendar">
+            <i class="fas fa-spinner fa-spin fa-2x"></i>
+        </div>
         <div id="calendar"></div>
     </div>
 </div>