toodego: add custom widget template for caluire bookings (#55336)
This commit is contained in:
parent
206203d1a3
commit
3117c2b0d1
|
|
@ -0,0 +1,191 @@
|
|||
{% extends "qommon/forms/widget.html" %}
|
||||
|
||||
{% block widget-control %}
|
||||
{% with options=widget.get_options|list %}
|
||||
{% with first_monday=options.0.options.details.JOURDATE|adjust_to_week_monday last_option=options|last %}
|
||||
{% with last_day=last_option.options.details.JOURDATE|adjust_to_week_monday|add_days:6 %}
|
||||
|
||||
<button class="previous-week">←</button>
|
||||
<ul>
|
||||
{% for day in first_monday|iterate_days_until:last_day %}
|
||||
{% if day.weekday == 0 %}
|
||||
{% if not forloop.first %}</ul></li>{% endif %}
|
||||
<li {% if forloop.first %}class="shown"{% endif %}><span class="week-title">Semaine<br class="weekbreak"> du {{day|date:"d/m"}} au {{day|add_days:6|date:"d/m"}}</span><ul>
|
||||
{% endif %}
|
||||
<li class="day-title" data-weekday="{{day.weekday}}"><strong>{{day|date:"l d/m"}}</strong></li>
|
||||
{% with day_str=day|date:"Y-m-d" %}
|
||||
{% for option in options %}
|
||||
{% if option.options.details.JOURDATE == day_str %}
|
||||
|
||||
<li {% if option.disabled %}class="disabled"{% endif %}
|
||||
data-activity-type="{{ option.options.details.activity_type }}"
|
||||
data-activity-id="{{ option.options.details.activity_id }}"
|
||||
data-date="{{ option.options.details.JOURDATE }}"
|
||||
data-status="{{ option.options.details.status_color }}"
|
||||
><label><input
|
||||
{% if not widget.value and option.options.prefill %}checked="checked"{% endif %}
|
||||
{% if option.selected %}checked="checked"
|
||||
{% elif widget.readonly or option.disabled %}disabled{% endif %}
|
||||
{% for attr in widget.attrs.items %}{{attr.0}}="{{attr.1}}"{% endfor %}
|
||||
type="checkbox"
|
||||
{% if widget.readonly %}value="yes" disabled
|
||||
{% else %}name="{{ option.name }}" value="yes"
|
||||
{% endif %}><span>{{ option.options.details.activity_label }}</span></label>
|
||||
{% if widget.readonly and option.selected %}<input type="hidden" name="{{ option.name }}" value="yes">{% endif %}
|
||||
</li>
|
||||
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endwith %}
|
||||
{% if forloop.last %}</ul></li>{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<button class="next-week">→</button>
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
<style>
|
||||
.template-caluire-reservations-enfant .content {
|
||||
margin-top: 1em;
|
||||
display: flex;
|
||||
}
|
||||
.template-caluire-reservations-enfant .content > ul {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.template-caluire-reservations-enfant .content > ul > li {
|
||||
display: none;
|
||||
}
|
||||
.template-caluire-reservations-enfant .content > ul > li.shown {
|
||||
display: block;
|
||||
}
|
||||
.template-caluire-reservations-enfant button.previous-week,
|
||||
.template-caluire-reservations-enfant button.next-week {
|
||||
height: 3em;
|
||||
z-index: 10;
|
||||
}
|
||||
.template-caluire-reservations-enfant button.next-week {
|
||||
margin-left: 1em;
|
||||
margin-right: 0;
|
||||
}
|
||||
.template-caluire-reservations-enfant .week-title {
|
||||
display: block;
|
||||
height: 3em;
|
||||
line-height: 3em;
|
||||
}
|
||||
.template-caluire-reservations-enfant li.day-title {
|
||||
margin: 1em 0 0.5em 0;
|
||||
}
|
||||
.template-caluire-reservations-enfant .content label {
|
||||
position: relative;
|
||||
}
|
||||
.template-caluire-reservations-enfant .content input[disabled] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
.template-caluire-reservations-enfant .content input[disabled] + span {
|
||||
padding-left: 1.8rem;
|
||||
}
|
||||
.template-caluire-reservations-enfant .content input[disabled] + 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 black;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.template-caluire-reservations-enfant .content input[disabled] + span::before {
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
.template-caluire-reservations-enfant .content input[disabled] + 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;
|
||||
}
|
||||
.template-caluire-reservations-enfant .content input:checked + span::after {
|
||||
background: #3c3;
|
||||
}
|
||||
.template-caluire-reservations-enfant .content input[disabled]:checked + span::after {
|
||||
background: #aaa;
|
||||
}
|
||||
.template-caluire-reservations-enfant .content [data-status=green] input[disabled]:checked + span::after {
|
||||
background: #3c3;
|
||||
}
|
||||
.template-caluire-reservations-enfant .content [data-status=grey] input[disabled] + span::after {
|
||||
background: #aaa;
|
||||
}
|
||||
.template-caluire-reservations-enfant .content [data-status=orange] input[disabled] + span::after {
|
||||
background: orange;
|
||||
}
|
||||
.template-caluire-reservations-enfant .content [data-status=red] input[disabled] + span::after {
|
||||
background: red;
|
||||
}
|
||||
.template-caluire-reservations-enfant .content [data-status=yellow] input[disabled] + span::after {
|
||||
background: yellow;
|
||||
}
|
||||
div.CheckboxesWidget.template-caluire-reservations-enfant div.content ul li.disabled {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.template-caluire-reservations-enfant.widget-readonly .content [data-status] input[disabled]:checked + span::after {
|
||||
background: #3f3;
|
||||
}
|
||||
|
||||
br.weekbreak { display: none; }
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
|
||||
br.weekbreak { display: block; }
|
||||
|
||||
div.template-caluire-reservations-enfant div.content > ul {
|
||||
margin: 0 -4em;
|
||||
}
|
||||
div.template-caluire-reservations-enfant div.content > ul .week-title {
|
||||
margin: 0 4em;
|
||||
line-height: 150%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$('.template-caluire-reservations-enfant .previous-week').on('click', function() {
|
||||
var $prev = $('li.shown').prev();
|
||||
if ($prev.length) { $('li.shown').removeClass('shown'); $prev.addClass('shown'); }
|
||||
return false;
|
||||
});
|
||||
$('.template-caluire-reservations-enfant .next-week').on('click', function() {
|
||||
var $next = $('li.shown').next();
|
||||
if ($next.length) { $('li.shown').removeClass('shown'); $next.addClass('shown'); }
|
||||
return false;
|
||||
});
|
||||
$('.template-caluire-reservations-enfant li.day-title').each(function(idx, elem) {
|
||||
/* hide empty days */
|
||||
var $next = $(elem).next();
|
||||
if ($next.length == 0 || $next.is('.day-title')) {
|
||||
$(elem).hide();
|
||||
}
|
||||
});
|
||||
$('.template-caluire-reservations-enfant input').on('change', function() {
|
||||
if ($(this).is(':checked')) {
|
||||
var $current_li = $(this).parents('li').first();
|
||||
$(this).parents('ul').find('li[data-activity-type="' +
|
||||
$current_li.data('activity-type') + '"][data-date="' +
|
||||
$current_li.data('date') + '"]:not([data-activity-id="' +
|
||||
$current_li.data('activity-id') + '"])').find('input').prop('checked', false);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue