From b18fdfbaf2492a17d723aeb640b449ae3de5da5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BD=D0=B4=D1=80=D0=B5=D0=B9=20=20=D0=9B=D0=B0=D1=80?=
 =?UTF-8?q?=D0=B8=D0=BE=D0=BD=D0=BE=D0=B2?= <alarionov@nologostudio.ru>
Date: Thu, 16 Mar 2023 19:57:02 +0700
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=BA=D1=80=D0=B8=D0=BF=D1=82=20js=20=D0=BF?=
 =?UTF-8?q?=D0=BE=20=D0=BF=D0=BE=D0=B2=D0=BE=D0=B4=D1=83=20=D0=BA=D0=B0=D1=80?=
 =?UTF-8?q?=D1=82=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/Http/Controllers/MainController.php |    6 +-
 public/js/main.js                       |    6 +-
 resources/views/mapsobj.blade.php       |  155 +++++++++++++++++++++++++++++++
 3 files changed, 163 insertions(+), 4 deletions(-)

diff --git a/app/Http/Controllers/MainController.php b/app/Http/Controllers/MainController.php
index 37ac93b..ba86d32 100644
--- a/app/Http/Controllers/MainController.php
+++ b/app/Http/Controllers/MainController.php
@@ -270,7 +270,11 @@ class MainController extends Controller
      * Избранное
      */
     public function Favorite(Request $request) {
-        $Arr = json_decode($_COOKIE['favorite_house'], true);
+        if (empty($_COOKIE['favorite_house'])) {
+            $Arr = Array();
+        } else {
+            $Arr = json_decode($_COOKIE['favorite_house'], true);
+        }
         if (!empty($Arr) && is_array($Arr)) {
             $houses = House::with('areas')->whereIn('id', $Arr);
 
diff --git a/public/js/main.js b/public/js/main.js
index f5be49d..25fc888 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -29,7 +29,7 @@ class App {
         this.sendForm('.js_popup_sending_form_', '[data-popup="success"]');
         //this.sendOffer(); //отправка предложения по e-mail;
 
-        this.setGeneralMap(); // карта на странице карт;
+        //this.setGeneralMap(); // карта на странице карт;
         this.setComplexMap('complex-map', [55.726591050908745, 37.57244549999999], 'ЖК Садовые кварталы'); // карта на странице 'ЖК';
         this.setComplexMap('offer-map', [55.70851106903402, 37.65864349999999], 'Аренда торгового помещения 321,6 м2'); // карта на странице 'Предложение';
         this.setCatalogSorts(); // сортировка на странице 'каталог';
@@ -1206,7 +1206,7 @@ class App {
 
     // карта на странице карт;
     setGeneralMap() {
-
+/*
         if (document.querySelector('#general-map')) {
 
             ymaps.ready(init); // Дождёмся загрузки API и готовности DOM;
@@ -1358,7 +1358,7 @@ class App {
         }
 
     };
-
+*/
 
     // аккордеон в футере
     setFooterSpoilers() {
diff --git a/resources/views/mapsobj.blade.php b/resources/views/mapsobj.blade.php
index b0a5256..fecb78c 100644
--- a/resources/views/mapsobj.blade.php
+++ b/resources/views/mapsobj.blade.php
@@ -6,6 +6,161 @@
 
 @section('custom_js')
     @include('js.filter_value')
+    <script>
+        setGeneralMap() {
+
+            if (document.querySelector('#general-map')) {
+
+                ymaps.ready(init); // Дождёмся загрузки API и готовности DOM;
+
+                function init() {
+
+                    const myMap = new ymaps.Map('general-map', { // Создание экземпляра карты и его привязка к контейнеру с заданным id;
+                        center: [55.752933963675126, 37.52233749962665], // При инициализации карты обязательно нужно указать её центр и коэффициент масштабирования;
+                        zoom: 10,
+                        controls: [] // Скрываем элементы управления на карте;
+                    });
+
+                    // Создаём макет содержимого.
+                    const MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
+                        '<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
+                    );
+
+                    let collection = new ymaps.GeoObjectCollection(null, { // Создаём коллекцию, в которую будемпомещать метки (что-то типа массива);
+                        // preset: 'islands#yellowIcon'
+                    });
+
+                    let collectionCoords = [ // Создаём массив с координатами (координаты должны располагаться в том же порядке, что и адреса в списке на сайте);
+                        [55.867783219108354, 37.392867499999916],
+                        [55.728043075486504, 37.73937949999994],
+                        [55.72624100423305, 37.476078499999964],
+                        [55.80751105044832, 37.449622999999974],
+                        [55.601783098948836, 37.36700499999998],
+                        [55.86086502152225, 37.540348999999964],
+                        [55.784961528728715, 37.56188599999996],
+                        [55.63910010399773, 37.319407999999996],
+                        [55.55819256767507, 37.55711549999994],
+                        [55.79829252928473, 37.52063549999999],
+                    ];
+
+                    for (let i = 0, l = collectionCoords.length; i < l; i++) { // C помощью цикла добавляем все метки в коллекцию;
+                        collection.add(new ymaps.Placemark(collectionCoords[i]));
+                        collection.get(i).properties.set('iconContent', `${i + 1}`); // Добавляем каждой метке порядковый номер, записываем его в свойство 'iconContent';
+                    }
+
+                    myMap.geoObjects.add(collection); // Добавляем коллекцию с метками на карту;
+
+                    collection.options.set('iconLayout', 'default#imageWithContent'); // Необходимо указать данный тип макета;
+                    collection.options.set('iconImageHref', 'images/mark-complex.svg'); // Своё изображение иконки метки;
+                    collection.options.set('iconImageSize', [52, 67]); // Размеры метки;
+                    collection.options.set('iconImageOffset', [-26, -67]); // Смещение левого верхнего угла иконки относительно её "ножки" (точки привязки);
+                    collection.options.set('iconContentOffset', [0, 17]);
+                    collection.options.set('iconContentLayout', MyIconContentLayout); // Смещение левого верхнего угла иконки относительно её "ножки" (точки привязки);
+
+                    const pageMapBar = document.querySelector('.js_page_map_bar');
+                    const pageMapBarBtn = pageMapBar.querySelector('.js_page_map_bar_btn');
+                    const pageMapBarList = pageMapBar.querySelector('.js_page_map_bar_list');
+                    const pageMapBarCards = pageMapBar.querySelectorAll('.card-news');
+
+                    const showCard = (i) => {
+
+                        pageMapBarCards.forEach((card, k) => {
+
+                            card.classList.remove('active');
+
+                            if (i == k) {
+                                card.classList.add('active');
+                            }
+
+                        });
+
+                    };
+
+                    const hidecard = () => {
+
+                        pageMapBarCards.forEach(card => {
+                            card.classList.remove('active');
+                        });
+
+                    }
+
+                    let pageMapBarItems;
+
+                    pageMapBarBtn.addEventListener('click', () => {
+                        pageMapBar.classList.toggle('active');
+                    });
+
+                    pageMapBarList.addEventListener('click', (e) => {
+
+                        if (e.target.closest('.page-map-bar__item')) {
+
+                            pageMapBarItems = pageMapBarList.querySelectorAll('.page-map-bar__item');
+
+                            pageMapBarItems.forEach((item, i) => {
+
+                                if (e.target == item && e.target.classList.contains('active')) {
+
+                                    item.classList.remove('active');
+
+                                    hidecard();
+
+                                } else if (e.target == item) {
+
+                                    pageMapBarItems.forEach(item => {
+                                        item.classList.remove('active');
+                                    });
+
+                                    item.classList.add('active');
+
+                                    let offsetCoords = collection.get(i).geometry.getCoordinates();
+
+                                    offsetCoords = [
+                                        offsetCoords[0] - 0.0025,
+                                        offsetCoords[1]
+                                    ];
+
+                                    myMap.setZoom(16);
+                                    // myMap.setCenter(collection.get(i).geometry.getCoordinates());
+                                    myMap.setCenter(offsetCoords);
+
+                                    showCard(i);
+
+                                }
+
+                            });
+                        }
+
+                    });
+
+                    collection.events.add('click', function (e) {
+
+                        for (let i = 0, l = collection.getLength(); i < l; i++) {
+
+                            if (e.get('target') == collection.get(i)) {
+
+                                pageMapBarItems = pageMapBarList.querySelectorAll('.page-map-bar__item');
+
+                                pageMapBarItems.forEach((item) => {
+                                    pageMapBar.classList.add('active');
+                                    item.classList.remove('active');
+                                });
+
+                                pageMapBarItems[i].classList.add('active');
+
+                                showCard(i);
+
+                            }
+
+                        }
+
+                    });
+
+                }
+
+            }
+
+        };
+    </script>
 @endsection
 
 @section('content')
-- 
1.7.10.4