From 684c019daf76b499417c85e4ea5877a96b0ddb0e Mon Sep 17 00:00:00 2001
From: Andrea Lepori <alepori@student.ethz.ch>
Date: Tue, 23 Jun 2020 19:05:09 +0200
Subject: Nicer user list, multi group support

---
 server/templates/server/doc_create.html   |  22 ++-
 server/templates/server/doc_list.html     |  87 +++++++---
 server/templates/server/doc_type.html     |  30 +++-
 server/templates/server/download_doc.html |   2 +-
 server/templates/server/index.html        |  10 +-
 server/templates/server/user_list.html    | 263 +++++++++++++++++++++++++++---
 6 files changed, 357 insertions(+), 57 deletions(-)

(limited to 'server/templates')

diff --git a/server/templates/server/doc_create.html b/server/templates/server/doc_create.html
index 6454bee..1c469ae 100644
--- a/server/templates/server/doc_create.html
+++ b/server/templates/server/doc_create.html
@@ -80,14 +80,20 @@
           <br>
           <div class="row">
             <div class="input-field col s12">
-              <textarea name="custom" id="textarea" class="materialize-textarea"></textarea>
-              <label for="textarea">Lista parametri personalizzati, uno per riga</label>
+              <textarea name="custom" id="param" class="materialize-textarea"></textarea>
+              <label for="param">Lista parametri personalizzati, uno per riga</label>
             </div>
           </div>
           <div class="row">
             <div class="input-field col s12">
-              <textarea name="custom_message_text" id="textarea" class="materialize-textarea"></textarea>
-              <label for="textarea">Messaggio personalizzato</label>
+              <textarea name="custom_message_text" id="message" class="materialize-textarea"></textarea>
+              <label for="message">Messaggio personalizzato</label>
+            </div>
+          </div>
+          <div class="row">
+            <div class="input-field col s12">
+              <textarea name="custom_group" id="group" class="materialize-textarea"></textarea>
+              <label for="group">Gruppo personalizzato</label>
             </div>
           </div>
           <div class="fixed-action-btn">
@@ -100,4 +106,12 @@
     </div>
   </div>
 </div>
+{% endblock %}
+
+{% block script%}
+$(document).ready(function(){
+  {% if error %}
+    M.toast({html: '{{ error_text}}', classes: 'orange'})
+  {% endif %}
+});
 {% endblock %}
\ No newline at end of file
diff --git a/server/templates/server/doc_list.html b/server/templates/server/doc_list.html
index 961b9ab..5206d2f 100644
--- a/server/templates/server/doc_list.html
+++ b/server/templates/server/doc_list.html
@@ -36,8 +36,10 @@
         </li>
         <li><a class="tooltipped" data-position="top" data-tooltip="Archivia selezionati" onclick="send('archive')"><i class="material-icons">archive</i></a></li>
         <li><a class="tooltipped" data-position="top" data-tooltip="Dearchivia selezionati" Onclick="send('unarchive')"><i class="material-icons">unarchive</i></a></li>
-        <li><a class="tooltipped" data-position="top" data-tooltip="Approva selezionati" Onclick="send('approve')"><i class="material-icons left">check</i>DEBUG</a></li>
-        <li><a class="tooltipped" data-position="top" data-tooltip="Elimina selezionati" Onclick="send('delete')"><i class="material-icons left">delete</i>DEBUG</a></li>
+        {% if settings.DEBUG %}
+          <li><a class="tooltipped" data-position="top" data-tooltip="Approva selezionati" Onclick="send('approve')"><i class="material-icons left">check</i>DEBUG</a></li>
+          <li><a class="tooltipped" data-position="top" data-tooltip="Elimina selezionati" Onclick="send('delete')"><i class="material-icons left">delete</i>DEBUG</a></li>
+        {% endif %}
       </ul>
       <ul class="right">
         <li><a class="tooltipped" data-position="top" data-tooltip="Pulisci filtri" Onclick="send('clear')"><i class="material-icons">clear</i></a></li>
@@ -79,25 +81,34 @@
         </label>
       </div>
     </div>
+    <br>
     <div class="row">
