124 lines
3.1 KiB
HTML
124 lines
3.1 KiB
HTML
{% extends "qommon/forms/widget.html" %}
|
|
{% block widget-content %}
|
|
|
|
{% with webservice.aes_get_available_plaines as activities %}
|
|
<h2>Activités proposées</h2>
|
|
<div id="imio_plaine_weeks">
|
|
{% for week in activities %}
|
|
<div class="imio_plaine_week">
|
|
<p>Semaine du {{ week.monday|date:"d F Y" }}</p>
|
|
{% for activity in week.activities %}
|
|
<div id="{{ activity.id }}" class="activity">
|
|
<p class="label">{{ activity.text }}</p>
|
|
<p class="remaining_places"><span>{{ activity.remaining_places }}</span> places restantes</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endwith %}
|
|
|
|
<script type="text/javascript">
|
|
$(function(){
|
|
|
|
let dom_activities = document.querySelectorAll('.activity');
|
|
let checkboxes_id = document.querySelector('#var_activities_plaines').getAttribute('data-widget-name');
|
|
|
|
function check_uncheck(index){
|
|
element_name = checkboxes_id + "$element" + index;
|
|
linked_element = document.getElementsByName(element_name)[0];
|
|
linked_element.checked = !linked_element.checked;
|
|
}
|
|
|
|
for(i=0; i<dom_activities.length; i++){
|
|
|
|
let checkbox_name = checkboxes_id + "$element" + dom_activities[i].id;
|
|
|
|
if(document.getElementsByName(checkbox_name)[0].checked){
|
|
dom_activities[i].classList.add('selected');
|
|
}
|
|
|
|
dom_activities[i].addEventListener('click', function(e){
|
|
let selected = this.parentNode.querySelector('.selected')
|
|
if (this.isSameNode(selected)) {
|
|
this.classList.remove('selected');
|
|
} else if (selected != null) {
|
|
selected.classList.remove('selected');
|
|
this.classList.add('selected');
|
|
check_uncheck(selected.id)
|
|
} else {
|
|
this.classList.add('selected');
|
|
}
|
|
check_uncheck(this.id);
|
|
})
|
|
}
|
|
})
|
|
</script>
|
|
<style>
|
|
#imio_plaine_weeks {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.imio_plaine_week {
|
|
min-width: 12em;
|
|
max-width: 50%;
|
|
margin-bottom: 2ex;
|
|
}
|
|
.imio_plaine_week > p {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
font-size: 0.8em;
|
|
}
|
|
.activity {
|
|
border: #d3d3d3 solid 1px;
|
|
margin: 5px 2px;
|
|
padding: 1ex;
|
|
cursor: pointer;
|
|
box-shadow: rgb(0 0 0 / 10%) 0px 4px 6px -1px, rgb(0 0 0 / 6%) 0px 2px 4px -1px;
|
|
transition: box-shadow 0.3s ease-in-out;
|
|
min-height: 8ex;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
}
|
|
.activity:hover {
|
|
box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) 0px 4px 6px -2px;
|
|
filter: brightness(1.1);
|
|
border: #212121 solid 1px;
|
|
}
|
|
|
|
.activity:active {
|
|
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
|
|
}
|
|
.activity.selected {
|
|
background-color: #386ede;
|
|
color: #FFF;
|
|
}
|
|
.activity p {
|
|
}
|
|
.activity p.label {
|
|
font-weight: bold;
|
|
margin: 0 0 1ex 0;
|
|
}
|
|
.activity p.remaining_places {
|
|
font-size: 0.8em;
|
|
margin: 0;
|
|
}
|
|
.activity p.remaining_places span {
|
|
font-weight: bold;
|
|
}
|
|
.activity.selected p.label:after {
|
|
content: " \002714";
|
|
}
|
|
@media all and (max-device-width: 450px) {
|
|
.imio_plaine_week {
|
|
max-width: none;
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|