Projet

Général

Profil

Télécharger (16,5 ko) Statistiques
| Branche: | Tag: | Révision:

calebasse / mockups / un-dossier.html @ master

1
<!DOCTYPE html>
2
<html lang="fr">
3
  <head>
4
    <meta charset="utf-8"/>
5
    <title>APS42 — Dossier - 12346 - Bouclier Guillaume</title>
6
    <link rel="stylesheet" type="text/css" media="all" href="css/style.css"/>
7
    <link rel="stylesheet" type="text/css" media="all" href="css/smoothness/jquery-ui-1.8.21.custom.css"/>
8

    
9
    <script src="js/jquery-1.7.2.min.js"></script>
10
    <script src="js/jquery-ui-1.8.21.custom.min.js"></script>
11
    <script src="development-bundle/ui/i18n/jquery.ui.datepicker-fr.js"></script>
12
    <script>
13
	$(function() {
14
		$('#tabs').tabs();
15
		$('#clore-dossier').click(function() {
16
			$('#dossier-change').dialog({title: 'Changement - Clôture',
17
				width: '500px',
18
				  buttons: [ { text: "Annuler",
19
					       click: function() { $(this).dialog("close"); } },
20
					     { text: "Valider",
21
					       click: function() { $(this).dialog("close"); } }]}
22
			);
23
			});
24
		$('#reaccueillir-dossier').click(function() {
25
			$('#dossier-change').dialog({title: 'Changement - Réaccueil',
26
				width: '500px',
27
				  buttons: [ { text: "Annuler",
28
					       click: function() { $(this).dialog("close"); } },
29
					     { text: "Valider",
30
					       click: function() { $(this).dialog("close"); } }]}
31
			);
32
			});
33
		$('#historique-dossier').click(function() {
34
			$('#dossier-histo-dlg').dialog({title: 'Historique dossier',
35
				width: '500px',
36
				  buttons: [ { text: "Fermer",
37
					       click: function() { $(this).dialog("close"); } }]}
38
			);
39
			});
40
		$('#new-address-btn').click(function() {
41
			$('#new-address-dlg').dialog({title: 'Nouvelle adresse',
42
				width: '500px',
43
				  buttons: [ { text: "Annuler",
44
					       click: function() { $(this).dialog("close"); } },
45
					     { text: "Valider",
46
					       click: function() { $(this).dialog("close"); } }]}
47
			);
48
			});
49

    
50
		$('#add-prise-en-charge-btn').click(function() {
51
			$('#add-prise-en-charge-dlg').dialog({title: 'Prise en charge',
52
				width: '300px',
53
				  buttons: [ { text: "Annuler",
54
					       click: function() { $(this).dialog("close"); } },
55
					     { text: "Valider",
56
					       click: function() { $(this).dialog("close"); } }]}
57
			);
58
			});
59

    
60
		$('#add-prolongation-btn').click(function() {
61
			$('#add-prolongation-dlg').dialog({title: 'Prolongation',
62
				width: '300px',
63
				  buttons: [ { text: "Annuler",
64
					       click: function() { $(this).dialog("close"); } },
65
					     { text: "Valider",
66
					       click: function() { $(this).dialog("close"); } }]}
67
			);
68
			});
69

    
70
                $('button.blind').next().hide();
71
                $('button.blind').click(function() {
72
                        $(this).next().toggle('blind');
73
                });
74
	});
75
	</script>
76
  </head>
77
  <body>
78
  <div id="wrap-large">
79
    <div id="header">
80
      <h1><a href="accueil.html">APS 42</a></h1>
81
      <span>Dossiers - CMPP</span>
82
    </div>
83
    <div id="splash" class="cmpp">
84
      <div id="user-links">
85
        <a href="connexion.html">Déconnexion</a>
86
      </div>
87
    </div>
88
    <div id="content">
89

    
90
    <div id="appbar">
91
    <h2>Bouclier Guillaume - Dossier 56789</h2>
92
    <a href="dossiers.html">Retourner aux dossiers</a>
93
    <button>Supprimer</button>
94
    </div>
95

    
96
    <div id="tabs">
97
    <ul>
98
     <li><a href="#tabs-1">Général</a></li>