-      <div class="input-field col s6">
-        <label for="newer">Pi&ugrave; recenti di</label>
-        <input value="{{newer}}" name="newer" id="newer" type="text" class="datepicker">
-      </div>
-      <div class="input-field col s6">
-        <label for="older">Pi&ugrave; vecchi di</label>
-        <input value="{{older}}" name="older" id="older" type="text" class="datepicker">
-      </div>
-    </div>
-    <div class = "row">
-      <div class="col s12">
-        <div id="chips_type" class="chips chips-placeholder chips-autocomplete"></div>
-      </div>
-    </div>
-    <div class ="row col s12">
-      <div class="col s12">
-        <div id="chips_owner" class="chips chips-placeholder chips-autocomplete "></div>
-      </div>
+      <ul class="collapsible"><li>
+        <div class="collapsible-header">Avanzati</div>
+        <div class="collapsible-body"><span>
+          <div class = "row">
+            <div class="input-field col s6">
+              <label for="newer">Pi&ugrave; recenti di</label>
+              <input value="{{newer}}" name="newer" id="newer" type="text" class="datepicker">
+            </div>
+            <div class="input-field col s6">
+              <label for="older">Pi&ugrave; vecchi di</label>
+              <input value="{{older}}" name="older" id="older" type="text" class="datepicker">
+            </div>
+          </div>
+          <div class = "row">
+            <div class="col s12">
+              <div id="chips_type" class="chips chips-placeholder chips-autocomplete"></div>
+            </div>
+            <div class="col s12">
+              <div id="chips_owner" class="chips chips-placeholder chips-autocomplete "></div>
+            </div>
+            <div class="col s12">
+              <div id="chips_groups" class="chips chips-placeholder chips-autocomplete "></div>
+            </div>
+          </div>
+        </span></div>
+      </li></ul>
     </div>
   </div>
   <div class="modal-footer">
@@ -107,6 +118,7 @@
 <input type="hidden" name="action" id="action">
 <input type="hidden" name="owner" id="owner">
 <input type="hidden" name="type" id="type">
+<input type="hidden" name="groups" id="groups">
 <ul class="collapsible">
     {% for doc in docs %}
         <li>
@@ -129,7 +141,7 @@
         </div>
         <div class="collapsible-body"><span>
           {% if doc.0.status == "ok" or doc.0.status == 'archive' %}
-            <a class="waves-effect waves-light btn red lighten-1" onclick="send('f{{doc.0.id}}')"><i class="material-icons left">file_download</i> Scarica documento</a>
+            <a class="waves-effect waves-light btn red lighten-1" onclick="send('k{{doc.0.id}}')"><i class="material-icons left">file_download</i> Scarica documento</a>
             <br>
             <br>
           {% endif %}
@@ -141,6 +153,13 @@
               </div>
             </li>
             {% endif %}
+            {% if doc.0.document_type.custom_group %}
+            <li>
+              <div class="collapsible-header">
+                <i class="material-icons">group_work</i>{{doc.0.group.name}}
+              </div>
+            </li>
+            {% endif %}
             <li>
               <div class="collapsible-header">
                 <i class="material-icons">send</i>{{doc.0.compilation_date}}
@@ -415,16 +434,37 @@ $('#chips_owner').chips({
     {% endfor %}
   ]
 });
