Project

General

Profile

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

calebasse / mockups / agenda.html @ aff120df

1
<!DOCTYPE html>
2
<html lang="fr">
3
  <head>
4
    <meta charset="utf-8"/>
5
    <title>APS42 — Agenda</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
		$('div.agenda > div').accordion({active: false, autoHeight: false});
16
		$('#sandy-kilo-item').click(function() {
17
			$(this).toggleClass('active');
18
			$(this).find('span').toggle();
19
			$('.sandy').toggle();
20
			if ($(this).hasClass('active')) $('#tabs').tabs('select', 0);
21
		});
22
		$('#bob-leponge-item').click(function() {
23
			$(this).toggleClass('active');
24
			$(this).find('span').toggle();
25
			$('.bob').toggle();
26
			if ($(this).hasClass('active')) $('#tabs').tabs('select', 1);
27
		});
28
		$('#sandy-kilo-item').click();
29
		$('#bob-leponge-item').click();
30
		$('#filtre input').keyup(function() {
31
			var filtre = $(this).val();
32
			$('#users li').each(function() {
33
				if ($(this).attr('id').match(filtre)) {
34
					$(this).show();
35
				} else {
36
					$(this).hide();
37
				}
38
			});
39
		});
40
		$('#agenda-date').datepicker();
41
		$('.date').datepicker({showOn: 'button'});
42
		$('#add-intervenant-btn').click(function() {
43
			var text = $(this).prev().val();
44
			$('#intervenants ul').append('<li><input type="checkbox" value="' + text + '" checked="checked">' + text + '</input></li>');
45
			$(this).prev().val('').focus();
46
			return false;
47
		});
48
		$('#newrdv').click(function() {
49
			$('#rdv').dialog({title: 'Nouveau rendez-vous',
50
				  width: '800px',
51
				  buttons: [ { text: "Fermer",
52
					       click: function() { $(this).dialog("close"); } },
53
					     { text: "Ajouter",
54
					       click: function() { $(this).dialog("close"); } }]}
55
			);
56
			});
57
	});
58
	</script>
59
  </head>
60
  <body>
61
  <div id="wrap-large">
62
    <div id="header">
63
      <h1><a href="accueil.html">APS 42</a></h1>
64
      <span>Agenda - CMPP</span>
65
    </div>
66
    <div id="splash" class="cmpp">
67
      <div id="user-links">
68
        <a href="connexion.html">Déconnexion</a>
69
      </div>
70
    </div>
71
    <div id="content">
72

    
73
    <div id="appbar">
74
    <h2>Agenda</h2>
75
    <a href="accueil.html">Retourner à l'accueil</a>
76
    <button>Nouvel événement (autre)</button>
77
    <button id="newrdv">Nouveau rendez-vous patient</button>
78
    </div>
79

    
80
    <div id="extra-top-links">
81
     <a href="activite-service.html">Activité du service</a>
82
83
     <a href="validation-des-actes.html">Validation des actes</a>
84
85
     <a href="#">Rendez-vous périodiques</a>
86
    </div>
87

    
88

    
89
    <div id="users">
90
    <div id="filtre">
91
     <input type="text"/>
92
    </div>
93
    <dl>
94
     <dt>Assistants</dt>
95
     <dd><ul>
96
       <li id="andika-triwidata-item">Andika Triwidada</li>
97
       <li id="paolo-bacchilega">Paolo Bacchilega</li>
98
     </ul></dd>
99
     <dt>Orthophonistes</dt>
100
     <dd><ul>
101
       <li id="sandy-kilo-item" class="active">Sandy Kilo <span title="cliquer pour déselectionner">(-)</span></li>
102
       <li id="bob-leponge-item" class="active">Bob Léponge <span title="cliquer pour déselectionner">(-)</span></li>
103
       <li id="pol-lepoulpe-item">Pol Lepoulpe</li>
104
     </ul></dd>
