display member info on homepage

members_space/static/css/members-space-header.css

@@ -25,7 +25,7 @@
 
 /* Add an active class to highlight the current page */
 .topnav a.active {
-    background-color: #5cb85c;
+    background-color: #00a573;
     color: white;
 }
 

members_space/static/css/members-space.css

@@ -50,13 +50,14 @@ body {
     justify-content: center;
 }
 
+
+/* -- My Shifts tile */
+
 #home_tile_my_services .tile_content {
     height: 100%;
     flex-direction: column;
 }
 
-/* -- My Shifts tile */
-
 #home_incoming_services {
     min-height: 80px;
     display: flex;
@@ -75,4 +76,57 @@ body {
 .shift_line_chevron {
     color: #D9534F;
     margin-right: 5px;
+}
+
+/* -- My Info tile*/
+
+.tile_icon {
+    margin-right: 15px;
+    color: #00a573;
+}
+
+#home_tile_my_info .tile_content {
+    height: 100%;
+    flex-direction: column;
+    align-items: center;
+    font-size: 2.3rem;
+}
+
+.home_member_info {
+    font-size: 2rem;
+    font-weight: bold;
+}
+
+#home_member_status_extra_info_area {
+    margin-bottom:20px;
+}
+#home_choose_makeups {
+    display: none;
+}
+
+.member_status_up_to_date,
+.member_status_exempted {
+    color: #5cb85c;
+}
+.member_status_alert,
+.member_status_delay {
+    color: #f0ad4e;
+}
+.member_status_suspended,
+.member_status_unsubscribed {
+    color: #d9534f;
+}
+
+#home_member_shift_name_area,
+#home_member_coop_number_area {
+    margin-bottom: 10px;
+}
+
+@media screen and (max-width: 768px) {
+    #home_member_shift_name_area,
+    #home_member_coop_number_area {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
 }
\ No newline at end of file

members_space/static/js/members-space-home.js

