templates/Map/page.html.twig line 78

Open in your IDE?
  1. {% extends '__design/v2023/grid-map.html.twig' %}
  3. {% block preconnect %}
  4.     {{ parent() }}
  5.     <link rel="preconnect" href="https://yastatic.net">
  6.     <link rel="preconnect" href="https://api-maps.yandex.ru">
  7. {% endblock %}
  9. {# {% block stylesheet_postload %}{{ encore_entry_link_tags("styles/public-map-page") }}{{ parent() }} #}
  10.     {# <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">{% endblock %} #}
  11. {% block wrapper_class %} wrapper--map{% endblock %}
  13. {% block mainContainer %}
  15.     {# {{- knp_menu_render('breadcrumbs', {'template': '__design/v2023/_menu/breadcrumbs.html.twig' }) -}} #}
  17.     <h1 class="d-none">{{ seo_heading() ? seo_heading() : 'Интим карта' }}</h1>
  19.     <div class="map-page content">
  20.         <div class="map-heading container">
  21.             <button class="map-back btn btn-transparent" type="button" onclick="history.back()">
  22.                 <svg class="btn-icon" width="24" height="24" viewBox="0 0 24 24"><path fill="#2C2C2C" d="m17.83 20.13-1.77 1.77-9.9-9.9 9.9-9.9 1.77 1.77L9.7 12l8.13 8.13Z"/></svg>
  23.                 <span class="btn-text">Назад</span>
  24.             </button>
  25.             <button class="map-btn btn btn-grey" type="button" data-a11y-dialog-show="filter-dialog">
  26.                 <svg class="btn-icon" width="20" height="20" viewBox="0 0 20 20"><path d="M7.5 4.165a.833.833 0 1 0 0 1.666.833.833 0 0 0 0-1.666Zm-2.358 0a2.5 2.5 0 0 1 4.717 0h5.975a.833.833 0 1 1 0 1.666H9.859a2.5 2.5 0 0 1-4.717 0h-.975a.833.833 0 1 1 0-1.666h.975Zm7.359 5a.833.833 0 1 0 0 1.666.833.833 0 0 0 0-1.666Zm-2.359 0a2.501 2.501 0 0 1 4.717 0h.975a.833.833 0 1 1 0 1.667h-.975a2.502 2.502 0 0 1-4.717 0H4.167a.833.833 0 1 1 0-1.667h5.975Zm-2.641 5a.833.833 0 1 0 0 1.666.833.833 0 0 0 0-1.666Zm-2.359 0a2.5 2.5 0 0 1 4.717 0h5.975a.833.833 0 1 1 0 1.667H9.859a2.501 2.501 0 0 1-4.717 0h-.975a.833.833 0 1 1 0-1.667h.975Z"/></svg>
  27.                 <span class="btn-text">Фильтры</span>
  28.             </button>
  29.         </div>
  31.         <div class="map-wrap skeleton skeleton--map loading" id="map-wrap"></div>
  32.     </div>
  33. {% endblock %}
  35. {%- block javascripts -%}
  36.     {{ parent() }}
  39.     {% if city is defined and city.mapCoordinate.latitude %}
  40.         {% set lat = city.mapCoordinate.latitude %}
  41.         {% set lon = city.mapCoordinate.longitude %}
  42.     {% else %}
  43.         {% set lat = '55.753215' %}
  44.         {% set lon = '37.622504' %}
  45.     {% endif %}
  47.     <script src="{{ asset('bundles/fosjsrouting/js/router.min.js') }}" defer></script>
  48.     <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}" defer></script>
  49.     <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&onload=initMap&ns=ym" defer></script>
  51.     <script>
  52.         const mapConfig = {
  53.             id:"map-wrap",
  54.             multiple_cities:"{{ multipleCities }}",
  55.             routes_url: "{{ multipleCities == 0 ? '/js/fos_js_routes.json' : '/js/fos_js_routes_city_prefixed.json' }}",
  56.             city_uri_identity:"{{ cityUriIdentity }}",
  57.             city_latitude:"{{ lat }}",
  58.             city_longitude:"{{ lon }}",
  59.             locale:"{{ app.request.locale }}",
  60.             path:"{{ path('map.filter', {city:cityUriIdentity}) }}",
  62.             icon_profile:"{{ asset('assets/images/map/profile.svg') }}",
  63.             icon_profile_active:"{{ asset('assets/images/map/profile-active.svg') }}",
  64.             icon_profile_hover:"{{ asset('assets/images/map/profile-hover.svg') }}",
  66.             icon_saloon:"{{ asset('assets/images/map/saloon.svg') }}",
  67.             icon_saloon_active:"{{ asset('assets/images/map/saloon-active.svg') }}",
  68.             icon_saloon_hover:"{{ asset('assets/images/map/saloon-hover.svg') }}",
  70.             icon_masseur:"{{ asset('assets/images/map/masseur.svg') }}",
  71.             icon_masseur_active:"{{ asset('assets/images/map/masseur-active.svg') }}",
  72.             icon_masseur_hover:"{{ asset('assets/images/map/masseur-hover.svg') }}",
  74.             icon_cluster_small:"{{ asset('assets/images/map/cluster-small.svg') }}",
  75.             icon_cluster_medium:"{{ asset('assets/images/map/cluster-medium.svg') }}",
  76.             icon_cluster_big:"{{ asset('assets/images/map/cluster-big.svg') }}",
  78.             avatar_path : "{{ responsive_asset('replace_path', 'profile_media_avatar', "200x280", "jpg") }}",
  79.             photo_path : "{{ responsive_asset('replace_path', 'profile_media', "200x280", "jpg") }}",
  80.             thumb_path : "{{ responsive_asset('replace_path', 'saloon_media_thumb', "200x280", "jpg") }}",
  81.             process_profile_shows_url  : "{{ path('map.increment_profile_shows', multipleCities ? {city:cityUriIdentity} : {}) }}"
  82.         };
  84.         var isMapInitialized = false;
  85.         var yaMapLoaded = false;
  86.         function initMap() {
  87.             //console.log('initMap');
  88.             window.ymap = new ym.Map(document.getElementById('map-wrap'), {
  89.                 center: ["{{ lat }}", "{{ lon }}"],
  90.                 zoom: 8,
  91.                 controls: ['zoomControl', 'typeSelector',  'fullscreenControl']
  92.             });
  93.             yaMapLoaded = true;
  95.             //if (!isMapInitialized) {
  96.             //    console.log('new mapPage initMap');
  97.             //    isMapInitialized = true;
  98.             //    new MapPage(mapConfig);
  99.             //}
  100.         }
  101.         window.profileShowed = function ({id}) {
  102.             if (!id) return;
  104.             fetch('{{ path('profile_ctr.increase_shows') }}', {
  105.                 method: "POST",
  106.                 body: JSON.stringify({ profiles: [id], source: 'map' }),
  107.             });
  108.         }
  110.         window.stations = {
  111.             {%- for station in stations() -%}{{- station.id -}}:{icon:`{%- include 'components/metro/icon_generate.partial.twig' with {data: station|station_lines} -%}`,name:`{{- station.name -}}`},{%- endfor -%}
  112.         };
  113.         document.addEventListener('DOMContentLoaded', function () {
  114.             function loadForm() {
  115.                 fetch('{{ path('map.form', {city: cityUriIdentity}) }}', {
  116.                     mode: "cors",
  117.                     importance: "low",
  118.                     method: "POST",
  119.                     headers: {
  120.                         "Content-Type": "application/x-www-form-urlencoded",
  121.                         "X-Requested-With": "XMLHttpRequest"
  122.                     },
  123.                 }).then(response => {
  124.                     if (response.status < 300) {
  125.                         return response.text();
  126.                     } else {
  127.                         console.warn("🤔");
  128.                         return null;
  129.                     }
  130.                 }).then(response => {
  131.                     document.getElementById('dialog-form').innerHTML = response;
  132.                     filterLoader()
  133.                 });
  134.             }
  135.             loadForm();
  137.             function filterLoader() {
  138.                 const stringifyData = `{"city_id":"${document.getElementById('filter_map_form_city_id').value}","_token":"${document.getElementById('filter_map_form__token').value}"}`;
  140.                 fetch("{{ path('map.filter', {city:cityUriIdentity}) }}", {
  141.                     method: "POST",
  142.                     headers: {
  143.                         'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
  144.                         'X-Requested-With': 'XMLHttpRequest',
  145.                     },
  146.                     body: new URLSearchParams({ form: stringifyData }).toString(),
  147.                 })
  148.                     .then(response => response.json())
  149.                     .then(data => {
  150.                         //console.log('map-data-loaded')
  151.                         const mapLoadedInterval = setInterval(()=>{
  152.                             if (yaMapLoaded) {
  153.                                 new MapPage(mapConfig);
  154.                                 document.dispatchEvent(new CustomEvent('map:data:loaded', { detail: { data, stringifyData } }));
  155.                                 clearInterval(mapLoadedInterval)
  156.                             }
  157.                         }, 200)
  159.                     })
  160.                     .catch(error => console.error(error));
  162.                 //if (!isMapInitialized) {
  163.                 //    console.log('new mapPage filterLoader');
  164.                 //    isMapInitialized = true;
  165.                 //    new MapPage(mapConfig);
  166.                 //}
  167.             }
  168.         })
  169.     </script>
  171. {% endblock %}
  173. {% block modal %}
  174.     {{- parent() -}}
  175.     {{- include('__design/v2023/components/modal/filter.html.twig') -}}
  176. {% endblock %}