datepicker embauche

[auf_rh_dae.git] / project / dae / templates / dae / embauche.html

{% extends 'base.html' %}
{% load adminmedia %}

{% block title %}RH - DAE - Embauche{% endblock %}
{% block titre %}Ressources humaines{% endblock %}
{% block sous_titre %}Demande d'autorisation d'embauche{% endblock %}

{% block extrahead %}
  <script src="{{ MEDIA_URL }}js/jquery-1.5.1.min.js"
          type="text/javascript"></script>

  {% comment  %} style pour le calendier {% endcomment %}
  <script type="text/javascript">
    window.__admin_media_prefix__ = "{% filter escapejs %}{% admin_media_prefix %}{% endfilter %}";
  </script>
  <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/calendrier.css" />
  <script type="text/javascript" src="/admin/jsi18n/"></script>
  <script type="text/javascript" src="{% admin_media_prefix %}js/core.js"></script>
  <script type="text/javascript" src="{% admin_media_prefix %}js/calendar.js"></script>
  <script type="text/javascript" src="{% admin_media_prefix %}js/admin/DateTimeShortcuts.js"></script>

  <style>
    h2.section {
        width:100%;
        background-color: #D0E8F8; 
        text-align: center; 
        color: #5F5F5F; 
        margin: 50px 0px 26px 0px; 
        border-bottom: 3px solid #BBD8EC; 
        padding: 4px;
        }
    .row {padding: 10px 0px; clear: both; display:block;}
    .row * {float: left; margin: 0px; padding: 0px; margin-right: 4px;}
    .row li {list-style-type: none;}
    .underline {text-decoration: underline;}
    .clear {display: block; clear: both;}
    .note {text-decoration: underline; font-style: italic; margin-left: 12px;}
    .info {font-size:13px;  font-style: italic;}
    .noborder {border:none; margin:0; padding; 0}
    tr.noborder td {border:none; padding-left: 0;}
    .gauche { float:left; }
    .droite { float:right; text-align:right; }
    .clear { clear:both; width:100%; }
  </style>
{% endblock %}