+$('#chips_groups').chips({
+  placeholder: 'Gruppo',
+  secondaryPlaceholder: '+Altro gruppo',
+  autocompleteOptions: {
+    data: {
+      {% for g in groups %}
+        '{{g}}': null,
+      {% endfor %}
+    },
+    limit: Infinity,
+    minLength: 0
+  },
+  data: [
+    {% for g in chips_groups %}
+      {tag: '{{g}}'},
+    {% endfor %}
+  ]
+});
 
 function send(id) {
   var form = document.getElementById('selection')
   var action = document.getElementById('action')
   var owner = document.getElementById('owner')
   var type = document.getElementById('type')
+  var groups = document.getElementById('groups')
   var chips_owner = M.Chips.getInstance(document.getElementById('chips_owner'));
   var chips_type = M.Chips.getInstance(document.getElementById('chips_type'));
+  var chips_groups = M.Chips.getInstance(document.getElementById('chips_groups'));
   var type_array = []
   var owner_array = []
+  var groups_array = []
 
   for (i=0; i < chips_owner.chipsData.length; i++) {
     owner_array.push(chips_owner.chipsData[i].tag)
@@ -434,9 +474,14 @@ function send(id) {
     type_array.push(chips_type.chipsData[i].tag)
   }
 
+  for (i=0; i < chips_groups.chipsData.length; i++) {
+    groups_array.push(chips_groups.chipsData[i].tag)
+  }
+
   action.setAttribute('value', id);
   owner.setAttribute('value', owner_array.join("^|"))
   type.setAttribute('value', type_array.join("^|"))
+  groups.setAttribute('value', groups_array.join("^|"))
   form.submit()
 }
 $('#select-all').click(function(event) {   
diff --git a/server/templates/server/doc_type.html b/server/templates/server/doc_type.html
index 39b5101..b4b7f87 100644
--- a/server/templates/server/doc_type.html
+++ b/server/templates/server/doc_type.html
@@ -53,45 +53,51 @@
   <div class="modal-content">
     <h5>Filtri</h5>
     <div class="row">
-      <div class="input-field col s4">
+      <div class="input-field col l3 s12">
         <label>
           <input name="filter_hidden" type="checkbox" class="filled-in" {{hidden_check}}/>
           <span><i class="material-icons left">visibility_off</i>Disabilitati</span>
         </label>
       </div>
-      <div class="input-field col s4">
+      <div class="input-field col l3 s12">
         <label>
           <input name="filter_public" type="checkbox" class="filled-in" {{public_check}}/>
           <span><i class="material-icons left">public</i>Pubblici</span>
         </label>
       </div>
-      <div class="input-field col s4">
+      <div class="input-field col l3 s12">
         <label>
           <input name="filter_selfsign" type="checkbox" class="filled-in" {{selfsign_check}}/>
           <span><i class="material-icons left">assignment_turned_in</i>No firma</span>
         </label>
       </div>
+      <div class="input-field col l3 s12">
+        <label>
+          <input name="filter_group" type="checkbox" class="filled-in" {{group_check}}/>
+          <span><i class="material-icons left">group_work</i>Gruppo</span>
+        </label>
+      </div>
     </div>
     <div class="row">
-      <div class="input-field col s3">
+      <div class="input-field col l3 s12">
         <label>
           <input name="filter_personal" type="checkbox" class="filled-in" {{personal_check}}/>
           <span><i class="material-icons left">person</i>Personali</span>
         </label>
       </div>
-      <div class="input-field col s3">
+      <div class="input-field col l3 s12">
         <label>
           <input name="filter_medic" type="checkbox" class="filled-in" {{medic_check}}/>
           <span><i class="material-icons left">healing</i>Medici</span>
         </label>
       </div>
-      <div class="input-field col s3">
+      <div class="input-field col l3 s12">
         <label>
           <input name="filter_custom" type="checkbox" class="filled-in" {{custom_check}}/>
           <span><i class="material-icons left">add_circle_outline</i>Personalizzati</span>
         </label>
       </div>
-      <div class="input-field col s3">
+      <div class="input-field col l3 s12">
         <label>
           <input name="filter_message" type="checkbox" class="filled-in" {{message_check}}/>
           <span><i class="material-icons left">message</i>Messaggi</span>
@@ -119,6 +125,9 @@
             {% if not doctype.0.group_private %}
                 <i class="material-icons">public</i>
             {% endif %}
+            {% if doctype.0.custom_group %}
+              <i class="material-icons">group_work</i>
+            {% endif %}
             {% if doctype.0.auto_sign %}
                 <i class="material-icons">assignment_turned_in</i>
             {% endif %}
@@ -127,6 +136,13 @@
         </div>
         <div class="collapsible-body"><span>
           <ul class="collapsible">
+          {% if not doctype.0.group_private %}
+            <li>
+              <div class="collapsible-header">
+                <i class="material-icons">group_work</i>{{doctype.0.group.name}}
+              </div>
+            </li>
+          {% endif %}
           {% if doctype.0.personal_data %}
             <li>
               <div class="collapsible-header">
diff --git a/server/templates/server/download_doc.html b/server/templates/server/download_doc.html
index 0f36372..15ec72a 100644
--- a/server/templates/server/download_doc.html
+++ b/server/templates/server/download_doc.html
@@ -16,7 +16,7 @@
         <i class="material-icons">assignment_turned_in</i>
       {% endif %}
       {{doc.0.document_type.name}}
-      <span class="badge" data-badge-caption="">{{doc.0.compilation_date}}</span>
+      <span class="badge" data-badge-caption="">{{doc.0.user.username}}</span>
   </div>
   <div class="collapsible-body"><span>
     <ul class="collapsible">
diff --git a/server/templates/server/index.html b/server/templates/server/index.html
index 6b2f597..2676c3a 100644
--- a/server/templates/server/index.html
+++ b/server/templates/server/index.html
@@ -32,8 +32,8 @@
         </p>
       </div>
       <div class="card-action">
-          <a href="{% url 'ulist' %}">Lista utenti</a>
-          <a href="{% url 'uapprove' %}">Approva utente</a>
+          <a class="waves-effect waves-light btn red lighten-1" href="{% url 'ulist' %}">Lista utenti</a>
+          <a class="waves-effect waves-light btn red lighten-1" href="{% url 'uapprove' %}">Approva utente</a>
       </div>
     </div>
   </div>
@@ -60,9 +60,9 @@
         </ul>
       </div>
       <div class="card-action">
-          <a href="{% url 'doctype' %}">Lista tipo doc</a>
-          <a href="{% url 'doclist' %}">Lista documenti</a>
-          <a href="{% url 'docapprove' %}">Approva documento</a>
+          <a class="waves-effect waves-light btn red lighten-1" href="{% url 'doctype' %}">Lista tipo doc</a>
+          <a class="waves-effect waves-light btn red lighten-1" href="{% url 'doclist' %}">Lista documenti</a>
+          <a class="waves-effect waves-light btn red lighten-1" href="{% url 'docapprove' %}">Approva documento</a>
       </div>
     </div>
   </div>
diff --git a/server/templates/server/user_list.html b/server/templates/server/user_list.html
index 3837619..8abf5e8 100644
--- a/server/templates/server/user_list.html
+++ b/server/templates/server/user_list.html
@@ -3,26 +3,251 @@
 {% block title %}Admin - Lista Utenti{% endblock %}
 
 {% block nav %}
-    <a style="margin-left: 10px;" href="{% url 'index' %}" class="breadcrumb">Home</a>
-    <a href="{% url 'server'%}" class="breadcrumb hide-on-med-and-down">Admin</a>
-    <a href="#!" class="breadcrumb hide-on-med-and-down">Lista Utenti</a>
+  <a style="margin-left: 10px;" href="{% url 'index' %}" class="breadcrumb">Home</a>
+  <a href="{% url 'server'%}" class="breadcrumb hide-on-med-and-down">Admin</a>
+  <a href="#!" class="breadcrumb hide-on-med-and-down">Lista Utenti</a>
 {% endblock %}
 
 {% block content %}
-<table>
-    <tr>
-        <th>Username</th>
-        <th>Nome</th>
-        <th>Cognome</th>
-        <th>Codice</th>
-        <th>Stato</th>
-    </tr>
-    {% for user in users %}
-        <tr>
-        {% for att in user %}
-            <td>{{att}}</td>
-        {% endfor %}
-        </tr>
-    {% endfor %}
-</table> 
+<form id="form" action="{% url 'ulist' %}" method="post">
+{% csrf_token %}
+<input type="hidden" name="action" id="action">
+<ul class="collapsible">
+  {% for user in users %}
+    <li>
+      <div class="collapsible-header">
+        {% if user.0.is_staff %}
+          <i class="material-icons">grade</i>
+        {% endif %}
+        {{user.0.first_name}} {{user.0.last_name}}
+      </div>
+      <div class="collapsible-body"><span>
+        <ul class="collapsible">
+          <li>
+            <div class="collapsible-header">
+              <i class="material-icons">person</i>Dati personali
+            </div>
+            <div class="collapsible-body"><span>
+              <div class="row">
+                <div class="input-field col l4 s12">
+                  <input disabled value="{{user.0.first_name}}" id="first_name" type="text" >
+                  <label for="first_name">Nome</label>
+                </div>
+                <div class="input-field col l4 s12">
+                  <input disabled value="{{user.0.last_name}}" id="last_name" type="text" >
+                  <label for="last_name">Cognome</label>
+                </div>
+                <div class="input-field col l4 s12">
+                  <input disabled value="{{user.1.born_date}}" id="birth_date" type="text">
+                  <label for="birth_date">Data di nascita</label>
+                </div>
+                <div class="input-field col l4 s12">
+                  <input disabled value="{{user.2}}" id="branca" type="text">
+                  <label for="branca">Branca</label>
+                </div>
+                <div class="input-field col l8 s12">
+                  <input disabled value="{{user.1.parent_name}}" id="parent_name" type="text" >
+                  <label for="parent_name">Nome dei genitori</label>
+                </div>
+                <div class="input-field col l12 s12">
+                  <input value="{{user.1.via}}" disabled id="via" type="text" >
+                  <label for="via">Via e numero</label>
+                </div>
+                <div class="input-field col l4 s12">
+                  <input disabled value="{{user.1.cap}}" name="cap" id="cap" type="text" >
+                  <label for="cap">CAP</label>
+                </div>
+                <div class="input-field col l4 s12">
+                  <input disabled value="{{user.1.country}}" name="country" id="country" type="text" >
+                  <label for="country">Paese</label>
+                </div>
+                <div class="input-field col l4 s12">
+                  <input disabled value="{{user.1.nationality}}" name="nationality" id="nationality" type="text" >
+                  <label for="nationality">Nazionalit&agrave;</label>
+                </div>
+                <div class="input-field col l4 s12">
+                  <input disabled value="{{user.1.phone}}" name="phone" id="phone" type="text" >
+                  <label for="phone">Cellulare</label>
+                </div>
+                <div class="input-field col l4 s12">
+                  <input disabled value="{{user.1.home_phone}}" name="home_phone" id="home_phone" type="text" >
+                  <label for="home_phone">Telefono di casa</label>
+                </div>
+                <div class="input-field col l4 s12">
+                  <input disabled value="{{user.1.email}}" name="email" id="email" type="text" >
+                  <label for="email">Email</label>
+                </div>
+                <div class="input-field col l8 s12">
+                  <input disabled value="{{user.1.school}}" name="school" id="school" type="text" >
+                  <label for="school">Scuola frequentata</label>
+                </div>
+                <div class="input-field col l4 s12">
+                  <input disabled value="{{user.1.year}}" name="year" id="year" type="text" >
+                  <label for="year">Classe</label>
+                </div>
+              </div>
+            </span></div>
+          </li>
+          <li>
+            <div class="collapsible-header">
+              <i class="material-icons">healing</i>Dati medici
+            </div>
+            <div class="collapsible-body"><span>
+              <div class="row">
+                <div class="col s12">
+                  <h6>Persona di contatto in caso di necessit&agrave;</h6>
+                </div>
+              </div>
+              <div class="row">
+                <div class="input-field col l6 s12">
+                  <input disabled name="emer_name" value="{{user.1.medic.emer_name}}" id="emer_name" type="text" >
+                  <label for="emer_name">Nome e cognome</label>
+                </div>
+                <div class="input-field col l3 s12">
+                  <input disabled name="emer_relative" value="{{user.1.medic.emer_relative}}" id="emer_relative" type="text" >
+                  <label for="emer_releative">Parentela</label>
+                </div>
+                <div class="input-field col l3 s12">
+                  <input disabled name="cell_phone" value="{{user.1.medic.cell_phone}}" id="cellphone" type="text" >
+                  <label for="cell_phone">Cellulare</label>
+                </div>
+                <div class="input-field col l9 s12">
+                  <input disabled value="{{user.1.medic.address}}" name="address" id="address" type="text" >
+                  <label for="address">Indirizzo completo</label>
+                </div>
+                <div class="input-field col l3 s12">
+                  <input disabled value="{{user.1.medic.emer_phone}}" name="emer_phone" id="emer_phone" type="text" >
+                  <label for="emer_phone">Telefono di casa</label>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col s12">
+                  <h6>Assicurazione</h6>
+                </div>
+              </div>
+              <div class="row">
+                <div class="input-field col l4 s12">
+                  <input disabled value="{{user.1.medic.health_care}}" name="health_care" id="health_care" type="text" >
+                  <label for="health_care">Cassa Malati</label>
+                </div>
+                <div class="input-field col l4 s12">
+                  <input disabled value="{{user.1.medic.injuries}}" name="injuries" id="injuries" type="text" >
+                  <label for="injuries">Infortuni</label>
+                </div>
+                <div class="input-field col l4 s12">
+                  <input disabled value="{{user.1.medic.rc}}" name="rc" id="rc" type="text" >
+                  <label for="rc">Responsabilit&agrave; civile</label>
+                </div>
+              </div>
+              <div class="row">
+                <div class="switch col s12">
+                  &Egrave; sostenitore REGA&nbsp;&nbsp;
+                  <label>
+                    No
+                    <input disabled name="rega" type="checkbox" {% if user.1.medic.rega %}checked="checked"{%endif%}>
+                    <span class="lever"></span>
+                    Si
+                  </label>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col s12">
+                  <h6>Medico di famiglia</h6>
+                </div>
+                <div class="input-field col l6 s12">
+                  <input disabled value="{{user.1.medic.medic_name}}" name="medic_name" id="medic_name" type="text" >
+                  <label for="medic_name">Nome e cognome</label>
+                </div>
+                <div class="input-field col l6 s12">
+                  <input disabled value="{{user.1.medic.medic_phone}}" name="medic_phone" id="medic_phone" type="text" >
+                  <label for="medic_phone">Telefono studio</label>
+                </div>
+                <div class="input-field col l12 s12">
+                  <input disabled value="{{user.1.medic.medic_address}}" name="medic_address" id="medic_address" type="text" >
+                  <label for="medic_address">Indirizzo completo</label>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col s12">
+                  <h6>Scheda medica personale</h6>
+                </div>
+                <div class="input-field col s12">
+                  <input disabled value="{{user.1.medic.sickness}}" name="sickness" id="sickness" type="text">
+                  <label for="sickness">Principali malattie avute</label>
+                </div>
+                <div class="input-field col l8 s12">
+                  <input disabled value="{{user.1.medic.vaccine}}" name="vaccine" id="vaccine" type="text">
+                  <label for="vaccine">Vacinazioni fatte</label>
+                </div>
+                <div class="input-field col l4 s12">
+                  <label for="tetanus_date">Ultima vacinazione contro il tetano</label>
+                  <input disabled value="{{user.1.medic.tetanus_date}}" name="tetanus_date" id="tetanus_date" type="text">
+                </div>
+                <div class="input-field col s12">
+                  <input disabled value="{{user.1.medic.allergy}}" name="allergy" id="allergy" type="text">
+                  <label for="allergy">Allergie particolari/Intolleraze alimentari</label>
+                </div>
+                <div class="switch col s12">
+                  Deve assumere regolarmente medicamenti&nbsp;&nbsp;
+                  <label>
+                    No
+                    <input disabled name="drugs_bool" type="checkbox" {% if user.1.medic.drugs_bool %}checked="checked"{%endif%}>
+                    <span class="lever"></span>
+                    Si
+                  </label>
+                </div>
+                <div class="input-field col s12">
+                  <input disabled value="{{user.1.medic.drugs}}" name="drugs" id="drugs" type="text">
+                  <label for="drugs">Se s&igrave; quali, in che dosi e prescrizioni</label>
+                </div>
+                <div class="switch col s12">
+                  Informazioni particolari sullo stato di salute: (postumi di operazioni, incidenti, malattie, disturbi fisici)&nbsp;&nbsp;
+                  <label>
+                    No
+                    <input disabled name="misc_bool" type="checkbox" {% if user.1.medic.misc_bool %}checked="checked"{%endif%}>
+                    <span class="lever"></span>
+                    Si
+                  </label>
+                </div>
+                <div class="input-field col s12">
+                  <input disabled value="{{user.1.medic.misc}}" name="misc" id="misc" type="text">
+                  <label for="misc">Se s&igrave; quali</label>
+                </div>
+            </span></div>
+          </li>
+          <li>
+            <div class="collapsible-header">
+              <i class="material-icons">assignment</i>Documenti
+            </div>
+            <div class="collapsible-body"><span>
+              <ul class="collapsible">
+                {% for doc in user.3 %}
+                <li>
+                  <div class="collapsible-header"><a onclick="send('f{{doc.id}}')">{{doc.document_type.name}}</a></div>
+                </li>
+                {% endfor %}
+              </ul>
+            </span></div>
+          </li>
+        </ul>
+      </span></div>
+    </li>
+  {% endfor %}
+</ul>
+</form>
+{% endblock %}
+
+{% block script %}
+document.addEventListener('DOMContentLoaded', function() {
+  var elems = document.querySelectorAll('.collapsible');
+  var instances = M.Collapsible.init(elems, {});
+});
+
+function send(id) {
+  var form = document.getElementById('form')
+  var action = document.getElementById('action')
+
+  action.setAttribute('value', id);
+  form.submit()
+}
 {% endblock %}
\ No newline at end of file
-- 
cgit v1.2.1