99
     <li><a href="#tabs-2">Fiche administrative</a></li>
100
     <li><a href="#tabs-3">Adresses / contacts</a></li>
101
     <li><a href="#tabs-4">Prise en charge</a></li>
102
     <!--<li><a href="#tabs-5">Liste des actes</a>-->
103
     <li><a href="#tabs-6">Prochains rendez-vous</a>
104
     <li><a href="#tabs-7">Socialisation</a>
105
     <li><a href="#tabs-8">Données à caractère médical</a>
106
    </ul>
107
    <div id="tabs-1"> <!-- Général -->
108
     <div class="left">
109
     <ul>
110
      <li><label>N° dossier papier :</label> 12345 <button></button></li>
111
      <li><label>N° dossier informatique :</label> 67890</li>
112
      <li><label>Nom :</label> Bouclier</li>
113
      <li><label>Prénom :</label> Guillaume</li>
114
      <li><label>Date de naissance :</label> 1/1/2005</li>
115
      <li><label>Lieux de vie :</label>
116
        <ul>
117
          <li>Adresse A - Téléphone A</li>
118
          <li>Adresse B - Téléphone B</li>
119
        </ul></li>
120
      <li><label>Date d'inscription :</label> 01/06/2012</li>
121
      <li><label>Lieu de socialisation :</label> École Truc</li>
122
      <li><label>Commentaire :</label><br/><textarea cols="50" rows="5"></textarea> <button>Mettre à jour</button></li>
123
     </ul>
124
     </div>
125
     <div class="right">
126
     <ul>
127
      <li><label>Dernier acte :</label> 28/06/2012 - T - absence excusée</li>
128
      <li><label>Prochain rendez-vous :</label> 18/08/2012 - Roudon - mini synthèse.</li>
129
     </ul>
130
     <div class="etat">
131
       <h4>État du dossier :  en diagnostic</h4>
132
       <p>depuis le 20/05/2012</p>
133
       <p><label>Commentaire :</label> bla bla bla bla</p>
134
       <button id="clore-dossier">Clore</button>
135
       <button id="reaccueillir-dossier">Ré-accueillir</button>
136
       <button id="historique-dossier">Historique</button><br/>
137
       <hr/>
138
       3/6 diagnostics
139
     </div>
140

    
141
     <div class="notifs">
142
       <h4>Notifications</h4>
143
       <ul>
144
        <li>Dossier en pause facturation <button>Sortir</button></li>
145
       </ul>
146
     </div>
147

    
148
     </div>
149
     <br style="clear:both"/>
150
    </div>
151

    
152
    <div id="tabs-2"> <!-- Fiche administrative -->
153
     <div class="frame">
154
     <h3>État civil</h3>
155
     <button class="save"></button>
156
     <p><label>Nom :</label> <input value="Bouclier"/>
157
     <label>Prénom(s) :</label> <input value="Guillaume"/></p>
158
     <p><label>Date de naissance :</label> <input value="1/1/2005"/>
159
     <label>Genre :</label> <input value="M"/>
160
     <label>Nationalité :</label> <input value="française"/></p>
161
     </div>
162

    
163
     <div class="frame">
164
     <h3>Physiologie</h3>
165
     <button class="save"></button>
166
     <p><label>Taille (cm) :</label> <input value="176"/>
167
        <label>Poids (kg) :</label> <input value="68"/>
168
        <label>Terme en semaines :</label> <input/></p>
169
     </div>
170

    
171
     <div class="frame">
172
     <h3>Inscription</h3>
173
     <button class="save"></button>
174
     <p>
175
      <label>Motif (analysé) :</label> <select><option>Indéfini</option></select> <button>+</button>
176
      <label>Motif (famille) :</label> <select><option>Indéfini</option></select> <button>+</button>
177
      <label>Conseilleur :</label> <select><option>Indéfini</option></select> <button>+</button>
178
     </p>
179

    
180
     </div>
181

    
182
     <div class="frame">
183
     <h3>Famille</h3>
184
     <button class="save"></button>
185
     <p><label>Place dans la fratrie :</label> <input size="4"/>
186
        <label>Nombre d'enfants dans la fratrie :</label> <input size="4"/>
