publik-base-theme/templates/qommon/forms/widgets/famille-reservations-recurr...

91 lines
3.1 KiB
HTML

{% extends "qommon/forms/widget.html" %}
{% block widget-control %}
<ul>
{% regroup widget.get_options by options.day as options_list %}
{% for day, options in options_list %}
<li class="day-title"><strong>{{ day }}</strong></li>
<ul>
{% for option in options %}
<li data-date="{{ option.options.date }}"><label><input
{% 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"
data-event-id="{{ option.options.id }}"
data-overlaps="{{ option.options.overlaps|join:" " }}"
{% if widget.readonly %}value="yes" disabled
{% else %}name="{{ option.name }}" value="yes"
{% endif %}><span>{{ option.options.label }}</span></label>
{% if widget.readonly and option.selected %}<input type="hidden" name="{{ option.name }}" value="yes">{% endif %}
</li>
{% endfor %}
</ul>
{% endfor %}
</ul>
<style>
.template-famille-reservations-recurrentes .content {
margin-top: 1em;
display: flex;
}
.template-famille-reservations-recurrentes .content ul li label {
line-height: 150%;
}
.template-famille-reservations-recurrentes.widget-readonly .content {
margin-right: 1em;
}
.template-famille-reservations-recurrentes .content > ul {
width: 100%;
}
.template-famille-reservations-recurrentes li.day-title {
margin: 1em 0 0.5em 0;
}
.template-famille-reservations-recurrentes .content label {
position: relative;
}
.template-famille-reservations-recurrentes .content input[disabled] {
position: absolute;
opacity: 0;
}
.template-famille-reservations-recurrentes .content input[disabled] + span {
padding-left: 1.66rem;
}
.template-famille-reservations-recurrentes .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 #aaa;
border-radius: 2px;
}
.template-famille-reservations-recurrentes .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-famille-reservations-recurrentes .content input[disabled]:checked + span::after {
background: #3c3;
}
</style>
<script>
/* check overlaps */
$('.template-famille-reservations-recurrentes input').on('change', function() {
if ($(this).is(':checked')) {
$(this).parents('ul').find("input[data-overlaps~='"+$(this).data('event-id')+"']").prop('checked', false);
}
});
</script>
{% endblock %}