templates/depot_fichier_com.html.twig line 1

  1. {% extends 'partials/layout-detached.html.twig' %}
  2. {% block title %}
  3.     COP Normandie - Dépôt du fichier pour les Communes
  4. {% endblock %}
  5. {% block css %}
  6.     <link href="/libs/dropzone/min/dropzone.min.css" rel="stylesheet" type="text/css" />
  7.     <link href="/libs/selectize/css/selectize.bootstrap3.css" rel="stylesheet" type="text/css"/>
  8.     <link href="/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
  9. {% endblock %}
  10. {% block body %}
  11.     <div class="row justify-content-center">
  12.         <div class="col-xl-12">
  13.             <div class="card">
  14.                 <div class="card-body text-center">
  15.                     <div class="row">
  16.                         <div class="col-4"><img src="/images/logo-prefet-normandie.png" height="175" class="m-2"></div>
  17.                         <div class="col-4"></div>
  18.                         <div class="col-4"><img src="/images/logo-normandie.png" height="175"></div>
  19.                     </div>
  20.                     <div class="text-center pb-2">
  21.                         <h3 class="mb-2">Dépôt du fichier pour les communes</h3>
  22.                     </div>
  23.                 </div>
  24.             </div>
  25.         </div>
  26.     </div>
  27.     <div class="row">
  28.         <div class="col-lg-6">
  29.             <div class="card ribbon-box">
  30.                 <div class="card-body">
  31.                     <div class="ribbon ribbon-info float-start">
  32.                         <i class="mdi mdi-access-point me-1"></i>
  33.                         Identification</div>                    
  34.                     <div class="ribbon-content">
  35.                         {{ form_start(form, { 'attr': {'class': 'parsley-form form-depot-fichier'}}) }}
  36.                         <div class="row">
  37.                             <div class="mb-2 col-md-6">
  38.                                 <label class="col-md-4 col-form-label col-sm-2 required">Votre collectivité <span class="text-danger">*</span></label>                         
  39.                                 <div class="col-md-10">
  40.                                     {{ form_widget(form.identifiantCollectivite) }}
  41.                                     {{ form_help(form.identifiantCollectivite) }}
  42.                                 </div>
  43.                                 {{ form_errors(form.identifiantCollectivite) }}
  44.                             </div>
  45.                         </div>
  46.                         <div class="row">
  47.                             <div class="col-12">
  48.                                 <div class="row">
  49.                                     <div class="mb-2 col-md-6">
  50.                                         <label class="col-md-4 col-form-label col-sm-2 required">Nom <span class="text-danger">*</span></label>
  51.                                         {{ form_errors(form.nom) }}
  52.                                         <div class="col-md-10">
  53.                                             {{ form_widget(form.nom) }}
  54.                                             {{ form_help(form.nom) }}
  55.                                         </div>
  56.                                     </div>
  57.                                     <div class="mb-2 col-md-6">
  58.                                         <label class="col-md-4 col-form-label col-sm-2 required">Prénom <span class="text-danger">*</span></label>
  59.                                         {{ form_errors(form.prenom) }}
  60.                                         <div class="col-md-10">
  61.                                             {{ form_widget(form.prenom) }}
  62.                                             {{ form_help(form.prenom) }}
  63.                                         </div>
  64.                                     </div>
  65.                                 </div>
  66.                                 <div class="row">
  67.                                     <div class="mb-2 row">
  68.                                         <label class="col-md-4 col-form-label col-sm-2 required">Fonction <span class="text-danger">*</span></label>
  69.                                         {{ form_errors(form.fonction) }}
  70.                                         <div class="col-md-10">
  71.                                             {{ form_widget(form.fonction) }}
  72.                                             {{ form_help(form.fonction) }}
  73.                                         </div>
  74.                                     </div>
  75.                                 </div>
  76.                                 <div class="row">
  77.                                     <div class="mb-2 col-md-6">
  78.                                         <label class="col-md-4 col-form-label col-sm-2 required">E-mail <span class="text-danger">*</span></label>
  79.                                         {{ form_errors(form.email) }}
  80.                                         <div class="col-md-10">
  81.                                             <div class="input-group">
  82.                                                 <span class="input-group-text" id="basic-addon1">@</span>                                            
  83.                                                 {{ form_widget(form.email) }}
  84.                                             </div>                                            
  85.                                             {{ form_help(form.email) }}
  86.                                         </div>
  87.                                     </div>
  88.                                     <div class="mb-2 col-md-6">
  89.                                         <label class="col-md-4 col-form-label col-sm-2 required">Téléphone <span class="text-danger">*</span></label>
  90.                                         {{ form_errors(form.telephone) }}
  91.                                         <div class="col-md-10">
  92.                                             <div class="input-group">
  93.                                                 {{ form_widget(form.telephone) }}
  94.                                             </div>
  95.                                             {{ form_help(form.telephone) }}
  96.                                         </div>
  97.                                     </div>
  98.                                 </div>
  99.                             </div>
  100.                         </div>
  101.                     </div>
  102.                 </div>
  103.             </div>
  104.         </div>
  105.         <div class="col-lg-6">
  106.             <div class="card ribbon-box">
  107.                 <div class="card-body">
  108.                     <div class="ribbon ribbon-info float-start">
  109.                         <i class="mdi mdi-access-point me-1"></i>
  110.                         Fichier
  111.                     </div>
  112.                     <div class="ribbon-content">
  113.                         <div class="col-lg-12" id="dropzone">
  114.                             <div class="fallback">
  115.                                 {{ form_widget(form.fichier) }}
  116.                             </div>
  117.                             <div class="dz-message needsclick">
  118.                                 <i class="h1 text-muted ri-upload-cloud-2-line"></i>
  119.                                 <h3>Déposez votre fichier ici ou cliquer pour parcourir</h3>                                
  120.                             </div>
  121.                         <!-- Preview -->
  122.                             <div class="dropzone-previews mt-3" id="file-previews"></div>
  123.                         </div>
  124.                         <ul class="parsley-errors-list filled" id="parsley-id-dropzone" style="display:none;"><li class="parsley-required">Ce champ est requis.</li></ul>                        
  125.                         <!-- file preview template -->
  126.                         <div class="d-none" id="uploadPreviewTemplate">
  127.                             <div class="card mt-1 mb-0 shadow-none border">
  128.                                 <div class="p-2">
  129.                                     <div class="row align-items-center">
  130.                                         <div class="col-auto">
  131.                                             <img data-dz-thumbnail src="/images/excel.png" class="avatar-sm rounded bg-light" alt="" id="dz-thumbnail">
  132.                                         </div>
  133.                                         <div class="col ps-0">
  134.                                             <a href="javascript:void(0);" class="text-muted fw-bold" data-dz-name></a>
  135.                                             <p class="mb-0" data-dz-size></p>
  136.                                         </div>
  137.                                         <div class="col-auto">
  138.                                             <!-- Button -->
  139.                                             <a href="" class="btn btn-link btn-lg text-muted" data-dz-remove>
  140.                                                 <i class="fe-x"></i>
  141.                                             </a>
  142.                                         </div>
  143.                                     </div>
  144.                                     <div class="row">
  145.                                         <p class="text-danger" data-dz-errormessage id="dz-errormessage"></p>
  146.                                     </div>
  147.                                 </div>
  148.                             </div>
  149.                         </div>
  150.                     </div>
  151.                 </div>                
  152.             </div> <!-- end card-body -->
  153.         </div>
  154.     </div>
  155.     <!-- end row -->
  156.     
  157.     <div class="row">
  158.         <div class="col-lg-12">
  159.             <div class="card">
  160.                 <div class="card-body">
  161.                     <div class="text-center button-list">
  162.                         <input type="hidden" name="dropzone_tmp_file" id="dropzone_tmp_file" />
  163.                         <a href="/" id="depot_fichier_com_back" name="back" class="btn btn-secondary width-xl waves-effect waves-light">Retour à l'accueil</a>
  164.                         <button type="text" id="depot_fichier_com_save" name="depot_fichier_com[save]" class="btn-primary btn width-xl waves-effect waves-light">Enregistrer</button>
  165.                         <div id="spinner-save" class="spinner-border text-primary m-2" role="status" style="display:none;">                        
  166.                             <span class="visually-hidden">Loading...</span>
  167.                         </div>
  168.                     </div>
  169.                 </div>
  170.             </div>
  171.         </div>
  172.     </div>
  173.     {{form_end(form)}}
  174.     <div class="row">
  175.         <div class="col-lg-12">
  176.             <div class="card">
  177.                 <div class="card-body">
  178.                 <p class="text-muted">Conformément à la loi « informatique et libertés » du 6 janvier 1978 modifiée par la loi du 6 août 2004 et en application du nouveau Règlement Général sur la Protection des Données (RGPD) entré en vigueur dans l'Union Européenne le 25 mai 2018, les informations recueillies sur ce formulaire sont enregistrées dans le strict cadre de la COP Normandie à des fins d'analyses et de consolidation régionale.
  179. Les données collectées seront communiquées aux seuls destinataires suivants : Préfecture Normandie, Région Normandie, SGPE.
  180. Les données sont conservées durant la durée de la COP Normandie.
  181. Vous pouvez accéder aux données vous concernant, les rectifier, demander leur effacement ou exercer votre droit à la limitation du traitement de vos données.
  182. Pour exercer ces droits ou pour toute question sur le traitement de vos données dans ce dispositif, vous pouvez envoyer un mail à <a href="mailto:rgpd@edater.com">rgpd@edater.com</a></p>
  183.                 </div>
  184.             </div>
  185.         </div>
  186.         <!-- end card -->
  187.     </div>
  188. {% endblock %}
  189. {% block javascript %}
  190.     <!-- Plugins js -->
  191.     <script src="/libs/moment/moment.js"></script>
  192.     <script src="/libs/selectize/js/standalone/selectize.min.js"></script>
  193.     <script src="/libs/dropzone/dropzone.js"></script>
  194.     <script src="/libs/sweetalert2/sweetalert2.min.js"></script>
  195.     <script src="/libs/parsleyjs/parsley.min.js"></script>
  196.     <!-- Init js-->    
  197.     <script src="/libs/parsleyjs/i18n/fr.js"></script>
  198.     <script>    
  199.     $( document ).ready(function() {
  200.         var myForm = $(".form-depot-fichier").parsley();
  201.         $('#dropzone_tmp_file').val('')
  202.         var dropzone = new Dropzone('#dropzone', {
  203.             previewTemplate: document.querySelector('#uploadPreviewTemplate').innerHTML,
  204.             parallelUploads: 2,
  205.             url: '/upload-fichier-com',
  206.             autoProcessQueue: false,
  207.             maxFiles: 1,
  208.             thumbnailHeight: 120,
  209.             thumbnailWidth: 120,
  210.             acceptedMimeTypes: "application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.oasis.opendocument.text, application/vnd.oasis.opendocument.spreadsheet",
  211.             maxFilesize: 3,
  212.             filesizeBase: 1000,
  213.             createImageThumbnails: false,
  214.             init: function() {
  215.                 this.on("maxfilesexceeded", function(file) {
  216.                     this.removeAllFiles();
  217.                     this.addFile(file);
  218.                 });  
  219.                 this.on('error', function(file, data) {
  220.                     if (data.detail) {
  221.                         this.emit('error', file, data.detail);
  222.                     }
  223.                 });
  224.                 this.on("sending", function(file, xhr, formData) {
  225.                     formData.append("prenom", $('#depot_fichier_com_prenom').val());
  226.                     formData.append("nom", $('#depot_fichier_com_nom').val());
  227.                     formData.append("fonction", $('#depot_fichier_com_fonction').val());
  228.                     formData.append("email", $('#depot_fichier_com_email').val());
  229.                     formData.append("telephone", $('#depot_fichier_com_telephone').val());
  230.                     formData.append("identifiantCollectivite", $('#depot_fichier_com_identifiantCollectivite').val());
  231.                 });
  232.                 this.on("success", function(file) {
  233.                     var myFormToSubmit = $("#form-create");
  234.                     myFormToSubmit.submit();
  235.                 });     
  236.                 this.on("addedfile", function(file) {
  237.                     $('#dropzone_tmp_file').val(file.name)
  238.                 });
  239.                 var myDropzone = this;
  240.                 $("#depot_fichier_com_save").click(function (e) {                                       
  241.                     if(myForm.isValid()){   
  242.                         e.preventDefault();                     
  243.                         if($('#dropzone_tmp_file').val() != '' && $('#dz-errormessage').text() == ''){
  244.                             $('#parsley-id-dropzone').hide();
  245.                             $('#depot_fichier_com_save').hide()
  246.                             $('#spinner-save').show();
  247.                             myDropzone.processQueue();
  248.                         }else{
  249.                             $('#parsley-id-dropzone').show();
  250.                             $('#depot_fichier_com_save').show();
  251.                             $('#spinner-save').hide();
  252.                         }
  253.                     }
  254.                 });
  255.             }  
  256.         });
  257.         $('#dropzone').addClass('dropzone')
  258.         var eventHandler = function(name) {
  259.             return function() {
  260.                 var url = "/check-exist/"+arguments[0];
  261.                 $.get( url, function( data ) {
  262.                     if(data != 'not-exist'){
  263.                         console.log(data)
  264.                         //var dateDepot = new Date(data.dateDepot).moment().format('DD/MM/YYYY hh:ii');
  265.                         var dateDepot = moment(data.dateDepot).format('DD/MM/YYYY à HH:mm');
  266.                         //new Date(data.dateDepot).toDateString()
  267.                         var depotExist = data.prenom+" "+data.nom+" ("+data.email+" / "+data.telephone+"), le "+dateDepot
  268.                         Swal.fire({
  269.                             title: "Cette collectivité a déjà déposé un fichier! L'enregistrement d'un nouveau fichier écrasera l'ancien.",
  270.                             text: depotExist,
  271.                             icon: "warning",
  272.                             showCancelButton: !0,
  273.                             confirmButtonColor: "#1abc9c",
  274.                             cancelButtonColor: "#f1556c",
  275.                             confirmButtonText: "Oui, je confirme !",
  276.                             cancelButtonText: "Annuler"
  277.                         }).then(function(t) {
  278.                             if(t.value != true){
  279.                                 window.location.replace('/');
  280.                             }
  281.                         })
  282.                     }
  283.                 });
  284.             };
  285.         };
  286.         $(".selectize-field").removeClass('form-select')
  287.         $(".selectize-field").selectize({
  288.             create: false,
  289.             onChange: eventHandler('onChange'),
  290.             sortField: {
  291.                 field: "text",
  292.                 direction: "asc"
  293.             },
  294.             showAddOptionOnCreate: false,
  295.             dropdownParent: "body"
  296.         })
  297.     });
  298.     </script>
  299. {% endblock %}