datepicker frontend

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

{% extends 'base.html' %}

{% 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>

  <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">
        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, 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 %}