templates/dashboard.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  4. {# ============================================ #}
  6. {% set selectedclub = app.session.get('club-selected') %}
  7. {% block title %}
  8.     {% if selectedclub is defined and selectedclub.uuid is defined %}
  9.         {{ selectedclub.name }} - 
  10.     {%  endif %}
  11.     Cénacle Rémi Mollet
  12. {% endblock %}
  14. {# ============================================ #}
  17. {% block stylesheets %}
  18.     <link rel="stylesheet" href="{{ app.request.baseUrl }}/assets/dashboard/dashboard.css">
  19.     <link rel="stylesheet" href="{{ app.request.baseUrl }}/assets/menu/menu.css">
  20.     <link rel="stylesheet" href="{{ app.request.baseUrl }}/assets/footer/footer.css">
  21.     <link rel="preconnect" href="https://fonts.gstatic.com">
  22.     <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
  23.     <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@600;700&display=swap" rel="stylesheet">
  24.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  25.     <link rel="stylesheet" href="{{ app.request.baseUrl }}/assets/home/search-city.css">
  26.     
  27.     {% block stylesheets2 %}{% endblock %}
  28. {% endblock %}
  31. {# ============================================ #}
  34. {% block javascripts %}{% endblock %}
  37. {# ============================================ #}
  40. {% block betweenheadandbody %}
  41.      <script id="search-city-item-template" type="text/x-handlebars-template">
  42.         <div>{{ '{{ name }} ({{ zipcode }})' }}</div>
  43.     </script>
  44. {% endblock %}
  47. {# ============================================ #}
  49. {% block switchLanguageButton %}
  50.    <div class="language">
  51.         <label class="toggle">
  52.             <input type="checkbox" id="language" {% if app.request.locale == 'en' %}checked{% endif %}>
  53.             <span class="toggle-switch"></span>
  54.             <div class="fr"></div>
  55.             <div class="en"></div>
  56.         </label>
  57.     </div> 
  58. {% endblock %}
  62. {% block searchclub %}
  63.    {# Barre de recherche club #}
  64.    <div class="search-club">
  66.        <div class="first-line" id="gotoclubsearchbtn">
  67.             <h4>rechercher un club</h4>
  68.             <div class="toggle-btn">
  69.                 <i class="fas fa-arrow-circle-right"></i>
  70.                 <i class="fas fa-times"></i>
  71.             </div>
  72.         </div>
  74.         <div class="second-line">
  76.             {# search country / city #}
  78.             <label for="country"></label>
  79.             <select name="pays" id="pays">
  80.                 <option label="France Métropolitaine" value="France"></option>
  81.                 {#<option label="Guyane" value="guyane"></option>
  82.                 <option label="Suisse" value="suisse"></option>
  83.                 <option label="Hollande" value="hollande"></option>
  84.                 <option label="Canada" value="Canada"></option>#}
  85.             </select>
  87.             <label for="ville"></label>
  88.             <div>
  89.                 <input type="text" class="form-control typeahead" name="ville" id="ville" placeholder="Renseigner une ville" autocomplete="off">
  90.             </div>
  92.             {# rayon city #}
  94.             <p>Rayon</p>
  96.             <div class="rayon">
  97.                 <input type="range" min="1" max="25" step="1" value="5" id="slider">
  98.                 <div id="selector">
  99.                     <div id="selectValue"></div>
  100.                 </div>
  101.             </div>
  103.             <div class="btn" id="clubsearchbtn"><a href="#">rechercher</a></div>
  104.         </div>
  105.    </div>
  106. {% endblock %}
  107.  
  108. {% block searchclubjs %}
  109.     <script src="{{ app.request.baseUrl }}/vendor/typeahead/typeahead.bundle.js"></script>
  110.     <script src="{{ app.request.baseUrl }}/vendor/handlebars/handlebars.min-v4.7.7.js"></script>
  112.     {# JS rayon km + autocompletion ville #}
  113.     <script>
  114.         var slider = document.getElementById("slider");
  115.         var selector = document.getElementById("selector");
  116.         var selectValue = document.getElementById("selectValue");
  117.         var zipcodeSelected;
  119.         selectValue.innerHTML = slider.value;
  121.         slider.oninput = function(){
  122.             selectValue.innerHTML = slider.value;
  123.             selector.style.left = this.value + " km";
  124.         }
  126.         var searchCityItemTemplate = Handlebars.compile($("#search-city-item-template").html());
  127.         $(document).ready(function() {
  128.             function getDisplayName(result) {
  129.                 //console.log("getDisplayName", result);
  130.                 return result.name + ' (' + result.zipcode + ')';
  131.             }
  133.             var bloodhound = new Bloodhound({
  134.                 datumTokenizer: Bloodhound.tokenizers.whitespace,
  135.                 queryTokenizer: Bloodhound.tokenizers.whitespace,
  136.                 remote: {
  137.                     url: "{{ app.request.baseUrl }}/api/city?q=%QUERY",
  138.                     prepare: function (query, settings) {
  139.                         settings.url = settings.url.replace('%QUERY', query);
  140.                         //console.log("Search url: " + settings.url);
  141.                         return settings;
  142.                     }
  143.                 }
  144.             });
  145.             
  146.             bloodhound.initialize();
  148.             $('#ville').typeahead({
  149.                 hint: true,
  150.                 highlight: true,
  151.                 minLength: 1
  152.             },
  153.             {
  154.                 limit: 20,
  155.                 source: bloodhound,
  156.                 display: getDisplayName,
  157.                 templates: {
  158.                     suggestion: function(result) {
  159.                         return searchCityItemTemplate(result);
  160.                     }
  161.                 }
  162.             });
  163.             $('#ville').focus();
  164.             $('#ville').bind('typeahead:select', function(ev, result) {
  165.                 var element = result.element;
  166.                 console.log("search select", result.zipcode, slider.value);
  167.                 zipcodeSelected = result.zipcode;
  168.                 // window.location = '{{ app.request.baseUrl }}/v2/view-grid/' + element.name;
  169.             });
  170.             $('#ville').on('keypress',function(e) {
  171.                 if(e.which == 13) {
  172.                     goToSearchClub();
  173.                 }
  174.             });
  175.             $('#clubsearchbtn').click(function() {
  176.                 goToSearchClub();
  177.             });
  178.             $('#gotoclubsearchbtn').click(function() {
  179.                 window.location = '{{ app.request.baseUrl }}/club';
  180.             });
  181.             
  182.         });
  183.         
  184.         function goToSearchClub() {
  185.             if(zipcodeSelected && zipcodeSelected != '') {
  186.                 window.location = '{{ app.request.baseUrl }}/club?zc=' + zipcodeSelected + '&d=' + slider.value;
  187.             }
  188.         }
  189.     </script>
  190. {% endblock %}
  192.  
  193. {# ============================================ #}
  196. {% block body %}
  197.     
  198.     {{ render(controller('App\\Controller\\MenuController::viewMenu')) }}
  200.     <!-- Button top -->
  201.     <div class="top-button">
  202.         <i class="fas fa-arrow-up"></i>
  203.     </div>
  205.        {% block dashboardcontent %}{% endblock %}
  207.     {{ render(controller('App\\Controller\\FooterController::viewFooter')) }}
  209.     {# JS Bootstrap #}
  210.     <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  211.     <script src="https://unpkg.com/@popperjs/core@2"></script>
  212.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
  215.     {# Link for icons #}
  216.     <script src="https://kit.fontawesome.com/297127ae03.js" crossorigin="anonymous"></script>
  218.     {# JS for menu & scroll #}
  219.     <script src="{{ app.request.baseUrl }}/assets/menu/menu.js"></script>
  220.     <script src="{{ app.request.baseUrl }}/assets/search-club/search-club.js"></script>
  221.     <script src="{{ app.request.baseUrl }}/assets/topbutton.js"></script>
  222.     <script src="{{ app.request.baseUrl }}/assets/dashboard/dashboard.js"></script>
  223.     
  224.     {% block javascripts_end_body %}{% endblock %}
  225.     
  226. {% endblock %}