couleur personnalisée pour les courbes
[perso/Denise/oms.git] / templates / index.html
CommitLineData
5679dfd0
DL
1{% extends "base.html" %}
2{% block contenu %}
21c5bd57 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>
5679dfd0
DL
4<hr>
5
6
be2bf515 7<h2>Données de l'enfant</h2>
5679dfd0 8
be2bf515 9<div id="import_donnees">
93ba28a7 10 <form action="/" method="post" enctype="multipart/form-data" id="form_import_donnees">
be2bf515
DL
11
12
13
442a69cb 14 <label for="fichier_donnees" class="icon_button">
93ba28a7 15 <img src="static/icons/import.png">
d5af53b5 16 <span class="icon_legend">Importer un fichier</span>
93ba28a7 17 </label>
ca61f310 18 <input type="file" name="fichier_donnees" id="fichier_donnees" oninput="upload_file('form_import_donnees')">
5679dfd0 19</form>
be2bf515 20</div>
5679dfd0
DL
21
22<form id="donnees_enfant">
23
d03279e7 24<!-- saisie des données -->
61020126
DL
25
26<h3>Informations sur l'enfant</h3>
442a69cb
SC
27<div>
28 <label for="reset_donnees" class="icon_button">
29 <img src="static/icons/trash.png">
30 <span class="icon_legend">Effacer les données du formulaire</span>
31 </label>
30158504 32 <input type="reset" id="reset_donnees" value="Effacer les données du formulaire">
be2bf515 33</div>
5679dfd0 34<ul>
be2bf515 35<li><label>Nom de l'enfant&nbsp;:</label> <input type="text" name="nom" value="{{ valform.nom }}"></li>
915e90bb
DL
36<li><label>Sexe&nbsp;:</label> <label><input type="radio" name="sexe" value="F" {%if valform.sexe == "F" %}checked{% endif %}> féminin </label>
37| <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>
bc1faf7c
DL
38<li><label>Date de naissance&nbsp;: </label> <input type="date" name="naissance" value="{{ valform.naissance }}">
39 <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>
85e9aa73
DL
40<li>Prématuré ? <span class="petit">(expérimental)</span> <span class="bouton" onclick="affiche_cache('prema',this)">Afficher</span>
41<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>
cf0d4c8c 42<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).
85e9aa73 43</div></li>
b5ac625b 44
5679dfd0
DL
45</ul>
46
47
5679dfd0
DL
48
49
50
cf0d4c8c 51<h3>Saisir les données</h3>
d5687a7f 52<p><span id="bouton_afficher_donneesplus" class="bouton" onclick="affiche_cache_classe('donneesplus')">Afficher</span> la saisie des tailles.</p>
be2bf515 53<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>
ca61f310 54<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>
2c023f1a 55<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>
5679dfd0
DL
56<p>Il faut saisir la date ou l'âge. Si les deux sont saisis, seul l'âge comptera.</p>
57
2c023f1a 58<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>
5679dfd0
DL
59
60<table id="donneespoids">
d9eaf2e2 61 <tr><th>Âge</th><th>Date</th><th>Poids (kg ou g)</th><th class="donneesplus">Taille (cm) </th></tr>
5679dfd0
DL
62
63{% for i in range(valform.nb_data) %}
64<tr><td>
65 <input type="text" name="age_{{ i }}" value="{{ valform['age_'~i] }}">
66</td><td><input type="date" name="date_{{ i }}"></td>
67 <td><input type="text" name="poids_{{ i }}" value="{{ valform['poids_'~i] }}"></td>
2c023f1a 68 <td class="donneesplus"><input type="text" name="taille_{{ i }}" value="{{ valform['taille_'~i] }}"></td>
8b5845ff 69
5679dfd0
DL
70</tr>
71{% endfor %}
72
73</table>
be2bf515
DL
74<p class="bouton" onclick="ajoutelignes()">Cliquer ici pour ajouter des lignes</p>
75
ca61f310 76<!-- Préférences du graphique -->
be2bf515
DL
77<h3>Préférences du graphique</h3>
78<div class="bouton" onclick="affiche_cache('pref_graphique',this)">Afficher</div>
79
80<ul id="pref_graphique">
8b5845ff
DL
81
82 <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>
915e90bb
DL
83 <li><label>Type de courbe&nbsp;:</label> <label><input type="radio" name="typecourbe" value="P"
84 {% if valform.typecourbe == "P" or valform.typecourbe is not defined %} checked {% endif %}> Percentiles</label> | <label><input type="radio" name="typecourbe" value="Z"
85 {% if valform.typecourbe == "Z" %} checked {% endif %}> Moyenne et écarts-type</label></li>
86 <li><label>Grille&nbsp;: <input type="checkbox" name="grille" {%if valform.grille == "oui" or valform.grille is not defined %} checked {% endif %}></label></li>
87 <li><label>Unité&nbsp;:
be2bf515 88 <select name="unite">
8b5845ff 89 <option value="" {% if valform.unite == "" or valform.unite is not defined %} selected {%endif %}>Par défaut</option>
be2bf515
DL
90 {% for unite in ['jours','semaines','mois','années'] %}
91 <option value="{{ unite }}"{% if valform.unite == unite %} selected {% endif %} >{{ unite }}</option>
92 {% endfor %}
915e90bb 93 </select></label></li>
fd69b6b5 94 <li><label>valeur maximum du graphique (facultatif, syntaxe similaire à l'âge) </label><input type="text" name="maxi" value="{{ valform.maxi }}"></li>
c2fe511b 95
8b5845ff 96 <li><label>Même échelle sur tous les graphiques&nbsp;: </label><input type="checkbox" name="memechelle" {% if valform.memechelle == 'oui' %} checked{% endif %}></li>
cf0d4c8c
DL
97 <li><label>Grille améliorée&nbsp;:</label><input type="checkbox" name="grilleamelio" {% if valform.grilleamelio == 'oui' %} checked{% endif %}></li>
98
be2bf515
DL
99 <li>Dimensions du graphique&nbsp;: <label>largeur&nbsp;: </label><input type="text" name="largeur" value="{{ valform.largeur }}">
100 <label>hauteur&nbsp;: </label><input type="text" name="hauteur" value="{{ valform.hauteur }}"></li>
915e90bb
DL
101 <li><label>Légende&nbsp;: <input type="checkbox" name="legende" {% if valform.legende == 'oui' %} checked{% endif %}> </label>
102<label>Position&nbsp;: <select name="positionlegende">
be2bf515
DL
103{%for (pos,posnom) in [('upper left','Haut gauche'),('upper right','Haut Droite'),('lower left','Bas gauche'),('lower right','Bas droite')] %}
104<option value="{{ pos }}">{{ posnom }}</option>
105{% endfor %}
915e90bb 106</select></label>
be2bf515 107 </li>
c2fe511b 108
915e90bb 109 <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>
38b5e10a 110 <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>
ca61f310
DL
111 <li>Symbole pour les points de la courbe :
112 <select name="symbole">
113 {% for symb in CONFIG.liste_symboles %}
114 <option value="{{ symb }}" {% if valform.symbole==symb %} selected{% endif %}>{{CONFIG.liste_symboles[symb] | safe}}</option>
115 {% endfor %}
116 </select>
117 </li>
be2bf515
DL
118</ul>
119
120
cf0d4c8c
DL
121<!-- Section calculs/Extrapolation !-->
122
123<h3>Extrapolation</h3>
124<div class="bouton" onclick="affiche_cache('extra',this)">Afficher</div>
125
ca61f310
DL
126<div id="extra">
127<ul>
cf0d4c8c
DL
128 <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>
129 <li><input type="checkbox" name="prolongercourbes">Tracer l'extrapolation sur le graphique.</li>
3d7da80a 130
cf0d4c8c
DL
131 <li>Calculer <select name="calculextradata_type">
132 <option value="">Choisir la donnée</option>
133 {% for val in CONFIG.liste_typedonnees %}
134 <option value="{{val}}">{{val}}</option>
135 {% endfor %}
3d7da80a
DL
136 </select> à l'âge <input type="text" name="calculextradata_age" value="6m">
137 <input type="checkbox" name="calculextradata_trace"> ... et le voir sur le graphique.</li>
138
cf0d4c8c
DL
139 <li>Calculer l'âge auquel l'enfant aura <input type="text" name="calculextratemps_val">
140 <select name="calculextratemps_type">
141 <option value="">Choisir la donnée</option>
142 {% for val in CONFIG.liste_typedonnees %}
143 <option value="{{val}}">{{ CONFIG.unites_typedonnees[val]}} ({{val}})</option>
144 {% endfor %}
3d7da80a
DL
145 </select>
146 <input type="checkbox" name="calculextratemps_trace"> ... et le voir sur le graphique.</li>
cf0d4c8c
DL
147
148</ul>
2fce97ea 149<p>Les résultats de calculs seront affichés en-dessous des courbes.</p>
ca61f310
DL
150</div>
151
152<h3>Courbes multiples</h3>
153<div class="bouton" onclick="affiche_cache('multi',this)">Afficher</div>
154
155<div id="multi">
156 <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>
157 <ul>
158 {% for numero_enfant in (2, 3, 4, 5, 6, 7, 8, 9, 10) %}
38b5e10a
DL
159 <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> |
160 Symbole&nbsp;: <select name="symbole_donnees_{{ numero_enfant }}">
ca61f310
DL
161 {% for symb in CONFIG.liste_symboles %}
162 <option value="{{ symb }}" {% if numero_enfant == loop.index %} selected{% endif %}>{{ CONFIG.liste_symboles[symb] | safe}}</option>
163 {% endfor %}
38b5e10a
DL
164 </select> |
165 Couleur&nbsp;: <input type="color" name="couleur_donnees_{{ numero_enfant }}" value="{{ valform.couleurs.cadretxt }}">
166 </li>
ca61f310
DL
167 {% endfor %}
168 </ul>
169 <p class="bouton" onclick="revele_enfants()" id="reveleenfants">Plus d'enfants O_o</p>
170</div>
171
2fce97ea 172
ca61f310 173</form> <!-- Fin du gros méga formulaire -->
cf0d4c8c 174
ca61f310 175<!-- #################################################################################### -->
fd69b6b5 176<!-- section retour -->
5679dfd0
DL
177<hr>
178
442a69cb
SC
179<div onclick="appelle_image()" class="icon_button">
180 <img src="static/icons/courbe.png">
8b5845ff 181 <span class="icon_legend">Je veux les courbes !</span>
442a69cb 182</div>
5679dfd0 183
5679dfd0 184<hr>
66a3e38c 185<div id="courbe_warnings">
ca61f310 186 <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>
be2bf515 187 <ul></ul>
66a3e38c 188</div>
a46e1269 189<div id="courbe_erreurs">
be2bf515
DL
190 <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>
191 <ul></ul>
a46e1269 192</div>
fd69b6b5
DL
193<div id="sectioncourbe">
194
8b5845ff
DL
195 <h2>Courbes</h2>
196 <div id="section_courbe_poids">
197 <img id="courbe_poids">
198
199 <div id="courbe_dl_poids" class="icon_button">
442a69cb 200 <img src="static/icons/export.png">
8b5845ff
DL
201 <span class="icon_legend">Télécharger la courbe de poids</span>
202 </div>
fd69b6b5 203 </div>
8b5845ff
DL
204
205 <div id="section_courbe_taille">
206 <img id="courbe_taille">
207
208 <div id="courbe_dl_taille" class="icon_button">
209 <img src="static/icons/export.png">
210 <span class="icon_legend">Télécharger la courbe de taille</span>
211 </div>
212 </div>
213
fd69b6b5
DL
214</div>
215
cf0d4c8c
DL
216<div id="section_extradonnees">
217 <h2>Calculs sur les courbes</h2>
218 <ul id="extradata">
219
220 </ul>
221</div>
222
5679dfd0
DL
223
224<div id="sectionexport">
be2bf515
DL
225 <h2>Export des données</h2>
226 <p>Vous pouvez télécharger les données afin de ne pas avoir à les re-saisir la prochaine fois.</p>
5679dfd0 227
442a69cb
SC
228 <div id="export_dl" class="icon_button">
229 <img src="static/icons/export.png">
230 <span class="icon_legend">Télécharger les données</span>
231 </div>
be2bf515
DL
232 <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>
233 <textarea readonly id="export">
234 </textarea>
5679dfd0
DL
235
236</div>
237
238{% endblock %}