219 lines
7.6 KiB
HTML
219 lines
7.6 KiB
HTML
{% 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 %}
|
|
{% 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 %}
|
|
{% if not forloop.first %}</ul></li>{% endif %}
|
|
<li><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.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 }}"
|
|
{% if option.options.prefill and not option.disabled %}data-was-checked{% endif %}
|
|
{% if widget.readonly and not option.disabled %}
|
|
{% if option.selected and not option.options.prefill %}data-has-change
|
|
{% elif not option.selected and option.options.prefill %}data-has-change
|
|
{% endif %}
|
|
{% endif %}
|
|
><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>
|
|
{% endspaceless %}
|
|
{% 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;
|
|
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;
|
|
}
|
|
|
|
.template-caluire-reservations-enfant.widget-readonly .content [data-status=green] input[disabled] + span::after {
|
|
background: #3f3;
|
|
}
|
|
|
|
.template-caluire-reservations-enfant.widget-readonly .content [data-status=green][data-was-checked] input[disabled]:not(:checked) + span::after {
|
|
background: orange;
|
|
}
|
|
|
|
.template-caluire-reservations-enfant .content [data-has-change] label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
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();
|
|
}
|
|
});
|
|
/* init first week shown */
|
|
var $cell = $('.template-caluire-reservations-enfant');
|
|
$('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');
|
|
}
|
|
$('.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 %}
|