templates/frontend/static/student_parent.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}
  4.     {{ 'student_and_parent'|trans }}
  6. {% endblock %}
  8. {% block css %}
  9.     <style>
  11.         .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused){
  12.             border-color: transparent!important;
  13.         }
  14.         .ck.ck-editor__main>.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused{
  15.             border: transparent!important;
  16.         }
  18.        /* #watermark {
  19.             height: 400px;
  20.             width: 100%;
  21.             padding-top: 30px;
  22.             overflow: hidden;
  23.             background-color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %}30;
  24.         }*/
  26.         .team3 {
  28.             font-size: 16px;
  29.         }
  31.         .team3 h1,
  32.         .team3 h2,
  33.         .team3 h3,
  34.         .team3 h4,
  35.         .team3 h5,
  36.         .team3 h6 {
  37.             color: #3e4555;
  38.         }
  40.         .team3 .font-weight-medium {
  41.             font-weight: 500;
  42.         }
  44.         .team3 .bg-light {
  45.             background-color: #f4f8fa !important;
  46.         }
  48.         .team3 .subtitle {
  49.             color: #8d97ad;
  50.             line-height: 24px;
  51.             font-size: 13px;
  52.         }
  54.         .team3 ul {
  55.             margin-top: 30px;
  56.         }
  58.         .team3 h5 {
  59.             line-height: 22px;
  60.             font-size: 18px;
  61.         }
  63.         .team3 ul li a {
  64.             color: #8d97ad;
  65.             padding-right: 15px;
  66.             -webkit-transition: 0.1s ease-in;
  67.             -o-transition: 0.1s ease-in;
  68.             transition: 0.1s ease-in;
  69.         }
  71.         .team3 ul li a:hover {
  72.             -webkit-transform: translate3d(0px, -5px, 0px);
  73.             transform: translate3d(0px, -5px, 0px);
  74.             color: #316ce8;
  75.         }
  77.         .team3 .title {
  78.             margin: 30px 0 0 0;
  79.         }
  81.         .team3 .subtitle {
  82.             margin: 0 0 0px 0;
  83.             font-size: 13px;
  84.         }
  86.     </style>
  87.     <style>
  88.         /* TIMELINE
  89.         –––––––––––––––––––––––––––––––––––––––––––––––––– */
  91.         .timeline {
  92.             white-space: nowrap;
  93.             overflow-x: hidden;
  94.         }
  96.         .timeline ol {
  97.             font-size: 0;
  98.             width: 100vw;
  99.             padding: 250px 0;
  100.             transition: all 1s;
  101.         }
  103.         .timeline ol li {
  104.             position: relative;
  105.             display: inline-block;
  106.             list-style-type: none;
  107.             width: 160px;
  108.             height: 3px;
  109.             background: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %}!important;
  110.         }
  112.         .timeline ol li:last-child {
  113.             width: 250px;
  114.         }
  116.         .timeline ol li:not(:first-child) {
  117.             margin-left: 14px;
  118.         }
  122.         .timeline ol li div {
  123.             position: absolute;
  124.             left: calc(100% + 7px);
  125.             width: 250px;
  126.             padding: 15px;
  127.             font-size: 1rem;
  128.             white-space: normal;
  129.             color: black;
  130.             background: white;
  131.         }
  133.         .timeline ol li div::before {
  134.             content: '';
  135.             position: absolute;
  136.             top: 100%;
  137.             left: 0;
  138.             width: 0;
  139.             height: 0;
  140.             border-style: solid;
  141.         }
  143.         .timeline ol li:nth-child(odd) div {
  144.             top: -16px;
  145.             transform: translateY(-100%);
  146.         }
  148.         .timeline ol li:nth-child(odd) div::before {
  149.             top: 100%;
  150.             border-width: 8px 8px 0 0;
  151.             border-color: white transparent transparent transparent;
  152.         }
  154.         .timeline ol li:nth-child(even) div {
  155.             top: calc(100% + 16px);
  156.         }
  158.         .timeline ol li:nth-child(even) div::before {
  159.             top: -8px;
  160.             border-width: 8px 0 0 8px;
  161.             border-color: transparent transparent transparent white;
  162.         }
  164.         .timeline time {
  165.             display: block;
  166.             font-weight: bold;
  167.             margin-bottom: 8px;
  168.         }
  171.         /* TIMELINE ARROWS
  172.         –––––––––––––––––––––––––––––––––––––––––––––––––– */
  174.         .timeline .arrows {
  175.             display: flex;
  176.             justify-content: center;
  177.             margin-bottom: 20px;
  178.         }
  180.         .timeline .arrows .arrow__prev {
  181.             margin-right: 20px;
  182.         }
  184.         .timeline .disabled {
  185.             opacity: .5;
  186.         }
  188.         .timeline .arrows img {
  189.             width: 45px;
  190.             height: 45px;
  191.         }
  194.         /* GENERAL MEDIA QUERIES
  195.         –––––––––––––––––––––––––––––––––––––––––––––––––– */
  196.         @media screen and (max-width: 599px) {
  197.             .timeline ol,
  198.             .timeline ol li {
  199.                 width: auto;
  200.             }
  202.             .timeline ol {
  203.                 padding: 0;
  204.                 transform: none !important;
  205.             }
  207.             .timeline ol li {
  208.                 display: block;
  209.                 height: auto;
  210.                 background: transparent;
  211.             }
  213.             .timeline ol li:first-child {
  214.                 margin-top: 25px;
  215.             }
  217.             .timeline ol li:not(:first-child) {
  218.                 margin-left: auto;
  219.             }
  221.             .timeline ol li div {
  222.                 width: 94%;
  223.                 height: auto !important;
  224.                 margin: 0 auto 25px;
  225.             }
  227.             .timeline ol li div {
  228.                 position: static;
  229.             }
  231.             .timeline ol li:nth-child(odd) div {
  232.                 transform: none;
  233.             }
  235.             .timeline ol li:nth-child(odd) div::before,
  236.             .timeline ol li:nth-child(even) div::before {
  237.                 left: 50%;
  238.                 top: 100%;
  239.                 transform: translateX(-50%);
  240.                 border: none;
  241.                 border-left: 1px solid white;
  242.                 height: 25px;
  243.             }
  245.             .timeline ol li:last-child,
  246.             .timeline ol li:nth-last-child(2) div::before,
  247.             .timeline ol li:not(:last-child)::after,
  248.             .timeline .arrows {
  249.                 display: none;
  250.             }
  251.         }
  254.         .section {
  255.             padding: 50px 0;
  256.         }
  258.         .section .container {
  259.             width: 90%;
  260.             max-width: 1200px;
  261.             margin: 0 auto;
  262.             text-align: center;
  263.         }
  265.         .section h1 {
  266.             font-size: 2.5rem;
  267.         }
  269.         .section h2 {
  270.             font-size: 1.3rem;
  271.         }
  273.         figure img{
  274.             min-width: 320px!important;
  275.             max-width: 500px;
  276.         }
  277.         @media only screen and (max-width: 425px){
  278.             figure img{
  279.                 min-width: 350px!important;
  280.                 max-width: 100%!important;
  281.             }
  283.         }
  284.         .card-body{
  285.             padding-left: 0rem !important;
  286.             padding-right: 0rem !important;
  287.         }
  289.     </style>
  292. {% endblock %}
  294. {% block body %}
  299.     <div class=" d-flex flex-column flex-row-fluid">
  300.         <div class="card-body  pt-10">
  302.             <div class="row  ">
  303.                 {% if page_pedagogy is not null %}
  305.                     <div class="container scrool-div" id="{{ page_pedagogy.slug }}">
  306.                         <h2 class="bold text-center text-primary mb-5">{{ page_pedagogy.name }}</h2>
  308.                         <div class="separator"></div>
  309.                             <div class=" mt-4 row   mb-8">
  310.                                 {% set colors = ['#f65151','#ca51f6','#518ef6','#dec27e','#de997e','#F0FFF0','#FFA07A','#228B22','#00FFFF','#FF69B4','#CD853F'] %}
  311.                                 <div class="accordion" id="accordionExample">
  312.                                     <div class="accordion-item">
  313.                                         <h2 class="accordion-header" id="headingOne">
  314.                                             <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
  315.                                                 <h3 class="title text-primary">{{ 'class_list'|trans }}</h3>
  316.                                             </button>
  317.                                         </h2>
  318.                                         <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
  319.                                             <div class="accordion-body row" style="overflow-y: scroll; height: 300px">
  320.                                                 {% for c  in classes %}
  321.                                                     <div class=" col-md-4 col-lg-4 col-sm-12 col-xs-12 ">
  322.                                                         <div class="card m-4" style="border-style: solid;background-color: {{ colors[random(1,10)] }}">
  323.                                                             <div class="card-header" style="border-bottom: none;padding: 10px">
  324.                                                                 <h3 class="card-title">{{ c.name }}</h3>
  325.                                                                 <div class="card-toolbar">
  326.                                                                     <button type="button" class="btn btn-sm btn-light btn-show-class" data-id="{{ c.id }}" data-name="{{ c.name }}">
  327.                                                                         <span class="fa fa-book"></span>
  328.                                                                     </button>
  329.                                                                 </div>
  330.                                                             </div>
  332.                                                         </div>
  333.                                                     </div>
  337.                                                 {% endfor %}
  338.                                             </div>
  339.                                         </div>
  340.                                     </div>
  342.                                 </div>
  345.                             </div>
  346.                         <div class="row">
  347.                             <div class="accordion" id="accordionExample2">
  348.                                 <div class="accordion-item">
  349.                                     <h2 class="accordion-header" id="headingOne1">
  350.                                         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">
  351.                                             <h3 class="title text-primary">{{ 'school_department'|trans }}</h3>
  352.                                         </button>
  353.                                     </h2>
  354.                                     <div id="collapseOne1" class="accordion-collapse collapse show" aria-labelledby="headingOne1" data-bs-parent="#accordionExample1">
  355.                                         <div class="accordion-body row" style="overflow-y: scroll; height: 300px">
  356.                                             {% for c  in departments %}
  357.                                                 <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 p-4">
  358.                                                     <div class="card" style="border-style: solid;background-color: {{ colors[random(1,10)] }}">
  359.                                                         <div class="card-header" style="border-bottom: none;padding: 10px">
  360.                                                             <h3 class="card-title">{{ c.name }}</h3>
  361.                                                             <div class="card-toolbar">
  362.                                                                 <button type="button" class="btn btn-sm btn-light btn-show-team" data-id="{{ c.id }}" data-name="{{ c.name }}">
  363.                                                                     <span class="fa fa-user-friends"></span>
  364.                                                                 </button>
  365.                                                             </div>
  366.                                                         </div>
  368.                                                     </div>
  369.                                                 </div>
  373.                                             {% endfor %}
  374.                                         </div>
  375.                                     </div>
  376.                                 </div>
  378.                             </div>
  380.                         </div>
  381.                     </div>
  382.                 {% endif %}
  383.             </div>
  385.             <div class="row "  style="margin-top: 80px;">
  386.                 {% if page_calendar is not null %}
  387.                     <div class="container scrool-div" id="{{ page_calendar.slug }}">
  388.                         <h2 class="bold text-center text-primary mb-5 mt-5">{{ page_calendar.name }}</h2>
  390.                         <div class="row" style="">
  392.                             <section class="timeline">
  393.                                 <ol>
  394.                                     {% for e in events %}
  395.                                         <li>
  396.                                             <div style="max-height: 160px!important;">
  397.                                                 <a href="javascript:void(0)" class="btn-show fs-7" data-id="{{ e.id }}">
  398.                                                     <em class="fs-7"  style="font-weight: bold;">{{ e.date_event2 | date('F') |trans }}</em><br/>
  399.                                                     <time class="fs-8" style="{% if e.past == '0' %} color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %}; {% endif %}">{{ e.date_event2 }}</time>  {{ e.description|striptags|u.truncate(80, '...')|raw  }}</a>
  401.                                             </div>
  402.                                         </li>
  406.                                     {% endfor %}
  409.                                     <li></li>
  410.                                 </ol>
  412.                                 <div class="arrows">
  413.                                     <button class="arrow arrow__prev disabled btn btn-primary" disabled>
  414.                                         <span class="bi bi-caret-left fs-1"></span>
  415.                                     </button>
  416.                                     <button class="arrow arrow__next btn btn-primary">
  417.                                         <span class="bi bi-caret-right  fs-1"></span>
  418.                                     </button>
  419.                                 </div>
  420.                             </section>
  422.                         </div>
  425.                     </div>
  427.                 {% endif %}
  430.             </div>
  431.             <div class="row  " style="margin-top: 80px;">
  432.                 {% if page_admission is not null %}
  434.                     <div class="container scrool-div" id="{{ page_admission.slug }}">
  435.                         <h2 class="bold text-center text-primary mb-5 mt-5">{{ page_admission.name }}</h2>
  436.                         <div class="row mt-4">
  437.                             <div class="card shadow-sm">
  438.                                 <div class="card-header">
  439.                                     <h3 class="card-title"><span class="text-muted" style="margin-right: 10px;">{{ school_global.name  }}</span>   <span class="text-primary">{{ 'admission_requirements'|trans }}</span></h3>
  441.                                 </div>
  442.                                 <div class="card-body" id="watermark">
  443.                                     <ul style="list-style: none">
  444.                                         {% for c in admission_infos %}
  445.                                             <li class="ck ck-content ck-editor__editable ck-rounded-corners ck-editor__editable_inline ck-read-only ck-blurred">
  446.                                                 {{ c.description|raw }}
  447.                                             </li>
  449.                                         {% endfor %}
  450.                                     </ul>
  453.                                 </div>
  454.                                 <div class="card-footer pt-20">
  455.                                     {% for r in admission_pages %}
  456.                                         <div class="ck ck-content ck-editor__editable ck-rounded-corners ck-editor__editable_inline ck-read-only ck-blurred" lang="en" dir="ltr" role="textbox" aria-label="Rich Text Editor, main" contenteditable="false">
  457.                                             {{ r.schoolFeeDescription|raw }}
  458.                                         </div>
  459.                                         <div class="ck ck-content ck-editor__editable ck-rounded-corners ck-editor__editable_inline ck-read-only ck-blurred" lang="en" dir="ltr" role="textbox" aria-label="Rich Text Editor, main" contenteditable="false">
  460.                                             {{ r.schoolFeeOther|raw }}
  461.                                         </div>
  465.                                     {% endfor %}
  466.                                 </div>
  467.                             </div>
  469.                         </div>
  470.                     </div>
  471.                 {% endif %}
  475.             </div>
  478.         </div>
  480.     </div>
  483.     <div class="modal fade" data-bs-focus="false" tabindex="-1" id="kt_modal_show">
  484.         <div class="modal-dialog">
  485.             <div class="modal-content">
  486.                 <div class="modal-header">
  487.                     <h5 class="modal-title" id="modal_show_title">
  488.                         <span class="fa fa-spin fa-satellite"></span>
  489.                     </h5>
  491.                     <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
  492.                         <span class="fa fa-window-close"></span>
  493.                     </div>
  494.                     <!--end::Close-->
  495.                 </div>
  496.                 <div class="modal-body">
  497.                     <div class=" d-flex flex-column flex-row-fluid " id="modal_show_img">
  498.                     </div>
  499.                     <div class=" d-flex flex-column flex-row-fluid" id="modal_show_content">
  500.                     </div>
  502.                 </div>
  504.                 <div class="modal-footer">
  505.                     <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ 'close'|trans }}</button>
  506.                 </div>
  507.             </div>
  508.         </div>
  509.     </div>
  511.     <div class="modal fade" data-bs-focus="false" tabindex="-1" id="kt_modal_class_and_course">
  512.         <div class="modal-dialog modal-fullscreen">
  513.             <div class="modal-content">
  514.                 <div class="modal-header">
  515.                     <h5 class="modal-title" id="class_name">
  516.                     </h5>
  518.                     <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
  519.                         <span class="fa fa-window-close"></span>
  520.                     </div>
  521.                 </div>
  522.                 <div class="modal-body">
  523.                     <h2>{{ 'course_list'|trans }}</h2>
  524.                     <div class="mb-10 mt-10 row" id="course_list">
  525.                     </div>
  526.                 </div>
  528.                 <div class="modal-footer">
  529.                     <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ 'close'|trans }}</button>
  530.                 </div>
  531.             </div>
  532.         </div>
  533.     </div>
  534.     <div class="modal fade" data-bs-focus="false" tabindex="-1" id="kt_modal_team">
  535.         <div class="modal-dialog modal-fullscreen">
  536.             <div class="modal-content">
  537.                 <div class="modal-header">
  538.                     <h5 class="modal-title" id="department_name">
  539.                     </h5>
  541.                     <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
  542.                         <span class="fa fa-window-close"></span>
  543.                     </div>
  544.                 </div>
  545.                 <div class="modal-body">
  546.                     <h2>{{ 'staff_member'|trans }}</h2>
  547.                     <div class="mb-10 mt-10 row" id="member_list">
  548.                     </div>
  549.                 </div>
  551.                 <div class="modal-footer">
  552.                     <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ 'close'|trans }}</button>
  553.                 </div>
  554.             </div>
  555.         </div>
  556.     </div>
  560. {% endblock %}
  562.  {% block js %}
  563.      <script src="{{ asset('assets/plugins/custom/ckeditor/ckeditor-classic.bundle.js') }}"></script>
  564.      <script src="{{ asset('assets/js/hammer.min.js') }}"></script>
  566.      <script id="classCourse" type="text/html">
  567.          <div class="col-md-4 col-lg-4 mb-5 border-dashed p-2" style="[[back_color]]">
  568.              <div class="form-check form-check-custom form-check-solid">
  569.                  <label class="form-check-label bold">
  570.                      [[course_name]]
  571.                  </label>
  572.              </div>
  573.              <div class="input-group mb-5 mt-5">
  574.                  <span class="input-group-text">{{ 'week_hour'|trans }}</span>
  575.                  <span class="input-group-text">[[week_hour]]</span>
  576.              </div>
  577.              <div class="input-group mb-5 mt-5">
  578.                  <span class="input-group-text">{{ 'year_hour'|trans }}</span>
  579.                  <span class="input-group-text">[[year_hour]]</span>
  580.              </div>
  581.              <div class="input-group mb-5 mt-5">
  582.                  <span class="input-group-text">{{ 'coefficient'|trans }}</span>
  583.                  <span class="input-group-text">[[coefficient]]</span>
  584.              </div>
  586.          </div>
  587.      </script>
  588.      <script id="teamMemberHtml" type="text/html">
  589.          <div class="col-lg-3 mb-4 team3">
  590.              <div class="row">
  591.                  <div class="col-md-12">
  592.                      <img style="width: 270px;height: 250px" src="[[image]]" alt="wrapkit" class="img-fluid" />
  593.                  </div>
  594.                  <div class="col-md-12">
  595.                      <div class="pt-2">
  596.                          <h3 class="mt-4 font-weight-medium mb-0">[[name]]</h3>
  597.                          <h4 class="subtitle">[[position]]</h4>
  598.                          <h4 class="subtitle">[[department]]</h4>
  599.                          <a href = "mailto: [[email1]]" class="subtitle"> [[email2]]</a>
  600.                          <a href = "tel: [[phone1]]" class="subtitle"> [[phone2]]</a>
  601.                      </div>
  602.                  </div>
  603.              </div>
  604.          </div>
  605.      </script>
  607.      <script>
  608.          $(document).ready(function (){
  610.          })
  614.      </script>
  615.      <script>
  616.          let colors = ['#f65151','#ca51f6','#518ef6','#dec27e','#de997e','#F0FFF0','#FFA07A','#228B22','#00FFFF','#FF69B4','#CD853F'];
  617.          function getRandomInt(max) {
  618.              return Math.floor(Math.random() * max);
  619.          }
  620.          $(document).ready(function (){
  621.              //let modalShow = bootstrap.Modal.getOrCreateInstance(document.getElementById('kt_modal_show'));
  622.              let modalManageCourse = bootstrap.Modal.getOrCreateInstance(document.getElementById('kt_modal_class_and_course'));
  623.              let modalManageTeam = bootstrap.Modal.getOrCreateInstance(document.getElementById('kt_modal_team'));
  625.              $('.btn-show-class').on('click', function () {
  626.                  let url = "{{ path('get_class_course_list',{'id':'00000'}) }}";
  627.                  url = url.replace('00000',this.getAttribute('data-id'));
  628.                  let name = this.getAttribute('data-name');
  629.                  $('#class_name').html(name);
  630.                  $('#item_class').val(this.getAttribute('data-id'));
  631.                  $.ajax({
  632.                      url: url,
  633.                      type: 'GET',
  634.                      dataType: 'json',
  635.                      success: function(res){
  636.                          $('#course_list').html('');
  637.                          let templateRep = document.getElementById("classCourse");
  638.                          let templateRepHtml = templateRep.innerHTML;
  639.                          res.data.forEach(function (item){
  640.                              let listHtml = "";
  641.                              listHtml += templateRepHtml.replace("[[course_name]]",item.class_course.name)
  642.                                  .replace("[[back_color]]","background-color:"+colors[getRandomInt(10)])
  643.                                  .replace("[[week_hour]]",item.week_hour)
  644.                                  .replace("[[year_hour]]",item.year_hour)
  645.                                  .replace("[[coefficient]]",item.coefficient)
  646.                              ;
  647.                              $('#course_list').append(listHtml);
  649.                          });
  651.                          modalManageCourse.show();
  652.                      },
  653.                      error :function (error) {
  654.                          Swal.fire({
  655.                              text: "{{ 'object_not_found'|trans }}",
  656.                              icon: "error",
  657.                              buttonsStyling: false,
  658.                              confirmButtonText: "{{ 'close'|trans }}",
  659.                              customClass: {
  660.                                  confirmButton: "btn btn-primary"
  661.                              }
  662.                          });
  663.                      }
  664.                  });
  666.              });
  669.              $('.btn-show-team').on('click', function () {
  670.                  let url = "{{ path('app_get_team_member_by_department',{'id':'00000'}) }}";
  671.                  url = url.replace('00000',this.getAttribute('data-id'));
  672.                  let name = this.getAttribute('data-name');
  673.                  $('#department_name').html(name);
  674.                  $.ajax({
  675.                      url: url,
  676.                      type: 'GET',
  677.                      dataType: 'json',
  678.                      success: function(res){
  679.                          $('#member_list').html('');
  680.                          let templateRep1 = document.getElementById("teamMemberHtml");
  681.                          let templateRepHtml1 = templateRep1.innerHTML;
  682.                          res.data.forEach(function (item){
  683.                              let listHtml = "";
  684.                              let imgUrl = "{{ asset('assets/media/avatars/user.png') }}";
  685.                              if(item.image.length>0){
  686.                                  imgUrl = "{{ asset('uploads/') }}"+item.image;
  687.                              }
  688.                              listHtml = templateRepHtml1.replace("[[name]]",item.name)
  689.                                  .replace("[[position]]",item.position.name)
  690.                                  .replace("[[email2]]",item.email)
  691.                                  .replace("[[email1]]",item.email)
  692.                                  .replace("[[phone1]]",item.phone)
  693.                                  .replace("[[phone2]]",item.phone)
  694.                                  .replace("[[image]]",imgUrl)
  695.                                  .replace("[[department]]",item.department.name)
  696.                              ;
  698.                              console.log(listHtml);
  700.                              $('#member_list').append(listHtml);
  702.                          });
  704.                          modalManageTeam.show();
  705.                      },
  706.                      error :function (error) {
  707.                          Swal.fire({
  708.                              text: "{{ 'object_not_found'|trans }}",
  709.                              icon: "error",
  710.                              buttonsStyling: false,
  711.                              confirmButtonText: "{{ 'close'|trans }}",
  712.                              customClass: {
  713.                                  confirmButton: "btn btn-primary"
  714.                              }
  715.                          });
  716.                      }
  717.                  });
  719.              });
  721.          })
  725.      </script>
  726.      <script>
  727.          let modalShow = bootstrap.Modal.getOrCreateInstance(document.getElementById('kt_modal_show'));
  728.          $('.btn-show').on('click', function () {
  729.              let url = "{{ path('get_one_entity',{'entity':'event','id':'00000'}) }}";
  730.              url = url.replace('00000',this.getAttribute('data-id'));
  731.              $.ajax({
  732.                  url: url,
  733.                  type: 'GET',
  734.                  dataType: 'json',
  735.                  success: function(res){
  736.                      $('#modal_show_title').html(res.data.date_event.replace('T',' '));
  737.                      $('#modal_show_content').html(res.data.description);
  738.                      if(res.data.image !== ""){
  739.                          let img='<img class="img-responsive img" style="max-width: 400px;max-height: 300px" src="'+"{{ asset('uploads/') }}"+res.data.image +'"'+' />';
  740.                          $('#modal_show_img').html(img);
  741.                      }
  742.                      else{
  743.                          $('#modal_show_img').html('');
  744.                      }
  745.                      modalShow.show();
  746.                  },
  747.                  error :function (error) {
  748.                      Swal.fire({
  749.                          text: "{{ 'object_not_found'|trans }}",
  750.                          icon: "error",
  751.                          buttonsStyling: false,
  752.                          confirmButtonText: "{{ 'close'|trans }}",
  753.                          customClass: {
  754.                              confirmButton: "btn btn-primary"
  755.                          }
  756.                      });
  757.                  }
  758.              });
  760.          });
  761.          $(document).ready(function (){
  762.              // VARIABLES
  763.              const timeline = document.querySelector(".timeline ol"),
  764.                  elH = document.querySelectorAll(".timeline li > div"),
  765.                  arrows = document.querySelectorAll(".timeline .arrows .arrow"),
  766.                  arrowPrev = document.querySelector(".timeline .arrows .arrow__prev"),
  767.                  arrowNext = document.querySelector(".timeline .arrows .arrow__next"),
  768.                  firstItem = document.querySelector(".timeline li:first-child"),
  769.                  lastItem = document.querySelector(".timeline li:last-child"),
  770.                  xScrolling = 280,
  771.                  disabledClass = "disabled";
  773.              // START
  774.              window.addEventListener("load", init);
  776.              function init() {
  777.                  setEqualHeights(elH);
  778.                  animateTl(xScrolling, arrows, timeline);
  779.                  setSwipeFn(timeline, arrowPrev, arrowNext);
  780.                  setKeyboardFn(arrowPrev, arrowNext);
  781.              }
  783.              // SET EQUAL HEIGHTS
  784.              function setEqualHeights(el) {
  785.                  let counter = 0;
  786.                  for (let i = 0; i < el.length; i++) {
  787.                      const singleHeight = el[i].offsetHeight;
  789.                      if (counter < singleHeight) {
  790.                          counter = singleHeight;
  791.                      }
  792.                  }
  794.                  for (let i = 0; i < el.length; i++) {
  795.                      //el[i].style.height = `${counter}px`;
  797.                  }
  798.              }
  800.              // CHECK IF AN ELEMENT IS IN VIEWPORT
  801.              // http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
  802.              function isElementInViewport(el) {
  803.                  const rect = el.getBoundingClientRect();
  804.                  return (
  805.                      rect.top >= 0 &&
  806.                      rect.left >= 0 &&
  807.                      rect.bottom <=
  808.                      (window.innerHeight || document.documentElement.clientHeight) &&
  809.                      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  810.                  );
  811.              }
  813.              // SET STATE OF PREV/NEXT ARROWS
  814.              function setBtnState(el, flag = true) {
  815.                  if (flag) {
  816.                      el.classList.add(disabledClass);
  817.                  } else {
  818.                      if (el.classList.contains(disabledClass)) {
  819.                          el.classList.remove(disabledClass);
  820.                      }
  821.                      el.disabled = false;
  822.                  }
  823.              }
  825.              // ANIMATE TIMELINE
  826.              function animateTl(scrolling, el, tl) {
  827.                  let counter = 0;
  828.                  for (let i = 0; i < el.length; i++) {
  829.                      el[i].addEventListener("click", function () {
  830.                          if (!arrowPrev.disabled) {
  831.                              arrowPrev.disabled = true;
  832.                          }
  833.                          if (!arrowNext.disabled) {
  834.                              arrowNext.disabled = true;
  835.                          }
  836.                          const sign = this.classList.contains("arrow__prev") ? "" : "-";
  837.                          if (counter === 0) {
  838.                              tl.style.transform = `translateX(-${scrolling}px)`;
  839.                          } else {
  840.                              const tlStyle = getComputedStyle(tl);
  841.                              // add more browser prefixes if needed here
  842.                              const tlTransform =
  843.                                  tlStyle.getPropertyValue("-webkit-transform") ||
  844.                                  tlStyle.getPropertyValue("transform");
  845.                              const values =
  846.                                  parseInt(tlTransform.split(",")[4]) +
  847.                                  parseInt(`${sign}${scrolling}`);
  848.                              tl.style.transform = `translateX(${values}px)`;
  849.                          }
  851.                          setTimeout(() => {
  852.                              isElementInViewport(firstItem)
  853.                                  ? setBtnState(arrowPrev)
  854.                                  : setBtnState(arrowPrev, false);
  855.                              isElementInViewport(lastItem)
  856.                                  ? setBtnState(arrowNext)
  857.                                  : setBtnState(arrowNext, false);
  858.                          }, 1100);
  860.                          counter++;
  861.                      });
  862.                  }
  863.              }
  865.              // ADD SWIPE SUPPORT FOR TOUCH DEVICES
  866.              function setSwipeFn(tl, prev, next) {
  867.                  const hammer = new Hammer(tl);
  868.                  hammer.on("swipeleft", () => next.click());
  869.                  hammer.on("swiperight", () => prev.click());
  870.              }
  872.              // ADD BASIC KEYBOARD FUNCTIONALITY
  873.              function setKeyboardFn(prev, next) {
  874.                  document.addEventListener("keydown", (e) => {
  875.                      if (e.which === 37 || e.which === 39) {
  876.                          const timelineOfTop = timeline.offsetTop;
  877.                          const y = window.pageYOffset;
  878.                          if (timelineOfTop !== y) {
  879.                              window.scrollTo(0, timelineOfTop);
  880.                          }
  881.                          if (e.which === 37) {
  882.                              prev.click();
  883.                          } else if (e.which === 39) {
  884.                              next.click();
  885.                          }
  886.                      }
  887.                  });
  888.              }
  890.          })
  897.      </script>
  901.  {% endblock %}