petites amélios, textes explicatifs, liens corrigés
[perso/Denise/oms.git] / templates / index.html
1 {% extends "base.html" %}
2 {% block contenu %}
3 <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>
4 <hr>
5
6
7 <h2>Données de l'enfant</h2>
8
9 <div id="import_donnees">
10 <form action="/" method="post" enctype="multipart/form-data" id="form_import_donnees">
11
12
13
14 <label for="fichier_donnees" class="icon_button">
15 <img src="static/icons/import.png" alt="Importer">
16 <span class="icon_legend">Importer un fichier</span>
17 </label>
18 <input type="file" name="fichier_donnees" id="fichier_donnees" oninput="upload_file('form_import_donnees')">
19 </form>
20
21 {% if "fichier_importe" in valform %}
22 <p>Version du fichier de sauvegarde :
23 {% if "version" in valform %}
24 {{ valform.version }}
25 {% else %}
26 Inférieure à 2.5{% endif %}
27 </p>
28 {% if "version" not in valform or valform.version < CONFIG.version %}
29 <p class="petit">Note&nbsp;: La version du fichier de sauvegarde est inférieure à la version du site ({{ CONFIG.version}}), mais cela ne devrait pas générer de bug (normalement). <br>
30 Si vous voulez mettre à jour votre fichier de sauvegarde, il suffit de ré-enregistrer les données une fois les courbes générées.
31 </p>{% elif valform.version > CONFIG.version %}
32 <p class="petit">Note&nbsp;: la version du fichier de sauvegarde ({{ valform.version }}) est <b>supérieure</b> à la version du site ({{ CONFIG.version}}). Vous avez probablement avez testé un fichier de sauvegarde de la version bêta sur la version normale du site. Sinon c'est que vous avez voyagé dans le temps, trifouillé le fichier de sauvegarde, ou... je ne sais pas. Il se peut qu'il y ait des bugs. Ou pas.</p>
33 {% endif %}
34 {% endif %}
35
36 </div>
37
38 <form id="donnees_enfant">
39
40 <!-- saisie des données -->
41
42 <h3>Informations sur l'enfant</h3>
43 <div>
44 <label for="reset_donnees" class="icon_button">
45 <img src="static/icons/trash.png" alt="Effacer">
46 <span class="icon_legend">Effacer les données du formulaire</span>
47 </label>
48 <input type="reset" id="reset_donnees" value="Effacer les données du formulaire">
49 </div>
50 <ul>
51 <li><label>Nom de l'enfant&nbsp;:</label> <input type="text" class="texte" name="nom" value="{{ valform.nom }}"></li>
52 <li><label>Sexe&nbsp;:</label> <label><input type="radio" name="sexe" value="F" {%if valform.sexe == "F" %}checked{% endif %}> féminin </label>
53 | <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>
54 <li><label>Date de naissance&nbsp;: </label> <input type="date" name="naissance" value="{{ valform.naissance }}">
55 <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>
56 <li>Prématuré ? <span class="petit">(expérimental)</span> <span class="bouton" onclick="affiche_cache('prema',this)">Afficher</span>
57 <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.
58 <br>Remarque&nbsp;: les courbes OMS ne se prolongent pas pour la période prématurée, mais permettent de suivre la croissance de l'enfant une fois le terme atteint.</p>
59 <label>Prématurité</label> <input type="text" class="data" 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).
60 </div></li>
61
62 </ul>
63
64
65
66 <!-- Section saisie des données -->
67
68 <h3>Saisie des données</h3>
69 <p><span id="bouton_afficher_donneesplus" class="bouton" onclick="affiche_cache_classe('donneesplus')">Afficher</span> la saisie des tailles.</p>
70 <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>
71 <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>
72 <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>
73 <p>Il faut saisir la date ou l'âge. La date a priorité sur l'âge (si la date de naissance est saisie).</p>
74
75 <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>
76
77 <table id="donneespoids">
78 <tr><th>Âge</th><th>Date</th><th>Poids</th><th class="donneesplus">Taille</th></tr>
79
80 {% for i in range(valform.nb_data) %}
81 <tr><td>
82 <input type="text" class="data" name="age_{{ i }}" value="{{ valform['age_'~i] }}">
83 </td><td><input type="date" name="date_{{ i }}" value="{{ valform['date_'~i] }}"></td>
84 <td><input type="text" class="data" name="poids_{{ i }}" value="{{ valform['poids_'~i] }}"></td>
85 <td class="donneesplus"><input class="data" type="text" name="taille_{{ i }}" value="{{ valform['taille_'~i] }}"></td>
86
87 </tr>
88 {% endfor %}
89
90 </table>
91 <p> <span class="bouton" onclick="ajoutelignes()">Cliquer ici</span> pour ajouter des lignes</p>
92
93 <!-- Section préférences du graphique -->
94 <h3>Préférences du graphique</h3>
95 <div class="bouton" onclick="affiche_cache('pref_graphique',this)">Afficher</div>
96
97 <ul id="pref_graphique">
98
99 <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>
100 <li><label>Type de courbe&nbsp;:</label> <label><input type="radio" name="typecourbe" value="P"
101 {% if valform.typecourbe == "P" or valform.typecourbe is not defined %} checked {% endif %}> Percentiles</label> | <label><input type="radio" name="typecourbe" value="Z"
102 {% if valform.typecourbe == "Z" %} checked {% endif %}> Moyenne et écarts-type</label></li>
103 <li><label>Grille&nbsp;: <input type="checkbox" name="grille" {%if valform.grille == "oui" or valform.grille is not defined %} checked {% endif %}></label></li>
104 <li><label>Unité&nbsp;:
105 <select name="unite">
106 <option value="" {% if valform.unite == "" or valform.unite is not defined %} selected {%endif %}>Par défaut</option>
107 {% for unite in ['jours','semaines','mois','années'] %}
108 <option value="{{ unite }}"{% if valform.unite == unite %} selected {% endif %} >{{ unite }}</option>
109 {% endfor %}
110 </select></label></li>
111 <li><label>Âge maximum du graphique (facultatif) </label><input type="text" class="data" name="maxi" value="{{ valform.maxi }}"></li>
112
113 <li><label>Même échelle d'âge sur tous les graphiques&nbsp;: </label><input type="checkbox" name="memechelle" {% if valform.memechelle == 'oui' %} checked{% endif %}></li>
114 <li><label>Grille améliorée&nbsp;:</label><input type="checkbox" name="grilleamelio" {% if valform.grilleamelio == 'oui' %} checked{% endif %}></li>
115
116 <li>Dimensions du graphique&nbsp;: <label>largeur&nbsp;: </label><input type="text" class="data" name="largeur" value="{{ valform.largeur }}">
117 <label>hauteur&nbsp;: </label><input type="text" class="data" name="hauteur" value="{{ valform.hauteur }}"></li>
118 <li><label>Légende&nbsp;: <input type="checkbox" name="legende" {% if valform.legende == 'oui' %} checked{% endif %}> </label>
119 <label>Position&nbsp;: <select name="positionlegende">
120 {%for (pos,posnom) in [('upper left','Haut gauche'),('upper right','Haut Droite'),('lower left','Bas gauche'),('lower right','Bas droite')] %}
121 <option value="{{ pos }}">{{ posnom }}</option>
122 {% endfor %}
123 </select></label>
124 </li>
125
126 <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>
127 <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>
128 <li>Symbole pour les points de la courbe :
129 <select name="symbole">
130 {% for symb in CONFIG.liste_symboles %}
131 <option value="{{ symb }}" {% if valform.symbole==symb %} selected{% endif %}>{{CONFIG.liste_symboles[symb] | safe}}</option>
132 {% endfor %}
133 </select>
134 </li>
135
136 <li>Ajouter des repères sur les courbes. <span class="bouton petit" onclick="ajoute_reperes()">Plus de repères</span>
137 <ul id="ajoutereperecourbe">
138 {% for i in range(valform.liste_reperes | length) %}
139 <li>Âge&nbsp;: <input class="data" type="text" name="repere_age_{{ i }}" value="{{ valform.liste_reperes[i].donnee }}">
140 ou date&nbsp;: <input type="date" name="repere_date_{{ i }}" value="{{ valform.liste_reperes[i].date }}">
141 Texte associé&nbsp;: <input class="texte" type="text" name="repere_texte_{{ i }}" value="{{ valform.liste_reperes[i].texte }}">
142 Tracer&nbsp;: <input type="checkbox" name="repere_trace_{{ i }}" {% if valform.liste_reperes[i].trace %} checked {% endif %}>
143 Afficher la date&nbsp;: <input type="checkbox" name="repere_affichedate_{{ i }}" {% if valform.liste_reperes[i].affichedate %} checked {% endif %}>
144 </li>
145 {% endfor %}
146 {% for j in range(valform.liste_reperes | length, valform.nb_reperes_mini) %}
147 <li>Âge&nbsp;: <input class="data" type="text" name="repere_age_{{ j }}" value="">
148 ou date&nbsp;: <input type="date" name="repere_date_{{ i }}" value="">
149 Texte associé&nbsp;: <input class="texte" type="text" name="repere_texte_{{ j }}" value="">
150 Tracer&nbsp;: <input type="checkbox" name="repere_trace_{{ j }}">
151 Afficher la date&nbsp;: <input type="checkbox" name="repere_affichedate_{{ i }}"></li>
152
153 {% endfor %}
154 </ul>
155
156 </li>
157 </ul>
158
159
160 <!-- Section calculs/Extrapolation !-->
161
162 <h3>Extrapolation</h3>
163 <div class="bouton" onclick="affiche_cache('extra',this)">Afficher</div>
164
165 <div id="extra">
166 <ul>
167 <li>Calculer le prolongement de la courbe à partir des <input type="text" class="data" name="nbextradata" size="4" value="1"> dernières données (mettre 0 pour "toutes").</li>
168 <li><input type="checkbox" name="prolongercourbes">Tracer l'extrapolation sur le graphique.</li>
169
170 <li>Calculer <select name="calculextradata_type">
171 <option value="">Choisir la donnée</option>
172 {% for val in CONFIG.liste_typedonnees %}
173 <option value="{{val}}">{{val}}</option>
174 {% endfor %}
175 </select> à l'âge <input type="text" class="data" name="calculextradata_age">
176 ou à la date <input type="date" name="calculextradata_date">
177 <input type="checkbox" name="calculextradata_trace"> ... et le voir sur le graphique.</li>
178
179 <li>Calculer l'âge auquel l'enfant aura <input type="text" class="data" name="calculextratemps_val">
180 <select name="calculextratemps_type">
181 <option value="">Choisir la donnée</option>
182 {% for val in CONFIG.liste_typedonnees %}
183 <option value="{{val}}">{{ CONFIG.unites_typedonnees[val]}} ({{val}})</option>
184 {% endfor %}
185 </select>
186 <input type="checkbox" name="calculextratemps_trace"> ... et le voir sur le graphique.</li>
187
188 </ul>
189 <p>Les résultats de calculs seront affichés en-dessous des courbes. Ils ne seront pas sauvegardés.</p>
190 </div>
191
192 <!-- Section courbes multiples -->
193 <h3>Courbes multiples</h3>
194 <div class="bouton" onclick="affiche_cache('multi',this)">Afficher</div>
195
196 <div id="multi">
197 <p>Si vous souhaitez tracer sur le même graphique les courbes de différents enfants, c'est ici.</p>
198 <p> 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>
199 <p>Remarque&nbsp;: lors de l'export, seul l'enfant «&nbsp;principal&nbsp;» est sauvegardé.</p>
200 <ul id="liste_enfants_add">{% for numero_enfant in range(2, CONFIG.nb_fichiers_enfants_add+2) %}
201 <li><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> |
202 Symbole&nbsp;: <select name="symbole_donnees_{{ numero_enfant }}">
203 {% for symb in CONFIG.liste_symboles %}
204 <option value="{{ symb }}" {% if numero_enfant == loop.index %} selected{% endif %}>{{ CONFIG.liste_symboles[symb] | safe}}</option>
205 {% endfor %}
206 </select> |
207 Couleur&nbsp;: <input type="color" name="couleur_donnees_{{ numero_enfant }}" value="{{ valform.couleurs.cadretxt }}"> |
208 Alias <span class="petit">(remplace le prénom)</span>&nbsp;: <input type="text" name="alias_{{ numero_enfant }}"></li>{% endfor %}
209 </ul>
210 <p class="bouton" onclick="ajoute_enfants()" id="reveleenfants">Plus d'enfants O_o</p>
211
212 </div>
213
214
215 </form> <!-- Fin du gros méga formulaire -->
216
217 <!-- #################################################################################### -->
218 <hr>
219
220 <!--- Le grobouton -->
221 <div>
222 <span onclick="appelle_image()" class="icon_button">
223 <img src="static/icons/courbe.png" alt="Tracer les courbes">
224 <span class="icon_legend">Je veux les courbes !</span></span>
225 <span id="statut_courbes"></span>
226 </div>
227
228
229 <!-- section retour -->
230
231 <hr>
232 <div id="courbe_warnings">
233 <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>
234 <ul></ul>
235 </div>
236 <div id="courbe_erreurs">
237 <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>
238 <ul></ul>
239 </div>
240 <div id="sectioncourbe">
241
242 <h2>Courbes</h2>
243 <div id="section_courbe_poids">
244 <img id="courbe_poids" src="" alt="">
245
246 <div id="courbe_dl_poids" class="icon_button">
247 <img src="static/icons/export.png" alt="Exporter la courbe de poids">
248 <span class="icon_legend">Télécharger la courbe de poids</span>
249 </div>
250 </div>
251
252 <div id="section_courbe_taille">
253 <img id="courbe_taille" src="" alt="">
254
255 <div id="courbe_dl_taille" class="icon_button">
256 <img src="static/icons/export.png" alt="Exporter la courbe de taille">
257 <span class="icon_legend">Télécharger la courbe de taille</span>
258 </div>
259 </div>
260
261 </div>
262
263 <div id="section_extradonnees">
264 <h2>Calculs sur les courbes</h2>
265 <ul id="extradata">
266
267 </ul>
268 </div>
269
270 <!-- Section export des courbes -->
271
272 <div id="sectionexport">
273 <h2>Export des données</h2>
274 <p>Vous pouvez télécharger les données afin de ne pas avoir à les re-saisir la prochaine fois.</p>
275
276 <div id="export_dl" class="icon_button">
277 <img src="static/icons/export.png" alt="Exporter les données">
278 <span class="icon_legend">Télécharger les données</span>
279 </div>
280 <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>
281 <div id="export">
282 <textarea readonly id="export_texte">
283 </textarea>
284 <p><span class="bouton" onclick="copietexte()">Sélectionner et copier</span> le texte dans le presse-papier.</p>
285 </div>
286
287 </div>
288
289 {% endblock %}