105
   </dl>
106
   </div>
107

    
108
   <div class="content">
109

    
110
   <div id="datesel">
111
   <a href="#">««</a> <a href="#">«</a>
112
   <!-- <span>Jeudi 5 juillet 2012</span> -->
113
   <input id="agenda-date" value="Jeudi 5 juillet 2012"/>
114
   <a href="#">»</a> <a href="#">»»</a>
115
   </div>
116

    
117
   <table>
118
    <tbody>
119
    <tr>
120
     <td id="dispos">
121
      Disponibilités
122
      <table>
123
      <tr class="hour-mark"><td rowspan="4">08:00</td> <td class="sandy free"></td> <td class="bob away"></td></tr>
124
      <tr>   <td class="sandy free"></td> <td class="bob away"></td></tr>
125
      <tr>   <td class="sandy free"></td> <td class="bob free"></td></tr>
126
      <tr>   <td class="sandy free"></td> <td class="bob free"></td></tr>
127
      <tr class="hour-mark"><td rowspan="4">09:00</td> <td class="sandy free"></td> <td class="bob free"></td></tr>
128
      <tr>   <td class="sandy free"></td> <td class="bob free"></td></tr>
129
      <tr>   <td class="sandy free"></td> <td class="bob free"></td></tr>
130
      <tr>   <td class="sandy free"></td> <td class="bob free"></td></tr>
131
      <tr class="hour-mark"><td rowspan="4">10:00</td> <td class="sandy busy"></td> <td class="bob free"></td></tr>
132
      <tr>   <td class="sandy busy"></td> <td class="bob free"></td></tr>
133
      <tr>   <td class="sandy busy"></td> <td class="bob free"></td></tr>
134
      <tr>   <td class="sandy busy"></td> <td class="bob free"></td></tr>
135
      <tr class="hour-mark"><td rowspan="4">11:00</td> <td class="sandy busy"></td> <td class="bob free"></td></tr>
136
      <tr>   <td class="sandy busy"></td> <td class="bob free"></td></tr>
137
      <tr>   <td class="sandy busy"></td> <td class="bob busy"></td></tr>
138
      <tr>   <td class="sandy busy"></td> <td class="bob busy"></td></tr>
139
      <tr class="hour-mark"><td rowspan="4">12:00</td> <td class="sandy free"></td> <td class="bob free"></td></tr>
140
      <tr>   <td class="sandy free"></td> <td class="bob free"></td></tr>
141
      <tr>   <td class="sandy away"></td> <td class="bob away"></td></tr>
142
      <tr>   <td class="sandy away"></td> <td class="bob away"></td></tr>
143
      <tr class="hour-mark"><td rowspan="4">13:00</td> <td class="sandy away"></td> <td class="bob free"></td></tr>
144
      <tr>   <td class="sandy away"></td> <td class="bob free"></td></tr>
145
      <tr>   <td class="sandy away"></td> <td class="bob free"></td></tr>
146
      <tr>   <td class="sandy away"></td> <td class="bob free"></td></tr>
147
      <tr class="hour-mark"><td rowspan="4">14:00</td> <td class="sandy away"></td> <td class="bob free"></td></tr>
148
      <tr>   <td class="sandy away"></td> <td class="bob free"></td></tr>
149
      <tr>   <td class="sandy away"></td> <td class="bob free"></td></tr>
150
      <tr>   <td class="sandy away"></td> <td class="bob free"></td></tr>
151
      <tr class="hour-mark"><td rowspan="4">15:00</td> <td class="sandy away"></td> <td class="bob free"></td></tr>
152
      <tr>   <td class="sandy away"></td> <td class="bob free"></td></tr>
153
      <tr>   <td class="sandy away"></td> <td class="bob free"></td></tr>
154
      <tr>   <td class="sandy away"></td> <td class="bob free"></td></tr>
