templates/recommendations/_profile_recommendations.html.twig line 1

Open in your IDE?
  1. {# <div id="recommendationsDebug">
  2.     {#<div id="queryData" style="display: none;"></div><a href="javascript:void(0);" id="showQueryBtn">Показать запрос</a>#!}
  3.     <div id="profileViewsData">
  4.         <h6 style="color: #1ea471">Просмотры анкет на сайте</h6>
  5.         {% set profile_debug_data = profile_recommendations_debug_views() %}
  6.         {% include "Recommendations/_profile_recommendations_debug_profile_data_table.html.twig" %}
  7.     </div>
  8.     <div id="favouritesData">
  9.         <h6 style="color: #0d5aa7">Избранные</h6>
  10.         {% set profile_debug_data = profile_recommendations_debug_favourites() %}
  11.         {% include "Recommendations/_profile_recommendations_debug_profile_data_table.html.twig" %}
  12.     </div>
  13.     {% include "Recommendations/_profile_recommendations_debug_coeffs_data_table.html.twig" %}
  14.     <h6 style="color: #bd2130">Коэффициенты</h6>
  15.     <div id="coeffsData"></div>
  16.     {% include "Recommendations/_profile_recommendations_debug_viewed_profiles_data_table.html.twig" %}
  17.     <h6 style="color: #856404">Просмотренные рекомендации</h6>
  18.     <div id="viewedRecommendationsData"></div>
  19. </div> #}
  21. {% set isHiddenPlacement = hidden is defined and hidden %}
  23. <div class="recommended{{ componentClass is defined ? ' ' ~ componentClass : '' }}"{{ isHiddenPlacement ? ' style="display:none"' : '' }} id="profileRecommendations">
  24.     <h2 class="border-line">Рекомендуемые</h2>
  26.     <div class="recommended-list d-flex" id="profileRecommendationsContainer">
  27.         {% for i in 1..6 %}
  28.             <div class="recommended-item recommended-item--skeleton">
  29.                 <div class="recommended-profile">
  30.                     <div class="d-block recommended-link">
  31.                         <div class="recommended-heading skeleton"></div>
  32.                         <div class="recommended-avatar skeleton"></div>
  33.                     </div>
  34.                     <div class="d-flex align-items-center recommended-info skeleton"></div>
  35.                     <div class="d-flex align-items-center recommended-metro skeleton"></div>
  36.                 </div>
  37.             </div>
  38.         {% endfor %}
  39.     </div>
  40. </div>
  43. <script type="text/javascript">
  44.     document.addEventListener('DOMContentLoaded', function() {
  45.         const sortLines = (data) => {
  46.             {#// Инициализация объекта для хранения станций в соответствии с их типом#}
  47.             const sortedStations = data.reduce((acc, station) => {
  48.                 if (station.name.startsWith('МЦД-')) {
  49.                     acc.mcd.push(station);
  50.                 } else if (station.name === 'МЦК') {
  51.                     acc.mck.push(station);
  52.                 } else {
  53.                     acc.ordinary.push(station);
  54.                 }
  55.                 return acc;
  56.             }, { ordinary: [], mcd: [], mck: [] });
  58.             {#// Сортировка станций МЦД по номеру#}
  59.             sortedStations.mcd.sort((a, b) => {
  60.                 const numA = parseInt(a.name.split('МЦД-')[1]);
  61.                 const numB = parseInt(b.name.split('МЦД-')[1]);
  62.                 return numA - numB;
  63.             });
  65.             {#// Объединение отсортированных станций#}
  66.             const result = [
  67.                 ...sortedStations.ordinary,
  68.                 ...sortedStations.mcd,
  69.                 ...sortedStations.mck
  70.             ];
  72.             return result;
  73.         };
  75.         const iconMetroSingle = ({color, iconId, width = '18'}) => {
  76.             return `<svg class="modal-list__icon" width="${width}" height="18">
  77.                 <use style="fill:#${color}" class="icon-container--element" xlink:href="#${iconId}"></use>
  78.             </svg>`
  79.         };
  81.         const iconMetroDouble = ({color1, color2}) => `
  82.             <svg class="modal-list__icon" width="17" height="16" fill="none">
  83.                 <path fill="#8E8E8E" d="M3.7 8.83h-.77v1.04h3.94V8.83H5.7l.76-2.59L8.5 9.96l2.03-3.72.76 2.6h-1.16v1.03h3.94V8.83h-.78L10.7 2 8.5 6.51 6.3 2 3.7 8.83Z"/>
  84.                 <rect width="7" height="3" x=".5" y="11.02" fill="#${color1}" rx="1.5"/>
  85.                 <rect width="7" height="3" x="9.5" y="11" fill="#${color2}" rx="1.5"/>
  86.             </svg>`;
  88.         const iconMetroTriple = ({color1, color2, color3}) => `<svg class="modal-list__icon" width="17" height="16" fill="none">
  89.                 <path fill="#8E8E8E" d="M3.7 8.83h-.77v1.04h3.94V8.83H5.7l.76-2.59L8.5 9.96l2.03-3.72.76 2.6h-1.16v1.03h3.94V8.83h-.78L10.7 2 8.5 6.51 6.3 2 3.7 8.83Z"/>
  90.                 <rect width="4" height="3" x=".5" y="11.02" fill="#${color1}" rx="1.5"/>
  91.                 <rect width="4" height="3" x="6.5" y="11.02" fill="#${color2}" rx="1.5"/>
  92.                 <path fill="#${color3}" d="M12.5 12.5c0-.83.67-1.5 1.5-1.5h1a1.5 1.5 0 0 1 0 3h-1a1.5 1.5 0 0 1-1.5-1.5Z"/>
  93.             </svg>`;
  95.         const getAllData = (s) => [s.color, s.name];
  96.         const getIconId = (name) => name.toLowerCase().includes('мцк') ? 'mck' : (name.toLowerCase().includes('мцд') ? 'mcd-' + name.split('-')[1] : 'metro');
  97.         const getIconWidth = (name) => name.toLowerCase().includes('мцд') ? '22' : '16';
  98.         const wrapperIcon = (str) => `<span class="modal-list__icons d-flex">${str}</span>`;
  99.         const wrapperLink = (html, _name) => `<a class="modal-list__icons d-flex"  href="${window._mp.stations[_name]}">${html}</a>`;
  101.         function iconGen2({name, dataLines}) {
  102.             {#//for test#}
  103.             const root = document.getElementById('icon-test-gen2');
  105.             const lines = sortLines(dataLines);
  107.             const count = lines.length;
  109.             {#// Если линия 1шт#}
  110.             if (count === 1){
  111.                 {#// Получаем данные по цветам и названиям линии#}
  112.                 const [color, line_name] = getAllData(lines[0]);
  113.                 {#// Иконка может быть обычным метро, мцд с номером или мцк#}
  114.                 const iconId = getIconId(line_name);
  115.                 const width = getIconWidth(line_name);
  117.                 return wrapperLink(wrapperIcon(iconMetroSingle({color, iconId, width})+ name), name);
  119.                 {#//return wrapperIcon(iconMetroSingle({color, iconId, width}));#}
  120.             } else if (count === 2) {
  121.                 const [[color1, name1], [color2, name2]] = lines.map(getAllData);
  122.                 const iconId1 = getIconId(name1);
  123.                 const iconId2 = getIconId(name2);
  125.                 {#// Если обе иконки это метро#}
  126.                 if (iconId1 === 'metro' && iconId2 === 'metro') {
  127.                     return wrapperLink(wrapperIcon(`${iconMetroDouble({color1, color2})} ${name}`), name);
  128.                 } else {
  129.                     const width1 = getIconWidth(name1);
  130.                     const width2 = getIconWidth(name2);
  131.                     return wrapperLink(wrapperIcon(`${iconMetroSingle({ color: color1, iconId: iconId1, width: width1 })}${iconMetroSingle({ color: color2, iconId: iconId2, width: width2 })} ${name}`), name);
  132.                 }
  133.             } else if (count === 3) {
  134.                 const [[color1, name1], [color2, name2], [color3, name3]] = lines.map(getAllData);
  135.                 const iconId1 = getIconId(name1);
  136.                 const iconId2 = getIconId(name2);
  137.                 const iconId3 = getIconId(name3);
  139.                 if (iconId1 === 'metro' && iconId2 === 'metro' && iconId3 === 'metro') {
  140.                     return wrapperLink(wrapperIcon(`${iconMetroTriple({color1, color2, color3})} ${name}`), name);
  141.                 } else if (iconId1 === 'metro' && iconId2 === 'metro') {
  142.                     const width3 = getIconWidth(name3);
  143.                     return wrapperLink(wrapperIcon(`${iconMetroDouble({color1, color2})}${iconMetroSingle({ color: color3, iconId: iconId3, width: width3 })} ${name}`), name);
  144.                 } else {
  145.                     const width1 = getIconWidth(name1);
  146.                     const width2 = getIconWidth(name2);
  147.                     const width3 = getIconWidth(name3);
  148.                     return wrapperLink(wrapperIcon(`${iconMetroSingle({ color: color1, iconId: iconId1, width: width1 })}${iconMetroSingle({ color: color2, iconId: iconId2, width: width2 })}${iconMetroSingle({ color: color3, iconId: iconId3, width: width3 })} ${name}`), name);
  149.                 }
  150.             } else if (count === 4) {
  151.                 const [[color1, name1], [color2, name2], [color3, name3], [color4, name4]] = lines.map(getAllData);
  152.                 const iconId1 = getIconId(name1);
  153.                 const iconId2 = getIconId(name2);
  154.                 const iconId3 = getIconId(name3);
  155.                 const iconId4 = getIconId(name4);
  157.                 if (iconId1 === 'metro' && iconId2 === 'metro' && iconId3 === 'metro') {
  158.                     const width4 = getIconWidth(name4);
  159.                     return wrapperLink(wrapperIcon(`${iconMetroTriple({color1, color2, color3})}${iconMetroSingle({ color: color4, iconId: iconId4, width: width4 })} ${name}`), name);
  160.                 } else if (iconId1 === 'metro' && iconId2 === 'metro') {
  161.                     const width3 = getIconWidth(name3);
  162.                     const width4 = getIconWidth(name4);
  163.                     return wrapperLink(wrapperIcon(`${iconMetroDouble({color1, color2})}${iconMetroSingle({ color: color3, iconId: iconId3, width: width3 })}${iconMetroSingle({ color: color4, iconId: iconId4, width: width4 })} ${name}`), name);
  164.                 } else {
  165.                     const width1 = getIconWidth(name1);
  166.                     const width2 = getIconWidth(name2);
  167.                     const width3 = getIconWidth(name3);
  168.                     const width4 = getIconWidth(name4);
  169.                     return wrapperLink(wrapperIcon(`${iconMetroSingle({ color: color1, iconId: iconId1, width: width1 })}${iconMetroSingle({ color: color2, iconId: iconId2, width: width2 })}${iconMetroSingle({ color: color3, iconId: iconId3, width: width3 })}${iconMetroSingle({ color: color4, iconId: iconId4, width: width4 })} ${name}`), name);
  170.                 }
  171.             }
  173.             return wrapperLink(name, name);
  174.         }
  176.         function fetchRecommendations() {
  177.             {% set gender = 'profile_list.list_by_gender' in app.request.get('_route') ? app.request.get('gender')|gender_value_by_uri : gender_female() %}
  178.             let url = '{{ path('recommendations.get', {city:app.request.get('city').uriIdentity, count: 6, imageSize: '357x500', exclude: (excludeRecommendationProfileIds is iterable ? excludeRecommendationProfileIds : [])|join(','), gender: gender }) }}';
  179.             let filter = JSON.parse('{{ recommendationSpec ? recommendationSpec.spec.toEsQueryObject|json_encode|raw : {}|json_encode|raw }}');
  180.             const profileContainer = document.getElementById('profileRecommendations');
  182.             window.Recommendation.updateSettings({
  183.                 rootId: 'profileRecommendations',
  184.                 url,
  185.                 filter,
  186.                 callback: (response) => {
  187.                     let template = '';
  188.                     const container = document.querySelector('#profileRecommendationsContainer');
  190.                     container.innerHTML = '';
  191.                     response.profiles.forEach(function(profile) {
  192.                         const {station, price, phone} = profile;
  193.                         template = `
  194.                             <a class="d-block recommended-link" href="${profile.url}" target="_blank">
  195.                                 <p class="recommended-heading">
  196.                                     ${profile.approved ? `<svg class="icon">
  197.                                         <use xlink:href="{{ asset('assets_domain/images/icons/svg-library.svg', 'nodomainConfig') }}#icon-verify-new"></use>
  198.                                     </svg>` : ''}
  199.                                     <span class="recommended-name"><span class="name">${profile.name}</span>, <span class="age">${profile.age}</span></span>
  200.                                 </p>
  201.                                 <div class="recommended-avatar">
  202.                                     <img class="recommended-avatar-img" src="${profile.image}" alt="" width="281" height="394" loading="lazy">
  203.                                 </div>
  204.                             </a>
  205.                             <div class="d-flex align-items-center recommended-info">
  206.                                 <div class="recommended-phone phone">${phone}</div>
  207.                                 ${price ? `<div class="ml-auto recommended-price price">от ${price.toLocaleString('ru')}</div>` : ''}
  208.                             </div>
  209.                             <div class="d-flex align-items-center recommended-metro">
  210.                                 ${station ? `<div class="metro-item d-flex">${iconGen2({name: station.name, dataLines: station.lines})}</div>` : ''}
  211.                             </div>
  212.                         `;
  213.                         const node = document.createElement('div');
  214.                         node.className = 'recommended-item';
  215.                         node.dataset.profileId = profile.id;
  216.                         node.innerHTML = `<div class="recommended-profile">${template}</div>`;
  217.                         container.appendChild(node);
  218.                     });
  220.                     profileContainer.style.display = 'block';
  222.                     document.dispatchEvent(new CustomEvent('recommendations:loaded', {detail: {id: 'recommendations'}}));
  223.                 }
  224.             });
  225.             {% if not isHiddenPlacement %}window.Recommendation.loadRecommendations();{% endif %}
  226.         }
  228.         window.ObserverJakka({
  229.             id: 'recommendations',
  230.             callback: () => {
  231.                 fetchRecommendations();
  232.             },
  233.             options: {
  234.                 rootMargin: '120px'
  235.             }
  236.         });
  237.     });
  238. </script>