From 3d30aa6db21e274c9b53e99816901cde2face7b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laur=C3=A9line=20Gu=C3=A9rin?= <zebuline@entrouvert.com>
Date: Tue, 13 Jul 2021 19:28:49 +0200
Subject: [PATCH] toodego: agenda cells for caluire (#55586)

---
 .../json/caluire-enfant-agenda-next-year.html |   1 +
 .../combo/json/caluire-enfant-agenda.html     | 189 ++++++++++++++++++
 .../toodego/combo/json/caluire-enfant.html    |   2 +-
 3 files changed, 191 insertions(+), 1 deletion(-)
 create mode 100644 templates/variants/toodego/combo/json/caluire-enfant-agenda-next-year.html
 create mode 100644 templates/variants/toodego/combo/json/caluire-enfant-agenda.html

diff --git a/templates/variants/toodego/combo/json/caluire-enfant-agenda-next-year.html b/templates/variants/toodego/combo/json/caluire-enfant-agenda-next-year.html
new file mode 100644
index 00000000..a4f923d6
--- /dev/null
+++ b/templates/variants/toodego/combo/json/caluire-enfant-agenda-next-year.html
@@ -0,0 +1 @@
+{% extends 'combo/json/caluire-enfant-agenda.html' %}
diff --git a/templates/variants/toodego/combo/json/caluire-enfant-agenda.html b/templates/variants/toodego/combo/json/caluire-enfant-agenda.html
new file mode 100644
index 00000000..4fc982b5
--- /dev/null
+++ b/templates/variants/toodego/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 }}&current={{ 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 %}
diff --git a/templates/variants/toodego/combo/json/caluire-enfant.html b/templates/variants/toodego/combo/json/caluire-enfant.html
index 1ae40ab3..0026e162 100644
--- a/templates/variants/toodego/combo/json/caluire-enfant.html
+++ b/templates/variants/toodego/combo/json/caluire-enfant.html
@@ -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 %}