datepicker embauche
[auf_rh_dae.git] / project / dae / templates / dae / embauche.html
1 {% extends 'base.html' %}
2 {% load adminmedia %}
3
4 {% block title %}RH - DAE - Embauche{% endblock %}
5 {% block titre %}Ressources humaines{% endblock %}
6 {% block sous_titre %}Demande d'autorisation d'embauche{% endblock %}
7
8 {% block extrahead %}
9 <script src="{{ MEDIA_URL }}js/jquery-1.5.1.min.js"
10 type="text/javascript"></script>
11
12 {% comment %} style pour le calendier {% endcomment %}
13 <script type="text/javascript">
14 window.__admin_media_prefix__ = "{% filter escapejs %}{% admin_media_prefix %}{% endfilter %}";
15 </script>
16 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/calendrier.css" />
17 <script type="text/javascript" src="/admin/jsi18n/"></script>
18 <script type="text/javascript" src="{% admin_media_prefix %}js/core.js"></script>
19 <script type="text/javascript" src="{% admin_media_prefix %}js/calendar.js"></script>
20 <script type="text/javascript" src="{% admin_media_prefix %}js/admin/DateTimeShortcuts.js"></script>
21
22 <style>
23 h2.section {
24 width:100%;
25 background-color: #D0E8F8;
26 text-align: center;
27 color: #5F5F5F;
28 margin: 50px 0px 26px 0px;
29 border-bottom: 3px solid #BBD8EC;
30 padding: 4px;
31 }
32 .row {padding: 10px 0px; clear: both; display:block;}
33 .row * {float: left; margin: 0px; padding: 0px; margin-right: 4px;}
34 .row li {list-style-type: none;}
35 .underline {text-decoration: underline;}
36 .clear {display: block; clear: both;}
37 .note {text-decoration: underline; font-style: italic; margin-left: 12px;}
38 .info {font-size:13px; font-style: italic;}
39 .noborder {border:none; margin:0; padding; 0}
40 tr.noborder td {border:none; padding-left: 0;}
41 .gauche { float:left; }
42 .droite { float:right; text-align:right; }
43 .clear { clear:both; width:100%; }
44 </style>
45 {% endblock %}
46
47 {% block main %}
48 <h1>Demandes d'autorisation d'engagement de personnel</h1>
49 <form action="" method="post" enctype="multipart/form-data">
50 {% if step == 'poste' %}
51 <h2 class="section">SECTION 1 - POSTE</h2>
52 <fieldset>
53 <h2>Poste visé</h2>
54
55 <table cellspacing="0">
56 {{ form.as_table }}
57 </table>
58 </fieldset>
59
60 <script type="text/javascript">
61 $('#id_poste').change(function() {
62 window.location = '{% url embauche %}/' + $(this).val();
63 });
64 </script>
65 {% else %}
66 <h2 class="section">SECTION 1 - POSTE</h2>
67 <fieldset>
68 <h2>Poste : {{ poste.nom }} ({{ poste.implantation.nom }})</h2>
69
70 </fieldset>
71
72 <h2 class="section">SECTION 2 - PERSONNEL ENGAGÉ</h2>
73 <fieldset>
74 <div>
75 <div class="gauche"><h2>Personne</h2></div>
76 <div class="droite">
77 <table class="droite">
78 <tbody>
79 <tr>
80 <th>Mobilité interne</th>
81 <td colspan="3"><input id="mobilite_interne" type="checkbox" name="mobilite_interne" /></td>
82 </tr>
83 </tbody>
84 </table>
85 </div>
86 </div>
87 <div class="clear"></div>
88 <table id="form-employe">
89 <tbody>
90 <tr>
91 <th>
92 Employé :<br />
93 {{ forms.employe.employe.errors }}
94 </th>
95 <td colspan="5">{{ forms.employe.employe }}</td>
96 </tr>
97 <tr>
98 <th>
99 {{ forms.employe.nom.label_tag }} :<br />
100 {{ forms.employe.nom.errors }}
101 </th>
102 <td>{{ forms.employe.nom }}</td>
103 <th>
104 {{ forms.employe.prenom.label_tag }} :<br />
105 {{ forms.employe.prenom.errors }}
106 </th>
107 <td>{{ forms.employe.prenom }}</td>
108 <th>
109 {{ forms.employe.genre.label_tag }} :<br />
110 {{ forms.employe.genre.errors }}
111 </th>
112 <td>{{ forms.employe.genre }}</td>
113 </tr>
114 </tbody>
115 </table>
116
117 <input type="hidden" id="poste" name="poste"
118 value="dae-{{ poste.id }}" />
119 <input type="hidden" id="implantation" name="implantation"
120 value="{{ poste.implantation_id }}" />
121 <input type="hidden" id="dossier" name="dossier"
122 value="{{ dossier.id }}" />
123 </fieldset>
124
125 <script type="text/javascript">
126
127 /* Ajout des datespickers sur les inputs loadés via AJAX.
128 On s'assure qu'on est pas dans le cas initial où ils sont déjà ajoutés.
129 (La façon dont c'est fait requiert que les inputs soient uniquement dans la partie AJAX).*/
130 function datepicker() {
131 var date_pickers = $(".datetimeshortcuts");
132 if (date_pickers.length == 0)
133 DateTimeShortcuts.init();
134 }
135
136 function activateEmployeDropDown() {
137 $('#id_employe').change(loadEmploye);
138 }
139
140 function loadEmploye() {
141 var employeUrl = '{% url employe %}/' + $(this).val();
142 $('#form-employe').html('<tr><td>Chargement...</td></tr>')
143 .load(employeUrl, activateEmployeDropDown);
144 var dossierUrl = '{% url dossier %}/' + $('#poste').val() +
145 '/' + $(this).val();
146 $('#form-dossier').html('<tr><td>Chargement...</td></tr>')
147 .load(dossierUrl, function() {
148 datepicker();
149 activateDossierDropDowns();
150 });
151 }
152 activateEmployeDropDown();
153 </script>
154
155 {% with forms.dossier as form %}
156 {% include "dae/embauche-dossier.html" %}
157 {% endwith %}
158
159 <fieldset>
160 <h2>Pièces jointes</h2>
161 <p class="info">CV, lettre de motivation...</p>
162 {% include "dae/pieces.html" %}
163 </fieldset>
164
165 <script type="text/javascript">
166 function activateDossierDropDowns() {
167 $('#id_classement, #id_devise').change(loadSalaire);
168 }
169
170 function loadSalaire() {
171 $.getJSON('{% url salaire %}/' + $('#implantation').val() + '/' +
172 $('#id_devise').val() + '/' + $('#id_classement').val(),
173 function(data) {
174 $('#id_salaire').val(data.salaire_devise);
175 });
176 }
177
178 activateDossierDropDowns();
179 </script>
180
181 <h2 class="section">SECTION 3 - COÛT GLOBAL</h2>
182
183 <fieldset>
184
185 {% if new %}
186 <p>
187 Vous devez enregister ce dossier avant de pouvoir détailler le
188 coût global.
189 </p>
190 {% else %}
191 <table cellspacing="0" id="global-cost">
192 {% include 'dae/embauche-remun.html' %}
193 </table>
194
195 <select id="type-remun" name="type-remun">
196 <option value="">(Ajouter une ligne)</option>
197 {% for tr in type_remun %}
198 <option value="{{ tr.id }}">{{ tr.nom }}</option>
199 {% endfor %}
200 </select>
201 {% endif %}
202
203 </fieldset>
204
205 <script type="text/javascript">
206 function round2(n) {
207 return Math.round(n * 100) / 100;
208 }
209
210 $('#global-cost input[id^="montant"]').live('keyup', function() {
211 var value = $(this).val(),
212 idParts = $(this).attr('id').split('-'),
213 name = idParts[0],
214 id = idParts[1];
215 if (name == 'montant') {
216 $('#montant_mois-' + id).val(round2(value / 12));
217 } else {
218 value = value * 12;
219 $('#montant-' + id).val(round2(value));
220 }
221 var taux = $('#taux_devise-' + id).val();
222 $('#montant_euro_mois-' + id).text(round2(value / taux / 12));
223 $('#montant_euro-' + id).text(round2(value / taux));
224 });
225 </script>
226
227 <h2 class="section">SECTION 4 - JUSTIFICATION DE LA DEMANDE (OBLIGATOIRE)</h2>
228
229 <input type="submit" name="save" value="Sauvegarder" />
230 </form>
231 <script type="text/javascript">
232 $('#type-remun').change(function() {
233 if ($(this).val() != '') {
234 $('#global-cost').html('<tr><td>Chargement...</td></tr>')
235 .load('{% url add_remun %}/' +
236 $('#dossier').val() + '/' +
237 $(this).val(), function() {
238 $('#type-remun').val('');
239 });
240 }
241 });
242 </script>
243 {% endif %}
244 {% endblock %}
245