interface restructuration & display incoming shifts on members space homepage

members-space/static/css/members-space.css

@@ -6,6 +6,8 @@ body {
     margin: 35px 0 30px 0;
 }
 
+/* -- Tiles */
+
 .tiles_container {
     display: flex;
     flex-wrap: wrap;
@@ -33,8 +35,39 @@ body {
 }
 
 .tile_content {
+    position: relative;
     margin: 3rem 0;
     width: 80%;
     display: flex;
+}
+
+#tile_services_exchange .tile_content {
     justify-content: center;
 }
+
+#tile_my_services .tile_content {
+    height: 100%;
+    flex-direction: column;
+}
+
+/* -- My Shifts tile */
+
+#home_incoming_services {
+    min-height: 80px;
+    display: flex;
+    flex-direction: column;
+}
+
+#home_go_to_shift_history {
+    margin-top: 30px;
+}
+
+.shift_line {
+    margin-left: 15px;
+    line-height: 2;
+}
+
+.shift_line_chevron {
+    color: #D9534F;
+    margin-right: 5px;
+}
\ No newline at end of file

members-space/static/js/members-space-header.js

-/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
+/**
+ * Toggle the navbar on mobile screens
+ */
 function toggleHeader() {
     var x = document.getElementById("topnav");
     if (x.className === "topnav") {
@@ -9,24 +11,17 @@ function toggleHeader() {
 } 
 
 $(document).ready(function() {
-    // let location = window.location.href.substring(window.location.href.lastIndexOf('/') + 1);
-    var url = window.location.href.replace(/\/$/, '');  /* remove optional end / */ 
-    var location = url.substr(url.lastIndexOf('/') + 1);
-    
-    $(".nav_item").removeClass('active');
-    if (location === "mes-infos") {
-        $("#nav_my_info").addClass("active");
-    } else {
-        $("#nav_home").addClass("active");
-    }
-
     // Navbar redirections
-    let base_location = (app_env === 'dev') ? '/members-space/' : '/';
-
     $('#nav_home').on('click', function() {
-        document.location.href = base_location;
+        goto('home');
     });
     $('#nav_my_info').on('click', function() {
-        document.location.href = base_location + "mes-infos";
+        goto('mes-infos');
+    });
+    $('#nav_my_shifts').on('click', function() {
+        goto('mes-services');
+    });
+    $('#nav_shifts_exchange').on('click', function() {
+        goto('echange-de-services');
     });
 });

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

+function init_my_shifts_tile() {
+    if (incoming_shifts.length === 0) {
+        $("#tile_my_services #home_incoming_services").text("Aucun service à venir...")
+    } else {
+        $("#tile_my_services #home_incoming_services").empty();
+        let shift_line_template = $("#shift_line_template");
+        
+        let cpt = 0;
+        for (shift of incoming_shifts) {
+            if (cpt === 3) {
+                break;
+            } else {
+                let datetime_shift_start = new Date(shift.date_begin);
+
+                let f_date_shift_start = datetime_shift_start.toLocaleDateString("fr-fr", date_options);
+                f_date_shift_start = f_date_shift_start.charAt(0).toUpperCase() + f_date_shift_start.slice(1);
+                
+                shift_line_template.find(".shift_line_date").text(f_date_shift_start);
+                shift_line_template.find(".shift_line_time").text(datetime_shift_start.toLocaleTimeString("fr-fr"));
+
+                $("#tile_my_services #home_incoming_services").append(shift_line_template.html());
+
+                cpt++;
+            }
+        }
+    }
+}
+
+function init_home() {
+    $("#go_to_calendar_button").on("click", () => {
+        goto('echange-de-services');
+    });
+    $("#home_go_to_shift_history").on("click", () => {
+        goto('mes-services');
+    });
+    
+    if (incoming_shifts !== null) {
+        init_my_shifts_tile();
+    } else {
+        load_partner_shifts(partner_data.partner_id)
+            .then(init_my_shifts_tile);
+    }
+}
\ No newline at end of file

members-space/static/js/members-space-my-info.js

+function init_my_info() {
+    console.log('hello my info');
+    
+}
\ No newline at end of file

members-space/static/js/members-space-my-shifts.js

+function init_my_shifts() {
+    console.log('hello my services');
+    
+    /**
+     * if no incoming_services || no history {
+     *      if no incoming : load incoming
+     *      if no history : load hitstory
+     * } else {
+     *      do the stuff
+     * }
+     */
+}
\ No newline at end of file

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

+function init_shifts_exchange() {
+    console.log('hello my services');
+}
\ No newline at end of file

members-space/static/js/members-space.js

-var test = null;
+/**
+ * Common logic between pages
+ */
+
+var base_location = null,
+    current_location = null,
+    incoming_shifts = null;
+
+var date_options = {weekday: "long", year: "numeric", month: "long", day: "numeric"};
+
+/* - Data */
+
+/**
+ * Load the shifts the member is registered to
+ * @param {int} partner_id 
+ */
+function load_partner_shifts(partner_id) {
+    return new Promise((resolve, reject) => {
+        $.ajax({
+            type: 'GET',
+            url: "/shifts/get_list_shift_partner/" + partner_id,
+            data: {
+                limit: 3
+            },
+            dataType:"json",
+            traditional: true,
+            contentType: "application/json; charset=utf-8",
+            success: function(data) {
+                incoming_shifts = data;
+                resolve();
+            },
+            error: function(data) {
+                err = {msg: "erreur serveur lors de la récupération des services", ctx: 'load_partner_shifts'};
+                if (typeof data.responseJSON != 'undefined' && typeof data.responseJSON.error != 'undefined') {
+                    err.msg += ' : ' + data.responseJSON.error;
+                }
+                report_JS_error(err, 'members-space.index');
+
+                closeModal();
+                // TODO Notify
+                alert('Erreur lors de la récupération de vos services.');
+            }
+        });
+    });
+}
+
+/* - Navigation */
+
+/**
+ * 
+ * @param {String} page home | mes-infos | mes-services | echange-de-services
+ */
+ function goto(page) {
+    if (window.location.pathname === base_location) {
+        history.pushState({}, '', page);
+    } else {
+        history.replaceState({}, '', page);
+    }
+    update_dom();
+}
+
+/**
+ * Define which html content to load from server depending on the window location
+ */
+function update_dom() {
+    $(".nav_item").removeClass('active');
+
+    if (window.location.pathname === base_location || window.location.pathname === base_location + "home") {
+        current_location = "home";
+        $( "#main_content" ).load( "/members-space/homepage", update_content );
+        $("#nav_home").addClass("active");
+    } else if (window.location.pathname === base_location + "mes-infos") {
+        current_location = "my_info";
+        $( "#main_content" ).load( "/members-space/my_info", update_content );
+        $("#nav_my_info").addClass("active");
+    } else if (window.location.pathname === base_location + "mes-services") {
+        current_location = "my_shifts";
+        $( "#main_content" ).load( "/members-space/my_shifts", update_content );
+        $("#nav_my_shifts").addClass("active");
+    } else if (window.location.pathname === base_location + "echange-de-services") {
+        current_location = "shifts_exchange";
+        $( "#main_content" ).load( "/members-space/shifts_exchange", update_content );
+        $("#nav_shifts_exchange").addClass("active");
+    } else {
+        $( "#main_content" ).load( "/members-space/no_content" );
+    }
+}
+
+/**
+ * Update the data displayed depending on the current location (ex: insert personal data in the DOM when on the 'My Info' page)
+ */
+ function update_content() {
+    switch (current_location) {
+        case 'home':
+            init_home();
+            break;
+        case 'my_info':
+            init_my_info();
+            break;
+        case 'my_services':
+            init_my_shifts();
+            break;
+        case 'shifts_exchange':
+            init_my_shifts();
+            break;
+        default:
+          console.log(`Bad input`);
+      }
+}
 
 $(document).ready(function() {
     $.ajaxSetup({ headers: { "X-CSRFToken": getCookie('csrftoken') } });
+
+    base_location = (app_env === 'dev') ? '/members-space/' : '/';
+    update_dom();
 });

members-space/urls.py

@@ -5,5 +5,10 @@ from . import views
 
 urlpatterns = [
     url(r'^$', views.index),
-    url(r'^mes-infos$', views.my_info),
+    url(r'^homepage$', views.home),
+    url(r'^my_info$', views.my_info),
+    url(r'^my_shifts$', views.my_shifts),
+    url(r'^shifts_exchange$', views.shifts_exchange),
+    url(r'^no_content$', views.no_content),
+    url('/*$', views.index),
 ]

members-space/views.py

@@ -101,10 +101,37 @@ def index(request, exception=None):
 
     return _get_response_according_to_credentials(request, credentials, context, template)
 
+def home(request):
+    template = loader.get_template('members-space/home.html')
+    context = {
+        'title': 'Espace Membres',
+    }
+    return HttpResponse(template.render(context, request))
+
 def my_info(request):
-    template = loader.get_template('members-space/my-info.html')
+    template = loader.get_template('members-space/my_info.html')
     context = {
         'title': 'Mes Infos',
-        'app_env': getattr(settings, 'APP_ENV', 'prod')
+    }
+    return HttpResponse(template.render(context, request))
+
+def my_shifts(request):
+    template = loader.get_template('members-space/my_shifts.html')
+    context = {
+        'title': 'Mes Services',
+    }
+    return HttpResponse(template.render(context, request))
+
+def shifts_exchange(request):
+    template = loader.get_template('members-space/shifts_exchange.html')
+    context = {
+        'title': 'Échange de Services',
+    }
+    return HttpResponse(template.render(context, request))
+
+def no_content(request):
+    template = loader.get_template('members-space/no_content.html')
+    context = {
+        'title': 'Contenu non trouvé',
     }
     return HttpResponse(template.render(context, request))
\ No newline at end of file

templates/members-space/header.html

@@ -8,9 +8,9 @@
     <div class="topnav" id="topnav">
         <a href="#" class="nav_item active" id="nav_home">Espace Membre</a>
         <a href="#" class="nav_item" id="nav_my_info">Mes Infos</a>
-        <a href="#" class="nav_item" id="nav_my_services">Mes Services</a>
-        <a href="#" class="nav_item" id="nav_services_exchange">Échange de services</a>
-        <a href="#" class="nav_item" id="nav_calendar">Calendrier</a>
+        <a href="#" class="nav_item" id="nav_my_shifts">Mes Services</a>
+        <a href="#" class="nav_item" id="nav_shifts_exchange">Échange de services</a>
+        <a href="#" class="nav_item" id="nav_calendar">Calendrier ABCD</a>
         {# Disconnection button must have this id (logic in all_common.js) #}
         <a href="#" id="deconnect">Déconnexion</a>
         <a href="javascript:void(0);" class="icon" onclick="toggleHeader()">

templates/members-space/home.html

+<div id="home">
+  <div class="page_title txtcenter">
+    <h1>Mon espace membre</h1>
+  </div>
+  <div class="tiles_container">
+    <div class="tile" id="tile_my_info">
+      <div class="tile_title">
+        Mes Infos
+      </div>
+      <div class="tile_content">
+        À venir...
+      </div>
+    </div>
+    <div class="tile" id="tile_my_services">
+      <div class="tile_title">
+        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 à l'historique de mes services
+        </button>
+      </div>
+    </div>
+    <div class="tile" id="tile_services_exchange">
+      <div class="tile_title">
+        Échange de services
+      </div>
+      <div class="tile_content">
+        <button type="button" class="btn--primary" id="go_to_calendar_button">
+            Accéder au calendrier d'échange de services
+        </button>
+      </div>
+    </div>
+    <div class="tile" id="tile_help">
+      <div class="tile_title">
+        J'ai une demande
+      </div>
+      <div class="tile_content">
+        À venir...
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file

templates/members-space/index.html

@@ -13,56 +13,41 @@
   {% include "members-space/header.html" %}
 
   <div id="main_content" class="page_content">
-    {% block members_space_content %}
-
-    <div class="page_title txtcenter">
-      <h1>Mon espace membre</h1>
-    </div>
-    <div class="tiles_container">
-      <div class="tile tile_my_info">
-        <div class="tile_title">
-          Mes Infos
-        </div>
-        <div class="tile_content">
-          À venir...
-        </div>
-      </div>
-      <div class="tile tile_my_info">
-        <div class="tile_title">
-          Mes Services
-        </div>
-        <div class="tile_content">
-          À venir...
-        </div>
-      </div>
-      <div class="tile tile_my_info">
-        <div class="tile_title">
-          Échange de services
-        </div>
-        <div class="tile_content">
-          À venir...
-        </div>
-      </div>
-      <div class="tile tile_my_info">
-        <div class="tile_title">
-          J'ai une demande
-        </div>
-        <div class="tile_content">
-          À venir...
-        </div>
-      </div>
-    </div>
-
-    {% endblock %}
   </div>
 
   <div id="templates" style="display:none;">
+    <div id="shift_line_template">
+      <div class="shift_line">
+        <i class="fas fa-chevron-right shift_line_chevron"></i>
+        <span class="shift_line_date"></span> - <span class="shift_line_time"></span>
+      </div>
+    </div>
   </div>
 </div>
 
 <script>
   var app_env = '{{app_env}}';
+  var partner_data = {
+    "partner_id":"{{partnerData.id}}",
+    "name":"{{partnerData.display_name}}",
+    "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_alert_stop":"{{partnerData.date_alert_stop}}",
+    "cooperative_state":"{{partnerData.cooperative_state}}",
+    "is_leave": "{{partnerData.is_leave}}",
+    "leave_start_date": "{{partnerData.leave_start_date}}",
+    "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}}"
+  }
 </script>
 <script src="{% static "js/all_common.js" %}?v="></script>
+<script src="{% static "js/members-space-home.js" %}?v="></script>
+<script src="{% static "js/members-space-my-info.js" %}?v="></script>
+<script src="{% static "js/members-space-my-shifts.js" %}?v="></script>
+<script src="{% static "js/members-space-shifts-exchange.js" %}?v="></script>
 <script src="{% static "js/members-space.js" %}?v="></script>
 {% endblock %}

templates/members-space/my-info.html

-{% extends "members-space/index.html" %}
-
-{% block members_space_content %}
-    <div>À venir...</div>
-{% endblock %}
\ No newline at end of file

templates/members-space/my_info.html

+
+<div>À venir...</div>

templates/members-space/my_shifts.html

+
+<div>À venir...</div>

templates/members-space/no_content.html

+<div class="txtcenter">Contenu invrouvable...</div>
\ No newline at end of file

templates/members-space/shifts_exchange.html

+
+<div>À venir...</div>