242 lines
9.0 KiB
HTML
242 lines
9.0 KiB
HTML
{% extends "qommon/forms/widget.html" %}
|
|
|
|
{% block widget-control %}
|
|
{% with options=widget.get_options|list %}
|
|
|
|
{% with first_monday=options.0.options.date|date|adjust_to_week_monday last_option=options|last %}
|
|
{% with last_day=last_option.options.date|date|adjust_to_week_monday|add_days:6 %}
|
|
{% now 'Y-m-d' as now %}
|
|
|
|
<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 class="week{% if forloop.first %} 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 {% if form.var.current_day == day|date:"Y-m-d" or not form.var.current_day and 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 option in options %}
|
|
{% if option.options.date == day_str %}
|
|
|
|
<li {% if option.disabled %}class="disabled"{% endif %}
|
|
data-date="{{ option.options.date }}"
|
|
{% if option.options.status %}data-status="{{ option.options.status }}"{% endif %}
|
|
{% if widget.readonly and not option.disabled %}
|
|
{% if option.selected and not option.options.booked_for_external_user %}data-has-change
|
|
{% elif not option.selected and option.options.booked_for_external_user %}data-has-change
|
|
{% endif %}
|
|
{% endif %}
|
|
><label><input
|
|
{% if not widget.value and option.options.booked_for_external_user %}checked="checked"
|
|
{% elif widget.value and option.options.booked_for_external_user and option.disabled %}checked="checked"
|
|
{% elif option.selected %}checked="checked"{% endif %}
|
|
{% if 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>
|
|
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endwith %}
|
|
{% if forloop.last %}</ul></li>{% endif %}
|
|
{% endfor %}
|
|
</ul>
|
|
<button class="next-week">→</button>
|
|
{% endwith %}
|
|
{% endwith %}
|
|
{% endwith %}
|
|
<style>
|
|
.template-famille-reservations-par-semaine .content {
|
|
margin-top: 1em;
|
|
display: flex;
|
|
}
|
|
|
|
.template-famille-reservations-par-semaine .content ul li label {
|
|
line-height: 150%;
|
|
}
|
|
|
|
.template-famille-reservations-par-semaine.widget-readonly .content {
|
|
margin-right: 1em;
|
|
}
|
|
|
|
.template-famille-reservations-par-semaine .content > ul {
|
|
width: 100%;
|
|
}
|
|
|
|
.template-famille-reservations-par-semaine .content > ul > li {
|
|
display: none;
|
|
}
|
|
.template-famille-reservations-par-semaine .content > ul > li.shown {
|
|
display: block;
|
|
}
|
|
.template-famille-reservations-par-semaine button.previous-week,
|
|
.template-famille-reservations-par-semaine button.next-week {
|
|
height: 3em;
|
|
z-index: 10;
|
|
}
|
|
.template-famille-reservations-par-semaine button.previous-week {
|
|
margin-left: 0;
|
|
margin-right: 1em;
|
|
}
|
|
.template-famille-reservations-par-semaine button.next-week {
|
|
margin-left: 1em;
|
|
margin-right: 0;
|
|
}
|
|
.template-famille-reservations-par-semaine .week-title {
|
|
display: block;
|
|
height: 3em;
|
|
line-height: 3em;
|
|
}
|
|
.template-famille-reservations-par-semaine li.day-title {
|
|
margin: 1em 0 0.5em 0;
|
|
}
|
|
.template-famille-reservations-par-semaine .content label {
|
|
position: relative;
|
|
}
|
|
.template-famille-reservations-par-semaine .content input[disabled] {
|
|
position: absolute;
|
|
opacity: 0;
|
|
}
|
|
.template-famille-reservations-par-semaine .content input[disabled] + span {
|
|
padding-left: 1.66rem;
|
|
}
|
|
.template-famille-reservations-par-semaine .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-famille-reservations-par-semaine .content input[disabled] + span::before {
|
|
border: 1px solid #aaa;
|
|
}
|
|
.template-famille-reservations-par-semaine .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-par-semaine .content input:checked + span::after {
|
|
background: #3c3;
|
|
}
|
|
|
|
.template-famille-reservations-par-semaine .content [data-status=booked] input[disabled] + span::after {
|
|
background: #3c3;
|
|
}
|
|
.template-famille-reservations-par-semaine .content [data-status=absence] input[disabled] + span::after {
|
|
background: red;
|
|
}
|
|
.template-famille-reservations-par-semaine .content [data-status=cancelled] input[disabled] + span::after {
|
|
background: yellow;
|
|
}
|
|
|
|
div.CheckboxesWidget.template-famille-reservations-par-semaine div.content ul li.disabled {
|
|
color: #888;
|
|
}
|
|
|
|
.template-famille-reservations-par-semaine.widget-readonly .content [data-has-change] input[disabled]:checked + span::after {
|
|
background: #3f3;
|
|
}
|
|
|
|
.template-famille-reservations-par-semaine.widget-readonly .content [data-status=booked][data-has-change] input[disabled]:not(:checked) + span::after {
|
|
background: yellow;
|
|
}
|
|
|
|
.template-famille-reservations-par-semaine .content [data-has-change] label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
br.weekbreak { display: none; }
|
|
|
|
@media screen and (max-width: 500px) {
|
|
|
|
br.weekbreak { display: block; }
|
|
|
|
div.template-famille-reservations-par-semaine div.content > ul {
|
|
margin: 0 -4em;
|
|
}
|
|
div.template-famille-reservations-par-semaine div.content > ul .week-title {
|
|
margin: 0 4em;
|
|
line-height: 150%;
|
|
text-align: center;
|
|
}
|
|
|
|
}
|
|
</style>
|
|
<script>
|
|
|
|
function refresh_week_classes() {
|
|
$('p.activite').hide();
|
|
$('.week.shown [data-date]').each(function(idx, elem) {
|
|
$('.activite-' + $(elem).data('date')).show();
|
|
});
|
|
}
|
|
|
|
$('.template-famille-reservations-par-semaine .previous-week').on('click', function() {
|
|
var $prev = $('li.shown').prev();
|
|
if ($prev.length) { $('li.shown').removeClass('shown'); $prev.addClass('shown'); }
|
|
refresh_week_classes();
|
|
return false;
|
|
});
|
|
$('.template-famille-reservations-par-semaine .next-week').on('click', function() {
|
|
var $next = $('li.shown').next();
|
|
if ($next.length) { $('li.shown').removeClass('shown'); $next.addClass('shown'); }
|
|
refresh_week_classes();
|
|
return false;
|
|
});
|
|
$('.template-famille-reservations-par-semaine li.day-title').each(function(idx, elem) {
|
|
/* hide empty days */
|
|
var $next = $(elem).next();
|
|
if ($next.length == 0 || $next.is('.day-title')) {
|
|
$(elem).hide();
|
|
}
|
|
});
|
|
/* check overlaps */
|
|
$('.template-famille-reservations-par-semaine input').on('change', function() {
|
|
if ($(this).is(':checked')) {
|
|
$(this).parents('ul').find("input[data-overlaps~='"+$(this).data('event-id')+"']").prop('checked', false);
|
|
}
|
|
});
|
|
$('.template-famille-reservations-par-semaine input:disabled').each(function(index) {
|
|
if ($(this).attr('checked')) {
|
|
$(this).parents('ul').find("input[data-overlaps~='"+$(this).data('event-id')+"']").prop('disabled', true);
|
|
}
|
|
});
|
|
/* init first week shown */
|
|
var $cell = $('.template-famille-reservations-par-semaine');
|
|
$cell.find('li').removeClass('shown');
|
|
if ($('li.day-title.current', $cell).length) {
|
|
$('li.day-title.current', $cell).parents('li.week').addClass('shown');
|
|
} else {
|
|
$('li', $cell).first().addClass('shown');
|
|
}
|
|
|
|
refresh_week_classes();
|
|
|
|
var observer = new MutationObserver(refresh_week_classes);
|
|
$('.comment-field').each(function(idx, elem) {
|
|
observer.observe(elem, {attributes: true, childList: true})
|
|
});
|
|
|
|
</script>
|
|
{% endblock %}
|