templates/form/detail.html.twig line 1

Open in your IDE?
  1. {% block stylesheet%}
  2.     <link rel="stylesheet" href="{{ asset('assets/examples/css/pages/user.css') }}">
  3.     <link rel="stylesheet" href="{{ asset('assets/global/vendor/select2/select2.css') }}">
  4.     <!-- Leaflet -->
  5.     <link rel="stylesheet" href="{{ asset('assets/js/web/leaflet/dist/leaflet.css') }}">
  6.     <link rel="stylesheet" href="{{ asset('assets/js/web/leaflet/dist/leaflet.draw.css') }}">
  7.     <link rel="stylesheet" href="{{ asset('assets/js/web/leaflet-locatecontrol-gh-pages/dist/L.Control.Locate.min.css') }}">
  8.     <!-- Lightbox -->
  9.     <link rel="stylesheet" href="{{ asset('assets/js/web/ekko-lightbox/dist/ekko-lightbox.css') }}">
  10.     <link rel="stylesheet" href="{{ asset('assets/js/web/ekko-lightbox/ekko-lightbox.less') }}">
  11. {% endblock %}
  12. {% block title %}Enquêtes{% endblock %}
  13. {% extends('base.html.twig') %}
  15. {% block body %}
  16.     <div class="page-content" id="page-web" ng-controller="EnqueteWebController">
  17.         <!-- Panel -->
  18.         <div class="panel" ng-init="init({{ form }}{% if mapObject %}, {{ mapObject }}{% endif %})">
  19.             <div class="panel-body">
  20.                 <div class="row text-center" ng-if="succcess">
  21.                     <div class="offset-md-4 col-md-4 alert alert-success">
  22.                         <p>Formulaire envoyé</p>
  23.                     </div>
  24.                 </div>
  25.                 <div class="row text-center" ng-if="error">
  26.                     <div class="offset-md-4 col-md-4 alert alert-danger">
  27.                         <p>Erreur ... Veuillez réessayer</p>
  28.                     </div>
  29.                 </div>
  30.                 <form>
  31.                     <!-- Private answer -->
  32.                     <div class="row">
  33.                         <div class="col-md-10">
  34.                             <div class="form-head-web">
  35.                                 <h1>{% verbatim %} {{ formInfo.title }} {% endverbatim %}</h1>
  36.                             </div>
  37.                         </div>
  38.                         <div class="col-md-2 d-flex justify-content-end">
  39.                             <!-- Button map modal -->
  40.                             <button type="button" class="btn btn-success" data-toggle="modal" data-target="#modalMapWeb"
  41.                                     ng-if="isGeolocated || isShape" ng-click="reloadMap()">
  42.                                 <i class="icon icon-color wb-map icon-map" aria-hidden="true"></i> CARTE
  43.                             </button>
  44.                         </div>
  45.                         <div class="col-md-12 mb-3" ng-if="!isPublic">
  46.                             <i>Cette enquête n'est pas publique. Seul vous et les administrateurs pourront voir votre réponse.</i>
  47.                         </div>
  48.                         <div class="col-md-12">
  49.                             {% verbatim %}
  50.                                  {{ formInfo.description }}
  51.                             {% endverbatim %}
  52.                         </div>
  53.                         <!-- Button pdf modal -->
  54.                         <button type="button" class="btn btn-success btn-help" data-toggle="modal" data-target="#modalHelpWeb"
  55.                                 ng-if="pdf">
  56.                             Voir le PDF
  57.                         </button>
  58.                     </div>
  59.                     <!-- images description -->
  60.                     <div class="row" ng-init="pictures">
  61.                         <div ng-repeat="picture in arrayPictures" class="col-md-2 div-img-description">
  62.                             {% verbatim %}
  63.                                 <a href="{{ picture }}" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">
  64.                                     <div class="img-description" ng-style="{'background-image':'url('+picture+')'}">
  65.                                     </div>
  66.                                 </a>
  67.                             {% endverbatim %}
  68.                         </div>
  69.                     </div>
  70.                     <hr>
  71.                     <div class="row">
  72.                         <div ng-if="!isSending" class="col-md-12 d-flex justify-content-end mt-10" id="formBody">
  73.                             <!-- Button private modal -->
  74.                             <button type="button" class="btn btn-default btn-private" data-toggle="modal" data-target="#modalPrivateWeb">
  75.                                 <i class="icon wb-help icon-private-web" aria-hidden="true"></i>
  76.                             </button>
  77.                             <div class="form-check form-check-inline">
  78.                                 <label class="form-check-label mr-5" for="privateAnswer">Réponse non publique</label>
  79.                                 <input class="form-check-input" type="checkbox" ng-value="value" name="privateAnswer" id="privateAnswer"
  80.                                        ng-model="private.private">
  81.                             </div>
  82.                         </div>
  83.                     </div>
  84.                     <!-- Media file -->
  85.                     <div ng-if="!isSending" class="row mb-20">
  86.                         <div class="col-md-6" ng-if="formInfo.gotMedia">
  87.                             <div class="form-group mt-2">
  88.                                 {% if form.mediaExplanation %}
  89.                                     <h4>{{ form.mediaExplanation }}</h4>
  90.                                 {% endif %}
  91.                                 <div class="custom-file">
  92.                                     <input type="file" class="custom-file-input form-control " id="files" multiple="multiple" uploads="files" accept="image/*, video/*, .heic, .heif">
  93.                                     <label class="custom-file-label" for="files">Ajouter un fichier image et/ou vidéo</label>
  94.                                     <p class="text-danger" ng-if="mimeTypeError">Attention fichier non pris en charge !!!</p>
  95.                                 </div>
  96.                                 <p ng-if="isHeicOrHeif">Les fichiers en .heic ou .heif seront traités après envoi du formulaire</p>
  97.                             </div>
  98.                         </div>
  99.                     </div>
  100.                     <div class="row">
  101.                             <div id="gallery-admin" style="width:100%">
  102.                                 <div ng-if="!isSending" ng-repeat="(key,picture) in toSendPictures" ng-if="picture"
  103.                                      class="col-md-2 div-img-description text-center scroll-box">
  104.                                     {% verbatim %}
  105.                                         <a ng-if="!(picture.includes('image/heic') || picture.includes('image/heif'))" href="{{ picture | trustUrl }}" data-toggle="lightbox" data-gallery="gallery" class="col-md-2">
  106.                                             <div class="img-description"
  107.                                                  ng-style="{'background-image':'url('+picture+')'}"></div>
  108.                                         </a>
  109.                                         <a ng-if="picture.includes('image/heic') || picture.includes('image/heif')" class="col-md-2">
  110.                                             <div class="img-description"
  111.                                                  ng-style="{'background-image':'url('+substituteImage+')'}"></div>
  112.                                         </a>
  113.                                     {% endverbatim %}
  114.                                     <!--
  115.                                     {# uncomment if image not allowed #}
  116.                                     <div class="subtitue-text-div">
  117.                                         <p ng-if="picture.includes('image/heic') || picture.includes('image/heif')">Traitement à l'envoi du formulaire</p>
  118.                                     </div>
  119.                                     -->
  120.                                     <div class="d-flex justify-content-center">
  121.                                         <button type="button" class="btn btn-icon btn-danger mt-10"
  122.                                                 ng-click="deletePicture(key)" title="Supprimer">
  123.                                             <i class="icon wb-minus" aria-hidden="true"></i>
  124.                                         </button>
  125.                                     </div>
  126.                                 </div>
  127.                                 <div ng-if="!isSending" ng-repeat="(key,video) in toSendVid" ng-if="video"
  128.                                      class="col-md-4 text-center scroll-box">
  129.                                     {% verbatim %}
  130.                                         <video controls class="img-description" preload=auto ng-src="{{video| trustUrl}}">
  131.                                         </video>
  132.                                     {% endverbatim %}
  133.                                     <div class="d-flex justify-content-center">
  134.                                         <button type="button" class="btn btn-icon btn-danger mt-10"
  135.                                                 ng-click="deleteVideo(key)" title="Supprimer">
  136.                                             <i class="icon wb-minus" aria-hidden="true"></i>
  137.                                         </button>
  138.                                     </div>
  139.                                 </div>
  140.                             </div>
  141.                     </div>
  144.                     <div ng-if="!isSending" class="row" ng-repeat="(key, field) in arrayForm">
  145.                         {{ include('form/_formEnquete.html.twig') }}
  146.                     </div>
  148.                     <!-- Signature -->
  149.                     <div class="row mt-20 justify-content-center" ng-show="isSigned">
  150.                         <div class="col-md-12 d-flex justify-content-center">
  151.                             <h4>Signature</h4>
  152.                         </div>
  153.                         <div class="col-md-8 mt-5 d-flex justify-content-center" id="canvasContainer">
  154.                             <canvas id="signature" width="500" height="200"
  155.                                     style="width: 100%; border: 1px solid #e4eaec;cursor: crosshair;"></canvas>
  156.                             <div id="btn-wrapper">
  157.                            <btn class="btn btn-danger" ng-click="signatureCanva.clear()" ng-disabled="disabled" name="clearCanvas" id="clearCanvas"><i class="wb-rubber"></i></btn>
  158.                             </div>
  159.                         </div>
  160.                     </div>
  162.                     <!-- Submit -->
  163.                     <div ng-if="isSending" class="d-flex justify-content-center mt-3" ng-show="!loading">
  164.                         <div class="spinner-border" ></div>
  165.                     </div>
  166.                     <div class="row mt-20">
  167.                         <div  ng-if="!isSending"  class="col-md-12 mt-5 d-flex justify-content-center">
  168.                             <button class="btn btn-success" ng-click="submitFormAndDisplay()"
  169.                                  ng-disabled="disabled" name="submitFormAndDisplay"
  170.                                  id="submitFormAndDisplay" >
  171.                                 Envoyer et recommencer
  172.                             </button>
  173.                             <button class="btn btn-success offset-1 " ng-click="submitForm()"
  174.                                  ng-disabled="disabled" name="submitForm"
  175.                                  id="submitForm" >
  176.                                 Envoyer
  177.                             </button>
  178.                         </div>
  179.                     </div>
  181.                     <!-- Modal animal -->
  182.                     <div class="modal fade" id="animalModal" tabindex="-1" aria-labelledby="animalModalLabel" aria-hidden="true">
  183.                         <div class="modal-dialog">
  184.                             <div class="modal-content">
  185.                                 <div class="modal-header">
  186.                                     <h5 class="modal-title" id="staticBackdropLabel">Animaux</h5>
  187.                                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  188.                                         <span aria-hidden="true">&times;</span>
  189.                                     </button>
  190.                                 </div>
  191.                                 <div class="modal-body">
  192.                                     <label>Sélectionnez un animal</label>
  193.                                     <select class="form-control select2-animals" name="animal" data-plugin="select2"
  194.                                             tabindex="-1" aria-hidden="true" ng-model="answerAnimal" id="modalAnimal"
  195.                                             ng-options="animal.id as animal.name for animal in arrayAnimal">
  196.                                     </select>
  197.                                 </div>
  198.                                 <div class="modal-footer">
  199.                                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
  200.                                     <button type="button" class="btn btn-success" data-dismiss="modal" ng-click="addAnimal()">Ajouter</button>
  201.                                 </div>
  202.                             </div>
  203.                         </div>
  204.                     </div>
  206.                     <!-- Modal animals -->
  207.                     <div class="modal fade" id="animalsModal" tabindex="-1" aria-labelledby="animalsModalLabel" aria-hidden="true">
  208.                         <div class="modal-dialog">
  209.                             <div class="modal-content">
  210.                                 <div class="modal-header">
  211.                                     <h5 class="modal-title" id="staticBackdropLabel">Animaux</h5>
  212.                                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  213.                                         <span aria-hidden="true">&times;</span>
  214.                                     </button>
  215.                                 </div>
  216.                                 <div class="modal-body">
  217.                                     <label>Sélectionnez des animaux</label>
  218.                                     <select class="form-control select2-animals" name="animals" data-plugin="select2" multiple
  219.                                             tabindex="-1" aria-hidden="true" ng-model="answerAnimals" id="modalAnimals"
  220.                                             ng-options="animal.id as animal.name for animal in arrayAnimal">
  221.                                     </select>
  222.                                 </div>
  223.                                 <div class="modal-footer">
  224.                                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
  225.                                     <button type="button" class="btn btn-success" data-dismiss="modal" ng-click="addAnimals()">Ajouter</button>
  226.                                 </div>
  227.                             </div>
  228.                         </div>
  229.                     </div>
  231.                     <!-- Modal map -->
  232.                     <div class="modal fade" id="modalMapWeb" tabindex="-1" aria-labelledby="mapModalLabel" aria-hidden="true">
  233.                         <div class="modal-dialog" id="modal-dialog-web">
  234.                             <div class="modal-content" id="large-modal">
  235.                                 <div class="modal-header">
  236.                                     <h5>Choisir la position du signalement</h5>
  237.                                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  238.                                         <span aria-hidden="true">&times;</span>
  239.                                     </button>
  240.                                 </div>
  241.                                 <div class="modal-body">
  242.                                     <div id="mapModalWeb" style="height: 400px"></div>
  243.                                 </div>
  244.                                 <div class="modal-footer">
  245.                                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Ajouter</button>
  246.                                 </div>
  247.                             </div>
  248.                         </div>
  249.                     </div>
  250.                     <!-- Modal help -->
  251.                     <div class="modal fade" id="modalHelpWeb" tabindex="-1" aria-labelledby="helpModalLabel" aria-hidden="true">
  252.                         <div class="modal-dialog" id="modal-dialog-web">
  253.                             <div class="modal-content" id="large-modal">
  254.                                 <div class="modal-header">
  255.                                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  256.                                         <span aria-hidden="true">&times;</span>
  257.                                     </button>
  258.                                 </div>
  259.                                 <div class="modal-body">
  260.                                     {% verbatim %}
  261.                                        <embed ng-src="{{pdfPath}}" width="100%" height="700px" />
  262.                                     {% endverbatim %}
  263.                                 </div>
  264.                             </div>
  265.                         </div>
  266.                     </div>
  267.                     <!-- Modal private -->
  268.                     <div class="modal fade" id="modalPrivateWeb" tabindex="-1" aria-labelledby="privateModalLabel" aria-hidden="true">
  269.                         <div class="modal-dialog" id="modal-dialog-web">
  270.                             <div class="modal-content" id="large-modal">
  271.                                 <div class="modal-header">
  272.                                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  273.                                         <span aria-hidden="true">&times;</span>
  274.                                     </button>
  275.                                 </div>
  276.                                 <div class="modal-body">
  277.                                     Les publications anonymes, n'apparaissent ni dans les signalements, ni sur la
  278.                                     carte. Elles ne seront visibles que par vous et l'administrateur de votre collecteur.
  279.                                 </div>
  280.                             </div>
  281.                         </div>
  282.                     </div>
  283.                 </form>
  284.             </div>
  285.         </div>
  286.     </div>
  287. {% endblock %}
  288. {% block javascripts %}
  289.     <!-- Angular -->
  290.     <script type="text/javascript" src="{{ asset('assets/js/script/controllers/EnqueteWebController.js') }}"></script>
  292.     <script src="{{ asset('assets/global/vendor/select2/select2.full.min.js') }}"></script>
  293.     <script src="{{ asset('assets/global/js/Plugin/select2.js') }}"></script>
  294.     <!-- Lightbox -->
  295.     <script src="{{ asset('assets/js/web/ekko-lightbox/dist/ekko-lightbox.js') }}"></script>
  296.     <!-- Leaflet -->
  297.     <script src="{{ asset('assets/js/web/leaflet/dist/leaflet.js') }}"></script>
  298.     <script src="{{ asset('assets/js/web/leaflet/dist/leaflet.draw.js') }}"></script>
  299.     <script src="{{ asset('assets/js/web/leaflet-locatecontrol-gh-pages/dist/L.Control.Locate.min.js') }}"></script>
  300.     <script src="{{ asset('assets/js/web/leaflet-centermarker-master/src/leaflet.centermarker.js') }}"></script>
  301.     <!-- Signature -->
  302.     <script src="{{ asset('assets/js/Plugin/PortrayCanvas-master/dist/portraycanvas.min.js') }}"></script>
  303.     <!-- Add date now in input -->
  304.     <script>
  306.         $(document).on("click", '[data-toggle="lightbox"]', function(event) {
  307.             event.preventDefault();
  308.             $(this).ekkoLightbox();
  309.         });
  310.             window.setTimeout(
  311.                 function(){
  312.                     $('.select2-bigList').select2({
  313.                     });
  314.                 },500
  315.             );
  316.     </script>
  317. {% endblock %}