187
        <label>Rang (gémellité) :</label> <input size="4"/>
188
     </p>
189
     <p>
190
      <label>Autorité parentale :</label> <select><option>Indéfini</option></select> <button>+</button>
191
      <label>Situation familiale :</label> <select><option>Indéfini</option></select> <button>+</button>
192
      <label>Garde parentale :</label> <select><option>Indéfini</option></select> <button>+</button>
193
     </p>
194

    
195
     </div>
196

    
197
     <div class="frame">
198
     <h3>Transport</h3>
199
     <button class="save"></button>
200
     <p>
201
      <label>Type de transport :</label> <select><option>Indéfini</option></select> <button>+</button>
202
      <label>Compagnie de transport :</label> <select><option>Indéfini</option></select> <button>+</button>
203
     </p>
204
     <table>
205
      <tr><td><button>Attestation</button></td> <td><button>Prescription</td></tr>
206
      <tr><td>Dernière attestation le 25/07/2012 <button>Historique</button></td>
207
          <td>Dernière prescription le 25/07/2012 <button>Historique</button></td></tr>
208
     </table>
209
     </div>
210

    
211
     <div class="frame">
212
     <h3>Suivi du patient</h3>
213
     <button class="save"></button>
214
     <p>
215
      <label>Coordinateur I :</label> <select><option>Indéfini</option></select> <button>+</button>
216
      <label>Coordinateur II :</label> <select><option>Indéfini</option></select> <button>+</button>
217
      <label>Coordinateur III :</label> <select><option>Indéfini</option></select> <button>+</button>
218
     </p>
219
     <p>
220
      <label>Médecin extérieur :</label> <select><option>Indéfini</option></select> <button>+</button>
221
      <label>Intervenant extérieur :</label> <select><option>Indéfini</option></select> <button>+</button>
222
     </p>
223
     </div>
224

    
225
    </div>
226

    
227
    <div id="tabs-3"> <!-- Adresses / Contacts -->
228
      <button id="new-address-btn">Nouvelle adresse</button> <button>Nouveau contact</button>
229
      <div class="frame">
230
       <h3>16 rue du Clocher</h3>
231
       <div class="buttons"><button></button> <button></button></div>
232
       <div class="right">
233
       <input type="checkbox" checked>Lieu de vie</input>
234
       </div>
235
       <p>13004 Marseille</p>
236
       <p>04 91 12 34 56</p>
237
       <div class="contact">
238
        <h4>Mme Marie Carmarie</h4>
239
        <div class="right">
240
         <input type="radio" name="radio-assure" checked="checked">Assuré</input>
241
         <button></button> <button></button>
242
        </div>
243
        <p>2 70 12 34 567 890 12</p>
244
        <p>06 12 34 56 78</p>
245
       </div>
246
       <div class="contact patient">
247
        <h4>M. Guillaume Bouclier (PATIENT)</h4>
248
        <div class="right">
249
         <input type="radio" name="radio-assure" >Assuré</input>
250
         <button></button> <button></button>
251
        </div>
252
        <p>1 04 12 34 567 890 12</p>
253
       </div>
254
      </div>
255

    
256
      <div class="frame">
257
       <h3>2 rue du Château</h3>
258
       <div class="buttons"><button></button> <button></button></div>
259
       <div class="right">
260
       <input type="checkbox">Lieu de vie</input>
261
       </div>
262
       <p>42000 Saint-Etienne</p>
263
       <p>04 77 12 34 56</p>
264
       <div class="contact">
265
        <h4>M. John Leponge</h4>
266
        <div class="right">
267
         <input type="radio" name="radio-assure">Assuré</input>
268
         <button></button> <button></button>
269
        </div>
270
        <p>1 70 12 34 567 890 12</p>
271
       </div>
272
      </div>
273

    
274
    </div>
275

    
276
    <div id="tabs-4"> <!-- Prise en charge -->
277
      <div id="patient-diag">
278
      <div class="frame">
279
       <h3>En diagnostic depuis le 11 juin 2012</h3>
280
       <ul>
281
       <li><input size="4" value="6"/> actes prévus</li>
282
       <li><strong>3</strong> actes réalisés dont <strong>2</strong> facturés <button class="blind">détails</button>
