templates/application/hubs/index.html.twig line 1

Open in your IDE?
  1. {% extends 'application/layout.html.twig' %}
  3. {% block content %}
  4.         <h1>Распределительные центры</h1>
  5.         <form class="rc-search" id="searchForm">
  6.             <div class="form__group">
  7.                 <input id="chainSearchInput" name="text" type="text" class="form__control" placeholder="Поиск по наименованию, адресу, сети">
  8.             </div>
  9.             <div class="form__btn">
  10.                 <button type="submit" class="btn" disabled="disabled">
  11.                         <span class="btn__icon">
  12.                             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.063 3.438a5.625 5.625 0 1 0 0 11.25 5.625 5.625 0 0 0 0-11.25zm-7.5 5.624a7.5 7.5 0 1 1 15 0 7.5 7.5 0 0 1-15 0z" fill="#405464"/><path fill-rule="evenodd" clip-rule="evenodd" d="M13.04 13.04a.937.937 0 0 1 1.326 0l3.797 3.797a.937.937 0 0 1-1.326 1.326l-3.797-3.797a.937.937 0 0 1 0-1.326z"/></svg>
  13.                         </span>
  14.                     <span class="btn__text">Найти</span>
  15.                 </button>
  16.             </div>
  18.             <div class="rc-search__dropdown dropdown scroll" id="searchResult">
  19.             </div>
  20.         </form>
  22.         <div class="main__content box rc-list">
  23.             <div class="rc-list__header">
  24.                 <div class="btn-group rc-list__toggle a-toggle-list">
  25.                     <button class="btn btn--light active show-list">
  26.                             <span class="btn__icon">
  27.                                 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.125 12.73a.806.806 0 0 1-.593-.24.806.806 0 0 1-.24-.594c0-.236.08-.43.24-.584a.826.826 0 0 1 .593-.229h13.75c.236 0 .434.08.594.24.16.16.24.35.24.573 0 .236-.08.434-.24.594a.807.807 0 0 1-.594.24H3.125zm0 3.728a.806.806 0 0 1-.593-.24.806.806 0 0 1-.24-.593c0-.236.08-.43.24-.583a.826.826 0 0 1 .593-.23h13.75c.236 0 .434.08.594.24.16.16.24.35.24.573 0 .25-.08.451-.24.604a.826.826 0 0 1-.594.23H3.125zm0-7.479a.806.806 0 0 1-.593-.24.782.782 0 0 1-.24-.572c0-.236.08-.434.24-.594.16-.16.357-.24.593-.24h13.75c.236 0 .434.08.594.24.16.16.24.358.24.594s-.08.43-.24.583a.826.826 0 0 1-.594.23H3.125zm0-3.75a.806.806 0 0 1-.593-.24.806.806 0 0 1-.24-.593c0-.236.08-.43.24-.583a.826.826 0 0 1 .593-.23h13.75c.236 0 .434.08.594.24.16.16.24.35.24.573 0 .25-.08.451-.24.604a.826.826 0 0 1-.594.23H3.125z"/></svg>
  28.                             </span>
  29.                         <span class="btn__text">Список</span>
  30.                     </button>
  31.                     <button class="btn btn--light show-map">
  32.                             <span class="btn__icon">
  33.                                 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 16.417c1.778-1.625 3.09-3.101 3.938-4.427.847-1.327 1.27-2.49 1.27-3.49 0-1.583-.503-2.875-1.51-3.875-1.007-1-2.24-1.5-3.698-1.5-1.458 0-2.691.5-3.698 1.5-1.007 1-1.51 2.292-1.51 3.875 0 1 .434 2.16 1.302 3.48.868 1.319 2.17 2.798 3.906 4.437zm0 1.812c-.125 0-.247-.017-.365-.052A.867.867 0 0 1 9.313 18c-2.07-1.847-3.619-3.552-4.646-5.114C3.639 11.322 3.125 9.86 3.125 8.5c0-2.139.691-3.847 2.073-5.125C6.58 2.097 8.18 1.458 10 1.458c1.82 0 3.42.64 4.802 1.917 1.382 1.278 2.073 2.986 2.073 5.125 0 1.361-.514 2.823-1.542 4.386-1.027 1.562-2.576 3.267-4.646 5.114a.882.882 0 0 1-.312.177 1.256 1.256 0 0 1-.375.052z"/></svg>
  34.                             </span>
  35.                         <span class="btn__text">На карте</span>
  36.                     </button>
  37.                 </div>
  38.                 <div class="rc-list__tags">
  39.                     <div id="chainList" class="rc-tag">
  40.                         <div class="rc-tag__item active">
  41.                             <a href="#" class="rc rc-tag__link chainItem" data-id="">
  42.                                 <span class="rc__name">Все РЦ</span>
  43.                             </a>
  44.                         </div>
  46.                         {% for chain in topChains %}
  47.                             <div class="rc-tag__item">
  48.                                 <a href="#" class="rc rc-tag__link chainItem" data-id="{{ chain.id }}">
  49.                                         <span class="rc__logo">
  50.                                             <img width="30" height="30" src="{{ resizeImage(chain.image) }}" />
  51.                                         </span>
  52.                                     <span class="rc__name">{{ chain.name }}</span>
  53.                                 </a>
  54.                             </div>
  55.                         {% endfor %}
  56.                     </div>
  57.                     {% if showMoreChains %}
  58.                         <button class="btn btn--light rc-tag__all">
  59.                             <span class="btn__text">Еще</span>
  60.                             <span class="btn__icon">
  61.                                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.375 8.675c.217-.183.458-.28.725-.287.267-.009.5.087.7.287l4.225 4.225 4.25-4.25c.183-.183.42-.27.713-.262.291.008.529.104.712.287.217.217.32.454.313.713a.994.994 0 0 1-.313.687l-4.975 4.975c-.1.1-.208.175-.325.225a.942.942 0 0 1-.375.075.941.941 0 0 1-.375-.075 1.038 1.038 0 0 1-.325-.225l-4.95-4.95a.916.916 0 0 1-.288-.7c.009-.267.105-.508.288-.725z"/></svg>
  62.                                 </span>
  63.                         </button>
  64.                     {% endif %}
  65.                 </div>
  66.             </div>
  67.             <div class="rc-list__body">
  68.                 <div class="tbl">
  70.                     <div class="tbl__body scroll" id="hubTable">
  71.                         {% include 'application/hubs/hub-table.html.twig' %}
  72.                     </div>
  73.                 </div>
  74.                 <div class="map" id="map" style="height: 100%; width: 100%">
  75.                 </div>
  76.             </div>
  77.         </div>
  79. {% endblock %}
  81. {% block popups %}
  82.     <div class="panel panel--rc scroll">
  83.         <button class="panel__close">
  84.             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.636 3.636a1 1 0 0 1 1.414 0L16.364 14.95a1 1 0 0 1-1.415 1.414L3.636 5.05a1 1 0 0 1 0-1.414z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3.636 16.364a1 1 0 0 1 0-1.414L14.95 3.636a1 1 0 1 1 1.414 1.414L5.05 16.364a1 1 0 0 1-1.414 0z"/></svg>
  85.         </button>
  87.         <div id="hubPanel"></div>
  88.     </div>
  90.     <div class="panel panel--review scroll">
  91.         <button class="panel__close">
  92.             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.636 3.636a1 1 0 0 1 1.414 0L16.364 14.95a1 1 0 0 1-1.415 1.414L3.636 5.05a1 1 0 0 1 0-1.414z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3.636 16.364a1 1 0 0 1 0-1.414L14.95 3.636a1 1 0 1 1 1.414 1.414L5.05 16.364a1 1 0 0 1-1.414 0z"/></svg>
  93.         </button>
  95.         <div class="panel__header">
  96.             <h3 class="panel__title text--primary">Оставьте отзыв</h3>
  97.         </div>
  99.         <div class="panel__body">
  100.             <form class="form" id="reviewForm">
  101.                 <input type="hidden" name="hubId" id="reviewIdInput">
  102.                 <div class="form__group form__group--md">
  103.                     <div class="form__label">Номер заказа</div>
  104.                     <input name="orderNumber" type="text" class="form__control w-sm" placeholder="Введите номер" required>
  105.                 </div>
  107.                 {% for key, rating in ratings %}
  108.                     <div class="add-review__item ">
  109.                         <div class="add-review__num">{{ loop.index }}</div>
  110.                         <div class="add-review__title">{{ rating }}</div>
  111.                         <div class="add-review__rating">
  112.                             <input type="hidden" name="ratings[{{ key }}]">
  113.                             <div class="rating a-rating">
  114.                                 <div class="rating__item"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M27.911 12.668a1.746 1.746 0 0 0-.593-.848 1.763 1.763 0 0 0-.97-.366l-6.363-.437-2.357-5.91A1.764 1.764 0 0 0 16 4a1.764 1.764 0 0 0-1.628 1.107l-2.4 5.942-6.32.405c-.352.023-.69.151-.969.368a1.779 1.779 0 0 0-.037 2.773l4.863 4.089-1.446 5.654a1.959 1.959 0 0 0 .75 2.087 1.936 1.936 0 0 0 2.152.064l5.024-3.163h.022l5.41 3.397c.277.18.6.276.931.277a1.776 1.776 0 0 0 1.393-.694 1.751 1.751 0 0 0 .3-1.52l-1.532-6.187 4.841-4.004a1.788 1.788 0 0 0 .557-1.927z"></path></svg></div>
  115.                                 <div class="rating__item"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M27.911 12.668a1.746 1.746 0 0 0-.593-.848 1.763 1.763 0 0 0-.97-.366l-6.363-.437-2.357-5.91A1.764 1.764 0 0 0 16 4a1.764 1.764 0 0 0-1.628 1.107l-2.4 5.942-6.32.405c-.352.023-.69.151-.969.368a1.779 1.779 0 0 0-.037 2.773l4.863 4.089-1.446 5.654a1.959 1.959 0 0 0 .75 2.087 1.936 1.936 0 0 0 2.152.064l5.024-3.163h.022l5.41 3.397c.277.18.6.276.931.277a1.776 1.776 0 0 0 1.393-.694 1.751 1.751 0 0 0 .3-1.52l-1.532-6.187 4.841-4.004a1.788 1.788 0 0 0 .557-1.927z"></path></svg></div>
  116.                                 <div class="rating__item"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M27.911 12.668a1.746 1.746 0 0 0-.593-.848 1.763 1.763 0 0 0-.97-.366l-6.363-.437-2.357-5.91A1.764 1.764 0 0 0 16 4a1.764 1.764 0 0 0-1.628 1.107l-2.4 5.942-6.32.405c-.352.023-.69.151-.969.368a1.779 1.779 0 0 0-.037 2.773l4.863 4.089-1.446 5.654a1.959 1.959 0 0 0 .75 2.087 1.936 1.936 0 0 0 2.152.064l5.024-3.163h.022l5.41 3.397c.277.18.6.276.931.277a1.776 1.776 0 0 0 1.393-.694 1.751 1.751 0 0 0 .3-1.52l-1.532-6.187 4.841-4.004a1.788 1.788 0 0 0 .557-1.927z"></path></svg></div>
  117.                                 <div class="rating__item"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M27.911 12.668a1.746 1.746 0 0 0-.593-.848 1.763 1.763 0 0 0-.97-.366l-6.363-.437-2.357-5.91A1.764 1.764 0 0 0 16 4a1.764 1.764 0 0 0-1.628 1.107l-2.4 5.942-6.32.405c-.352.023-.69.151-.969.368a1.779 1.779 0 0 0-.037 2.773l4.863 4.089-1.446 5.654a1.959 1.959 0 0 0 .75 2.087 1.936 1.936 0 0 0 2.152.064l5.024-3.163h.022l5.41 3.397c.277.18.6.276.931.277a1.776 1.776 0 0 0 1.393-.694 1.751 1.751 0 0 0 .3-1.52l-1.532-6.187 4.841-4.004a1.788 1.788 0 0 0 .557-1.927z"></path></svg></div>
  118.                                 <div class="rating__item"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M27.911 12.668a1.746 1.746 0 0 0-.593-.848 1.763 1.763 0 0 0-.97-.366l-6.363-.437-2.357-5.91A1.764 1.764 0 0 0 16 4a1.764 1.764 0 0 0-1.628 1.107l-2.4 5.942-6.32.405c-.352.023-.69.151-.969.368a1.779 1.779 0 0 0-.037 2.773l4.863 4.089-1.446 5.654a1.959 1.959 0 0 0 .75 2.087 1.936 1.936 0 0 0 2.152.064l5.024-3.163h.022l5.41 3.397c.277.18.6.276.931.277a1.776 1.776 0 0 0 1.393-.694 1.751 1.751 0 0 0 .3-1.52l-1.532-6.187 4.841-4.004a1.788 1.788 0 0 0 .557-1.927z"></path></svg></div>
  119.                             </div>
  121.                         </div>
  122.                     </div>
  123.                 {% endfor %}
  125.                 <div class="form__group">
  126.                     <textarea id="reviewMessage" name="message" class="form__control" cols="30" rows="3" placeholder="Оставить текстовый отзыв"></textarea>
  127.                 </div>
  128.                 <div class="form__group file a-file">
  129.                     <div class="file__path">
  130.                         <input name="image" type="file" accept="image/*">
  131.                         <span class="file__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.473 3.348a3.75 3.75 0 1 1 5.288 5.319L9.78 17.31a1.125 1.125 0 0 1-1.56-1.622l8.972-8.635a1.5 1.5 0 0 0-2.128-2.115l-9.197 9.178a3.37 3.37 0 0 0 4.766 4.766l7.697-7.68a1.125 1.125 0 1 1 1.59 1.594l-7.697 7.677a5.62 5.62 0 1 1-7.947-7.948l9.197-9.178z"/></svg></span>
  132.                         <span id="reviewFileName" class="file__text">Приложить фото</span>
  133.                     </div>
  134.                 </div>
  135.                 <div class="form__btn form__btn--sm">
  136.                     <button class="btn btn--block" type="submit">Отправить</button>
  137.                 </div>
  138.             </form>
  139.         </div>
  140.     </div>
  143. {% endblock %}
  145. {% block scripts %}
  146.     <script>
  147.         $(document).ready(function () {
  148.             function chainFilterClick(item) {
  149.                 let id = item.attr('data-id');
  150.                 $.ajax({
  151.                     type: "GET",
  152.                     url: '{{ path('select-chain') }}',
  153.                     data: {
  154.                         id: id,
  155.                     },
  156.                     dataType: "json",
  157.                     success: function (data) {
  158.                         $('#hubTable').html(data.html);
  159.                         $('#chainList > div').removeClass('active');
  160.                         $('#chainList a[data-id="' + id + '"]').parent().addClass('active');
  162.                         updateMap(data.hubPoints);
  163.                         initHubTable();
  164.                     }
  165.                 }).fail(function() {
  166.                     popupAlert('Ошибка');
  167.                 });
  169.                 return false;
  170.             }
  172.             $('.chainItem').click(function () {
  173.                 chainFilterClick($(this));
  174.             });
  176.             initHubTable();
  178.             $('.rc-search .form__control').keyup(function() {
  179.                 if($(this).val()) {
  180.                     $.ajax({
  181.                         type: "GET",
  182.                         url: '{{ path('hub-search-chain') }}',
  183.                         data: {
  184.                             text: $(this).val(),
  185.                         },
  186.                         success: function (html) {
  187.                             $('#searchResult').html(html);
  188.                             $('#searchResult .chainItem').click(function () {
  189.                                 $('.rc-search .dropdown').hide();
  191.                                 if ($(this).attr('data-id')) {
  192.                                     $('.rc-search .btn').attr('disabled','disabled');
  193.                                     $('#chainSearchInput').val('');
  194.                                     chainFilterClick($(this));
  195.                                 } else {
  196.                                     $('#chainSearchInput').val($(this).attr('data-name'));
  197.                                 }
  198.                             });
  199.                         }
  200.                     });
  201.                 }
  202.             });
  204.             $('#searchForm').submit(function () {
  205.                 $.ajax({
  206.                     type: "POST",
  207.                     url: '{{ path('hub-search') }}',
  208.                     data: $('#searchForm').serialize(),
  209.                     dataType: "json",
  210.                     success: function (data) {
  211.                         $('#hubTable').html(data.html);
  212.                         $('#chainList > div').removeClass('active');
  213.                         $('#chainList a[data-id=""]').parent().addClass('active');
  214.                         $('.rc-search .dropdown').hide();
  216.                         updateMap(data.hubPoints);
  217.                         initHubTable();
  218.                     }
  219.                 }).fail(function() {
  220.                     popupAlert('Ошибка');
  221.                 });
  223.                 return false;
  224.             });
  226.             function initHubTable() {
  227.                 $('.hubLink').click(function () {
  228.                     openHubPanel($(this).attr('data-id'));
  230.                     return false;
  231.                 });
  232.             }
  234.             $('#reviewForm').submit(function () {
  235.                 let messageRequired = false;
  236.                 let rating = null;
  237.                 {% for key, rating in ratings %}
  238.                     rating = $(this).find('input[name="ratings[{{ key }}]"').val();
  239.                     if (!rating) {
  240.                         popupAlert('Не выбран рейтинг "{{ rating }}"');
  241.                         return false;
  242.                     }
  244.                     if (rating == 1 || rating == 2) {
  245.                         messageRequired = true;
  246.                     }
  247.                 {% endfor %}
  249.                 if (messageRequired && !$('#reviewMessage').val()) {
  250.                     popupAlert('Не заполнен отзыв');
  251.                     return false;
  252.                 }
  253.                 $.ajax({
  254.                     type: "POST",
  255.                     url: '{{ path('review-message') }}',
  256.                     data: new FormData($(this)[0]),
  257.                     dataType: "json",
  258.                     contentType: false,
  259.                     processData: false,
  260.                     success: function () {
  261.                         popupAlert('Ваш отзыв отправлен');
  263.                         closePopup();
  265.                         $('.a-rating div.checked').removeClass('checked');
  266.                         $('#reviewForm input').val('');
  267.                         $('#reviewForm textarea').val('');
  268.                         $('#reviewFileName').html('Приложить фото');
  269.                     }
  270.                 }).fail(function() {
  271.                     popupAlert('Ошибка');
  272.                 });
  274.                 return false;
  275.             });
  277.             $('.a-rating div').click(function () {
  278.                 let parent = $(this).parent();
  279.                 parent.parent().find('input').val(parent.find('div.checked').length);
  280.             });
  281.         });
  283.         function openHubPanel(id) {
  284.             history.pushState({}, '', '/hubs/' + id);
  286.             $.ajax({
  287.                 type: "GET",
  288.                 url: '{{ path('hub-panel') }}',
  289.                 data: {
  290.                     id: id,
  291.                 },
  292.                 success: function (html) {
  293.                     $('#hubPanel').html(html);
  294.                     $('.panel--rc').addClass('showen');
  295.                     $('.panel__backdrop').addClass('showen');
  297.                     $('.tabs__link').on('click', function() {
  298.                         var tabName = $(this).attr('data-tab');
  300.                         $(this).closest('.tabs').find('.tabs__item.active').removeClass('active');
  301.                         $(this).closest('.tabs__item').addClass('active');
  302.                         $(this).closest('.tabs').find('.tabs__pane.show').removeClass('show');
  303.                         $('#' + tabName + '').addClass('show');
  304.                     });
  306.                     $('.dropdown__toggle').on('click', function(){
  307.                         if ( ! $(this).closest('.dropdown').hasClass('opened')) {
  308.                             $('.dropdown').removeClass('opened');
  309.                             $(this).closest('.dropdown').toggleClass('opened');
  310.                         } else {
  311.                             $('.dropdown').removeClass('opened');
  312.                         }
  313.                         return false;
  314.                     });
  316.                     $('.dropdown__menu').click(function(e){
  317.                         e.stopPropagation();
  318.                     });
  320.                     new Carousel(document.querySelector('.carousel'), {
  321.                             'infinite' : false,
  322.                             'center': false,
  323.                             'fill' : true,
  324.                             'dragFree' : false
  325.                     });
  326.                 }
  327.             }).fail(function() {
  328.                 popupAlert('Ошибка');
  329.             });
  330.         }
  332.         function openReview(id) {
  333.             closePopup();
  334.             $('#reviewIdInput').val(id);
  335.             $('.panel__backdrop').addClass('showen');
  336.             $('.panel--review').addClass('showen');
  337.         }
  339.         {% if openHubId %}
  340.         openHubPanel('{{ openHubId }}');
  341.         {% endif %}
  342.     </script>
  344.     <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
  345.     <script>
  346.         {% set id = random() %}
  347.         let map{{ id }} = null;
  348.         function updateMap(hubPoints) {
  349.             let map = map{{ id }};
  351.             let objects = [];
  352.             map.geoObjects.each(function (geoObject) {
  353.                 objects.push(geoObject);
  354.                 return true;
  355.             });
  357.             for (let i = 0; i < objects.length; i++) {
  358.                 map.geoObjects.remove(objects[i]);
  359.             }
  361.             for (let i = 0; i < hubPoints.length; i++) {
  362.                 let point = hubPoints[i];
  363.                 if (point.icon) {
  364.                     let myPlacemark = new ymaps.Placemark(point.coordinates, {
  365.                         hintContent: point.name,
  366.                     }, {
  367.                         iconLayout: 'default#image',
  368.                         iconImageHref: point.icon,
  369.                         iconImageSize: [30, 30],
  370.                         iconImageOffset: [0, 0],
  371.                     });
  373.                     myPlacemark.events.add([
  374.                         'click',
  375.                     ], function (e) {
  376.                         openHubPanel(point.id);
  377.                     });
  379.                     map.geoObjects.add(myPlacemark);
  380.                 }
  381.             }
  382.         }
  384.         ymaps.ready(function () {
  385.             map{{ id }} = new ymaps.Map('map',
  386.                 {
  387.                     center: [55.751574, 37.573856],
  388.                     zoom: 6
  389.                 },
  390.                 {
  391.                     searchControlProvider: 'yandex#search'
  392.                 }
  393.             );
  395.             updateMap({{ hubPoints|json_encode|raw }});
  396.         });
  397.     </script>
  398. {% endblock %}