templates/module/FormTermin/__form-termin.html.twig line 1

Open in your IDE?
  1. {% block content %}
  2. {% if editmode %}
  3.     {{ include('includes/backend-kopf.html.twig') }}
  5.     {% set tabContentArray = {1: 'Data'} %}
  6.     {% set tab = 1 %}
  8.     <style>
  9.         section.tabContent {
  10.             display: block;
  11.         }
  12.     </style>
  14.     <div id="content">
  15.         <section class="tabContent">
  16.             <p class="hl">Email Betreff:</p>
  17.             <span class="parentbox">
  18.             {{ pimcore_textarea("subject", {
  19.                 "nl2br": true,
  20.                 "width": 735,
  21.             }) }}
  22.             </span>
  23.         </section>
  25.         <section class="tabContent">
  26.             <p class="hl">Titel:</p>
  27.             <span class="parentbox">
  28.             {{ pimcore_textarea("title", {
  29.                 "nl2br": true,
  30.                 "width": 735,
  31.             }) }}
  32.             </span>
  33.         </section>
  35.         <section class="tabContent">
  36.             <p class="hl">Beschreibung:</p>
  37.             <span class="parentbox">
  38.             {{ pimcore_textarea("description", {
  39.                 "nl2br": true,
  40.                 "width": 735,
  41.             }) }}
  42.             </span>
  43.         </section>
  45.         {# <section class="tabContent">
  46.             <p class="hl">Bild:</p>
  47.             <span class="parentbox">
  48.             {{ pimcore_image("image", {
  49.                 "width": 200,
  50.                 "height": 130,
  51.                 "thumbnail": "img-default-edm"
  52.             }) }}
  53.             </span>
  54.         </section> #}
  56.         <section class="tabContent">
  57.             <p class="hl">Saisonsende:</p>
  58.             <span class="parentbox">
  59.             {{ pimcore_date("maxDate", {
  60.                 "format": "d.m.Y",
  61.                 "outputIsoFormat": "DD.MM.YYYY"
  62.             }) }}
  63.             </span>
  64.         </section>
  66.         <section class="tabContent">
  67.             <p class="hl">Erster Termin (Uhrzeit):</p>
  68.             <span class="parentbox">
  69.             {{ pimcore_textarea("minHours", {
  70.                 "nl2br": true,
  71.                 "width": 735,
  72.                 "placeholder": "09:00"
  73.             }) }}
  74.             </span>
  75.         </section>
  77.         <section class="tabContent">
  78.             <p class="hl">Letzter Termin (Uhrzeit): </p>
  79.             <span class="parentbox">
  80.             {{ pimcore_textarea("maxHours", {
  81.                 "nl2br": true,
  82.                 "width": 735,
  83.                 "placeholder": "18:00"
  84.             }) }}
  85.             </span>
  86.         </section>
  88.         <section class="tabContent">
  89.             <p class="hl">Zeitintervall:</p>
  90.             <span class="parentbox">
  91.             {{ pimcore_select("timeIntervals", {
  92.                 "store": [
  93.                     ["15", "15min"],
  94.                     ["30", "30min"],
  95.                     ["60", "60min"]
  96.                 ],
  97.             }) }}
  98.             </span>
  99.         </section>
  101.         <section class="tabContent">
  102.             <p class="hl">Service wählen (Zwischen den Services muss ein ; stehen):</p>
  103.             <span class="parentbox">
  104.             {{ pimcore_textarea("services", {
  105.                 "nl2br": true,
  106.                 "width": 735,
  107.                 "placeholder": "Skischuhfitting ; Shopping Beratung"
  108.             }) }}
  109.             </span>
  110.         </section>
  112.         <section class="tabContent">
  113.             <p class="hl">Filiale (Zwischen den Standorten muss ein ; stehen):</p>
  114.             <span class="parentbox">
  115.             {{ pimcore_textarea("locations", {
  116.                 "nl2br": true,
  117.                 "width": 735,
  118.                 "placeholder": "Zentrum ; Giggijochbahn"
  119.             }) }}
  120.             </span>
  121.         </section>
  122.     </div>
  123.     {{ include('includes/backend-fuss.html.twig') }}
  124. {% else %}
  125.     <style>
  126.         .ski-boot-fitting {
  127.             padding-bottom: 2rem;
  128.             padding-top: 2rem;
  129.         }
  130.         .ski-boot-fitting {
  131.             background-color: #164194;
  132.         }
  133.         [data-theme="shops"] .ski-boot-fitting {
  134.             background-color: #e3e3e0;
  135.         }
  136.         [data-theme="rent"] .ski-boot-fitting {
  137.             background-color: #164194;
  138.         }
  139.         [data-theme="homes"] .ski-boot-fitting {
  140.             background-color: #bc9f60;
  141.         }
  143.         .form-termin-heading,
  144.         .form-termin-description {
  145.             color: #fff;
  146.         }
  147.         [data-theme="shops"] .form-termin-heading,
  148.         [data-theme="shops"] .form-termin-description {
  149.             color: #e50000;
  150.         }
  151.         [data-theme="rent"] .form-termin-heading,
  152.         [data-theme="rent"] .form-termin-description {
  153.             color: #fff;
  154.         }
  155.         [data-theme="homes"] .form-termin-heading,
  156.         [data-theme="homes"] .form-termin-description {
  157.             color: #000;
  158.         }
  160.         .form-termin-heading {
  161.             margin: 0;
  162.         }
  164.         .form-termin-form-container {
  165.             display: flex;
  166.             flex-wrap: wrap;
  167.             column-gap: 10px;
  168.             justify-content: space-between;
  169.             gap: 10px;
  170.         }
  172.         .form-termin-input-container {
  173.             width: 100%;
  174.         }
  176.         .form-termin-input-container input,
  177.         .form-termin-input-container select,
  178.         .form-termin-input-container button {
  179.             width: 100%;
  180.         }
  182.         .form-termin-input-container input,
  183.         .form-termin-input-container select,
  184.         .form-termin-input-container button {
  185.             background-color: rgba(255, 255, 255, 0.1);
  186.             color: #ffffff;
  187.             border: none;
  188.             box-shadow: none;
  189.             padding: 0.375rem 0.75rem;
  190.             font-size: 1rem;
  191.             line-height: 1.5;
  192.             border-radius: 5px;
  193.         }
  195.         [data-theme="rent"] .form-termin-input-container input,
  196.         [data-theme="rent"] .form-termin-input-container select,
  197.         [data-theme="rent"] .form-termin-input-container button {
  198.             background-color: rgba(255, 255, 255, 0.1);
  199.             color: #ffffff;
  200.         }
  202.         .form-termin-input-container input,
  203.         .form-termin-input-container select {
  204.             color: #000;
  205.             background-color: #fff;
  206.         }
  208.         /* Change placeholder color for all browsers */
  209.         .form-termin-input-container input::placeholder {
  210.             color: #000; /* Replace with your desired color */
  211.             opacity: 1; /* Ensures the color is fully opaque */
  212.         }
  214.         /* For specific browsers */
  215.         .form-termin-input-container input::-webkit-input-placeholder {
  216.             color: #000; /* Chrome, Safari, and Opera */
  217.         }
  219.         .form-termin-input-container input:-ms-input-placeholder {
  220.             color: #000; /* Internet Explorer */
  221.         }
  223.         .form-termin-input-container input::-ms-input-placeholder {
  224.             color: #000; /* Microsoft Edge */
  225.         }
  227.         .form-termin-input-container button {
  228.             cursor: pointer;
  229.         }
  231.         [data-theme="shops"] .form-termin-input-container input,
  232.         [data-theme="shops"] .form-termin-input-container select {
  233.             color: #fff;
  234.             background-color: #e50000;
  235.         }
  237.         /* Change placeholder color for all browsers */
  238.         [data-theme="shops"] .form-termin-input-container input::placeholder {
  239.             color: #fff; /* Replace with your desired color */
  240.             opacity: 1; /* Ensures the color is fully opaque */
  241.         }
  243.         /* For specific browsers */
  244.         [data-theme="shops"] .form-termin-input-container input::-webkit-input-placeholder {
  245.             color: #fff; /* Chrome, Safari, and Opera */
  246.         }
  248.         [data-theme="shops"] .form-termin-input-container input:-ms-input-placeholder {
  249.             color: #fff; /* Internet Explorer */
  250.         }
  252.         [data-theme="shops"] .form-termin-input-container input::-ms-input-placeholder {
  253.             color: #fff; /* Microsoft Edge */
  254.         }
  256.         [data-theme="shops"] .form-termin-input-container button {
  257.             cursor: pointer;
  258.         }
  260.         /* Change placeholder color for all browsers */
  261.         [data-theme="rent"] .form-termin-input-container input::placeholder {
  262.             color: #fff; /* Replace with your desired color */
  263.             opacity: 1; /* Ensures the color is fully opaque */
  264.         }
  266.         /* For specific browsers */
  267.         [data-theme="rent"] .form-termin-input-container input::-webkit-input-placeholder {
  268.             color: #fff; /* Chrome, Safari, and Opera */
  269.         }
  271.         [data-theme="rent"] .form-termin-input-container input:-ms-input-placeholder {
  272.             color: #fff; /* Internet Explorer */
  273.         }
  275.         [data-theme="rent"] .form-termin-input-container input::-ms-input-placeholder {
  276.             color: #fff; /* Microsoft Edge */
  277.         }
  279.         [data-theme="rent"] .form-termin-input-container button {
  280.             cursor: pointer;
  281.         }
  283.         [data-theme="homes"] .form-termin-input-container input,
  284.         [data-theme="homes"] .form-termin-input-container select {
  285.             color: #000;
  286.         }
  287.         
  288.         /* Change placeholder color for all browsers */
  289.         [data-theme="homes"] .form-termin-input-container input::placeholder {
  290.             color: #fff; /* Replace with your desired color */
  291.             opacity: 1; /* Ensures the color is fully opaque */
  292.         }
  294.         /* For specific browsers */
  295.         [data-theme="homes"] .form-termin-input-container input::-webkit-input-placeholder {
  296.             color: #000; /* Chrome, Safari, and Opera */
  297.         }
  299.         [data-theme="homes"] .form-termin-input-container input:-ms-input-placeholder {
  300.             color: #000; /* Internet Explorer */
  301.         }
  303.         [data-theme="homes"] .form-termin-input-container input::-ms-input-placeholder {
  304.             color: #000; /* Microsoft Edge */
  305.         }
  307.         [data-theme="homes"] .form-termin-input-container button {
  308.             cursor: pointer;
  309.         }
  311.         .form-termin-input-container button {
  312.             background-color: #fff;
  313.             color: #000;
  314.         }
  315.         [data-theme="shops"] .form-termin-input-container button {
  316.             background-color: #e50000;
  317.             color: #fff;
  318.         }
  319.         [data-theme="rent"] .form-termin-input-container button {
  320.             background-color: rgba(255, 255, 255, 1);
  321.             color: #164194;
  322.         }
  323.         [data-theme="homes"] .form-termin-input-container button {
  324.             background-color: #000;
  325.             color: #fff;
  326.         }
  328.         @media only screen and (min-width: 740px) {
  329.             .form-termin-input-container {
  330.                 width: 49%;
  331.             }
  332.         }
  334.         @media only screen and (min-width: 940px) {
  335.             .form-termin-input-container {
  336.                 width: 32%;
  337.             }
  338.         }
  340.         .form-termin-input-container:has(button) {
  341.             width: 100%;
  342.         }
  344.         .form-termin-input-container .invalid-feedback,
  345.         .form-termin-input-container .form-termin-feedback  {
  346.             margin-top: 4px;
  347.             color: #fff;
  348.         }
  350.         .form-termin-input-container .form-termin-feedback {
  351.             margin-top: 10px;
  352.             text-align: center;
  353.             font-weight: bold;
  354.             font-size: 20px;
  355.         }
  357.         [data-theme="shops"] .form-termin-input-container .invalid-feedback,
  358.         [data-theme="shops"] .form-termin-input-container .form-termin-feedback {
  359.             color: #e50000;
  360.         }
  361.         [data-theme="rent"] .form-termin-input-container .invalid-feedback,
  362.         [data-theme="rent"] .form-termin-input-container .form-termin-feedback {
  363.             color: #fff;
  364.         }
  365.         [data-theme="homes"] .form-termin-input-container .invalid-feedback,
  366.         [data-theme="homes"] .form-termin-input-container .form-termin-feedback {
  367.             color: #000;
  368.         }
  369.     </style>
  371.     <link rel="stylesheet" type="text/css" href="/bundles/app/static/frontend/css/pikaday.css" />
  373.     {% set lang = document.getProperty('language') %}
  375.     <div class="ski-boot-fitting">
  376.         <div class="constrainer-maxsize edgepadding">
  377.             <div class="row">
  378.                 {# {% set image_src = pimcore_image("icon_teaser_1").getSrc() %}
  379.                 {% if image_src %}
  380.                 <div class="image-col col-12"><img alt="Sporthaus St.Anton, Dorfstrasse 1" src="{{ image_src }}"></div>
  381.                 {% endif %} #}
  382.                 <div class="text-col col-12">
  383.                     <h2 class="form-termin-heading">{{ pimcore_textarea('title') }}</h2>
  384.                     <p class="form-termin-description">{{ pimcore_textarea('description') }}</p>
  385.                     <form id="form-{{ document.id }}" action="{{ path('handle_form_submission') }}" method="POST">
  386.                         <input type="hidden" name="subject" id="id_subject" value="{{ pimcore_textarea("subject") }}" />
  387.                         <div class="form-termin-form-container">
  388.                             <div class="form-termin-input-container">
  389.                                 <input class="form-control" id="id_name-{{ document.id }}" name="name" placeholder="Name" required="true" type="text">
  390.                                 <div class="invalid-feedback"></div>
  391.                             </div>
  392.                             <div class="form-termin-input-container">
  393.                                 <input class="form-control" id="id_email-{{ document.id }}" name="email" placeholder="{% if lang == 'de' %}E-Mail{% else %}Email{% endif %}" required="true" type="email">
  394.                                 <div class="invalid-feedback"></div>
  395.                             </div>
  396.                             <div class="form-termin-input-container">
  397.                                 <select class="form-control" id="id_service-{{ document.id }}" name="service" required="true">
  398.                                     <option selected="true" disabled="disabled" value="">{% if lang == 'de' %}Service wählen{% else %}Choose service{% endif %}</option>
  399.                                     {% set servicesList = pimcore_textarea('services') | split(';') %}
  400.                                     {% for service in servicesList %}
  401.                                         <option value="{{ service | trim }}">{{ service | trim }}</option>
  402.                                     {% endfor %}
  403.                                 </select>
  404.                                 <div class="invalid-feedback"></div>
  405.                             </div>
  406.                             <div class="form-termin-input-container">
  407.                                 <select class="form-control" id="id_location-{{ document.id }}" name="location" required="true">
  408.                                     <option selected="true" disabled="disabled" value="">{% if lang == 'de' %}Filiale{% else %}Location{% endif %}</option>
  409.                                     {% set locationList = pimcore_textarea('locations') | split(';') %}
  410.                                     {% for location in locationList %}
  411.                                         <option value="{{ location | trim }}">{{ location | trim }}</option>
  412.                                     {% endfor %}
  413.                                 </select>
  414.                                 <div class="invalid-feedback"></div>
  415.                             </div>
  416.                             <div class="form-termin-input-container">
  417.                                 <input class="form-control flatpickr-input" id="id_date-{{ document.id }}" name="date" placeholder="{% if lang == 'de' %}Datum{% else %}Date{% endif %}" required="true" type="text" readonly="readonly">
  418.                                 <div class="invalid-feedback"></div>
  419.                             </div>
  420.                             <div class="form-termin-input-container">
  421.                                 <select class="form-control" id="id_time-{{ document.id }}" name="time" required="true">
  422.                                     <option selected="true" disabled="disabled" value="">{% if lang == 'de' %}Zeit{% else %}Time{% endif %}</option>
  423.                                     {% set minHours = pimcore_textarea("minHours") %}
  424.                                     {% set maxHours = pimcore_textarea("maxHours") %}
  425.                                     {% set selectedInterval = pimcore_select("timeIntervals").getData() %}
  427.                                     {% set minTimeParts = minHours|split(':') %}
  428.                                     {% set maxTimeParts = maxHours|split(':') %}
  429.                                     {% set interval = selectedInterval|number_format %}
  431.                                     {% set startHour = minTimeParts[0]|number_format %}
  432.                                     {% set startMinute = minTimeParts[1]|number_format %}
  433.                                     {% set endHour = maxTimeParts[0]|number_format %}
  434.                                     {% set endMinute = maxTimeParts[1]|number_format %}
  436.                                     {% set currentHour = startHour %}
  437.                                     {% set currentMinute = startMinute %}
  439.                                     {% set totalMinutes = ((endHour * 60) + endMinute) - ((startHour * 60) + startMinute) %}
  440.                                     {% set steps = totalMinutes // interval %}
  441.                                     {% set currentMinute = startMinute %}
  443.                                     {% for i in 0..steps %}
  444.                                         {% set currentTimeInMinutes = (startHour * 60) + startMinute + (i * interval) %}
  445.                                         {% set currentHour = currentTimeInMinutes // 60 %}
  446.                                         {% set currentMinute = currentTimeInMinutes % 60 %}
  447.                                         {% set formattedTime = (currentHour < 10 ? '0' ~ currentHour : currentHour) ~ ':' ~ (currentMinute < 10 ? '0' ~ currentMinute : currentMinute) %}
  448.                                         <option value="{{ formattedTime }}">{{ formattedTime }}</option>
  449.                                     {% endfor %}
  450.                                 </select>
  451.                                 <div class="invalid-feedback"></div>
  452.                             </div>
  453.                             <div class="form-termin-input-container">
  454.                                 <button id="form-termin-button-{{ document.id }}" type="submit">{% if lang == 'de' %}Termin Buchen{% else %}Book{% endif %}</button>
  455.                                 <div class="form-termin-feedback" id="form-termin-feedback-{{ document.id }}"></div>
  456.                             </div>
  457.                         </div>
  458.                     </form>
  459.                 </div>
  460.             </div>
  461.         </div>
  462.     </div>
  464.     <script src="/bundles/app/static/frontend/js/pikaday.js"></script>
  466.     <script>
  467.         var picker{{ document.id }} = new Pikaday({
  468.             field: document.getElementById('id_date-{{ document.id }}'),
  469.             minDate: new Date(),
  470.             maxDate: new Date('{{ pimcore_date("maxDate") }}'),
  471.             theme: "form-termin",
  472.                 toString: function(date) {
  473.                 var parts = [('0'+date.getDate()).slice(-2), ('0'+(date.getMonth()+1)).slice(-2), date.getFullYear()];
  474.                 return parts.join(".");
  475.             },
  476.             {% if lang == 'de' %}
  477.             i18n: {
  478.                 previousMonth : 'Vorheriger Monat',
  479.                 nextMonth     : 'Nächster Monat',
  480.                 months        : ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
  481.                 weekdays      : ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
  482.                 weekdaysShort : ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']
  483.             }
  484.             {% endif %}
  485.         });
  487.         document.getElementById('form-{{ document.id }}').addEventListener('submit', async function (e) {
  488.             e.preventDefault();
  490.             const form = this;
  491.             const formBtn = document.getElementById('form-termin-button-{{ document.id }}');
  492.             const nameField = document.getElementById('id_name-{{ document.id }}');
  493.             const emailField = document.getElementById('id_email-{{ document.id }}');
  494.             const serviceField = document.getElementById('id_service-{{ document.id }}');
  495.             const locationField = document.getElementById('id_location-{{ document.id }}');
  496.             const dateField = document.getElementById('id_date-{{ document.id }}');
  497.             const timeField = document.getElementById('id_time-{{ document.id }}');
  498.             const formFeedback = document.getElementById('form-termin-feedback-{{ document.id }}');
  500.             // Clear previous validation messages
  501.             const inputs = form.querySelectorAll('.invalid-feedback');
  502.             inputs.forEach(feedback => feedback.textContent = '');
  504.             let isValid = true;
  506.             // Validate Name
  507.             if (!nameField.value.trim()) {
  508.                 isValid = false;
  509.                 nameField.nextElementSibling.textContent = '{% if lang == "de" %}Bitte geben Sie Ihren Namen ein.{% else %}Please enter your name.{% endif %}';
  510.             }
  512.             // Validate Email
  513.             const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  514.             if (!emailField.value.trim() || !emailRegex.test(emailField.value)) {
  515.                 isValid = false;
  516.                 emailField.nextElementSibling.textContent = '{% if lang == "de" %}Bitte geben Sie eine gültige E-Mail-Adresse ein.{% else %}Please enter a valid email address.{% endif %}';
  517.             }
  519.             // Validate Service
  520.             if (!serviceField.value) {
  521.                 isValid = false;
  522.                 serviceField.nextElementSibling.textContent = '{% if lang == "de" %}Bitte wählen Sie einen Service.{% else %}Please choose a service.{% endif %}';
  523.             }
  525.             // Validate Location
  526.             if (!locationField.value) {
  527.                 isValid = false;
  528.                 locationField.nextElementSibling.textContent = '{% if lang == "de" %}Bitte wählen Sie einen Standort.{% else %}Please choose a location.{% endif %}';
  529.             }
  531.             // Validate Date
  532.             if (!dateField.value.trim()) {
  533.                 isValid = false;
  534.                 dateField.nextElementSibling.textContent = '{% if lang == "de" %}Bitte wählen Sie ein Datum.{% else %}Please select a date.{% endif %}';
  535.             }
  537.             // Validate Time
  538.             if (!timeField.value) {
  539.                 isValid = false;
  540.                 timeField.nextElementSibling.textContent = '{% if lang == "de" %}Bitte wählen Sie eine Zeit.{% else %}Please select a time.{% endif %}';
  541.             }
  543.             // If validation fails, do not proceed
  544.             if (!isValid) {
  545.                 return;
  546.             }
  548.             // Disable the button
  549.             formBtn.disabled = true;
  551.             try {
  552.                 // Prepare the form data
  553.                 const formData = new FormData(form);
  554.                 const response = await fetch(form.action, {
  555.                     method: form.method,
  556.                     body: formData,
  557.                 });
  559.                 const result = await response.json();
  561.                 if (result.success) {
  562.                     formFeedback.textContent = '{% if lang == "de" %}Termin erfolgreich gebucht.{% else %}Booking successfully completed.{% endif %}';
  563.                 } else {
  564.                     formFeedback.textContent = '{% if lang == "de" %}Etwas ist schief gelaufen.{% else %}Something went wrong.{% endif %}';
  565.                     if(result.error) {
  566.                         console.error("Mailer Error: ", result.error);
  567.                     }
  568.                 }
  569.             } catch (error) {
  570.                 formFeedback.textContent = '{% if lang == "de" %}Etwas ist schief gelaufen.{% else %}Something went wrong.{% endif %}';
  571.                 console.error('{% if lang == "de" %}Buchung fehlgeschlagen, Fehler:{% else %}Booking failed, error:{% endif %}', error);
  572.             }
  574.             // Re-enable the button
  575.             formBtn.disabled = false;
  576.         });
  577.     </script>
  578. {% endif %}
  579. {% endblock %}