,\n // В случае если характеристики \"развёрнуты\", то выводим все, но добавляем им класс compare-same\n // чтобы одинаковые значения были серенькими\n // Если не развёрнуты, то выводим все.\n ...(props.category.children).map((category_item, i) => {\n const class_names = classNames({\n \"sub-param\": true,\n \"compare-same\": expanded && category_item.hidden,\n \"hidden-row\": props.visible_variants.length > 1 && category_item.hidden && !expanded,\n \"cross-hover\": props.visible_variants.length > Constants.VERTICAL_CROSS_HOVER_MIN && props.crossHovered[0] == `${props.category_index}.${i}`\n })\n return (\n
\n
\n
{category_item.name}
\n
\n \n
\n )\n })\n ]\n}\n","// \"специальный\" параметр для галочки \"Показать отличия\", его название в URL.search\nexport const HIDESAME_PARAM = 'hidesame'\n// \"специальный\" параметр для скрытия комплектаций. Принимает цифровое значение\n// которое является битовой маской. Скрытие первой комплектации - первый бит справа 0b1 = 1,\n// скрытие второй комплектации - второй бит справа (0b10=2), скрытие и первой и второй\n// комплектации - первый и второй бит (0b11 = 3)\nexport const FILTER_VARIANTS_PARAM = 'filter_variants'\n// \"специальный\" параметр для разворачивания свёрнутых характеристик при включенной\n// галочке \"Показать отличия\", тоже работает как битовая маска\nexport const COLLAPSE_PARAM = 'collapse'\n\nexport const COMPLETIONS_NAMES = [\"комплектация\", \"комплектации\", \"комплектаций\"]\nexport const HIDDEN_NAMES = [\"скрыта\", \"скрыто\", \"скрыто\"]\nexport const SAME_NAMES = [\"одинаковая\", \"одинаковых\", \"одинаковых\"]\nexport const DIFFERENT_NAMES = [\"разная\", \"разных\", \"разных\"]\n\nexport const COLLAPSE_TEXT = \"свернуть ▴\"\nexport const EXPAND_TEXT = \"развернуть ▾\"\n\nexport const VERTICAL_CROSS_HOVER_MIN = 2","import React from \"react\"\nimport * as Constants from \"./CompareConstants\"\n\n// Компонент для отрисовки блока с выбранными фильтрами и кнопки возврата в исходное состояние\n// @param variants - глобальный объект комплектаций\n// @param searchParams - объект GET-параметров, тип URLSearchParams\n// @param setParamsHandler - функция, для изменения GET-параметров\nexport default function CompareFilter (props) {\n const overall_count = props.variants.list.length\n const hidden_count = props.variants.list.filter(v => v.hidden).length\n const visible_count = overall_count - hidden_count\n\n function resetFilterHandler(e) {\n e.preventDefault()\n props.setParamsHandler(prevParams => {\n [...prevParams.entries()].forEach(([key, value]) => prevParams.delete(key))\n return prevParams\n })\n }\n\n function filterClickHandler(event, item) {\n event.preventDefault()\n props.setParamsHandler(prevParams => {\n prevParams.delete(item.param)\n return prevParams\n })\n }\n\n function getFilterNames(key, value) {\n const value_name = Object.keys(props.variants.urlparams).find(k => props.variants.urlparams[k] === value)\n const key_name = Object.keys(props.variants.urlparams).find(k => props.variants.urlparams[k] === key)\n\n let name = value_name\n let full_name = key_name + ': ' + value_name\n\n if (key == 'filter_variants') {\n const hidden_variants_count = parseInt(value).toString(2).match(/1/g).length\n name = `- ${hidden_variants_count} ${russianPlural(hidden_count, ...Constants.COMPLETIONS_NAMES)}`\n full_name = 'Скрытые комплектации'\n }\n else if (value == 'yes') {\n // это чекбокс\n name = key_name\n full_name = key_name + ': есть'\n }\n else if (value == 'no') {\n // это чекбокс\n name = key_name\n full_name = key_name + ': нет'\n }\n\n return [name, full_name]\n }\n const base_url = location.href.split('?')[0]\n\n let filter_items = [...props.searchParams.entries()].map(([key, value]) => {\n if (key == 'hidesame' || key == 'collapse') return null\n const [name, full_name] = getFilterNames(key, value)\n // Для каждого элемента фильтра нужно сгенерировать ссылку, при открытии которой\n // будет такой же фильтр, но без параметра этого элемента\n const target_params = new URLSearchParams(props.searchParams.toString())\n target_params.delete(key)\n const target_params_string = target_params.toString()\n return {\n name: name,\n full_name: full_name,\n param: key,\n href: target_params_string.length > 0? '?' + target_params_string: base_url\n }\n }).filter(i => i)\n\n return (\n
\n )\n}","import * as Constants from \"./CompareConstants\"\nimport { useState } from \"react\"\n\n// Основная функция, помечает видимость комплектациям и отдельным характеристикам,\n// по которым затем реакт отрисовывает таблицу и производит манипуляции в DOM\n// @param variants - данные, полученные в JSON при отрисовке компонента CompareVehicle\n// @param searchParams - объект типа URLSearchParams, параметры текущего GET-запроса\nexport function updateVariantsData(variants, searchParams) {\n // Снимаем ограничение видимости со всех комплектаций\n variants.list.forEach(variant => {\n variant.hidden = false\n });\n\n // Скрытие комплектаций по битовой маске\n const filter_variants = searchParams.get(Constants.FILTER_VARIANTS_PARAM)\n if (filter_variants > 0) {\n variants.list.forEach((variant, index) => {\n if (filter_variants & Math.pow(2, index)) {\n variant.hidden = true\n }\n });\n }\n\n // Проходим по всем оставшимся значениям кроме \"специальных\"\n const rest_params = [...searchParams.entries()]\n .filter(item => [\n Constants.FILTER_VARIANTS_PARAM,\n Constants.HIDESAME_PARAM,\n Constants.COLLAPSE_PARAM].indexOf(item[0]) == -1\n )\n rest_params.map(([key, value]) => {\n variants.data.forEach(cat => {\n cat.children.forEach(cat_item => {\n if (variants.urlparams[cat_item.name] == key) {\n // Отфильтровываем все комплектации у которых значение отличается от выбранного в URL\n cat_item.children.forEach((item_value, variant_index) => {\n if (variants.urlparams[item_value] != value) {\n variants.list[variant_index].hidden = true\n }\n })\n }\n })\n })\n })\n\n if (searchParams.get(Constants.HIDESAME_PARAM)) {\n // Скрываем все характеристики где параметры одинаковые\n variants.data.forEach(cat => {\n cat.children.forEach(cat_item => {\n // Находим уникальные значения для всех видимых комплектаций\n if (_.unique(cat_item.children.filter((a, i) => !variants.list[i].hidden)).length == 1) {\n cat_item.hidden = true\n }\n else {\n cat_item.hidden = false\n }\n })\n })\n }\n else {\n // Возвращаем видимость всем характеристикам\n variants.data.forEach(cat => {\n cat.children.forEach(cat_item => {\n cat_item.hidden = false\n })\n })\n }\n\n return variants\n}\n\nexport function useControllerSearchParams(model_id, link) {\n let [searchParams, setSearchParams] = useState(() => new URLSearchParams(location.search))\n\n const stateMachineSetSearchParams = function(callback) {\n setSearchParams(prevParams => {\n // Необходимо создать новый объект URLSearchParams чтобы react видел что объект изменился\n const newParams = callback(new URLSearchParams(prevParams.toString()))\n\n if (window.stateMachine.compare) {\n let search = newParams.toString()\n window.stateMachine.pushState({model: model_id, compare: true}, link + (search.length > 0? '?' + search: ''))\n }\n return newParams\n })\n }\n if (!window.stateMachine.compare_set) {\n window.stateMachine.compare_set = setSearchParams\n }\n\n return [searchParams, stateMachineSetSearchParams]\n}","import React, { Suspense } from \"react\"\nimport { BrowserRouter as Router, Routes, Route } from \"react-router-dom\"\n\nconst CompareTable = React.lazy(() => import('./CompareTable'))\n\n// Базовый компонент для сравнения комплектаций\nexport default function CompareRoot (props) {\n return (\n \n \n {/*} />*/}\n }>\n \n \n } />\n \n \n )\n}\n","import React, { useMemo, useState, useEffect } from \"react\"\nimport CompareFilter from './CompareFilter'\nimport CompareToggleDifferences from './CompareToggleDifferences'\nimport CompareVariantNames from './CompareVariantNames'\nimport CompareCategory from './CompareCategory'\nimport { updateVariantsData, useControllerSearchParams } from \"./CompareHelper\"\nimport classNames from \"classnames\"\nimport * as Constants from \"./CompareConstants\"\n\n// Компонент для прорисовки всей таблицы\n// @param variants - массив из комплектаций в виде {name: <название>, price: <цена>}\n// @param variants_data - массив из категорий характеристик в виде {name: <название>, children: <массив характеристик>}\n// @param urlparams - Hashmap из всех текстов (в ключах) и соответствие их SEO-написанию (в значениях)\n// @param model_id - ID модели в базе\n// @param model_name - название модели\nexport default function CompareTable (props) {\n // параметры из GET-запроса, а также callback для их дальнейшего изменения\n let [searchParams, setSearchParams] = useControllerSearchParams(props.model_id, props.link);\n\n // Состояние с текущими данными комплектаций и их характеристик, а также callback для их изменения\n let [variants, setVariants] = useState(\n // мы должны провести первоначальную обработку данных, чтобы текущий открытый URL\n // влиял на выводимые данные.\n // Далее состояние будет меняться при помощи setVariants(prev => ...)\n updateVariantsData(props, searchParams)\n )\n\n // Хука, которая следит за изменением состояния searchParams\n useEffect(() => {\n // здесь происходит \"магия\" - в зависимости от накликанных юзером параметров, мы меняем данные по комплектациям\n // и затем меняем состояние, в результате запускается рендер всего компонента и React меняет соответствующий HTML\n setVariants(prevVariants => updateVariantsData(prevVariants, searchParams));\n }, [searchParams])\n\n // Состояние для управления текущей подсвечиваемой строкой и столбцом, куда пользователь поставил курсор мыши\n let [crossHovered, setCrossHovered] = useState([null, null])\n\n const visible_variants = variants.list.filter((v) => !v.hidden)\n\n return (\n
\n )\n}\n","import React from \"react\"\nimport classNames from \"classnames\"\n\n// Компонент для отрисовки ячеек таблицы со значениями характеристик\n// @param categoryKey - идентификатор категории и подкатегории\n// @param cells - список ячеек, массив\n// @param variants - глобальный объект комплектаций\n// @param visible_variants - видимые комплектации\n// @param propName - название характеристики, строка, например: \"Длина кузова\"\n// @param searchParams - объект GET-параметров, тип URLSearchParams\n// @param setParamsHandler - функция, для изменения GET-параметров\n// @param crossHovered - массив из двух элементов, ряд и номер ячейки на которую\n// наведён курсор мыши, для подстветки\n// @param setCrossHovered - функция, для изменения crossHovered\nexport default function CompareTableCells (props) {\n // Если есть различающиеся параметры у видимых комплектаций\n const may_click = _.unique(props.cells.filter((a, i) => !props.variants.list[i].hidden)).length > 1\n\n function onClickHandler(event, key, value) {\n event.stopPropagation()\n props.setParamsHandler(function(prevParams) {\n if (prevParams.get(key)) {\n prevParams.delete(key)\n }\n else {\n prevParams.set(key, value)\n }\n return prevParams\n })\n }\n\n function onMouseOverHandler(event, index) {\n props.setCrossHovered(prevHover => {\n return [props.categoryKey, index]\n })\n }\n\n return props.cells.map((item, i) => {\n const is_hidden = props.variants.list[i].hidden // эта комплектация скрыта\n const key = props.variants.urlparams[props.propName]\n const value = props.variants.urlparams[item]\n const is_checked = props.searchParams.get(key) == value\n return (\n
2\n })\n }\n key={i}\n title={may_click ? \"выбрать все с таким параметром\": \"\"}\n onClick={may_click? (e) => onClickHandler(e, key, value): null}\n onMouseOver={(e) => onMouseOverHandler(e, i)}\n >\n { may_click && \n // Чекбокс намеренно заведён под следующий элемент и некликабельный.\n // Отрисовка состояния чекбокса производится реактом.\n }\n
{item == ' '? '–': item}
\n
\n )\n })\n}","import React from \"react\"\nimport {HIDESAME_PARAM} from './CompareConstants'\n\n// Компонент для отрисовки галочки \"Показать отличия\"\n// @param visible_variants - список всех выводимых комплектаций\n// @param value - текущее значение галочки, true/false\n// @param setParamsHandler - функция, для изменения GET-параметров\nexport default function CompareToggleDifferences (props) {\n function toggleHideSame(event) {\n props.setParamsHandler(function(prevParams) {\n if (event.target.checked) {\n prevParams.set(HIDESAME_PARAM, 1)\n }\n else {\n prevParams.delete(HIDESAME_PARAM)\n }\n return prevParams\n })\n return true\n }\n\n return (\n \n )\n}","import React from \"react\"\nimport * as Constants from \"./CompareConstants\"\nimport classNames from \"classnames\"\n\n// Компонент для отрисовки заголовка таблицы с названиями комплектаций\n// у каждой комплектации есть галочка, которая скроет эту комплектацию в таблице\n// @param visible_variants - видимые комплектации\n// @param variants - глобальный объект комплектаций\n// @param setParamsHandler - функция, для изменения GET-параметров\n// @param crossHovered - массив из двух элементов, ряд и номер ячейки на которую\n// наведён курсор мыши, для подстветки\nexport default function CompareVariantNames (props) {\n function optOutVariantHandler(event, variant) {\n event.preventDefault()\n const variant_index = props.variants.list.indexOf(variant)\n\n props.setParamsHandler(prevParams => {\n const current_value = prevParams.get(Constants.FILTER_VARIANTS_PARAM) || 0\n prevParams.set(Constants.FILTER_VARIANTS_PARAM, current_value | Math.pow(2, variant_index))\n return prevParams\n })\n }\n\n function onClickHandler(event, variant) {\n window.stateMachine.pushState({model: props.variants.model_id, variant: variant.id, tab: \"\"}, decodeURI(variant.link))\n event.preventDefault()\n }\n\n return props.variants.list.map((variant, i) => {\n return