+const possible_cooperative_state = {
+    suspended: "Suspendu.e",
+    exempted: "Exempté.e",
+    alert: "En alerte",
+    up_to_date: "À jour",
+    unsubscribed: "Désinscrit.e",
+    delay: "En délai"
+}
+
 function init_my_shifts_tile() {
     if (incoming_shifts.length === 0) {
         $("#home_tile_my_services #home_incoming_services").text("Aucun service à venir...")
@@ -18,6 +27,40 @@ function init_my_shifts_tile() {
     }
 }
 
+function init_my_info_tile() {
+    // Status related
+    $("#home_tile_my_info #home_member_status")
+        .text(possible_cooperative_state[partner_data.cooperative_state])
+        .addClass("member_status_" + partner_data.cooperative_state);
+
+    if (partner_data.makeups_to_do > 0) {
+        $("#home_choose_makeups").show();
+        
+        if (
+            partner_data.cooperative_state === 'suspended' 
+            && partner_data.date_delay_stop === 'False') 
+        {
+            // If the member is suspended & doesn't have a delay
+            $("#home_choose_makeups").on('click', () => {
+                // Create 6 month delay
+
+                // Then redirect to calendar
+                goto('echange-de-services');
+            });
+        } else {
+            $("#home_choose_makeups").on('click', () => {
+                goto('echange-de-services');
+            });
+        }
+    }
+    // date_delay_stop : if exists: 2021-09-22 ; else: False
+
+    $("#home_tile_my_info #home_member_shift_name").text(partner_data.regular_shift_name);
+
+    // TODO coop number for attached people ??
+    $("#home_tile_my_info #home_member_coop_number").text(partner_data.barcode_base);
+}
+
 function init_home() {
     $("#go_to_calendar_button").on("click", () => {
         goto('echange-de-services');
@@ -25,6 +68,8 @@ function init_home() {
     $("#home_go_to_shift_history").on("click", () => {
         goto('mes-services');
     });
+
+    init_my_info_tile();
     
     if (incoming_shifts !== null) {
         init_my_shifts_tile();

shifts/models.py

@@ -36,7 +36,7 @@ class CagetteShift(models.Model):
         fields = ['display_name', 'display_std_points',
                   'shift_type', 'date_alert_stop', 'date_delay_stop', 'extension_ids',
                   'cooperative_state', 'final_standard_point', 'create_date',
-                  'final_ftop_point', 'in_ftop_team', 'leave_ids']
+                  'final_ftop_point', 'in_ftop_team', 'leave_ids', 'makeups_to_do', 'barcode_base']
         partnerData = self.o_api.search_read('res.partner', cond, fields, 1)
         if partnerData:
             partnerData = partnerData[0]

templates/members_space/home.html

@@ -5,21 +5,35 @@
   <div class="tiles_container">
     <div class="tile" id="home_tile_my_info">
       <div class="tile_title">
+        <i class="fas fa-user tile_icon"></i>
         Mes Infos
       </div>
       <div class="tile_content">
-        À venir...
+        <p>Mon statut : <span id="home_member_status" class="home_member_info"></span></p>
+        <div id="home_member_status_extra_info_area">
+          <button type="button" class="btn--danger" id="home_choose_makeups">
+            Je sélectionne mes rattrapages
+          </button>
+        </div>
+        <div id="home_member_shift_name_area">
+          <span>Mon créneau : </span>
+          <span id="home_member_shift_name" class="home_member_info"></span>
+        </div>
+        <div id="home_member_coop_number_area">
+          <span>Mon numéro de coop : </span>
+          <span id="home_member_coop_number" class="home_member_info"></span>
+        </div>
       </div>
     </div>
     <div class="tile" id="home_tile_my_services">
       <div class="tile_title">
+        <i class="fas fa-clipboard tile_icon"></i>
         Mes Services
       </div>
       <div class="tile_content">
         <h3>Services à venir</h3>
         <div id="home_incoming_services">
           <i class="fas fa-spinner fa-spin fa-lg"></i>
-          
         </div>
         <button type="button", class="btn btn--primary" id="home_go_to_shift_history">
           Accéder à mon historique
@@ -28,6 +42,7 @@
     </div>
     <div class="tile" id="home_tile_services_exchange">
       <div class="tile_title">
+        <i class="fas fa-exchange-alt tile_icon"></i>
         Échange de services
       </div>
       <div class="tile_content">
@@ -38,6 +53,7 @@
     </div>
     <div class="tile" id="home_tile_help">
       <div class="tile_title">
+        <i class="fas fa-question-circle tile_icon"></i>
         J'ai une demande
       </div>
       <div class="tile_content">

templates/members_space/index.html

@@ -39,7 +39,7 @@
     "in_ftop_team":"{{partnerData.in_ftop_team}}",
     "final_standard_point":"{{partnerData.final_standard_point}}",
     "final_ftop_point":"{{partnerData.final_ftop_point}}",
-    "dateProlonge":"{{partnerData.date_delay_stop}}",
+    "date_delay_stop":"{{partnerData.date_delay_stop}}",
     "date_alert_stop":"{{partnerData.date_alert_stop}}",
     "cooperative_state":"{{partnerData.cooperative_state}}",
     "is_leave": "{{partnerData.is_leave}}",
@@ -47,7 +47,9 @@
     "leave_stop_date": "{{partnerData.leave_stop_date}}",
     "next_regular_shift_date": "{{partnerData.next_regular_shift_date}}",
     "regular_shift_name": "{{partnerData.regular_shift_name}}",
-    "verif_token" : "{{partnerData.verif_token}}"
+    "verif_token" : "{{partnerData.verif_token}}",
+    "makeups_to_do" : "{{partnerData.makeups_to_do}}",
+    "barcode_base" : "{{partnerData.barcode_base}}",
   }
 </script>
 <script src="{% static "js/all_common.js" %}?v="></script>