[MPP-3] add new plaines displayer for portail parent

templates/qommon/forms/widgets/portail_parent_plaines.html

@@ -0,0 +1,71 @@
+{% extends "qommon/forms/widget.html" %}
+{% block widget-content %}
+
+{% with webservice.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>{{ week.text }}</p>
+    {% for activity in week.activities %}
+    <div id="{{ activity.id }}" class="activity">
+        {{ activity.text }}
+      </div>
+    {% endfor %}
+  </div>
+{% endfor %}
+</div>
+{% endwith %}
+
+<script type="text/javascript">
+  dom_activities = document.querySelectorAll('.activity')
+  
+  function doing_stuff(index){
+  	element_id = document.querySelector('#var_activities_plaines input').id
+  	element_name = element_id + "$element" + index
+  	linked_element = document.getElementsByName(element_name)[0]
+  	linked_element.checked = !linked_element.checked
+  }
+
+  for(i=0; i<dom_activities.length; i++){
+    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');
+        doing_stuff(selected.id)
+      } else {
+      	this.classList.add('selected');
+      }
+      doing_stuff(this.id);
+    })
+  }
+
+</script>
+
+<style>
+#imio_plaine_weeks {
+    display: flex;
+}
+.activity {
+    border: 1px solid #bd1f68;
+    margin: 2px;
+    padding: 2px 4px;
+    cursor: pointer;
+}
+.activity:hover {
+    box-shadow: 0 0 10px #bd1f68;
+    color: #bd1f68;
+}
+
+.activity.selected {
+    background-color: rgba(189, 31, 104, 1);
+    font-weight: bold;
+    color: #FFF;
+}
+
+
+</style>
+{% endblock %}