templates/home/viewjoboffer.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}Hello PagesController!{% endblock %}
  3. {% block stylesheets %}
  4. {#    <link rel="stylesheet" href="{{ asset('build/styledrag2.css') }}">#}
  5.     {{ encore_entry_link_tags('styledrag2') }}
  6.     {{ encore_entry_link_tags('style') }}
  7.     {{ encore_entry_link_tags('bootstrap.min') }}
  8. {% endblock %}
  9. {% block body %}
  10.     <style>
  11.         .example-wrapper {
  12.             margin: 1em auto;
  13.             max-width: 800px;
  14.             width: 95%;
  15.             font: 18px/1.5 sans-serif;
  16.         }
  17.         .example-wrapper code {
  18.             background: #F5F5F5;
  19.             padding: 2px 6px;
  20.         }
  21.     </style>
  22.     <!--- Informations structure -->
  23.     <section class="home py-1 bg-light" id="job_présentation">
  24.         <div class="container-lg">
  25.             <div class="row align-items-center align-content-center">
  26.                 <div class="col-md-6 mt-5 mt-md-0">
  27.                     <div class="home-img text-center">
  28.                         <img src="{{ asset('uploads/pdf_file/'~ offer.logoStructure) }}" class="rounded-circle" style="max-width: 100%">
  29.                     </div>
  30.                 </div>
  31.                 <div class="col-md-6 mt-5 mt-md-0 order-md-first">
  32.                     <div class="home-text">
  33.                         <p class="text-muted mb-1">{{ offer.localisation }}</p>
  34.                         <h1 class="text-danger text-uppercase fs-1 fw-bold">{{ offer.titre }}</h1>
  35.                         <h2 class="fs-4">{{ offer.nomStructure }}</h2>
  36.                         <p class="mt-4 text-muted">{{ structure.descriptionStructure }} </p>
  37.                     </div>
  38.                 </div>
  39.                 <div class="col">
  40.                     <div class="home-img text-md-start">
  41.                         {% if is_granted('ROLE_ADMIN_STRUCTURE') %}
  42.                             <a class="btn btn-download text-danger" href="{{ path('app_apply',{id : offer.id}) }}">
  43.                                 <h2><i class="bi bi-inbox-fill"></i> {{ offer.nombreCandidature }} candidature(s)
  44.                                 </h2>
  45.                             </a>
  46.                         {% endif %}
  47.                     </div>
  48.                     <div class="home-img text-md-end">
  49.                         {% set test = 'uploads/pdf_file/' ~ offer.namePdf %}
  50.                         <a class="btn btn-download text-danger" href=""
  51.                            download="{{ offer.titre }}.pdf">
  52.                             <abbr title="Télécharger l'offre en PDF"><h1><i class="bi bi-file-earmark-pdf-fill"></i>
  53.                                 </h1></abbr>
  54.                         </a>
  55.                     </div>
  56.                 </div>
  57.             </div>
  58.         </div>
  59.     </section>
  60.     <hr class="my-4">
  61.     <!--- Presentation structure -->
  62.     <section class="about bg-white" id="about">
  63.         <div class="container-lg py-4">
  64.             <div class="row">
  65.                 <div class="col-md-6">
  66.                     <div class="section-title">
  67.                         <h2 class="fw-bold mb-5">Poste proposé</h2>
  68.                     </div>
  69.                 </div>
  70.                 {% if offer.categorieContrat == 'Emploi' or offer.categorieContrat == 'Stage' %}
  71.                     <div class="col-md-6">
  72.                         <div class="section-title">
  73.                             <h2 class="fw-bold mb-5">Profil recherché</h2>
  74.                         </div>
  75.                     </div>
  76.                 {% endif %}
  77.             </div>
  78.             <div class="row">
  79.                 <div class="col-md-6">
  80.                     {% if offer.categorieContrat == 'Emploi' %}
  81.                         <div class="about-text">
  82.                             <h3 class="fs-5">Intitulé du poste</h3>
  83.                             <p class="text-muted">{{ offer.intitulePoste }}</p>
  84.                         </div>
  85.                     {% endif %}
  86.                     <div class="about-text">
  87.                         {% if offer.categorieContrat == 'Emploi' %}
  88.                             <h3 class="fs-5">Description du poste</h3>
  89.                         {% elseif offer.categorieContrat == 'Stage' %}
  90.                             <h3 class="fs-5">Description du stage</h3>
  91.                         {% else %}
  92.                             <h3 class="fs-5">Objectif de l'offre</h3>
  93.                         {% endif %}
  94.                         <p class="text-muted">{{ offer.descriptionPoste }}</p>
  95.                     </div>
  96.                     <div class="about-text">
  97.                         <h3 class="fs-5">Missions</h3>
  98.                         <p class="text-muted">{{ offer.missions }}</p>
  99.                     </div>
  100.                 </div>
  101.                 {% if offer.categorieContrat == 'Emploi' %}
  102.                     <div class="col-md-6">
  103.                         <div class="about-text">
  104.                             <div class="row">
  105.                                 <div class="col-md-6">
  106.                                     <h3 class="fs-5">Formation (Diplômes)</h3>
  107.                                     <p class="text-muted">{{ offer.formation }}</p>
  108.                                 </div>
  109.                                 <div class="col-md-6">
  110.                                     <h3 class="fs-5">Expérience</h3>
  111.                                     <p class="text-muted">{{ offer.experience }}</p>
  112.                                 </div>
  113.                             </div>
  114.                         </div>
  115.                         <div class="about-text">
  116.                             <div class="row">
  117.                                 <div class="col-md-6">
  118.                                     <h3 class="fs-5">Compétences</h3>
  119.                                     <p class="text-muted">{{ offer.competences }}</p>
  120.                                 </div>
  121.                                 <div class="col-md-6">
  122.                                     <h3 class="fs-5">Qualités</h3>
  123.                                     <p class="text-muted">{{ offer.qualites }}</p>
  124.                                 </div>
  125.                             </div>
  126.                         </div>
  127.                         <div class="about-text">
  128.                             <h3 class="fs-5">Outils à maitriser</h3>
  129.                             <p class="text-muted">{{ offer.outils }}</p>
  130.                         </div>
  131.                     </div>
  132.                 {% elseif offer.categorieContrat == 'Stage' %}
  133.                     <div class="col-md-6">
  134.                         <div class="about-text">
  135.                             <h3 class="fs-5">Formation (Diplômes)</h3>
  136.                             <p class="text-muted">{{ offer.formation }}</p>
  137.                         </div>
  138.                     </div>
  139.                 {% endif %}
  140.             </div>
  141.         </div>
  142.     </section>
  143.     <hr class="my-4">
  144.     <!--- Détails du contrat --->
  145.     <section class="about bg-white" id="about">
  146.         <div class="container-lg py-4">
  147.             <div class="row">
  148.                 <div class="col-md-6">
  149.                     <div class="section-title">
  150.                         {% if offer.categorieContrat == 'Emploi' %}
  151.                             <h2 class="fw-bold mb-5">Details du contrat</h2>
  152.                         {% elseif offer.categorieContrat == 'Stage' %}
  153.                             <h2 class="fw-bold mb-5">Details du stage</h2>
  154.                         {% else %}
  155.                             <h2 class="fw-bold mb-5">Details de l'offre</h2>
  156.                         {% endif %}
  157.                     </div>
  158.                 </div>
  159.             </div>
  160.             <div class="row">
  161.                 <div class="col-md-6">
  162.                     {% if offer.categorieContrat == 'Emploi' %}
  163.                         <div class="about-text">
  164.                             <h3 class="fs-5">Type de contrat</h3>
  165.                             <p class="text-muted">{{ offer.typeContrat }}</p>
  166.                         </div>
  167.                     {% endif %}
  168.                     <div class="about-text">
  169.                         <h3 class="fs-5">Temps de travail hebdomadaire</h3>
  170.                         <p class="text-muted">{{ offer.tempsTravail }}</p>
  171.                     </div>
  172.                     <div class="about-text">
  173.                         <h3 class="fs-5">Date de début de contrat</h3>
  174.                         <p class="text-muted">{{ offer.dateDebutContrat|date("d/m/Y") }}</p>
  175.                     </div>
  176.                     {% if offer.categorieContrat == 'Stage' %}
  177.                         <div class="about-text">
  178.                             <h3 class="fs-5">Date de fin de contrat</h3>
  179.                             <p class="text-muted">{{ offer.dateFinContrat|date("d/m/Y") }}</p>
  180.                         </div>
  181.                     {% elseif offer.categorieContrat == 'Service civique' %}
  182.                         <div class="about-text">
  183.                             <h3 class="fs-5">Durée du contrat</h3>
  184.                             <p class="text-muted">{{ offer.duree }}</p>
  185.                         </div>
  186.                     {% endif %}
  187.                 </div>
  188.                 <div class="col-md-6">
  189.                     <div class="about-text">
  190.                         <h3 class="fs-5">Date de publication</h3>
  191.                         <p class="text-muted">{{ offer.datePublication|date("d/m/Y") }}</p>
  192.                     </div>
  193.                     <div class="about-text">
  194.                         <h3 class="fs-5">Date limite de candidature</h3>
  195.                         <p class="text-muted">{{ offer.dateArchivage|date("d/m/Y") }}</p>
  196.                     </div>
  197.                     {% if offer.categorieContrat == 'Emploi' %}
  198.                         <div class="about-text">
  199.                             <h3 class="fs-5">Convention collective</h3>
  200.                             <p class="text-muted">{{ offer.conventionCollective }}</p>
  201.                         </div>
  202.                         <div class="about-text">
  203.                             <h3 class="fs-5">Salaire brut</h3>
  204.                             <p class="text-danger">{{ offer.salaire }}</p>
  205.                         </div>
  206.                     {% elseif offer.categorieContrat == 'Stage' %}
  207.                         <div class="about-text">
  208.                             <h3 class="fs-5">Salaire brut</h3>
  209.                             <p class="text-danger">{{ offer.salaire }}</p>
  210.                         </div>
  211.                         <div class="about-text">
  212.                             <h3 class="fs-5">Avantages</h3>
  213.                             <p class="text-danger">{{ offer.avantages }}</p>
  214.                         </div>
  215.                     {% else %}
  216.                         <div class="about-text">
  217.                             <h3 class="fs-5">Nombre de volontaires souhaité</h3>
  218.                             <p class="text-danger">{{ offer.nbVolontaire }}</p>
  219.                         </div>
  220.                     {% endif %}
  221.                 </div>
  222.                 <hr class="my-4">
  223.             </div>
  224.         </div>
  225.         </div>
  226.     </section>
  227.     <!--- Drag & drop --->
  228.     {% if is_granted('ROLE_CANDIDAT') %}
  229.         <div class="container">
  230.             {{ form_start(formCandidate) }}
  231.             <div class="accordion accordion-flush" id="accordionFlushExample">
  232.                 <div class="accordion-item">
  233.                     <h2 class="accordion-header" id="flush-headingOne">
  234.                         <button class="accordion-button collapsed btn btn-danger" type="button"
  235.                                 data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false"
  236.                                 aria-controls="flush-collapseOne">
  237.                             Cliquez pour postuler à cette offre
  238.                         </button>
  239.                     </h2>
  240.                     <div id="flush-collapseOne" class="accordion-collapse collapse"
  241.                          aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
  242.                         <div class="accordion-body">Ci-dessous vous pouvez télécharger votre CV et votre lettre de
  243.                             motivation pour cette offre<br>Vous avez la possibilité d'éditer un commentaire
  244.                         </div>
  245.                         <section class="about bg-white" id="about">
  246.                             <div class="container-lg py-4">
  247.                                 <div class="row">
  248.                                     <div class="col-sm-6">
  249.                                         <h4>Envoyer votre CV</h4>
  250.                                         <div class="container">
  251.                                             <div class="row">
  252.                                                 <div class="drop-zone">
  253.                                                     <span class="drop-zone__prompt">Cliquez pour parcourir ou glissez votre document</span>
  254.                                                     {{ form_row(formCandidate.cv, {'attr': {'class': 'drop-zone__input'}}) }}
  255.                                                 </div>
  256.                                             </div>
  257.                                         </div>
  258.                                     </div>
  259.                                     <div class="col-sm-6">
  260.                                         <h4>Envoyer votre lettre de motivation</h4>
  261.                                         <div class="container">
  262.                                             <div class="row">
  263.                                                 <div class="drop-zone">
  264.                                                     <span class="drop-zone__prompt">Cliquez pour parcourir ou glissez votre document</span>
  265.                                                     {{ form_row(formCandidate.lettreMotivation, {'attr': {'class': 'drop-zone__input'}}) }}
  266.                                                 </div>
  267.                                             </div>
  268.                                         </div>
  269.                                     </div>
  270.                                     <div class="mb-3">
  271.                                         <label for="commentaire" class="form-label">Commentaires</label>
  272.                                         {{ form_row(formCandidate.commentaire) }}
  273.                                     </div>
  274.                                     <div align="center">
  275.                                         {{ form_row(formCandidate.submit, { 'label': 'Envoyer' }) }}
  276.                                     </div>
  277.                                 </div>
  278.                             </div>
  279.                         </section>
  280.                     </div>
  281.                 </div>
  282.             </div>
  283.         </div>
  284.         {{ form_end(formCandidate) }}
  285.     {% elseif is_granted('ROLE_SUPER_ADMIN') or is_granted('ROLE_ADMIN_STRUCTURE') %}
  286.     {% else %}
  287.         <div align="center">
  288.             <a href="{{ path ('app_login') }}" class="btn btn-danger">Connecter vous pour pouvoir postuler à cette
  289.                 offre</a>
  290.         </div>
  291.     {% endif %}
  292. {#    <script src="assets/bootstrap.bundle.min.js"></script>#}
  293.     <script>
  294.         document.querySelectorAll(".drop-zone__input").forEach((inputElement) => {
  295.             const dropZoneElement = inputElement.closest(".drop-zone");
  296.             dropZoneElement.addEventListener("click", (e) => {
  297.                 inputElement.click();
  298.             });
  299.             inputElement.addEventListener("change", (e) => {
  300.                 if (inputElement.files.length) {
  301.                     updateThumbnail(dropZoneElement, inputElement.files[0]);
  302.                 }
  303.             });
  304.             dropZoneElement.addEventListener("dragover", (e) => {
  305.                 e.preventDefault();
  306.                 dropZoneElement.classList.add("drop-zone--over");
  307.             });
  308.             ["dragleave", "dragend"].forEach((type) => {
  309.                 dropZoneElement.addEventListener(type, (e) => {
  310.                     dropZoneElement.classList.remove("drop-zone--over");
  311.                 });
  312.             });
  313.             dropZoneElement.addEventListener("drop", (e) => {
  314.                 e.preventDefault();
  315.                 if (e.dataTransfer.files.length) {
  316.                     inputElement.files = e.dataTransfer.files;
  317.                     updateThumbnail(dropZoneElement, e.dataTransfer.files[0]);
  318.                 }
  319.                 dropZoneElement.classList.remove("drop-zone--over");
  320.             });
  321.         });
  322.         /**
  323.          * Updates the thumbnail on a drop zone element.
  324.          *
  325.          * @param {HTMLElement} dropZoneElement
  326.          * @param {File} file
  327.          */
  328.         function updateThumbnail(dropZoneElement, file) {
  329.             let thumbnailElement = dropZoneElement.querySelector(".drop-zone__thumb");
  330.             // First time - remove the prompt
  331.             if (dropZoneElement.querySelector(".drop-zone__prompt")) {
  332.                 dropZoneElement.querySelector(".drop-zone__prompt").remove();
  333.             }
  334.             // First time - there is no thumbnail element, so lets create it
  335.             if (!thumbnailElement) {
  336.                 thumbnailElement = document.createElement("div");
  337.                 thumbnailElement.classList.add("drop-zone__thumb");
  338.                 dropZoneElement.appendChild(thumbnailElement);
  339.             }
  340.             thumbnailElement.dataset.label = file.name;
  341.             // Show thumbnail for image files
  342.             if (file.type.startsWith("image/")) {
  343.                 const reader = new FileReader();
  344.                 reader.readAsDataURL(file);
  345.                 reader.onload = () => {
  346.                     thumbnailElement.style.backgroundImage = `url('${reader.result}')`;
  347.                 };
  348.             } else {
  349.                 thumbnailElement.style.backgroundImage = null;
  350.             }
  351.         }
  352.     </script>
  353. {% endblock %}