templates/pages/aqua_form.html.twig line 1

Open in your IDE?
  1. {# @var pageinfo \App\Controller\PageInfo #}
  2. {# @var objectinfo \App\Controller\Objects\ObjectInfo #}
  3. {# @var settings \App\Controller\Objects\AquaSettings #}
  4. {% extends 'base.html.twig' %}
  5.  {% block theme %}
  6.      <link rel="stylesheet" href="/assets/css/style.light-blue-700.min.css">
  7.      <link rel="stylesheet" href="/assets/custom/css/media.min.{{ app.request.server.get('APP_PREVCACHE') }}.css">
  8.  {% endblock %}
  9. {% block body %}
  10.     <div class="ms-hero-page ms-hero-bg-info mb-6" style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('{{ objectinfo.background.small }}');">
  11.         {% if pageinfo.info != '' %}
  12.             <div class="container" style="position: relative; top: -80px">
  13.             <div id="id-header-news">
  14.                 <i class="fa fa-info-circle"></i>
  15.                 <div class="marquee">
  16.                     <div class="marquee-content">{{ pageinfo.info|raw }}</div>
  17.                 </div>
  18.             </div>
  19.             </div>
  20.         {% endif %}
  21.         <div class="text-center color-white mt-6 mb-6 index-1">
  22.             <h1>{{ objectinfo.title }}</h1>
  23.             <p class="lead lead-lg mb-4">{{ objectinfo.subtitle }}</p>
  24.             {% if objectinfo.buttons|length == 1 %}
  25.                 {% set button = objectinfo.buttons[0] %}
  26.                 {# @var button \App\Controller\Objects\Link #}
  27.                 <a href="{{ button.link }}" class="btn btn-object">{{ button.title }}</a>
  28.             {% elseif objectinfo.buttons|length > 0 %}
  29.                 {% set b = 1 %}
  30.                 {% for button in objectinfo.buttons %}
  31.                     {# @var button \App\Controller\Objects\Link #}
  32.                     <a href="{{ button.link }}" class="btn btn-object">{{ button.title }}</a>
  33.                     {% if b < objectinfo.buttons|length %}
  34.                         <img src="/assets/custom/img/kascv_logo_white_50_notext.png" class="btn-separator">
  35.                     {% endif %}
  36.                     {% set b = b + 1 %}
  37.                 {% endfor %}
  38.             {% endif %}
  39.         </div>
  40.     </div>
  42. <div class="container" style="margin-top: -110px">
  43.     <div class="row">
  44.         <div class="col-lg-9">
  46.             {% if objectinfo.alert != '' %}
  47.             <div class="alert alert-warning alert-light wow zoomInRight animation-delay-1" role="alert">
  48.                 <strong><i class="zmdi zmdi-alert-triangle"></i> Upozornění!</strong><br>{{ objectinfo.alert }}
  49.             </div>
  50.             {% endif %}
  52.             <article class="card card-primary wow zoomInRight animation-delay-1 mb-4" style="visibility: visible; animation-name: zoomInRight;">
  53.                 <div class="card-body overflow-hidden card-body-big" style="min-height: {% if objectinfo.alert != '' %}1330px{% else %}1460px{% endif %}">
  56.                     <form class="form-horizontal" autocomplete="off" name="aqua-reg-form">
  57.                         <fieldset>
  58.                             <legend>Osobní údaje</legend>
  60.                             <div class="form-group row justify-content-end">
  61.                                 <label for="id-date" class="col-lg-3 col-md-4 col-sm-5 control-label">Datum narození účastníka</label>
  62.                                 <div class="col-lg-5 col-lg-offset-1 col-md-4 col-sm-7">
  63.                                     <input name="date" id="id-date" type="text" class="form-control" placeholder="01.01.2016">
  64.                                 </div>
  65.                                 <div class="col-lg-3 col-md-4 col-sm-0"></div>
  66.                             </div>
  67.                             <div class="form-group row justify-content-end">
  68.                                 <label for="id-firstname" class="col-lg-3 col-md-4 col-sm-5 control-label">Jméno účastníka</label>
  69.                                 <div class="col-lg-5 col-lg-offset-1 col-md-4 col-sm-7">
  70.                                     <input name="firstname" id="id-firstname" type="text" class="form-control" placeholder="Jan">
  71.                                 </div>
  72.                                 <div class="col-lg-3 col-md-4 col-sm-0"></div>
  73.                             </div>
  74.                             <div class="form-group row justify-content-end">
  75.                                 <label for="id-lastname" class="col-lg-3 col-md-4 col-sm-5 control-label">Příjmení účastníka</label>
  76.                                 <div class="col-lg-5 col-lg-offset-1 col-md-4 col-sm-7">
  77.                                     <input name="lastname" id="id-lastname" type="text" class="form-control" placeholder="Novák">
  78.                                 </div>
  79.                                 <div class="col-lg-3 col-md-4 col-sm-0"></div>
  80.                             </div>
  82.                             <div class="form-group row justify-content-end">
  83.                                 <label for="id-email" class="col-lg-3 col-md-4 col-sm-5 control-label">E-mail zákonného zástupce</label>
  84.                                 <div class="col-lg-5 col-lg-offset-1 col-md-4 col-sm-7">
  85.                                     <input name="email" id="id-email" type="email" class="form-control" placeholder="josef.novak@email.cz">
  86.                                 </div>
  87.                                 <div class="col-lg-3 col-md-4 col-sm-0"></div>
  88.                             </div>
  90.                             <div class="form-group row justify-content-end">
  91.                                 <label for="id-phone" class="col-lg-3 col-md-4 col-sm-5 control-label">Telefon zákonného zástupce</label>
  92.                                 <div class="col-lg-5 col-lg-offset-1 col-md-4 col-sm-7">
  93.                                     <input name="phone" id="id-phone" type="text" class="form-control" placeholder="(+420) 777 666 555">
  94.                                 </div>
  95.                                 <div class="col-lg-3 col-md-4 col-sm-0"></div>
  96.                             </div>
  98.                             <div class="form-group row justify-content-end row">
  99.                                 <div class="col-lg-10 col-lg-offset-2">
  100.                                     <div class="togglebutton">
  101.                                         <label>
  102.                                             <input type="checkbox" name="browsave" id="id-browsave"> uložit vyplněné informace pro příště
  103.                                         </label>
  104.                                     </div>
  105.                                 </div>
  106.                             </div>
  108.                             <hr/>
  110.                             <legend>Kurz</legend>
  111.                             <div class="row">
  112.                                 <div class="col-lg-1 col-md-0"></div>
  113.                                     <div class="col-lg-10 col-md-12" id="id-courses">
  114.                                     </div>
  115.                             </div>
  116.                             <hr/>
  118.                             <legend>Den a čas</legend>
  119.                             <div class="row">
  120.                                 <div class="col-lg-1 col-md-0"></div>
  121.                                 <div class="col-lg-10 col-md-12" id="id-termines">
  122.                                 </div>
  123.                             </div>
  127.                             <hr/>
  129.                             <legend>Potvrzení</legend>
  131.                             <div class="form-group row justify-content-end">
  132.                                 <label for="id-note" class="col-lg-2 col-md-4 col-sm-5 control-label">Poznámka</label>
  133.                                 <div class="col-lg-7 col-lg-offset-1 col-md-4 col-sm-7">
  134.                                     <textarea name="note" class="form-control" rows="3" id="id-note"></textarea>
  135.                                     <span class="help-block">Zde můžete uvést Vaší poznámku k registraci</span>
  136.                                 </div>
  137.                                 <div class="col-lg-3 col-md-4 col-sm-0"></div>
  138.                             </div>
  140.                             <div class="form-group row justify-content-end">
  141.                                 <label for="id-note" class="col-lg-2 col-md-4 col-sm-5 control-label">Podmínky plavecké školy</label>
  142.                                 <div class="col-lg-8 col-lg-offset-1 col-md-4 col-sm-7">
  143.                                     {{ settings.formCond|raw }}
  144.                                 </div>
  145.                                 <div class="col-lg-2 col-md-4 col-sm-0"></div>
  146.                             </div>
  147.                             <div class="form-group row justify-content-end row">
  148.                                 <div class="col-lg-10 col-lg-offset-2">
  149.                                     <div class="togglebutton">
  150.                                         <label>
  151.                                             <input type="checkbox" name="cond" id="id-cond" value="1"> souhlasím s podmínkami
  152.                                         </label>
  153.                                     </div>
  154.                                     <hr/>
  155.                                 </div>
  156.                             </div>
  160.                             <div class="form-group row justify-content-end">
  161.                                 <label for="id-note" class="col-lg-2 col-md-4 col-sm-5 control-label">Zpracování údajů</label>
  162.                                 <div class="col-lg-8 col-lg-offset-1 col-md-4 col-sm-7">
  163.                                     <p>Odesláním přihlášky souhlasím se zpracováním osobních údajů.
  164.                                     <p>Při zpracovávání osobních údajů se řídíme právními předpisy, zejména zákonem č. 101/2000 Sb., o ochraně osobních údajů a obecným nařízením o ochraně osobních údajů (GDPR).</p>
  165.                                     <p>Zpracování osobních údajů probíhá pouze v rozsahu daným konkrétním účelem zpracování.</p>
  166.                                 </div>
  167.                                 <div class="col-lg-2 col-md-4 col-sm-0"></div>
  168.                             </div>
  169.                             <div class="form-group row justify-content-end row">
  170.                                 <div class="col-lg-10 col-lg-offset-2">
  171.                                     <div class="togglebutton">
  172.                                         <label>
  173.                                             <input type="checkbox" name="gdpr" id="id-gdpr" value="1"> souhlasím se zpracováním
  174.                                         </label>
  175.                                     </div>
  176.                                 </div>
  177.                             </div>
  179.                             <hr/>
  181.                             <div class="form-group row justify-content-end">
  182.                                 <div class="col-lg-10">
  183.                                     <button type="button" class="btn btn-raised btn-primary" id="id-submit">Odeslat</button>
  184.                                 </div>
  185.                             </div>
  186.                         </fieldset>
  187.                     </form>
  190.                 </div>
  191.             </article>
  193.         </div>
  195.         {% include 'partials/sidecol.html.twig' %}
  197.     </div>
  198. </div>
  200. <div class="g-recaptcha"
  201.      data-sitekey="{{ g_site_key }}"
  202.      data-callback="onCaptchaValidatePost"
  203.      data-size="invisible" style="position: absolute; right: 0px; bottom: -10px">
  204. </div>
  206. {% endblock %}
  208. {% block map %}
  209.     <iframe style="width: 100%; height: 300px" id="id-gmap-embed" src="{{ objectinfo.mapLink }}"></iframe>
  210. {% endblock %}
  212. {% block address %}
  213.     <h3 class="ms-footbar-title mb-2 ms-footer-text">{{ objectinfo.title }}</h3>
  214.     <div class="ms-footbar-title">
  215.         <img src="/assets/custom/img/kascv_logo_white_50_notext.png">
  216.         <h3 class="no-m ms-site-title"><span>KULTURA</span>A<span>SPORT</span>CHOMUTOV</h3>
  217.     </div>
  218.     <address class="no-mb">
  219.         <p><i class="zmdi zmdi-pin mr-1"></i> {{ objectinfo.addressStreet }}</p>
  220.         <p><i class="zmdi zmdi-map mr-1"></i> {{ objectinfo.addressCity }}, {{ objectinfo.addressPostal }}</p>
  222.         {% if objectinfo.contactPhone != '' %}
  223.         <p><i class="zmdi zmdi-email mr-1"></i> <a href="mailto:{{ objectinfo.contactPhone }}">{{ objectinfo.contactPhone }}</a></p>
  224.         {% endif %}
  226.         {% if objectinfo.contactMail != '' %}
  227.         <p><i class="fa fa-fax mr-1"></i>{{ objectinfo.contactMail }}</p>
  228.         {% endif %}
  229.         <p><i class="color-danger-light zmdi zmdi-phone mr-1"></i> <a href="/kontakty">Kontakty</a></p>
  230.     </address>
  231. {% endblock %}
  233. {% block javascripts %}
  234.     {{ parent() }}
  235.     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  236.     <script src="/assets/js/component-carousels-1.js"></script>
  237.     <script type="text/javascript">
  238.         let age = 0;
  239.         let course = 0;
  240.         $(function() {
  241.             LoadCourses();
  242.             LoadTermines();
  243.             LoadPersonalInfo();
  244.             $( "#id-date" ).blur(function() {
  245.                 ValidateDate();
  246.             });
  247.             $('#id-browsave').click(function() {
  248.                 SavePersonalInfo();
  249.             });
  250.             ValidateDate();
  251.             $('#id-submit').click(function() {
  252.                 Submit();
  253.             });
  254.         });
  256.         function LoadCourses() {
  257.             $( "#id-courses" ).load( "/aquasvet/prihlaska-na-kurz/kurzy-"+age, function() {
  258.                 $('#id-table-courses-radios tr:not(.disabled)').click(function() {
  259.                     $(this).find('input:radio').prop('checked', true);
  260.                     course = $(this).find('input:radio').val();
  261.                     LoadTermines();
  262.                 });
  263.             });
  264.         }
  266.         function LoadTermines() {
  267.             $( "#id-termines" ).load( "/aquasvet/prihlaska-na-kurz/terminy-"+course, function() {
  268.                 $('#id-table-less tr').click(function() {
  269.                     $(".subst-check").each(function() {
  270.                         $(this).prop('checked', false);
  271.                     });
  272.                     $(".less-check").each(function() {
  273.                         $(this).prop('checked', false);
  274.                     });
  275.                     $(this).find('input:radio').prop('checked', true);
  276.                 });
  277.             });
  278.         }
  280.         function onCaptchaValidatePost() {
  281.             Submit();
  282.         }
  284.         function ValidateDate() {
  285.             let date = $('#id-date').val();
  286.             if (date=='') {
  287.                 toastr.error('zadejte datum narození');
  288.             }
  289.             else if (!isValidDateCZ(date)) {
  290.                 toastr.error('špatný formát data narození');
  291.             }
  292.             else {
  293.                 let oData = new FormData(document.forms.namedItem('aqua-reg-form'));
  294.                 let oReq = new XMLHttpRequest();
  295.                 oReq.open("POST", '/aquasvet/prihlaska-na-kurz/datum', true);
  296.                 oReq.onload = function(oEvent) {
  297.                     try {
  298.                         let json = JSON.parse(trim(oEvent.target.responseText));
  300.                         if (json.message=='OK') {
  301.                             /*CheckRadioAge(json.age);*/
  302.                             /*toastr.info('podle věku '+json.age+' zvolte kurz');*/
  303.                             age = json.age;
  304.                             LoadCourses();
  305.                         }
  306.                         else {
  307.                             age = 0;
  308.                             LoadCourses();
  309.                             toastr.error(json.message);
  310.                             $('#'+json.focus).select();
  311.                         }
  312.                     }
  313.                     catch(e) {
  314.                         console.log(trim(oEvent.target.responseText));
  315.                         console.log(e);
  316.                     }
  317.                 };
  318.                 oReq.send(oData);
  319.             }
  320.         }
  322.         function Submit() {
  324.             let date = $('#id-date').val();
  325.             if (date=='') {
  326.                 toastr.error('zadejte datum narození');
  327.                 $('#id-date').focus();
  328.             }
  329.             else {
  331.                 $('#id-submit').attr('disabled', true);
  332.                 $('#id-submit').addClass('btn-disabled');
  333.                 $('#id-submit').html('Odesílám');
  335.                 let oData = new FormData(document.forms.namedItem('aqua-reg-form'));
  336.                 oData.set('g-recaptcha-response', grecaptcha.getResponse());
  337.                 let oReq = new XMLHttpRequest();
  338.                 oReq.open("POST", '/aquasvet/prihlaska-na-kurz/odeslani', true);
  339.                 oReq.onload = function(oEvent) {
  340.                     try {
  341.                         let json = JSON.parse(trim(oEvent.target.responseText));
  342.                         if (json.error=='0') {
  343.                             /*CheckRadioAge(json.age);*/
  344.                             /*toastr.info('podle věku '+json.age+' zvolte kurz');*/
  345.                             toastr.success(json.message);
  346.                             setTimeout(function(){ goTo('/aquasvet/kurzy-plavani') }, 2000);
  347.                         }
  348.                         else {
  349.                             toastr.error(json.message);
  350.                         }
  352.                         if (json.focus!='') {
  353.                             $([document.documentElement, document.body]).animate({
  354.                                 scrollTop: $('#'+json.focus).offset().top - 100
  355.                             }, 500);
  356.                             setTimeout(function(){
  357.                                 $('#'+json.focus).select();
  358.                             }, 1000);
  359.                         }
  360.                         if (json.reload!='') {
  361.                             if (json.reload == 'termines') {
  362.                                 LoadTermines();
  363.                             }
  364.                         }
  365.                     }
  366.                     catch(e) {
  367.                         console.log(trim(oEvent.target.responseText));
  368.                         console.log(e);
  369.                         toastr.error('chyba zpracování');
  370.                     }
  372.                     $('#id-submit').attr('disabled', false);
  373.                     $('#id-submit').removeClass('btn-disabled');
  374.                     $('#id-submit').html('Odeslat');
  376.                 };
  377.                 if (grecaptcha.getResponse()=='') {
  378.                     grecaptcha.execute();
  379.                 }
  380.                 else {
  381.                     oReq.send(oData);
  382.                 }
  383.             }
  384.         }
  386.         function SavePersonalInfo() {
  388.             if ($('#id-browsave').is(':checked')) {
  389.                 localStorage.setItem("date", $('#id-date').val());
  390.                 localStorage.setItem("firstname", $('#id-firstname').val());
  391.                 localStorage.setItem("lastname", $('#id-lastname').val());
  392.                 localStorage.setItem("email", $('#id-email').val());
  393.                 localStorage.setItem("phone", $('#id-phone').val());
  394.             }
  395.             else {
  396.                 localStorage.setItem("date", "");
  397.                 localStorage.setItem("firstname", "");
  398.                 localStorage.setItem("lastname", "");
  399.                 localStorage.setItem("email", "");
  400.                 localStorage.setItem("phone", "");
  401.             }
  402.         }
  404.         function LoadPersonalInfo() {
  405.             let date         = localStorage.getItem("date");
  406.             let firstname     = localStorage.getItem("firstname");
  407.             let lastname     = localStorage.getItem("lastname");
  408.             let email         = localStorage.getItem("email");
  409.             let phone         = localStorage.getItem("phone");
  410.             if (date=='' || date==null || date=='undefined') {
  411.                 $('#id-browsave').attr('checked', false);
  412.             }
  413.             else {
  414.                 $('#id-browsave').attr('checked', true);
  415.             }
  416.             if ($('#id-date').val()=='') $('#id-date').val(date);
  417.             if ($('#id-firstname').val()=='') $('#id-firstname').val(firstname);
  418.             if ($('#id-lastname').val()=='') $('#id-lastname').val(lastname);
  419.             if ($('#id-email').val()=='') $('#id-email').val(email);
  420.             if ($('#id-phone').val()=='') $('#id-phone').val(phone);
  422.             return false;
  423.         }
  425.         function isDate(value) {
  426.             if (value == "") return false;
  427.             let dtArr = value.split(".");
  428.             if (dtArr.length != 3) return false;
  429.             let dx = new Date(dtArr[2], dtArr[1] - 1, dtArr[0]);
  430.             if (dx.getDate() != dtArr[0]) return false;
  431.             if (dx.getMonth() + 1 != dtArr[1]) return false;
  432.             return true;
  433.         }
  434.     </script>
  435. {% endblock %}