summaryrefslogtreecommitdiff
path: root/templates/index.html
blob: be2ab48f05416674907fefda5ca26305ef668a17 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
{% extends "base.html" %}
{% block contenu %}
<p>Bienvenue sur ce petit outil qui permet de tracer les courbes de poids et de taille selon les standards OMS (Organisation Mondiale de la Santé) des enfants jusqu'à 5 ans.</p>
<hr>


<h2>Données de l'enfant</h2>

<div id="import_donnees">
 <form action="/" method="post" enctype="multipart/form-data" id="form_import_donnees">



  <label for="fichier_donnees" class="icon_button">
	<img src="static/icons/import.png">
	<span class="icon_legend">Importer un fichier</span>
  </label>
  <input type="file" name="fichier_donnees" id="fichier_donnees" oninput="upload_file('form_import_donnees')">
</form> 
</div>

<form id="donnees_enfant">
	
<!-- saisie des données -->
	
<h3>Informations sur l'enfant</h3>
<div>
	<label for="reset_donnees" class="icon_button">
		<img src="static/icons/trash.png">
		<span class="icon_legend">Effacer les données du formulaire</span>
	</label>	 
	<input type="reset" id="reset_donnees" value="Effacer les données du formulaire">	
</div>
<ul>
<li><label>Nom de l'enfant&nbsp;:</label> <input type="text" name="nom" value="{{ valform.nom }}"></li>
<li><label>Sexe&nbsp;:</label> <label><input type="radio" name="sexe" value="F" {%if valform.sexe == "F" %}checked{% endif %}> féminin </label>
| <label><input type="radio" name="sexe" value="M" {%if valform.sexe == "M"%} checked {% endif %}> masculin</label> | <label><input type="radio" name="sexe" value="N" {%if valform.sexe == "N"%} checked {% endif %}> neutre (expérimental)</label></li>
<li><label>Date de naissance&nbsp;: </label> <input type="date" name="naissance" value="{{ valform.naissance }}">
	<p id="changemode" class="petit"><span onclick="change_mode_dates('text')" class="bouton">Cliquer ici</span> pour saisir les dates comme du texte.</p> </li>
<li>Prématuré ? <span class="petit">(expérimental)</span> <span class="bouton" onclick="affiche_cache('prema',this)">Afficher</span>
<div id="prema"><p class="petit">Si l'enfant est né prématuré (avant 37 semaines d'aménorrhée), indiquer de « combien » en durée (même syntaxe que pour les âges, voir plus bas). Sinon, laisser 0j.</p>
<label>Prématurité</label> <input type="text" name="prematurite" value="{{ valform.prematurite }}"> <input type="checkbox" name="agecorrige"{% if valform.agecorrige == "oui"%} checked{%endif%}> Afficher l'âge corrigé sur la courbe (plutôt que l'âge réel).
</div></li>

</ul>





<h3>Saisir les données</h3> 
<p><span id="bouton_afficher_donneesplus" class="bouton" onclick="affiche_cache_classe('donneesplus')">Afficher</span> la saisie des tailles.</p> 
<p>Syntaxe pour l'âge&nbsp;: utiliser j, s, m, a comme des "unités" (jours, semaines, mois, années). Vous pouvez mixer les unités, par exemple "3a2m5j" pour 3 ans, 2 mois et 5 jours. Les espaces sont ignorées, et il faut saisir des nombres entiers.</p>
<p>Saisir le poids en kilogrammes (par exemple "2.62" ou "2,62" pour 2 kilogrammes et 620 grammes), ou en grammes ("2620" par exemple).</p>
<p class="donneesplus">Saisir la taille en centimètres. Note : il y a généralement un centimètre de moins quand on mesure l'enfant debout par rapport à allongé. On peut voir sur la courbe de référence une "cassure" à deux ans qui correspond au changement du type de mesure.</p>
<p>Il faut saisir la date ou l'âge. Si les deux sont saisis, seul l'âge comptera.</p>

<p class="donneesplus">Si vous ne saisissez que des données de poids par exemple, la courbe de taille ne sera pas tracée (par défaut, voir préférences du graphique).</p>

<table id="donneespoids">
	<tr><th>Âge</th><th>Date</th><th>Poids (kg ou g)</th><th class="donneesplus">Taille (cm) </th></tr>
	
{% for i in range(valform.nb_data) %}
<tr><td>
	<input type="text" name="age_{{ i }}" value="{{ valform['age_'~i] }}">
</td><td><input type="date" name="date_{{ i }}"></td>
		<td><input type="text" name="poids_{{ i }}" value="{{ valform['poids_'~i] }}"></td>
		<td  class="donneesplus"><input type="text" name="taille_{{ i }}" value="{{ valform['taille_'~i] }}"></td>

