Project

General

Profile

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

calebasse / calebasse / agenda / templates / agenda / index.html @ 0f0cacbb

1
{% extends "calebasse/base.html" %}
2
{% block extrascripts %}
3
    <script>
4
  $(function() {
5
    $('#tabs').tabs();
6

    
7
    $('div.agenda > div').accordion({active: false, autoHeight: false});
8

    
9
    $('.person-item').on('click', function() {
10
      $(this).toggleClass('active');
11
      var $target = $($(this).data('target'));
12
      $target.toggle();
13
      // var selected = $('#tabs').tabs('option', 'selected');
14
      // var length = $('#tabs').tabs('length');
15
      // alert($('.tabs').index($target.filter('.tabs')));
16
      if ($target.is(':visible')) {
17
        $target.click();
18
      }
19
    });
20

    
21
    /* Gestion du filtre sur les utilisateurs */
22
		$('#filtre input').keyup(function() {
23
			var filtre = $(this).val();
24
      if (filtre) {
25
        $('#users li').each(function() {
26
          if ($(this).text().match(filtre)) {
27
            $(this).show();
28
          } else {
29
            $(this).hide();
30
          }
31
        });
32
      } else {
33
        $('#users li').show();
34
      }
35

    
36
		});
37
		$('#agenda-date').datepicker();
38
		$('.date').datepicker({showOn: 'button'});
39
		$('#add-intervenant-btn').click(function() {
40
			var text = $(this).prev().val();
41
			$('#intervenants ul').append('<li><input type="checkbox" value="' + text + '" checked="checked">' + text + '</input></li>');
42
			$(this).prev().val('').focus();
43
			return false;
44
		});
45
		$('#newrdv').click(function() {
46
			$('#rdv').dialog({title: 'Nouveau rendez-vous',
47
				  width: '800px',
48
				  buttons: [ { text: "Fermer",
49
					       click: function() { $(this).dialog("close"); } },
50
					     { text: "Ajouter",
51
					       click: function() { $(this).dialog("close"); } }]}
52
			);
53
			});
54
	});
55
	</script>
56
  <style>
57
    .person-item span { display: none; }
58
    .person-item.active span { display: inline; }
59
    #agenda-date { width: 20em; }
60
  </style>
61
{% endblock %}
62

    
63
{% block title %}{{ block.super }} - Agenda {% endblock %}
64

    
65
{% block header %}
66
  {{ block.super }}
67
  <span>Agenda - {{ service_name }}</spam>
68
{% endblock %}
69

    
70
{% block appbar %}
71
    <h2>Agenda</h2>
72
    <a href="accueil.html">Retourner à l'accueil</a>
73
    <button>Nouvel événement (autre)</button>
74
    <button id="newrdv">Nouveau rendez-vous patient</button>
75
{% endblock %}
76

    
77
{% block beforecontent %}
78
    <div id="extra-top-links">
79
     <a href="activite-du-service">Activité du service</a>
80
81
     <a href="validation-des-actes">Validation des actes</a>
82
83
     <a href="rendez-vous-periodiques">Rendez-vous périodiques</a>
84
    </div>
85

    
86

    
87
    <div id="users">
88
    <div id="filtre">
89
     <input type="text"/>
90
    </div>
91
    <dl>
92
     {% for workers_type in workers_types %}
93
     <dt>{{ workers_type.type }}</dt>
94
     <dd><ul>
95
       {% for worker in workers_type.workers %}
96
       <li class="person-item" data-target=".andika-triwidada.agenda">{{ worker.display_name }}</li>
97
       {% endfor %}
98
     </ul></dd>
99
     {% endfor %}
100
   </dl>
101
 </div>
102
{% endblock %}
103

    
104
{% block content %}
105
<div class="content">
106
   <div id="datesel">
107
     <a href="../{{ previous_month|date:"SHORT_DATE_FORMAT"}}">««</a>
108
     <a href="../{{ previous_day|date:"SHORT_DATE_FORMAT"}}">«</a>
109
   <!-- <span>Jeudi 5 juillet 2012</span> -->
110
   <input id="agenda-date" value="{{ date|date:"DATE_FORMAT" }}"/>
111
   <a href="../{{ next_day|date:"SHORT_DATE_FORMAT"}}">»</a>
112
   <a href="../{{ next_month|date:"SHORT_DATE_FORMAT"}}">»»</a>
113
   </div>
114

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

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

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

    
260
       </div>
261

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

    
269
{% endblock %}
270

    
271
{% block dialogs %}
272
  <div id="rdv" style="display: none;">
273
   <form>
274
   <table><tr><td>
275
   <p>
276
   <label for="id_date">Date:</label>
277
   <input id="id_date" class="date" name="date" value="5/7/2012"/>
278
   </p>
279
   </td><td>
280
   <p>
281
    <label for="id_debut">Heure de début :</label>
282
    <input id="id_debut" type="text" name="debut" maxlength="10"/>
283
   </p>
284
   </td><td>
285
   <p>
286
    <label for="id_duree">Durée :</label>
287
    <input id="id_duree" type="text" name="duree" maxlength="10"/>
288
   </p>
289
   </td></tr>
290

    
291
   <tr>
292
   <td>
293
   <h4>Intervenants</h4>
294
   <div id="intervenants">
295
    <ul>
296
     <li><input type="checkbox" value="Bob Léponge" checked="checked">Bob Léponge</input></li>
297
     <li><input type="checkbox" value="Sandy Kilo" checked="checked">Sandy Kilo</input></li>
298
    </ul>
299
    <input/><button id="add-intervenant-btn"></button>
300
   <p><small>(champ avec autocomplétion)</small></p>
301
    <!-- <a href="#">Tout le monde</a> -->
302
   </div>
303
   </td>
304
   <td>
305
   <h4>Patient</h4>
306
   <input name="patient"/>
307
   <br/>
308
   <p><small>(champ avec autocomplétion)</small></p>
309
   </td>
310
   <td>
311

    
312
   <h4>Type d'acte</h4>
313
   <select>
314
    <option>Analyse</option>
315
    <option>Bla bla bla bla bla bla</option>
316
   </select>
317
   </td>
318
   </tr>
319
   </table>
320

    
321
   <hr/>
322
   <button>Configurer la périodicité</button>
323

    
324
   </form>
325
 </div>
326
{% endblock %}
    (1-1/1)