155
      <tr class="hour-mark"><td rowspan="4">16:00</td> <td class="sandy away"></td> <td class="bob free"></td></tr>
156
      <tr>   <td class="sandy away"></td> <td class="bob free"></td></tr>
157
      <tr>   <td class="sandy away"></td> <td class="bob free"></td></tr>
158
      <tr>   <td class="sandy away"></td> <td class="bob free"></td></tr>
159
      <tr class="hour-mark"><td rowspan="4">17:00</td> <td class="sandy away"></td> <td class="bob free"></td></tr>
160
      <tr>   <td class="sandy away"></td> <td class="bob free"></td></tr>
161
      <tr>   <td class="sandy away"></td> <td class="bob away"></td></tr>
162
      <tr>   <td class="sandy away"></td> <td class="bob away"></td></tr>
163
      <tr class="hour-mark"><td rowspan="4">18:00</td> <td class="sandy away"></td> <td class="bob away"></td></tr>
164
      <tr>   <td class="sandy away"></td> <td class="bob away"></td></tr>
165
      <tr>   <td class="sandy away"></td> <td class="bob away"></td></tr>
166
      <tr>   <td class="sandy away"></td> <td class="bob away"></td></tr>
167
      <tr class="hour-mark"><td rowspan="4">19:00</td> <td class="sandy away"></td> <td class="bob away"></td></tr>
168
      <tr>   <td class="sandy away"></td> <td class="bob away"></td></tr>
169
      <tr>   <td class="sandy away"></td> <td class="bob away"></td></tr>
170
      <tr>   <td class="sandy away"></td> <td class="bob away"></td></tr>
171
      </table>
172
     </td>
173

    
174
     <td id="agendas">
175
       <div id="tabs">
176
       <ul>
177
         <li><a href="#tabs-agenda-1" class="sandy">Sandy Kilo</a></li>
178
         <li><a href="#tabs-agenda-2" class="bob">Bob Léponge</a></li>
179
       </ul>
180
       <div id="tabs-agenda-1" class="agenda sandy">
181
       <a class="print" href="#">Imprimer</a>
182
       <div>
183
        <h3 class="info"><span class="hour">08:00</span> — Arrivée</h3>
184
        <div></div>
185
        <h3 class="free"><span class="hour">08:00</span> — 120m</h3>
186
        <div><button>Prendre un rendez-vous</button></div>
187
        <h3 class="busy-elsewhere convocation"><span class="hour">10:00</span> — 45m — John Doe — SK
188
         <span class="right">
189
         <span class="box camsp" title="CAMSP"></span>
190
         <img title="Une convocation a été envoyée" src="images/emblem-mail.png"/>
191
         <img title="Un commentaire existe" src="images/emblem-documents.png"/>
192
         <button></button>
193
         <button></button>
194
         </span>
195
        </h3>
196
        <div>
197
          <div class="textedit">
198
           <textarea>bla bla bla</textarea>
199
           <button></button>
200
          </div>
201
          <a href="#">Dossier patient</a> -
202
          <a href="#">Prochains rendez-vous</a> -
203
          <a href="#">Convoquer patient</a>
204
        </div>
205
        <h3 class="busy-here"><span class="hour">10:45</span> — 45m — Jack Itchan — SK
206
         <span class="right">
207
         <img title="Un commentaire existe" src="images/emblem-documents.png"/>
208
         <button></button>
209
         <button></button>
210
         </span>
211
        </h3>
212
        <div>
213
          <div class="textedit">
214
           <textarea>bla bla bla</textarea>
215
           <button></button>
216
          </div>
217
          <a href="#">Dossier patient</a> -
218
          <a href="#">Prochains rendez-vous</a> -
219
          <a href="#">Convoquer patient</a>
220
        </div>
221
        <h3 class="busy-elsewhere"><span class="hour">11:30</span> — 30m — Réunion — Salle S4</h3>
222
        <div>
