templates/planning/edit.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Rendez-vous{% endblock %}
  5. {% block body %}
  7.     {% include 'breadcrumb.html.twig' with {level1: 'Planning', level2: 'Edition'} %}
  9.     <div class="page-header">
  10.         <h1>{% if rdv.client %}
  11.                 {{ rdv.client.civilite }}  {{ rdv.client.lastname|capitalize }} {{ rdv.client.roomNumber }}
  12.                {% endif %}
  13.             {% for product in rdv.rdvProducts %}
  14.            {{ product.product.ui }},
  15.             {% endfor %}
  16.         </h1>
  17.     <div>
  18.         Référence contrat : {{ rdv.contract ? rdv.contract.id : '' }}
  19.     </div>
  20.         <div>
  21.             Batiment / Étage / Numéro de chambre : {{ rdv.client.roomNumber }}
  23.         </div>
  24.     </div>
  25.     {% if rdv.status == 'validated' and canBill %}
  26.         <div style="padding: 20px">
  27.             <a class="btn btn-success " href="{{ path('billing_new_rdv', {id : rdv.id}) }}">Facturer</a>
  28.         </div>
  29.     {% endif %}
  30.     <input type="hidden" id="minuteIncrement" value="{{ minuteIncrement }}" />
  32.     {{ include('planning/_form.html.twig', {'button_label': 'Update'}) }}
  34.     <a class="btn btn-outline-info back-button" href="{{ path('app_planning_site') }}">Revenir au planning</a>
  36.     {% if not is_granted('ROLE_COIFFEUR') %}
  37.             {{ include('planning/_delete_form.html.twig') }}
  38.     {% endif %}
  40.     <style>
  41.         #rdv_products {
  42.             height: 200px;
  43.         }
  44.         {% if rdv.status == 'validated' %}
  45.         select.form-control{
  46.             background-color: green;
  47.             color:white;
  48.         }
  49.         {% endif %}
  50.         {% if rdv.status == 'cancel' %}
  51.         select.form-control{
  52.             background-color: red;
  53.             color:white;
  54.         }
  55.         {% endif %}
  56.     </style>
  57. {% endblock %}
  59. {% block javascripts %}
  60.     {{ parent() }}
  61.     <script type="text/javascript">
  62.         // Pass the role information to JavaScript
  63.         var isCoiffeur = {{ is_granted('ROLE_COIFFEUR') ? 'true' : 'false' }};
  64.     </script>
  65.     <script type="text/javascript">
  67.         jQuery.fn.preventDoubleSubmission = function() {
  68.             $(this).on('submit',function(e){
  69.                 var $form = $(this);
  70.                 if ($form.data('submitted') === true) {
  71.                     // Previously submitted - don't submit again
  72.                     e.preventDefault();
  73.                 } else {
  74.                     // Mark it so that the next submit can be ignored
  75.                     $form.data('submitted', true);
  76.                 }
  77.             });
  79.             // Keep chainability
  80.             return this;
  81.         };
  82.         $('#edit_form_rdv').preventDoubleSubmission();
  83.         $('#save-edit').on('click', (e) => {
  84.             e.preventDefault();
  85.             notie.confirm({
  86.                 text: 'Etes vous sur de vouloir enregister?',
  87.                 submitText: 'Confirmer', // optional, default = 'Yes'
  88.                 cancelText: 'Annuler', // optional, default = 'Cancel'
  89.                 submitCallback: function () {
  90.                     if($('#rdv_cancelReason').val() == '1' || $('#rdv_cancelReason').val() == '8') {
  91.                         const text = $('#rdv_cancelReason').val() == '1' ? 'Cette action entrainera la suppression de tous les RDV à venir et l’envoi d’une lettre de condoléance' : 'Cette action entrainera la suppression de tous les RDV à venir.';
  92.                         notie.confirm({
  93.                             text: text,
  94.                             submitText: 'Confirmer', // optional, default = 'Yes'
  95.                             cancelText: 'Annuler', // optional, default = 'Cancel'
  96.                             submitCallback: function () {
  97.                                 $('#edit_form_rdv').unbind();
  98.                                 $('#edit_form_rdv').submit();
  100.                             },
  101.                             cancelCallback: function () {
  102.                                 return false;
  103.                             }
  105.                         });
  106.                     }
  107.                     else {
  108.                         $('#edit_form_rdv').unbind();
  109.                         $('#edit_form_rdv').submit();
  110.                     }
  113.                 }, // optional
  114.                 cancelCallback: function () {
  115.                     return false;
  116.                 } // optional
  117.             });
  118.         })
  122.         $('#rdv_products').select2({ width: '100%' });
  125.         var flatpickrConfig = {
  126.             'dateFormat' : 'Y-m-d H:i',
  127.             'altFormat' : 'd-m-Y H:i',
  128.             'altInput': true,
  129.             'enableTime': true,
  130.             "locale": "fr",
  131.             minuteIncrement: jQuery('#minuteIncrement').val(),
  132.         };
  133.         function restrictFutureDates(selectedDates, dateStr, instance) {
  134.             console.log(selectedDates[0]);
  135.             var selectedDate = selectedDates[0];
  136.             if(selectedDate){
  137.                 selectedDate.setHours(0, 0, 0, 0);
  138.             }
  139.             var today = new Date();
  140.             today.setHours(0, 0, 0, 0);
  141.             if (selectedDate && selectedDate > today) {
  142.                 // Prevent selecting future dates
  143.                 instance.clear(); // Clear the selected date
  144.                 alert("Vous ne pouvez pas sélectionner une date dans le futur.");
  145.             }
  146.         }
  147.         if (isCoiffeur) {
  148.             var today = new Date();
  149.             var tomorrow = new Date(today);
  150.             flatpickrConfig['onChange'] = restrictFutureDates;
  151.         }
  153.         $('#rdv_start').flatpickr(flatpickrConfig);
  154.         $('#rdv_end').flatpickr(flatpickrConfig);
  157.         if($('#rdv_status').val() !== 'cancel') {
  158.             $('#rdv_cancelReason').parent('.form-group').hide();
  159.         }
  161.         $('#rdv_status').on('change', function () {
  162.             if($('#rdv_status').val() !== 'cancel') {
  163.                 $('#rdv_cancelReason').parent('.form-group').hide();
  164.             } else {
  165.                 $('#rdv_cancelReason').parent('.form-group').show();
  166.             }
  167.         })
  170.         $('#rdv_cancelReason').on('change',function (){
  171.             if($('#rdv_cancelReason').val() == '12') {
  172.                 alert('Attention le RDV ne sera pas replanifié');
  173.             }
  174.         });
  175.         document.addEventListener('DOMContentLoaded', function() {
  176.             // Prevent changing the select field
  177.             document.querySelector('select[name="rdv[client]"]').addEventListener('mousedown', function(event) {
  178.                 event.preventDefault(); // Prevent any interaction
  179.             });
  181.             document.querySelector('select[name="rdv[salon]"]').addEventListener('mousedown', function(event) {
  182.                 event.preventDefault(); // Prevent any interaction
  183.             });
  184.         });
  186.         document.addEventListener('DOMContentLoaded', function() {
  187.             const chequeReceptionField = document.getElementById('rdv_chequeReception');
  188.             const infoChequeField = document.getElementById('rdv_infoCheque');
  190.             // Function to send AJAX request to save the field
  191.             function autoSaveField(field, value) {
  192.                 fetch('{{ path('rdv_auto_save') }}', {
  193.                     method: 'POST',
  194.                     headers: {
  195.                         'Content-Type': 'application/json',
  196.                         'X-Requested-With': 'XMLHttpRequest',
  197.                         'X-CSRF-Token': '{{ csrf_token('rdv_auto_save') }}' // Ensure CSRF token is valid
  198.                     },
  199.                     body: JSON.stringify({
  200.                         field: field,
  201.                         value: value,
  202.                         rdvId: '{{ rdv.id }}' // Pass the RDV ID if needed
  203.                     })
  204.                 })
  205.                         .then(response => response.json())
  206.                         .then(data => {
  207.                             if (data.success) {
  208.                                 console.log(`${field} auto-saved.`);
  209.                             } else {
  210.                                 console.error(`Failed to auto-save ${field}.`);
  211.                             }
  212.                         })
  213.                         .catch(error => console.error('Error:', error));
  214.             }
  216.             // Event listeners for changes on the fields
  217.             function addAutoSaveEventListener(field, fieldName) {
  218.                 // Handle checkboxes separately
  219.                 if (field.type === 'checkbox') {
  220.                     field.addEventListener('change', (event) => {
  221.                         autoSaveField(fieldName, event.target.checked ? 1 : 0); // Save as 1 for checked, 0 for unchecked
  222.                     });
  223.                 } else {
  224.                     field.addEventListener('input', (event) => {
  225.                         autoSaveField(fieldName, event.target.value);
  226.                     });
  227.                 }
  228.             }
  230.             addAutoSaveEventListener(chequeReceptionField, 'chequeReception');
  231.             addAutoSaveEventListener(infoChequeField, 'infoCheque');
  232.         });
  234.     </script>
  235. {% endblock %}