</tr>
{% endfor %}

</table>
<p class="bouton" onclick="ajoutelignes()">Cliquer ici pour ajouter des lignes</p>

<!-- Préférences du graphique -->
<h3>Préférences du graphique</h3>
<div class="bouton" onclick="affiche_cache('pref_graphique',this)">Afficher</div>

<ul id="pref_graphique">
		
	<li><label>Tracer les courbes vides (s'il n'y a pas de données)&nbsp;:</label> <input type="checkbox" name="tracevide" {% if valform.tracevide == 'oui' %} checked{% endif %}></li>
	<li><label>Type de courbe&nbsp;:</label> <label><input type="radio" name="typecourbe" value="P"
	{% if valform.typecourbe == "P" or valform.typecourbe is not defined %} checked {% endif %}> Percentiles</label> | <label><input type="radio" name="typecourbe" value="Z"
	{% if valform.typecourbe == "Z" %}  checked {% endif %}> Moyenne et écarts-type</label></li>
	<li><label>Grille&nbsp;: <input type="checkbox" name="grille" {%if valform.grille == "oui" or valform.grille is not defined %} checked {% endif %}></label></li>
	<li><label>Unité&nbsp;: 
		<select name="unite">
			<option value="" {% if valform.unite == "" or valform.unite is not defined %} selected {%endif %}>Par défaut</option>
	{% for unite in ['jours','semaines','mois','années'] %}
			<option value="{{ unite }}"{% if valform.unite == unite %} selected {% endif %} >{{ unite }}</option>
	{% endfor %}
		</select></label></li>
	<li><label>valeur maximum du graphique (facultatif, syntaxe similaire à l'âge) </label><input type="text" name="maxi" value="{{ valform.maxi }}"></li>
	
	<li><label>Même échelle sur tous les graphiques&nbsp;: </label><input type="checkbox" name="memechelle" {% if valform.memechelle == 'oui' %} checked{% endif %}></li>
	<li><label>Grille améliorée&nbsp;:</label><input type="checkbox" name="grilleamelio" {% if valform.grilleamelio == 'oui' %} checked{% endif %}></li>
	
	<li>Dimensions du graphique&nbsp;: <label>largeur&nbsp;: </label><input type="text" name="largeur" value="{{ valform.largeur }}"> 
	<label>hauteur&nbsp;: </label><input type="text" name="hauteur" value="{{ valform.hauteur }}"></li>
	<li><label>Légende&nbsp;: <input type="checkbox" name="legende" {% if valform.legende == 'oui' %} checked{% endif %}> </label>
<label>Position&nbsp;: <select name="positionlegende">
{%for (pos,posnom) in [('upper left','Haut gauche'),('upper right','Haut Droite'),('lower left','Bas gauche'),('lower right','Bas droite')] %}
<option value="{{ pos }}">{{ posnom }}</option>
{% endfor %}
</select></label>
	</li>
	
	<li>Couleur courbe du bas <input type="color" name="couleur_courbe1" value="{{ valform.couleurs.courbe1 }}"> | Couleur courbe du milieu <input type="color" name="couleur_courbe2"  value="{{ valform.couleurs.courbe2 }}"> | Couleur courbe du haut <input type="color" name="couleur_courbe3" value="{{ valform.couleurs.courbe3 }}"> </li>
	<li>Couleur du fond <input type="color" name="couleur_fond" value="{{ valform.couleurs.fond }}"> | Couleur de la grille <input type="color" name="couleur_grille" value="{{ valform.couleurs.grille }}"> | Couleur des axes et du texte <input type="color" name="couleur_cadretxt" value="{{ valform.couleurs.cadretxt }}"> | Couleur de la courbe de l'enfant <input type="color" name="couleur_courbeenfant" value="{{ valform.couleurs.courbeenfant }}"></li>
	<li>Symbole pour les points de la courbe : 
	<select name="symbole">
		{% for symb in CONFIG.liste_symboles %}
		<option value="{{ symb }}" {% if valform.symbole==symb %} selected{% endif %}>{{CONFIG.liste_symboles[symb] | safe}}</option>
		{% endfor %}
	</select>
	</li>
</ul>


<!-- Section calculs/Extrapolation !-->

<h3>Extrapolation</h3>
<div class="bouton" onclick="affiche_cache('extra',this)">Afficher</div>

<div id="extra">
<ul>
	<li>Calculer le prolongement de la courbe à partir des <input type="text" name="nbextradata" size="4" value="1"> dernières données (mettre 0 pour "toutes").</li>
	<li><input type="checkbox" name="prolongercourbes">Tracer l'extrapolation sur le graphique.</li>
	
	<li>Calculer <select name="calculextradata_type">
	<option value="">Choisir la donnée</option>
	{% for val in CONFIG.liste_typedonnees %}
	<option value="{{val}}">{{val}}</option>
	{% endfor %}
	</select> à l'âge <input type="text" name="calculextradata_age" value="6m">
	<input type="checkbox" name="calculextradata_trace"> ... et le voir sur le graphique.</li>
	
	<li>Calculer l'âge auquel l'enfant aura <input type="text" name="calculextratemps_val">
	<select name="calculextratemps_type">
	<option value="">Choisir la donnée</option>
	{% for val in CONFIG.liste_typedonnees %}
	<option value="{{val}}">{{ CONFIG.unites_typedonnees[val]}} ({{val}})</option>
	{% endfor %}	
	</select>
	<input type="checkbox" name="calculextratemps_trace"> ... et le voir sur le graphique.</li>
	
</ul>
<p>Les résultats de calculs seront affichés en-dessous des courbes.</p>
</div>

<h3>Courbes multiples</h3>
<div class="bouton" onclick="affiche_cache('multi',this)">Afficher</div>

<div id="multi">
	<p>Si vous souhaitez tracer sur le même graphique les courbes de différents enfants, c'est ici. Il faut importer le fichier de données additionnel de l'autre enfant (ou des autres enfants). Seul le nom de l'enfant et ses données seront utilisés, les autres paramètres (courbe de référence suivant le sexe, maximum du graphique, ...) seront ceux de l'enfant «&nbsp;principal&nbsp;».</p>
  <ul>
	  {% for numero_enfant in (2, 3, 4, 5, 6, 7, 8, 9, 10) %}
  <li {% if numero_enfant>4 %} class="enfants_cache_def"{% endif %}><input type="file" name="fichier_donnees_{{ numero_enfant }}" id="fichier_donnees_{{ numero_enfant }}"> <span class="bouton petit" onclick="vide_champ('fichier_donnees_{{ numero_enfant }}')">Enlever ce fichier</span> | 
  Symbole&nbsp;: <select name="symbole_donnees_{{ numero_enfant }}"> 
	{% for symb in CONFIG.liste_symboles %}
	<option value="{{ symb }}" {% if numero_enfant == loop.index  %} selected{% endif %}>{{ CONFIG.liste_symboles[symb] | safe}}</option>
	{% endfor %}
  </select> | 
  Couleur&nbsp;: <input type="color" name="couleur_donnees_{{ numero_enfant }}" value="{{ valform.couleurs.cadretxt }}">
  </li>
	   {% endfor %}
  </ul>
  <p class="bouton" onclick="revele_enfants()" id="reveleenfants">Plus d'enfants O_o</p>
</div>


</form> <!-- Fin du gros méga formulaire -->

<!-- #################################################################################### -->
<!-- section retour -->
<hr>

<div onclick="appelle_image()" class="icon_button">
	<img src="static/icons/courbe.png">
	<span class="icon_legend">Je veux les courbes !</span>
</div>

<hr>
<div id="courbe_warnings">
	<p><strong>Alerte&nbsp;:</strong> il y a eu quelques soucis lors de la génération de la (des) courbes. En voici la liste&nbsp;:</p>
	<ul></ul>
</div>
<div id="courbe_erreurs">
	<p><strong>Alerte&nbsp;:</strong> La courbe n'a pas pu être générée. Vérifiez les données saisies, ou contactez l'administratrice. Erreurs&nbsp;: </p>
	<ul></ul>
</div>
<div id="sectioncourbe">

	<h2>Courbes</h2>
	<div id="section_courbe_poids">
	<img id="courbe_poids">

	<div id="courbe_dl_poids" class="icon_button">
		<img src="static/icons/export.png">
		<span class="icon_legend">Télécharger la courbe de poids</span>
	</div>
	</div>

	<div id="section_courbe_taille">
	<img id="courbe_taille">
	
	<div id="courbe_dl_taille" class="icon_button">
		<img src="static/icons/export.png">
		<span class="icon_legend">Télécharger la courbe de taille</span>
	</div>
	</div>

</div>

<div id="section_extradonnees">
	<h2>Calculs sur les courbes</h2>
	<ul id="extradata">

	</ul>
</div>


<div id="sectionexport">
	<h2>Export des données</h2>
	<p>Vous pouvez télécharger les données afin de ne pas avoir à les re-saisir la prochaine fois.</p>

	<div id="export_dl" class="icon_button">
		<img src="static/icons/export.png">
		<span class="icon_legend">Télécharger les données</span>
	</div>
	<p>Si vous n'arrivez pas à télécharger les données, <a href='#export' onclick="affiche_export()">cliquez ici</a> pour les voir en texte clair&nbsp;: il vous suffira de les copier/coller dans un fichier texte.</p>
	<textarea readonly id="export">
	</textarea>

</div>

{% endblock %}