Microsoft Word фккпі 2021 122 Єфремова Д.Є. docx
Створення інтерфейсу головної сторінки
жүктеу/скачать 4,21 Mb.
|
- Бұл бет үшін навигация:
- Створення інтерфейсу сторінки фільтру
Створення інтерфейсу головної сторінкиГоловна сторінка WEB–додатку YOCar повинна містити навігацію до будь-якої іншої сторінки. Саме тому зверху екрану буде розміщене випадаюче меню. Зверху повинні бути доступні кнопки фільтру та перегляду доступних автомобілів на мапі, а сітка автомобілів має бути зручною для прокручування та порівнювання запропонованих варіантів. На рис. 3.7. зображена головна сторінка WEB–додатку YOCar. Рис. 3.7. Головна сторінка WEB–додатку Якщо прогорнути сторінку донизу, то з’явиться кнопка «Більше» (рис.3.8), що завантажить більше варіантів для вибору. Рис. 3.8. Кнопка «Більше» на головному екрані Випадаюче меню профілю, що зображене на рис. 3.9, містить такі пункти як: запити, редагування профілю, перегляд профілю та вихід з профілю. Поява цього меню відбувається за рахунок використання JavaScript. До блоку, що має стиль відображення display: none, при натисканні додається новий клас, який змінює відображення цього блоку на display: flex. Рис. 3.9. Відкриття випадаючого меню Створення інтерфейсу сторінки фільтруСторінка фільтрів відкривається при натисканні відповідної кнопки на головній сторінці. Відфільтрувати вміст головної сторінки можна за наступними параметрами: клас авто; вартість; тип пального; тип трансмісії; маркер вільно; розташування. Для того щоб створити повзунок ціни, спочатку потрібно знайти повзунок з схожим функціоналом в Інтернеті, скачати його та перемісти в необхідну папку для подальшого використовування. Наступним кроком необхідно підключити скрипт перед код наведений нижче: Параметр містить ключ API, який можна купити. Написання власного JavaScript, який використовує API для додавання карти з маркером на ньому. Для цього створюється функція, в якій створюються координати центру мапи, задається сила зуму та стиль самої мапи, який обирається в безкоштовних ресурсах. Також було вирішено вимкнути стандартні кнопки на мапі, щоб користувачу нічого не заважало керувати нею [15]. function initGmapsContacts() { var coordinateCenter = {lat: 50.4128887, lng: 30.5325584}; const map = new google.maps.Map(document.querySelector('#contact- map'), { center: coordinateCenter, zoom: 15, disableDefaultUI: true, styles:… }); На рис. 3.13 зображений результат написаного коду: Рис. 3.13. Відображення стилів мапи у WEB–додатку Наступним кроком необхідно створити маркер, який буде вказувати на розміщення вільної автівки на мапі. Це реалізується за допомогою створення нового об’єкту, що має критерії розташування, виводу тексту при наведенні та візуального зображення. const marker = new google.maps.Marker({ position: coordinateCenter, map, title: "car1", icon: image, }); Стандартний маркер було вирішено змінити для більш приємного візуального відображення зв’язаного з моєю темою дипломної роботи. Це було реалізовано за допомогою додавання url зображення та коректного позиціонування його на мапі. var image = { url: "/src/images/car-map.svg", size: new google.maps.Size(91, 91), origin: new google.maps.Point(-20, 0), anchor: new google.maps.Point(0, 0), scaledSize: new google.maps.Size(50, 50) }; Результатом даного кроку є відображення маркеру на мапі (рис.3.14). Рис. 3.14. Відображення маркеру на мапі у WEB–додатку Додавання спливаючого вікна при натисканні на маркер необхідно для зручної навігації користувача, так як перед тим як прокласти маршрут до точки, користувачу необхідно переглянути обрану автівку, перейшовши на сторінку з деталями та інформацією про оренду [14]. Для цього необхідно додати подію при натисканні на маркер, за допомогою наступного уривку коду: marker.addListener("click", () => { infoWindow.open({ anchor:marker, map, shouldFocus: false, }); }); Для відображення інформації після натискання необхідно її додати: const contentCar = ' Переглянути'; const infoWindow = new google.maps.InfoWindow({ content: contentCar, mawWidth: 200, }); Результатом, який зображений на рис. 3.15, є відображення кнопки, за допомогою якої буде здійснюватися перехід на сторінку картки автомобіля. Рис. 3.15. Відображення спливаючого вікна при натисканні на маркер Для подальшого відображення на мапі маркерів всіх авто з БД, було написано обробник на мові програмування JS для створення маркерів кожного з автомобілів та зв’язування даних з бекенду та фронтенду. За допомогою поєднання мов PHP та JS було створено масиви, що складаються з інформації, яка спливає при натисканні, точок що відображаються на карті та події слухання кліку на кожен з маркерів. Також було додано ще одну кнопку до спливаючого вікна при натисканні, за допомогою якої відбувається перехід в Google Maps з передачею координат обраного авто для подальшого прокладання маршруту до точки: Іконка маркеру авто може мати статус зарезервовано або вільно і за допомогою перевірки статусу можлива зміна кольору іконки на мапі. Відображення масиву вільних та зарезервованих авто на мапі з можливістю переходу на сторінку Google Maps для прокладання маршруту демонструється на рис. 3.16. Рис. 3.16. Відображення масиву всіх авто жүктеу/скачать 4,21 Mb. Достарыңызбен бөлісу:
|