283
         <ul>
284
          <li>Facturation <strong>28</strong> (assuré: Sophie Fonfec) - <strong>2</strong> actes
285
           <ul>
286
            <li>Accueil le 11 juin 2012 - 9h00 - 45 minutes - Bob Leponge</li>
287
            <li>Dialogue le 12 juin 2012 - 10h00 - 30 minutes - Bob Leponge</li>
288
           </ul></li>
289
          <li>Non facturé - <strong>1 acte</strong>
290
           <ul>
291
            <li>Dialogue le 13 juin 2012 - 11h00 - 45 minutes - Sandy Kilo</li>
292
           </ul></li>
293
         </ul>
294
         </li>
295
       </ul>
296
      </div>
297
      </div>
298

    
299
      <div id="patient-traitement" style="display: none;">
300
       <div class="frame">
301
       <h3>En diagnostic depuis le 6 mars 2012</h3>
302
       <ul>
303
       <li><strong>6</strong> actes réalisés et facturés <button class="blind">détails</button>
304
         <ul>
305
          <li>Facturation <strong>28</strong> (assuré: Sophie Fonfec) - <strong>6</strong> actes
306
           <ul>
307
            <li>...</li>
308
           </ul></li>
309
         </ul>
310
         </li>
311
       </ul>
312
       </div>
313

    
314
       <div class="frame">
315
        <h3>En traitement depuis le 11 juin 2012</h3>
316
        <ul>
317
         <li><strong>4</strong> actes réalisés <button class="blind">détails</button>
318
          <ul><li>...</li></ul>
319
          </li>
320
         <li>Pas de prise en charge - <button id="add-prise-en-charge-btn">Ajouter une prise en charge</button></li>
321
        </ul>
322
       </div>
323

    
324
      </div>
325

    
326
      <div id="patient-traitement-charge" style="display: none;">
327

    
328
       <div class="frame">
329
       <h3>En diagnostic depuis le 2 avril 2008</h3>
330
       <ul>
331
       <li><strong>3</strong> actes réalisés et facturés <button class="blind">détails</button>
332
         <ul>
333
          <li>Facturation <strong>28</strong> (assuré: Sophie Fonfec) - <strong>3</strong> actes
334
           <ul>
335
            <li>...</li>
336
           </ul></li>
337
         </ul>
338
         </li>
339
       </ul>
340
       </div>
341

    
342
       <div class="frame">
343
       <h3>En diagnostic depuis le 5 octobre 2010</h3>
344
       <ul>
345
       <li><strong>6</strong> actes réalisés et facturés <button class="blind">détails</button>
346
         <ul>
347
          <li>Facturation <strong>28</strong> (assuré: Sophie Fonfec) - <strong>6</strong> actes
348
           <ul>
349
            <li>...</li>
350
           </ul></li>
351
         </ul>
352
         </li>
353
       </ul>
354
       </div>
355

    
356
       <div class="frame">
357
        <h3>En traitement depuis le 12 décembre 2010</h3>
358
        <ul>
359
         <li>Prise en charge depuis le 12 décembre 2010
360
          <ul>
361
           <li><strong>30</strong> actes réalisés et facturés <button class="blind">détails</button>
362
            <ul><li>...</li></ul></li>
363
           <li><strong>10</strong> actes réalisés et facturés en prolongation <button class="blind">détails</button>
364
            <ul><li>...</li></ul></li>
365
           <li><strong>6</strong> actes réalisés et non pris en charge <button class="blind">détails</button>
366
            <ul><li>...</li></ul></li>
367
          </ul>
368
         </li>
369
         <li>Prise en charge depuis le 15 décembre 2011
370
          <ul>
371
           <li><strong>30</strong> actes réalisés et facturés <button class="blind">détails</button>
372
            <ul><li>...</li></ul></li>
373
           <li><strong>6</strong> actes réalisés non facturés <button class="blind">détails</button>
374
            <ul><li>...</li></ul></li>
375
           <li><button id="add-prolongation-btn">Ajouter une prolongation</button></li>
376
          </ul>
377
         </li>
378
        </ul>
379
       </div>
380

    
381

    
382
      </div>