{% block main %}
<h1>Demandes d'autorisation d'engagement de personnel</h1>
<form action="" method="post" enctype="multipart/form-data">
{% if step == 'poste' %}
    <h2 class="section">SECTION 1 - POSTE</h2>
    <fieldset>
    <h2>Poste visé</h2>

    <table cellspacing="0">
        {{ form.as_table }}
    </table>
    </fieldset>

    <script type="text/javascript">
        $('#id_poste').change(function() {
            window.location = '{% url embauche %}/' + $(this).val();
        });
    </script>
{% else %}
    <h2 class="section">SECTION 1 - POSTE</h2>
    <fieldset>
    <h2>Poste : {{ poste.nom }} ({{ poste.implantation.nom }})</h2>
    
    </fieldset>
    
    <h2 class="section">SECTION 2 - PERSONNEL ENGAGÉ</h2>
    <fieldset>
    <div>
        <div class="gauche"><h2>Personne</h2></div>
        <div class="droite">
            <table class="droite">
                <tbody>
                <tr>
                    <th>Mobilité interne</th>
                    <td colspan="3"><input id="mobilite_interne" type="checkbox" name="mobilite_interne" /></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="clear"></div>
    <table id="form-employe">
        <tbody>
        <tr>
            <th>
                Employé :<br />
                {{ forms.employe.employe.errors }}
            </th>
            <td colspan="5">{{ forms.employe.employe }}</td>
        </tr>
        <tr>
            <th>
                {{ forms.employe.nom.label_tag }} :<br />
                {{ forms.employe.nom.errors }}
            </th>
            <td>{{ forms.employe.nom }}</td>
            <th>
                {{ forms.employe.prenom.label_tag }} :<br />
                {{ forms.employe.prenom.errors }}
            </th>
            <td>{{ forms.employe.prenom }}</td>
            <th>
                {{ forms.employe.genre.label_tag }} :<br />
                {{ forms.employe.genre.errors }}
            </th>
            <td>{{ forms.employe.genre }}</td>
        </tr>
        </tbody>
    </table>

    <input type="hidden" id="poste" name="poste" 
                                    value="dae-{{ poste.id }}" />
    <input type="hidden" id="implantation" name="implantation"
                                    value="{{ poste.implantation_id }}" />
    <input type="hidden" id="dossier" name="dossier"
                                    value="{{ dossier.id }}" />
    </fieldset>

    <script type="text/javascript">
        
        /* Ajout des datespickers sur les inputs loadés via AJAX.
        On s'assure qu'on est pas dans le cas initial où ils sont déjà ajoutés.
        (La façon dont c'est fait requiert que les inputs soient uniquement dans la partie AJAX).*/
        function datepicker() {
            var date_pickers = $(".datetimeshortcuts");
            if (date_pickers.length == 0)
                DateTimeShortcuts.init();
        }
    
        function activateEmployeDropDown() {
            $('#id_employe').change(loadEmploye);
        }

        function loadEmploye() {
            var employeUrl = '{% url employe %}/' + $(this).val();
            $('#form-employe').html('<tr><td>Chargement...</td></tr>')
                .load(employeUrl, activateEmployeDropDown);
            var dossierUrl = '{% url dossier %}/' + $('#poste').val() +
                '/' + $(this).val();
            $('#form-dossier').html('<tr><td>Chargement...</td></tr>')
                .load(dossierUrl, function() {
                        datepicker();
                        activateDossierDropDowns();
                    });
        }
        activateEmployeDropDown();
      </script>

      {% with forms.dossier as form %}
        {% include "dae/embauche-dossier.html" %}
      {% endwith %}

      <fieldset>
          <h2>Pièces jointes</h2>
          <p class="info">CV, lettre de motivation...</p>
          {% include "dae/pieces.html" %}
      </fieldset>
      
      <script type="text/javascript">
        function activateDossierDropDowns() {
            $('#id_classement, #id_devise').change(loadSalaire);
        }

        function loadSalaire() {
            $.getJSON('{% url salaire %}/' + $('#implantation').val() + '/' +
                      $('#id_devise').val() + '/' + $('#id_classement').val(),
              function(data) {
                $('#id_salaire').val(data.salaire_devise);
              });
        }

        activateDossierDropDowns();
      </script>

      <h2 class="section">SECTION 3 - COÛT GLOBAL</h2>

      <fieldset>

        {% if new %}
          <p>
            Vous devez enregister ce dossier avant de pouvoir détailler le
            coût global.
          </p>
        {% else %}
          <table cellspacing="0" id="global-cost">
            {% include 'dae/embauche-remun.html' %}
          </table>

          <select id="type-remun" name="type-remun">
            <option value="">(Ajouter une ligne)</option>
            {% for tr in type_remun %}
              <option value="{{ tr.id }}">{{ tr.nom }}</option>
            {% endfor %}
          </select>
        {% endif %}

      </fieldset>

      <script type="text/javascript">
        function round2(n) {
            return Math.round(n * 100) / 100;
        }

        $('#global-cost input[id^="montant"]').live('keyup', function() {
            var value = $(this).val(),
                idParts = $(this).attr('id').split('-'),
                name = idParts[0],
                id = idParts[1];
            if (name == 'montant') {
                $('#montant_mois-' + id).val(round2(value / 12));
            } else {
                value = value * 12;
                $('#montant-' + id).val(round2(value));
            }
            var taux = $('#taux_devise-' + id).val();
            $('#montant_euro_mois-' + id).text(round2(value / taux / 12));
            $('#montant_euro-' + id).text(round2(value / taux));
        });
      </script>

      <h2 class="section">SECTION 4 - JUSTIFICATION DE LA DEMANDE (OBLIGATOIRE)</h2>

      <input type="submit" name="save" value="Sauvegarder" />
    </form>
    <script type="text/javascript">
        $('#type-remun').change(function() {
            if ($(this).val() != '') {
                $('#global-cost').html('<tr><td>Chargement...</td></tr>')
                                 .load('{% url add_remun %}/' +
                                       $('#dossier').val() + '/' +
                                       $(this).val(), function() {
                    $('#type-remun').val('');
                });
            }
        });
    </script>
  {% endif %}
{% endblock %}