Project

General

Profile

Download (13.2 KB) Statistics
| Branch: | Tag: | Revision:

calebasse / mockups / sessad-un-dossier.html @ 0d4bf0b4

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
		$('#add-notif-btn').click(function() {
71
			$('#add-notif-dlg').dialog({title: 'Notification',
72
				width: '400px',
73
				  buttons: [ { text: "Annuler",
74
					       click: function() { $(this).dialog("close"); } },
75
					     { text: "Ajouter",
76
					       click: function() { $(this).dialog("close"); } }]}
77
			);
78
			});
79

    
80
                $('button.blind').next().hide();
81
                $('button.blind').click(function() {
82
                        $(this).next().toggle('blind');
83
                });
84
	});
85
	</script>
86
  </head>
87
  <body>
88
  <div id="wrap-large">
89
    <div id="header">
90
      <h1><a href="accueil.html">APS 42</a></h1>
91
      <span>Dossiers - SESSAD TED</span>
92
    </div>
93
    <div id="splash" class="sessad-ted">
94
      <div id="user-links">
95
        <a href="connexion.html">Déconnexion</a>
96
      </div>
97
    </div>
98
    <div id="content">
99

    
100
    <div id="appbar">
101
    <h2>Dossier 12345/67890 - Bouclier Guillaume</h2>
102
    <a href="sessad-dossiers.html">Retourner aux dossiers</a>
103
    <button>Supprimer</button>
104
    </div>
105

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

    
151
     <div class="notifs">
152
       <h4>Notifications</h4>
153
       <ul>
154
        <li>Dossier en pause facturation <button>Sortir</button></li>
155
       </ul>
156
     </div>
157

    
158
     </div>
159
     <br style="clear:both"/>
160
    </div>
161

    
162
    <div id="tabs-2"> <!-- Fiche administrative -->
163
     <div>
164
     <h3>État civil</h3>
165
     <button class="save"></button>
166
     <p><label>Nom :</label> <input value="Bouclier"/>
167
     <label>Prénom(s) :</label> <input value="Guillaume"/></p>
168
     <p><label>Date de naissance :</label> <input value="1/1/2005"/>
169
     <label>Genre :</label> <input value="M"/>
170
     <label>Nationalité :</label> <input value="française"/></p>
171
     </div>
172

    
173
     <div>
174
     <h3>Physiologie</h3>
175
     <button class="save"></button>
176
     <p><label>Taille (cm) :</label> <input value="176"/>
177
        <label>Poids (kg) :</label> <input value="68"/>
178
        <label>Terme en semaines :</label> <input/></p>
179
     </div>
180

    
181
     <div>
182
     <h3>Inscription</h3>
183
     <button class="save"></button>
184
     <p>
185
      <label>Motif (analysé) :</label> <select><option>Indéfini</option></select> <button>+</button>
186
      <label>Motif (famille) :</label> <select><option>Indéfini</option></select> <button>+</button>
187
      <label>Conseilleur :</label> <select><option>Indéfini</option></select> <button>+</button>
188
     </p>
189

    
190
     </div>
191

    
192
     <div>
193
     <h3>Famille</h3>
194
     <button class="save"></button>
195
     <p><label>Place dans la fratrie :</label> <input size="4"/>
196
        <label>Nombre d'enfants dans la fratrie :</label> <input size="4"/>
197
        <label>Rang (gémellité) :</label> <input size="4"/>
198
     </p>
199
     <p>
200
      <label>Autorité parentale :</label> <select><option>Indéfini</option></select> <button>+</button>
201
      <label>Situation familiale :</label> <select><option>Indéfini</option></select> <button>+</button>
202
      <label>Garde parentale :</label> <select><option>Indéfini</option></select> <button>+</button>
203
     </p>
204

    
205
     </div>
206

    
207
     <div>
208
     <h3>Transport</h3>
209
     <button class="save"></button>
210
     <p>
211
      <label>Type de transport :</label> <select><option>Indéfini</option></select> <button>+</button>
212
      <label>Compagnie de transport :</label> <select><option>Indéfini</option></select> <button>+</button>
213
     </p>
214
     <table>
215
      <tr><td><button>Attestation</button></td> <td><button>Prescription</td></tr>
216
      <tr><td>Dernière attestation le 25/07/2012 <button>Historique</button></td>
217
          <td>Dernière prescription le 25/07/2012 <button>Historique</button></td></tr>
218
     </table>
219
     </div>
220

    
221
     <div>
222
     <h3>Suivi du patient</h3>
223
     <button class="save"></button>
224
     <p>
225
      <label>Coordinateur I :</label> <select><option>Indéfini</option></select> <button>+</button>
226
      <label>Coordinateur II :</label> <select><option>Indéfini</option></select> <button>+</button>
227
      <label>Coordinateur III :</label> <select><option>Indéfini</option></select> <button>+</button>
228
     </p>
229
     <p>
230
      <label>Médecin extérieur :</label> <select><option>Indéfini</option></select> <button>+</button>
231
      <label>Intervenant extérieur :</label> <select><option>Indéfini</option></select> <button>+</button>
232
     </p>
233
     </div>
234

    
235
    </div>
236

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

    
266
      <div>
267
       <h3>2 rue du Château</h3>
