templates/lidkaart/renew-membership.html.twig line 1

Open in your IDE?
  1. {% extends base_layout() %}
  3. {% block content %}
  4.     <div class="row">
  5.         <div class="col-8 mx-auto">
  6.             <h1 class="py-5">{{ 'Nieuwe lidkaart aanmaken'|trans }}</h1>
  7.             {% form_theme form 'bootstrap_5_layout.html.twig' %}
  9.             {{ form_start(form, {'attr': {'class': 'form', 'id': 'membership_form'}}) }}
  10.             <div class="row">
  11.                 <div class="col-lg-3">
  12.                     {{ form_row(form.club, {'attr': {'required': 'required'}}) }}
  13.                     {{ form_row(form.membershipType, {'attr': {'required': 'required'}}) }}
  14.                 </div>
  15.                 <div class="col-lg-7">
  16.                     <div class="p-3 m-3" style="width: 18rem;">
  17.                         <div class="d-flex justify-content-between">
  18.                             <button type="button" class="btn btn-secondary" id="add_member" disabled>{{ 'Lid Toevoegen'|trans }}</button>
  19.                             <button type="submit" class="btn btn-primary" id="submit_button" disabled>{{ 'Volgende'|trans }}</button>
  20.                         </div>
  21.                     </div>
  22.                 </div>
  23.             </div>
  24.             <hr>
  25.             <div id="members" class="row" data-prototype="{{ form_widget(form.members.vars.prototype)|e }}">
  26.                 {% for MembershipFormType in form.members %}
  27.                     <div class="col-lg-6 mb-4" id="member_{{ loop.index }}">
  28.                         {{ form_row(MembershipFormType) }}
  29.                         <button type="button" class="btn btn-danger delete-member" data-index="{{ loop.index }}">
  30.                             {{ 'Remove Member'|trans }}
  31.                         </button>
  32.                     </div>
  33.                 {% endfor %}
  34.             </div>
  35.             {{ form_end(form) }}
  36.         </div>
  37.     </div>
  38.     <script>
  40.         const sportChoices = {
  41.             'sailing': [
  42.                 'Zwaardboten',
  43.                 'Kitesurfen',
  44.                 'Yachting',
  45.             ],
  46.             'surfing': [
  47.                 'Windsurfen',
  48.                 'SUP',
  49.                 'Wingfoil',
  50.                 'Kitesurfen',
  51.             ]
  52.         }
  54.         function repopulateSportFields() {
  55.             const clubValue = $('#{{ form.club.vars.id }}').val();
  56.             const sportOptions = sportChoices[clubValue] || [];
  58.             // Iterate over all sport1 and sport2 selectors
  59.             $('.sport1_selector').each(function(index, sport1Selector) {
  60.                 const $sport1Selector = $(sport1Selector);
  61.                 const currentSport1Selection = $sport1Selector.val();
  63.                 // Reset the field options
  64.                 $sport1Selector.empty();
  66.                 // Appending the default options
  67.                 sportOptions.forEach((element) => {
  68.                     const optionValue = element.toLowerCase();
  69.                     $sport1Selector.append($('<option>', {value: optionValue}).text(element));
  70.                 });
  72.                 // Reapply the previous selection if it is still valid
  73.                 if (sportOptions.map(e => e.toLowerCase()).includes(currentSport1Selection)) {
  74.                     $sport1Selector.val(currentSport1Selection);
  75.                 }
  76.             });
  78.             $('.sport2_selector').each(function(index, sport2Selector) {
  79.                 const $sport2Selector = $(sport2Selector);
  80.                 const currentSport2Selection = $sport2Selector.val();
  82.                 // Reset the field options
  83.                 $sport2Selector.empty();
  85.                 // Setting the n.v.t. on the sport2 selector
  86.                 $sport2Selector.append($('<option>', {value: 'N.V.T'}).text('N.V.T.'));
  88.                 // Appending the default options
  89.                 sportOptions.forEach((element) => {
  90.                     const optionValue = element.toLowerCase();
  91.                     $sport2Selector.append($('<option>', {value: optionValue}).text(element));
  92.                 });
  94.                 // Reapply the previous selection if it is still valid
  95.                 if (sportOptions.map(e => e.toLowerCase()).includes(currentSport2Selection)) {
  96.                     $sport2Selector.val(currentSport2Selection);
  97.                 } else {
  98.                     $sport2Selector.val('N.V.T');
  99.                 }
  100.             });
  101.         }
  103.         // Function to enable/disable buttons based on form completion
  104.         function toggleButtons() {
  105.             const clubFilled = document.querySelector('#{{ form.club.vars.id }}').value.trim() !== '';
  106.             const membershipType = document.querySelector('#{{ form.membershipType.vars.id }}').value.trim();
  107.             const addParticipantButton = document.getElementById('add_member');
  108.             const submitButton = document.getElementById('submit_button');
  109.             const membersCount = document.querySelectorAll('#members .mb-4').length;
  111.             addParticipantButton.disabled = !(clubFilled && validateMembershipType(membershipType, membersCount));
  112.             submitButton.disabled = !(clubFilled && membershipType !== '' && membersCount >= 1);
  113.         }
  115.         // Validate membership type and number of members based on selected type
  116.         function validateMembershipType(type, count) {
  117.             const allowedMembers = {
  118.                 'jeugdlid': 1, // Limit for Jeugdlid - 22 j
  119.                 'volwassen': 1, // Limit for Volwassen
  120.                 'familie': 6, // Limit for Volwassen
  121.             };
  123.             if (type in allowedMembers) {
  124.                 if (count >= allowedMembers[type]) {
  125.                     return false;
  126.                 }
  127.             }
  128.             return true;
  129.         }
  131.         // Add Participant button functionality
  132.         document.getElementById('add_member').addEventListener('click', function () {
  133.             const collectionHolder = document.getElementById('members');
  134.             const prototype = collectionHolder.getAttribute('data-prototype');
  135.             const membershipType = document.querySelector('#{{ form.membershipType.vars.id }}').value.trim();
  136.             const membersCount = document.querySelectorAll('#members .mb-4').length;
  138.             if (!validateMembershipType(membershipType, membersCount)) {
  139.                 return;
  140.             }
  142.             const index = collectionHolder.children.length;
  143.             const newForm = prototype.replace(/__name__/g, index);
  144.             const tempDiv = document.createElement('div');
  145.             tempDiv.innerHTML = newForm.trim();
  146.             const element = tempDiv.firstChild;
  147.             element.classList.add('col-lg-3', 'mb-4');
  148.             collectionHolder.appendChild(element);
  149.             const deleteButton = document.createElement('button');
  150.             deleteButton.setAttribute('type', 'button');
  151.             deleteButton.setAttribute('class', 'btn btn-danger delete-member my-2');
  152.             deleteButton.setAttribute('data-index', index);
  153.             deleteButton.innerHTML = '<i class="fa-solid fa-trash text-white"></i>';
  154.             deleteButton.addEventListener('click', function () {
  155.                 if (confirm("{{ 'Are you sure you want to remove this member?'|trans }}")) {
  156.                     element.parentNode.removeChild(element);
  157.                     toggleButtons(); // Recheck form completion on member removal
  158.                 }
  159.             });
  160.             element.prepend(deleteButton);
  161.             toggleButtons(); // Recheck form completion on member addition
  164.             repopulateSportFields(); // Repopulate the sport fields based on the club entry
  166.         });
  168.         // Client-side form validation and button toggling
  169.         const form = document.getElementById('membership_form');
  170.         form.addEventListener('submit', function (event) {
  171.             if (!form.checkValidity()) {
  172.                 event.preventDefault();
  173.                 event.stopPropagation();
  174.             }
  175.             form.classList.add('was-validated');
  176.         });
  178.         // Control buttons activation based on input changes
  179.         document.querySelectorAll('input, select').forEach(input => {
  180.             input.addEventListener('input', toggleButtons);
  181.         });
  183.         toggleButtons(); // Initially check form completion on page load
  187.         $('#{{ form.club.vars.id }}').on('change', function() {
  188.             repopulateSportFields(); // Repopulate the sport fields
  189.         });
  191.     </script>
  193. {% endblock %}