toodego: agenda cells for caluire (#55586)
This commit is contained in:
Lauréline Guérin
parent
828f6653a9
commit
3d30aa6db2
|
|
@ -0,0 +1 @@
|
|||
{% extends 'combo/json/caluire-enfant-agenda.html' %}
|
||||
|
|
@ -0,0 +1,189 @@
|
|||
{% if json.extra_data %}
|
||||
<h2>Agenda de l'année scolaire {{ json.extra_data.school_year }}</h2>
|
||||
<div class="caluire-agenda-cell">
|
||||
{% with first_monday=json.extra_data.start_date|adjust_to_week_monday %}
|
||||
{% with last_day=json.extra_data.end_date|adjust_to_week_monday|add_days:6 %}
|
||||
{% now 'Y-m-d' as now %}
|
||||
|
||||
{% spaceless %}
|
||||
<button class="previous-week">←</button>
|
||||
<ul>
|
||||
{% for day in first_monday|iterate_days_until:last_day %}
|
||||
{% if day.weekday == 0 %}
|
||||
{% with sunday=day|add_days:6 %}
|
||||
<li class="week"><span class="week-title">Semaine<br class="weekbreak"> du {{ day|date:"d/m" }} au {{ sunday|date:"d/m" }}</span><ul>
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
<li class="day-title {% if now == day|date:"Y-m-d" %}current{% endif %}" data-weekday="{{ day.weekday }}"><strong>{{ day|date:"l d/m" }}</strong></li>
|
||||
{% with day_str=day|date:"Y-m-d" %}
|
||||
{% for item in json.data %}
|
||||
{% if item.details.JOURDATE == day_str %}
|
||||
|
||||
<li class="activity {% if item.disabled %}disabled{% endif %}"
|
||||
data-status="{{ item.details.status_color }}"
|
||||
><span><span>{{ item.details.activity_label }}</span></span>
|
||||
</li>
|
||||
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endwith %}
|
||||
{% if day.weekday == 6 %}
|
||||
</ul>
|
||||
<p class="booking-btn"><a class="pk-button" href="{{ eservices_url }}famille/gerer-mes-reservations/?child_id={{ child_id }}&reference_year={{ first_monday.year }}¤t={{ day|adjust_to_week_monday|date:"Y-m-d" }}">Modifier l'agenda</a></p>
|
||||
<p class="no-activity">Pas d'activité cette semaine</p>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<button class="next-week">→</button>
|
||||
{% endspaceless %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
<style>
|
||||
.caluire-agenda-cell {
|
||||
margin-top: 1em;
|
||||
display: flex;
|
||||
}
|
||||
.caluire-agenda-cell > ul {
|
||||
width: 100%;
|
||||
}
|
||||
.caluire-agenda-cell > ul > li {
|
||||
display: none;
|
||||
}
|
||||
.caluire-agenda-cell > ul > li.shown {
|
||||
display: block;
|
||||
}
|
||||
.caluire-agenda-cell button.previous-week,
|
||||
.caluire-agenda-cell button.next-week {
|
||||
height: 3em;
|
||||
z-index: 10;
|
||||
}
|
||||
.caluire-agenda-cell button.next-week {
|
||||
margin-left: 1em;
|
||||
margin-right: 0;
|
||||
}
|
||||
.caluire-agenda-cell .week-title {
|
||||
display: block;
|
||||
height: 3em;
|
||||
line-height: 3em;
|
||||
}
|
||||
.caluire-agenda-cell .no-activity {
|
||||
color: #888;
|
||||
}
|
||||
.caluire-agenda-cell li.day-title {
|
||||
margin: 1em 0 0.5em 0;
|
||||
}
|
||||
.caluire-agenda-cell ul ul {
|
||||
list-style: none;
|
||||
}
|
||||
.caluire-agenda-cell li.disabled {
|
||||
color: #888;
|
||||
}
|
||||
.caluire-agenda-cell li > span {
|
||||
position: relative;
|
||||
}
|
||||
.caluire-agenda-cell span > span {
|
||||
padding-left: 1.8em;
|
||||
}
|
||||
.caluire-agenda-cell span > span::before {
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
height: calc(0.66rem + 2px);
|
||||
width: calc(0.66rem + 2px);
|
||||
background: transparent;
|
||||
top: 0.33rem;
|
||||
left: 0;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.caluire-agenda-cell span > span::after {
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
height: calc(0.66rem);
|
||||
width: calc(0.66rem);
|
||||
background: transparent;
|
||||
transition: background 0.1s linear;
|
||||
top: calc(0.33rem + 1px);
|
||||
left: 1px;
|
||||
}
|
||||
.caluire-agenda-cell [data-status=green] span > span::after {
|
||||
background: #3c3;
|
||||
}
|
||||
.caluire-agenda-cell [data-status=grey] span > span::after {
|
||||
background: #aaa;
|
||||
}
|
||||
.caluire-agenda-cell [data-status=orange] span > span::after {
|
||||
background: orange;
|
||||
}
|
||||
.caluire-agenda-cell [data-status=red] span > span::after {
|
||||
background: red;
|
||||
}
|
||||
.caluire-agenda-cell [data-status=yellow] span > span::after {
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
br.weekbreak { display: none; }
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
|
||||
br.weekbreak { display: block; }
|
||||
|
||||
div.caluire-agenda-cell > ul {
|
||||
margin: 0 -4em;
|
||||
}
|
||||
div.caluire-agenda-cell > ul .week-title {
|
||||
margin: 0 4em;
|
||||
line-height: 150%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$('.caluire-agenda-cell .previous-week').on('click', function() {
|
||||
var $cell = $(this).parents('.caluire-agenda-cell');
|
||||
var $prev = $('li.shown', $cell).prev();
|
||||
if ($prev.length) { $('li.shown', $cell).removeClass('shown'); $prev.addClass('shown'); }
|
||||
return false;
|
||||
});
|
||||
$('.caluire-agenda-cell .next-week').on('click', function() {
|
||||
var $cell = $(this).parents('.caluire-agenda-cell');
|
||||
var $next = $('li.shown', $cell).next();
|
||||
if ($next.length) { $('li.shown', $cell).removeClass('shown'); $next.addClass('shown'); }
|
||||
return false;
|
||||
});
|
||||
$('.caluire-agenda-cell li.day-title').each(function(idx, elem) {
|
||||
/* hide empty days */
|
||||
var $next = $(elem).next();
|
||||
if ($next.length == 0 || $next.is('.day-title')) {
|
||||
$(elem).hide();
|
||||
}
|
||||
});
|
||||
$('.caluire-agenda-cell li.week').each(function(idx, elem) {
|
||||
/* hide no-activity message if not empty */
|
||||
if ($('.activity', $(elem)).length > 0) {
|
||||
$('.no-activity', $(elem)).hide();
|
||||
}
|
||||
/* hide booking button if all items are disabled */
|
||||
if ($('.activity', $(elem)).not('.disabled').length == 0) {
|
||||
$('.booking-btn', $(elem)).hide();
|
||||
}
|
||||
});
|
||||
$('.caluire-agenda-cell').each(function(idx, elem) {
|
||||
/* init first week shown */
|
||||
var $cell = $(this);
|
||||
$('li', $cell).removeClass('shown');
|
||||
if ($('li.day-title.current', $cell).length) {
|
||||
$('li.day-title.current', $cell).parent().parent().addClass('shown');
|
||||
} else {
|
||||
$('li', $cell).first().addClass('shown');
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
@ -27,6 +27,6 @@
|
|||
<p>
|
||||
{% now "n" as current_month %}
|
||||
{% if current_month in "678" %}<a class="pk-button" href="/espace-famille/child/{{ child.data.id }}">Inscriptions de l'an prochain</a>{% endif %}
|
||||
<a class="pk-button" href="{{ eservices_url }}famille/gerer-mes-reservations/?child_id={{ child.data.id }}">Modifier l'agenda</a></p>
|
||||
<a class="pk-button" href="/espace-famille/child/{{ child.data.id }}">Voir l'agenda</a></p>
|
||||
</div>
|
||||
{% endwith %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue