Skip to content

T
third-party
Commit bae41870 by Damien Moulard
Options

interface restructuration & display incoming shifts on members space homepage

parent 150ac186
Showing with 345 additions and 70 deletions
members-space/static/css/members-space.css
...@@ -6,6 +6,8 @@ body { ...@@ -6,6 +6,8 @@ body {
margin: 35px 0 30px 0; margin: 35px 0 30px 0;
} }
/* -- Tiles */
.tiles_container { .tiles_container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
...@@ -33,8 +35,39 @@ body { ...@@ -33,8 +35,39 @@ body {
} }
.tile_content { .tile_content {
position: relative;
margin: 3rem 0; margin: 3rem 0;
width: 80%; width: 80%;
display: flex; display: flex;
}
#tile_services_exchange .tile_content {
justify-content: center; 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() { function toggleHeader() {
var x = document.getElementById("topnav"); var x = document.getElementById("topnav");
if (x.className === "topnav") { if (x.className === "topnav") {
...@@ -9,24 +11,17 @@ function toggleHeader() { ...@@ -9,24 +11,17 @@ function toggleHeader() {
} }
$(document).ready(function() { $(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 // Navbar redirections
let base_location = (app_env === 'dev') ? '/members-space/' : '/';
$('#nav_home').on('click', function() { $('#nav_home').on('click', function() {
document.location.href = base_location; goto('home');
}); });
$('#nav_my_info').on('click', function() { $('#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 0 → 100644
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 0 → 100644
function init_my_info() {
console.log('hello my info');
}
\ No newline at end of file
members-space/static/js/members-space-my-shifts.js 0 → 100644
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 0 → 100644
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() { $(document).ready(function() {
$.ajaxSetup({ headers: { "X-CSRFToken": getCookie('csrftoken') } }); $.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 ...@@ -5,5 +5,10 @@ from . import views
urlpatterns = [ urlpatterns = [
url(r'^$', views.index), 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): ...@@ -101,10 +101,37 @@ def index(request, exception=None):
return _get_response_according_to_credentials(request, credentials, context, template) 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): def my_info(request):
template = loader.get_template('members-space/my-info.html') template = loader.get_template('members-space/my_info.html')
context = { context = {
'title': 'Mes Infos', '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)) return HttpResponse(template.render(context, request))
\ No newline at end of file
templates/members-space/header.html
...@@ -8,9 +8,9 @@ ...@@ -8,9 +8,9 @@
<div class="topnav" id="topnav"> <div class="topnav" id="topnav">
<a href="#" class="nav_item active" id="nav_home">Espace Membre</a> <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_info">Mes Infos</a>
<a href="#" class="nav_item" id="nav_my_services">Mes Services</a> <a href="#" class="nav_item" id="nav_my_shifts">Mes Services</a>
<a href="#" class="nav_item" id="nav_services_exchange">Échange de services</a> <a href="#" class="nav_item" id="nav_shifts_exchange">Échange de services</a>
<a href="#" class="nav_item" id="nav_calendar">Calendrier</a> <a href="#" class="nav_item" id="nav_calendar">Calendrier ABCD</a>
{# Disconnection button must have this id (logic in all_common.js) #} {# Disconnection button must have this id (logic in all_common.js) #}
<a href="#" id="deconnect">Déconnexion</a> <a href="#" id="deconnect">Déconnexion</a>
<a href="javascript:void(0);" class="icon" onclick="toggleHeader()"> <a href="javascript:void(0);" class="icon" onclick="toggleHeader()">
......
templates/members-space/home.html 0 → 100644
<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 @@ ...@@ -13,56 +13,41 @@
{% include "members-space/header.html" %} {% include "members-space/header.html" %}
<div id="main_content" class="page_content"> <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>
<div id="templates" style="display:none;"> <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>
</div> </div>
<script> <script>
var app_env = '{{app_env}}'; 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>
<script src="{% static "js/all_common.js" %}?v="></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> <script src="{% static "js/members-space.js" %}?v="></script>
{% endblock %} {% endblock %}
templates/members-space/my-info.html deleted 100644 → 0
{% extends "members-space/index.html" %}
{% block members_space_content %}
<div>À venir...</div>
{% endblock %}
\ No newline at end of file
templates/members-space/no_content.html 0 → 100644
<div class="txtcenter">Contenu invrouvable...</div>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment