petites améliorations graphiques, icône, etc
[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>
2dc9eb43 20
d2f41e86 21{% if "fichier_importe" in valform %}
2dc9eb43
DL
22{% if "version" in valform %}
23<p>Version du fichier de sauvegarde : {{ valform.version }}.</p>{% endif %}
24{% if "version" not in valform or valform.version < CONFIG.version %}
25<p class="petit">Note : 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).
64be08b2 26</p>{% elif valform.version > CONFIG.version %}
6ac2173a 27<p class="petit">Note : 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>
64be08b2 28{% endif %}
d2f41e86 29{% endif %}
2dc9eb43 30
be2bf515 31</div>
5679dfd0
DL
32
33<form id="donnees_enfant">
34
d03279e7 35<!-- saisie des données -->
61020126
DL
36
37<h3>Informations sur l'enfant</h3>
442a69cb
SC
38<div>
39 <label for="reset_donnees" class="icon_button">
40 <img src="static/icons/trash.png">
41 <span class="icon_legend">Effacer les données du formulaire</span>
42 </label>
30158504 43 <input type="reset" id="reset_donnees" value="Effacer les données du formulaire">
be2bf515 44</div>
5679dfd0 45<ul>
6ac2173a 46<li><label>Nom de l'enfant&nbsp;:</label> <input type="text" class="texte" name="nom" value="{{ valform.nom }}"></li>
915e90bb
DL
47<li><label>Sexe&nbsp;:</label> <label><input type="radio" name="sexe" value="F" {%if valform.sexe == "F" %}checked{% endif %}> féminin </label>
48| <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
49<li><label>Date de naissance&nbsp;: </label> <input type="date" name="naissance" value="{{ valform.naissance }}">
50 <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
51<li>Prématuré ? <span class="petit">(expérimental)</span> <span class="bouton" onclick="affiche_cache('prema',this)">Afficher</span>
52<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>
6ac2173a 53<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).
85e9aa73 54</div></li>
b5ac625b 55
5679dfd0
DL
56</ul>
57
58
5679dfd0
DL
59
60
61
cf0d4c8c 62<h3>Saisir les données</h3>
d5687a7f 63<p><span id="bouton_afficher_donneesplus" class="bouton" onclick="affiche_cache_classe('donneesplus')">Afficher</span> la saisie des tailles.</p>
be2bf515 64<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 65<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 66<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
67<p>Il faut saisir la date ou l'âge. Si les deux sont saisis, seul l'âge comptera.</p>
68
2c023f1a 69<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
70
71<table id="donneespoids">
6ac2173a 72 <tr><th>Âge</th><th>Date</th><th>Poids</th><th class="donneesplus">Taille (cm) </th></tr>
5679dfd0
DL
73
74{% for i in range(valform.nb_data) %}
75<tr><td>
6ac2173a 76 <input type="text" class="data" name="age_{{ i }}" value="{{ valform['age_'~i] }}">
2dc9eb43 77</td><td><input type="date" name="date_{{ i }}" value="{{ valform['date_'~i] }}"></td>
6ac2173a
DL
78 <td><input type="text" class="data" name="poids_{{ i }}" value="{{ valform['poids_'~i] }}"></td>
79 <td class="donneesplus"><input class="data" type="text" name="taille_{{ i }}" value="{{ valform['taille_'~i] }}"></td>
8b5845ff 80
5679dfd0
DL
81</tr>
82{% endfor %}
83
84</table>
f1e65b5e 85<p> <span class="bouton" onclick="ajoutelignes()">Cliquer ici</span> pour ajouter des lignes</p>
be2bf515 86
ca61f310 87<!-- Préférences du graphique -->
be2bf515
DL
88<h3>Préférences du graphique</h3>
89<div class="bouton" onclick="affiche_cache('pref_graphique',this)">Afficher</div>
90
91<ul id="pref_graphique">
8b5845ff
DL
92
93 <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
94 <li><label>Type de courbe&nbsp;:</label> <label><input type="radio" name="typecourbe" value="P"
95 {% if valform.typecourbe == "P" or valform.typecourbe is not defined %} checked {% endif %}> Percentiles</label> | <label><input type="radio" name="typecourbe" value="Z"
96 {% if valform.typecourbe == "Z" %} checked {% endif %}> Moyenne et écarts-type</label></li>
97 <li><label>Grille&nbsp;: <input type="checkbox" name="grille" {%if valform.grille == "oui" or valform.grille is not defined %} checked {% endif %}></label></li>
98 <li><label>Unité&nbsp;:
be2bf515 99 <select name="unite">
8b5845ff 100 <option value="" {% if valform.unite == "" or valform.unite is not defined %} selected {%endif %}>Par défaut</option>
be2bf515
DL
101 {% for unite in ['jours','semaines','mois','années'] %}
102 <option value="{{ unite }}"{% if valform.unite == unite %} selected {% endif %} >{{ unite }}</option>
103 {% endfor %}
915e90bb 104 </select></label></li>
e916b79f 105 <li><label>Âge maximum du graphique (facultatif) </label><input type="text" class="data" name="maxi" value="{{ valform.maxi }}"></li>
c2fe511b 106
e916b79f 107 <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>
cf0d4c8c
DL
108 <li><label>Grille améliorée&nbsp;:</label><input type="checkbox" name="grilleamelio" {% if valform.grilleamelio == 'oui' %} checked{% endif %}></li>
109
6ac2173a
DL
110 <li>Dimensions du graphique&nbsp;: <label>largeur&nbsp;: </label><input type="text" class="data" name="largeur" value="{{ valform.largeur }}">
111 <label>hauteur&nbsp;: </label><input type="text" class="data" name="hauteur" value="{{ valform.hauteur }}"></li>
915e90bb
DL
112 <li><label>Légende&nbsp;: <input type="checkbox" name="legende" {% if valform.legende == 'oui' %} checked{% endif %}> </label>
113<label>Position&nbsp;: <select name="positionlegende">
be2bf515
DL
114{%for (pos,posnom) in [('upper left','Haut gauche'),('upper right','Haut Droite'),('lower left','Bas gauche'),('lower right','Bas droite')] %}
115<option value="{{ pos }}">{{ posnom }}</option>
116{% endfor %}
915e90bb 117</select></label>
be2bf515 118 </li>
c2fe511b 119
915e90bb 120 <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 121 <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
122 <li>Symbole pour les points de la courbe :
123 <select name="symbole">
124 {% for symb in CONFIG.liste_symboles %}
125 <option value="{{ symb }}" {% if valform.symbole==symb %} selected{% endif %}>{{CONFIG.liste_symboles[symb] | safe}}</option>
126 {% endfor %}
127 </select>
128 </li>
6ac2173a
DL
129
130 <li>Ajouter des repères sur les courbes. <span class="bouton petit" onclick="ajoute_reperes()">Plus de repères</span>
131 <ul id="ajoutereperecourbe">
132 {% for i in range(valform.liste_reperes | length) %}
133 <li>Âge&nbsp;: <input class="data" type="text" name="repere_age_{{ i }}" value="{{ valform.liste_reperes[i].donnee }}">
134 Texte associé&nbsp;: <input class="texte" type="text" name="repere_texte_{{ i }}" value="{{ valform.liste_reperes[i].texte }}">
135 Tracer&nbsp;: <input type="checkbox" name="repere_trace_{{ i }}" {% if valform.liste_reperes[i].trace %} checked {% endif %}></li>
136 {% endfor %}
137 {% for j in range(valform.liste_reperes | length, valform.nb_reperes_mini) %}
138 <li>Âge&nbsp;: <input class="data" type="text" name="repere_age_{{ j }}" value="">
139 Texte associé&nbsp;: <input class="texte" type="text" name="repere_texte_{{ j }}" value="">
140 Tracer&nbsp;: <input type="checkbox" name="repere_trace_{{ j }}"></li>
141 {% endfor %}
142 </ul>
143
144 </li>
be2bf515
DL
145</ul>
146
147
cf0d4c8c
DL
148<!-- Section calculs/Extrapolation !-->
149
150<h3>Extrapolation</h3>
151<div class="bouton" onclick="affiche_cache('extra',this)">Afficher</div>
152
ca61f310
DL
153<div id="extra">
154<ul>
6ac2173a 155 <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>
cf0d4c8c 156 <li><input type="checkbox" name="prolongercourbes">Tracer l'extrapolation sur le graphique.</li>
3d7da80a 157
cf0d4c8c
DL
158 <li>Calculer <select name="calculextradata_type">
159 <option value="">Choisir la donnée</option>
160 {% for val in CONFIG.liste_typedonnees %}
161 <option value="{{val}}">{{val}}</option>
162 {% endfor %}
6ac2173a 163 </select> à l'âge <input type="text" class="data" name="calculextradata_age" value="6m">
3d7da80a
DL
164 <input type="checkbox" name="calculextradata_trace"> ... et le voir sur le graphique.</li>
165
6ac2173a 166 <li>Calculer l'âge auquel l'enfant aura <input type="text" class="data" name="calculextratemps_val">
cf0d4c8c
DL
167 <select name="calculextratemps_type">
168 <option value="">Choisir la donnée</option>
169 {% for val in CONFIG.liste_typedonnees %}
170 <option value="{{val}}">{{ CONFIG.unites_typedonnees[val]}} ({{val}})</option>
171 {% endfor %}
3d7da80a
DL
172 </select>
173 <input type="checkbox" name="calculextratemps_trace"> ... et le voir sur le graphique.</li>
cf0d4c8c
DL
174
175</ul>
e4ec2d3d 176<p>Les résultats de calculs seront affichés en-dessous des courbes. Ils ne seront pas sauvegardés.</p>
ca61f310
DL
177</div>
178
e4ec2d3d 179<!-- Section courbes multiples -->
ca61f310
DL
180<h3>Courbes multiples</h3>
181<div class="bouton" onclick="affiche_cache('multi',this)">Afficher</div>
182
183<div id="multi">
e4ec2d3d
DL
184 <p>Si vous souhaitez tracer sur le même graphique les courbes de différents enfants, c'est ici.</p>
185 <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>
186 <p>Remarque&nbsp;: lors de l'export, seul l'enfant «&nbsp;principal&nbsp;» est sauvegardé.</p>
e916b79f
DL
187 <ul id="liste_enfants_add">{% for numero_enfant in range(2, CONFIG.nb_fichiers_enfants_add+2) %}
188 <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> |
38b5e10a 189 Symbole&nbsp;: <select name="symbole_donnees_{{ numero_enfant }}">
ca61f310
DL
190 {% for symb in CONFIG.liste_symboles %}
191 <option value="{{ symb }}" {% if numero_enfant == loop.index %} selected{% endif %}>{{ CONFIG.liste_symboles[symb] | safe}}</option>
192 {% endfor %}
38b5e10a 193 </select> |
e916b79f 194 Couleur&nbsp;: <input type="color" name="couleur_donnees_{{ numero_enfant }}" value="{{ valform.couleurs.cadretxt }}"></li>{% endfor %}
ca61f310 195 </ul>
e916b79f 196 <p class="bouton" onclick="ajoute_enfants()" id="reveleenfants">Plus d'enfants O_o</p>
ca61f310
DL
197</div>
198
2fce97ea 199
ca61f310 200</form> <!-- Fin du gros méga formulaire -->
cf0d4c8c 201
ca61f310 202<!-- #################################################################################### -->
fd69b6b5 203<!-- section retour -->
5679dfd0
DL
204<hr>
205
442a69cb
SC
206<div onclick="appelle_image()" class="icon_button">
207 <img src="static/icons/courbe.png">
8b5845ff 208 <span class="icon_legend">Je veux les courbes !</span>
442a69cb 209</div>
5679dfd0 210
5679dfd0 211<hr>
66a3e38c 212<div id="courbe_warnings">
ca61f310 213 <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 214 <ul></ul>
66a3e38c 215</div>
a46e1269 216<div id="courbe_erreurs">
be2bf515
DL
217 <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>
218 <ul></ul>
a46e1269 219</div>
fd69b6b5
DL
220<div id="sectioncourbe">
221
8b5845ff
DL
222 <h2>Courbes</h2>
223 <div id="section_courbe_poids">
224 <img id="courbe_poids">
225
226 <div id="courbe_dl_poids" class="icon_button">
442a69cb 227 <img src="static/icons/export.png">
8b5845ff
DL
228 <span class="icon_legend">Télécharger la courbe de poids</span>
229 </div>
fd69b6b5 230 </div>
8b5845ff
DL
231
232 <div id="section_courbe_taille">
233 <img id="courbe_taille">
234
235 <div id="courbe_dl_taille" class="icon_button">
236 <img src="static/icons/export.png">
237 <span class="icon_legend">Télécharger la courbe de taille</span>
238 </div>
239 </div>
240
fd69b6b5
DL
241</div>
242
cf0d4c8c
DL
243<div id="section_extradonnees">
244 <h2>Calculs sur les courbes</h2>
245 <ul id="extradata">
246
247 </ul>
248</div>
249
e4ec2d3d 250<!-- Section export des courbes -->
5679dfd0
DL
251
252<div id="sectionexport">
be2bf515
DL
253 <h2>Export des données</h2>
254 <p>Vous pouvez télécharger les données afin de ne pas avoir à les re-saisir la prochaine fois.</p>
5679dfd0 255
442a69cb
SC
256 <div id="export_dl" class="icon_button">
257 <img src="static/icons/export.png">
258 <span class="icon_legend">Télécharger les données</span>
259 </div>
e4ec2d3d
DL
260 <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>
261 <div id="export">
262 <textarea readonly id="export_texte">
be2bf515 263 </textarea>
e4ec2d3d
DL
264 <p><span class="bouton" onclick="copietexte()">Sélectionner et copier</span> le texte dans le presse-papier.</p>
265 </div>
5679dfd0
DL
266
267</div>
268
269{% endblock %}