383

    
384
      <div id="overlay">
385
      <p>
386
       Exemples pour cet onglet :
387
        <a href="#" onclick="$('#patient-diag').show(); $('#patient-traitement').hide(); $('#patient-traitement-charge').hide();">Patient en diagnostic</a> -
388
        <a href="#" onclick="$('#patient-diag').hide(); $('#patient-traitement').show(); $('#patient-traitement-charge').hide();">Patient en traitement</a> -
389
        <a href="#" onclick="$('#patient-diag').hide(); $('#patient-traitement').hide(); $('#patient-traitement-charge').show();">Patient en traitement avec prise en charge</a>
390
      </p>
391
      </div>
392

    
393
    </div>
394

    
395
    <!--
396
    <div id="tabs-5">
397
    </div>
398
    -->
399

    
400
    <div id="tabs-6">
401
    </div>
402

    
403
    <div id="tabs-7">
404
    </div>
405

    
406
    <div id="tabs-8">
407
    </div>
408
    </div>
409

    
410
    <div id="footer">
411
412
    </div>
413
  </div>
414

    
415
  <div id="dossier-change" style="display: none;">
416
   <form>
417
   <p>
418
   <label for="id_date">Date :</label>
419
   <input id="id_date" class="date" name="date" value="5/7/2012"/>
420
   </p>
421
   <p>
422
    <label for="id_comment">Commentaire :</label>
423
    <textarea id="id_comment" style="width: 90%;"></textarea>
424
   </p>
425
   </form>
426
  </div>
427

    
428
  <div id="dossier-histo-dlg" style="display: none;">
429
   <dl>
430
    <dt><b>20/05/2012</b> <small>(date info: 22/05/2012)</small></dt>
431
    <dd>
432
     <p><b>en diagnostic</b>; <label>commentaire:</label> bla bla bla bla</p>
433
     <p>changement manuel (par M. Tom)</p>
434
    </dd>
435
    <dt><b>10/05/2012</b></dt>
436
    <dd>
437
     <p><b>accueil</b>; <label>commentaire:</label> bla bla bla bla</p>
438
     <p>changement manuel (par M. Tom)</p>
439
    </dd>
440
   </dl>
441
  </div>
442

    
443
  <div id="new-address-dlg" style="display: none;">
444
   <form>
445
   <table>
446
   <tr>
447
   <td>
448
   <label for="id_numero">Numéro :</label><br/>
449
   <input id="id_numero" class="numero" name="numero" size="10"/>
450
   </td>
451
   <td>
452
   <label for="id_rue">Rue :</label><br/>
453
   <input id="id_rue" class="rue" name="rue" size="35"/>
454
   </td>
455
   </tr>
456
   <tr>
457
   <td>
458
   <label for="id_cp">Code postal :</label><br/>
459
   <input id="id_cp" class="cp" name="cp" size="10"/>
460
   </td>
461
   <td>
462
   <label for="id_ville">Ville :</label><br/>
463
   <input id="id_ville" class="ville" name="ville" size="35"/>
464
   </td>
465
   </tr>
466
   </table>
467
   <p>
468
   <br/>
469
   <label for="id_tel">Téléphone :</label>
470
   <input id="id_tel" class="tel" name="tel" size="35"/>
471
   <button>+</button>
472
   <p>
473
   <input type="checkbox">Lieu de vie</input>
474
   </p>
475
   </form>
476

    
477
  </div>
478

    
479
  <div id="add-prise-en-charge-dlg" style="display: none;">
480
   <div>
481
    <label for="id_partir">À partir du :</label>
482
    <input id="id_partir" class="partir" name="partir" size="10" value="11/06/2012"/>
483
   </div>
484
   <div>
485
    <label for="id_pour">Pour :</label>
486
    <input id="id_pour" class="pour" name="pour" size="4" value="30"/> séances
487
   </div>
488
  </div>
489

    
490
  <div id="add-prolongation-dlg" style="display: none;">
491
   <div>
492
    <label for="id_pour">Pour :</label>
493
    <input id="id_pour" class="pour" name="pour" size="4" value="10"/> actes
494
   </div>
495
  </div>
496

    
497
  </body>
498
</html>
(20-20/23)