templates/offers.form.html.twig line 1

Open in your IDE?
  1. {%extends "template.html.twig"%}
  3. {% block section %}
  4. <div class="row">
  5. <h2 class="mx-auto mb-5 col-sm-12 text-center">Déposer votre offre de mission</h2>
  6. <div class="col-sm-6 mx-auto container-form shadow">
  7. {{ form_start(form, {'attr': {'enctype': 'multipart/form-data'}})  }}
  8.     <div class="part-form-register-pro mx-auto mb-8 mt-8 text-center p-2">
  9.             {{ form_label(form.title)}}
  10.             {{ form_widget(form.title) }}
  11.             {{ form_label(form.content)}}
  12.             {{ form_widget(form.content) }}
  13.             <button class="btn btn-container-form-previous btn-primary m-4">Précédent</button>
  14.             <a href="{{path('profil.user')}}">Retour à votre Profil</a>
  15.             <button class="btn btn-container-form-next btn-primary m-4">Suivant</button>
  16.         </div>
  17.         <div class="part-form-register-pro mx-auto mb-8 mt-8 text-center p-2">
  18.                 {{ form_label(form.category) }}
  19.                 {{ form_widget(form.category, {"attr" : {"class" : "category-field"}}) }}
  20.                 {{ form_row(form.latitude) }}
  21.                 {{ form_row(form.longitude) }}
  22.                 {{ form_label(form.address)}}
  23.                 {{ form_widget(form.address, {'attr': {'class': 'h-100', 'id': 'account_form_adresse'} }) }}
  24.                 <ul id="list" style="display: block;"></ul>
  25.                 {{ form_row(form.city) }}
  26.                 {{ form_row(form.code_postal) }}
  27.                 <a href="" id="add-image">{{form_label(form.images) }}</a>
  28.                 <div class="image-label">
  29.                     {{form_widget(form.images )}}
  30.                 </div>
  31.                 <div class="input-image"></div>
  32.                 <div class="col-sm-12">
  33.                     <img id="preview" width="300">
  34.                 </div>
  35.                 <button class="btn btn-container-form-previous btn-primary m-4">Précédent</button>
  36.                 {{ form_row(form.submit, {"attr" : {"class" : "btn btn-primary m-3"}})}}
  37.                 {{ form_end(form)}}
  38.         </div>
  39.     </div>
  41.     
  44.     <style>
  45.         .part-form-register-pro{
  46.             display: none;
  47.         }
  49.         #account_form_submit{
  50.             display: none;
  51.             color:#305d42 !important;
  52.             background-color: #f8f9fa !important;
  53.         }
  55.         .company-container{
  56.             display:none;
  57.         }
  58.     </style>
  60.     <script>
  61.         var part = 0;
  62.         jQuery(jQuery(".part-form-register-pro")[0]).show();
  63.         jQuery(".btn-container-form-previous").hide();
  64.         jQuery(".btn-container-form-next").click(function(event){
  65.              event.preventDefault();
  66.             jQuery(".btn-container-form-previous").show();
  67.             jQuery(jQuery(".part-form-register-pro")).hide();                            
  68.             jQuery(jQuery(".part-form-register-pro")[++part]).show();    
  69.             if(part === 3 || part > 3){
  70.                 jQuery(".btn-container-form-next").hide();
  71.                 jQuery("#offers_submit").show();
  72.                 part = 2;
  73.             }                        
  74.         });
  75.         
  76.         jQuery(".btn-container-form-previous").click(function(event){
  77.              event.preventDefault();
  78.             jQuery(jQuery(".part-form-register-pro")).hide();                            
  79.             jQuery(jQuery(".part-form-register-pro")[--part]).show();    
  80.             if(part < 2 ){
  81.                 jQuery(".btn-container-form-next").show();
  82.                 jQuery("#account_form_submit").hide();
  83.             }    
  84.             if(part < 1){
  85.                 jQuery(".btn-container-form-previous").hide();
  86.                 part = 0;
  87.             }                    
  88.         });
  90.         
  92.         jQuery("#offers_submit").on('click', function(ev){
  93.             ev.preventDefault();
  94.             console.log(jQuery("#offers_latitude").val().length < 1);
  95.             if( jQuery("#offers_latitude").val().length < 1 ){
  96.                 jQuery("#error_address").html("<p class='alert alert-warning'>Veuillez sélectionner une adresse dans la liste proposée !</p>");
  97.             }
  98.             if( jQuery("#offers_content").val().length < 1 ){
  99.                 jQuery("#error_content").html("<p class='alert alert-warning'>Veuillez remplir la description !</p>");
  100.             }
  101.             jQuery('form[name="offers"]').submit();
  102.         })
  105.         //partForm[0].style.diplay = "block";
  106.         jQuery('#add-image').click(function(ev){
  107.             ev.preventDefault();
  108.             let input_image = jQuery("#offers_images").data('prototype');
  109.             jQuery('.input-image').html(input_image);
  110.                   document.getElementById('offers_images___name___image').addEventListener('change', function(event) {
  111.                 const file = event.target.files[0]; // Get the selected file
  112.                 if (file) {
  113.                 const objectURL = URL.createObjectURL(file); // Create a URL for the Blob
  114.                 document.getElementById('preview').src = objectURL; // Set image source
  115.                 //document.getElementById('preview').style.display = 'block';
  116.         }})
  117.         })
  118.     </script>
  120. {{ form_end(form) }}
  122. </div>
  123. </div>
  125. </body>
  126.  {% endblock %}
  128.  
  129.  {% block footer %}
  130.  <script src="https://cdn.jsdelivr.net/npm/places.js@1.18.2"></script>
  131.  <script src="{{asset("js/placeId.js")}}"></script>
  132.  {% endblock %}