268
       <div class="buttons"><button></button> <button></button></div>
269
       <div class="right">
270
       <input type="checkbox">Lieu de vie</input>
271
       </div>
272
       <p>42000 Saint-Etienne</p>
273
       <p>04 77 12 34 56</p>
274
       <div class="contact">
275
        <h4>M. John Leponge</h4>
276
        <div class="right">
277
         <input type="radio" name="radio-assure">Assuré</input>
278
         <button></button> <button></button>
279
        </div>
280
        <p>1 70 12 34 567 890 12</p>
281
       </div>
282
      </div>
283

    
284
    </div>
285

    
286
    <div id="tabs-4"> <!-- Notifications -->
287
      <div>
288

    
289
      <div>
290
        <h3>Notification du 5 septembre 2009 au 4 septembre 2012</h3>
291
        <ul>
292
         <li>Ajoutée le 12 octobre 2009</li>
293
         <li>bla bla bla</li>
294
        </ul>
295
      </div>
296

    
297
      <button id="add-notif-btn">Ajouter une notification</button>
298
      </div>
299
    </div>
300

    
301
    <!--
302
    <div id="tabs-5">
303
    </div>
304
    -->
305

    
306
    <div id="tabs-6">
307
    </div>
308

    
309
    <div id="tabs-7">
310
    </div>
311

    
312
    <div id="tabs-8">
313
    </div>
314
    </div>
315

    
316
    <div id="footer">
317
318
    </div>
319
  </div>
320

    
321
  <div id="dossier-change" style="display: none;">
322
   <form>
323
   <p>
324
   <label for="id_date">Date :</label>
325
   <input id="id_date" class="date" name="date" value="5/7/2012"/>
326
   </p>
327
   <p>
328
    <label for="id_comment">Commentaire :</label>
329
    <textarea id="id_comment" style="width: 90%;"></textarea>
330
   </p>
331
   </form>
332
  </div>
333

    
334
  <div id="dossier-histo-dlg" style="display: none;">
335
   <dl>
336
    <dt><b>20/05/2012</b> <small>(date info: 22/05/2012)</small></dt>
337
    <dd>
338
     <p><b>en diagnostic</b>; <label>commentaire:</label> bla bla bla bla</p>
339
     <p>changement manuel (par M. Tom)</p>
340
    </dd>
341
    <dt><b>10/05/2012</b></dt>
342
    <dd>
343
     <p><b>accueil</b>; <label>commentaire:</label> bla bla bla bla</p>
344
     <p>changement manuel (par M. Tom)</p>
345
    </dd>
346
   </dl>
347
  </div>
348

    
349
  <div id="new-address-dlg" style="display: none;">
350
   <form>
351
   <table>
352
   <tr>
353
   <td>
354
   <label for="id_numero">Numéro :</label><br/>
355
   <input id="id_numero" class="numero" name="numero" size="10"/>
356
   </td>
357
   <td>
358
   <label for="id_rue">Rue :</label><br/>
359
   <input id="id_rue" class="rue" name="rue" size="35"/>
360
   </td>
361
   </tr>
362
   <tr>
363
   <td>
364
   <label for="id_cp">Code postal :</label><br/>
365
   <input id="id_cp" class="cp" name="cp" size="10"/>
366
   </td>
367
   <td>
368
   <label for="id_ville">Ville :</label><br/>
369
   <input id="id_ville" class="ville" name="ville" size="35"/>
370
   </td>
371
   </tr>
372
   </table>
373
   <p>
374
   <br/>
375
   <label for="id_tel">Téléphone :</label>
376
   <input id="id_tel" class="tel" name="tel" size="35"/>
377
   <button>+</button>
378
   <p>
379
   <input type="checkbox">Lieu de vie</input>
380
   </p>
381
   </form>
382

    
383
  </div>
384

    
385
  <div id="add-prise-en-charge-dlg" style="display: none;">
386
   <div>
387
    <label for="id_partir">À partir du :</label>
388
    <input id="id_partir" class="partir" name="partir" size="10" value="11/06/2012"/>
389
   </div>
390
   <div>
391
    <label for="id_pour">Pour :</label>
392
    <input id="id_pour" class="pour" name="pour" size="4" value="30"/> séances
393
   </div>
394
  </div>
395

    
396
  <div id="add-prolongation-dlg" style="display: none;">
397
   <div>
398
    <label for="id_pour">Pour :</label>
399
    <input id="id_pour" class="pour" name="pour" size="4" value="10"/> actes
400
   </div>
401
  </div>
402

    
403
  <div id="add-notif-dlg" style="display: none;">
404
   <div>
405
    <label for="id_debut">Date de début :</label><br/>
406
    <input id="id_debut" class="debut" name="debut" size="10" value=""/>
407
   </div>
408
   <div>
409
    <label for="id_fin">Date de fin :</label><br/>
410
    <input id="id_fin" class="fin" name="fin" size="10" value=""/>
411
   </div>
412
   <div>
413
    <label for="id_comment">Commentaire :</label>
414
    <textarea id="id_comment" name="id_comment" rows="4" cols="30"/>
415
    </textarea>
416
   </div>
417
  </div>
418

    
419
  </body>
420
</html>
(19-19/23)