223
          <div class="textedit">
224
           <textarea>bla bla bla</textarea>
225
           <button></button>
226
          </div>
227
        </div>
228
        <h3 class="free"><span class="hour">12:00</span> — 30m</h3>
229
        <div></div>
230
        <h3 class="info"><span class="hour">12:30</span> — Départ</h3>
231
        <div></div>
232
       </div>
233
       </div>
234

    
235
       <div id="tabs-agenda-2" class="agenda bob">
236
       <a class="print" href="#">Imprimer</a>
237
       <div>
238
        <h3 class="info"><span class="hour">08:30</span> — Arrivée</h3>
239
        <div></div>
240
        <h3 class="free"><span class="hour">08:30</span> — 180m</h3>
241
        <div><button>Prendre un rendez-vous</button></div>
242
        <h3 class="busy-elsewhere"><span class="hour">11:30</span> — 30m — Réunion — Salle S4</h3>
243
        <div>
244
          <div class="textedit">
245
           <textarea>bla bla bla</textarea>
246
           <button></button>
247
          </div>
248
        </div>
249
        <h3 class="free"><span class="hour">12:00</span> — 30m</h3>
250
        <div></div>
251
        <h3 class="info"><span class="hour">12:30</span> — Départ</h3>
252
        <div></div>
253
        <h3 class="info"><span class="hour">13:00</span> — Arrivée</h3>
254
        <div></div>
255
        <h3 class="free"><span class="hour">13:00</span> — 270m</h3>
256
        <div><button>Prendre un rendez-vous</button></div>
257
        <h3 class="info"><span class="hour">17:30</span> — Départ</h3>
258
        <div></div>
259
       </div>
260

    
261
       </div>
262

    
263
       </div>
264
     </td>
265
    </tr>
266
    </tbody>
267
   </table>
268

    
269

    
270

    
271
   </div>
272

    
273
    </div>
274

    
275
    <div id="footer">
276
277
    </div>
278
  </div>
279

    
280
  <div id="rdv" style="display: none;">
281
   <form>
282
   <table><tr><td>
283
   <p>
284
   <label for="id_date">Date:</label>
285
   <input id="id_date" class="date" name="date" value="5/7/2012"/>
286
   </p>
287
   </td><td>
288
   <p>
289
    <label for="id_debut">Heure de début :</label>
290
    <input id="id_debut" type="text" name="debut" maxlength="10"/>
291
   </p>
292
   </td><td>
293
   <p>
294
    <label for="id_duree">Durée :</label>
295
    <input id="id_duree" type="text" name="duree" maxlength="10"/>
296
   </p>
297
   </td></tr>
298

    
299
   <tr>
300
   <td>
301
   <h4>Intervenants</h4>
302
   <div id="intervenants">
303
    <ul>
304
     <li><input type="checkbox" value="Bob Léponge" checked="checked">Bob Léponge</input></li>
305
     <li><input type="checkbox" value="Sandy Kilo" checked="checked">Sandy Kilo</input></li>
306
    </ul>
307
    <input/><button id="add-intervenant-btn"></button>
308
   <p><small>(champ avec autocomplétion)</small></p>
309
    <!-- <a href="#">Tout le monde</a> -->
310
   </div>
311
   </td>
312
   <td>
313
   <h4>Patient</h4>
314
   <input name="patient"/>
315
   <br/>
316
   <p><small>(champ avec autocomplétion)</small></p>
317
   </td>
318
   <td>
319

    
320
   <h4>Type d'acte</h4>
321
   <select>
322
    <option>Analyse</option>
323
    <option>Bla bla bla bla bla bla</option>
324
   </select>
325
   </td>
326
   </tr>
327
   </table>
328

    
329
   <hr/>
330
   <button>Configurer la périodicité</button>
331

    
332
   </form>
333
  </div>
334

    
335

    
336
  </body>
337
</html>
(6-6/23)