From f7ab357070ee85f3e12c17047af9fd9dd6bdd4ae Mon Sep 17 00:00:00 2001 From: Ritwik Srivastava Date: Tue, 11 Jun 2024 11:56:41 +0530 Subject: [PATCH 1/4] Add Agent Properties --- blocks/agent-property/agent-property.css | 100 +++++++++++++++++++++++ blocks/agent-property/agent-property.js | 97 ++++++++++++++++++++++ 2 files changed, 197 insertions(+) create mode 100644 blocks/agent-property/agent-property.css create mode 100644 blocks/agent-property/agent-property.js diff --git a/blocks/agent-property/agent-property.css b/blocks/agent-property/agent-property.css new file mode 100644 index 00000000..fbbef556 --- /dev/null +++ b/blocks/agent-property/agent-property.css @@ -0,0 +1,100 @@ +@import url('../shared/property/cards.css'); + +.agent-property.block { + overflow: hidden; + width: 100%; +} + +.agent-property.block a { + text-decoration: none; +} + +.agent-property.block .gmap-canvas { + width: 100%; + height: 0; + transition: height 0.5s ease; + display: none; +} + +.agent-property.block .view-toggle { + margin-bottom: 20px; +} + +.agent-property.block .gmap-canvas.active { + display:block; + height: 500px; +} + +.agent-property.block .view-toggle .card-view { + display: none; + margin-left: 70%; + font-family: Manrope, sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 700; + letter-spacing: 1.6px; + text-transform: uppercase; + border: 1px solid #2a2223; + line-height: 35px; + background: #fff; +} + +.agent-property.block .view-toggle .map-view { + margin-left: 70%; + font-family: Manrope, sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 700; + letter-spacing: 1.6px; + text-transform: uppercase; + border: 1px solid #2a2223; + line-height: 35px; + background: #fff; +} + +.agent-property.block .header { + display: flex; + flex-direction: column; +} + +.agent-property.block .header > div { + margin-bottom: 24px; +} + +.agent-property.block .header > div > span { + color: var(--primary-color); + font-size: var(--heading-font-size-l); + font-weight: var(--font-weight-semibold); + letter-spacing: initial; + line-height: var(--line-height-m); + text-transform: capitalize; +} + +.agent-property.block .header > div > p { + margin: 0; +} + +.agent-property.block .property-list-cards .listing-tile .extra-info { + display:none; +} + +.liveby-community .agent-property.block { + max-width: 1150px; + margin: auto; +} + +@media (min-width: 600px) { + .agent-property.block .header { + flex-direction: row; + justify-content: space-between; + } + + .agent-property.block .header .button-container { + justify-content: flex-end; + } + + .agent-property.block .view-toggle .map-view , .agent-property.block .view-toggle .card-view { + margin-left: 90.5%; + width: 115px; + } +} \ No newline at end of file diff --git a/blocks/agent-property/agent-property.js b/blocks/agent-property/agent-property.js new file mode 100644 index 00000000..447f8557 --- /dev/null +++ b/blocks/agent-property/agent-property.js @@ -0,0 +1,97 @@ +/* global google */ + +import { render as renderCards } from '../shared/property/cards.js'; +import { button, div } from '../../scripts/dom-helpers.js'; +import loadMaps from '../../scripts/google-maps/index.js'; +import { loadScript, getMetadata } from '../../scripts/aem.js'; + +const cardView = button({ class: 'card-view' }, 'Grid View'); +const mapView = button({ class: 'map-view' }, 'Map View'); +const viewToggle = div({ class: 'view-toggle' }); +const map = div({ class: 'gmap-canvas' }); +const agentId = getMetadata('agent-id'); +let centerlat; +let centerlong; +let data; + +function initMap(block, properties) { + const ele = block.querySelector('.gmap-canvas'); + + const gmap = new google.maps.Map(ele, { + zoom: 9, // Set an appropriate zoom level + center: { lat: centerlat, lng: centerlong }, // Set a default center + mapTypeId: google.maps.MapTypeId?.ROADMAP, + clickableIcons: false, + gestureHandling: 'cooperative', + visualRefresh: true, + disableDefaultUI: true, + }); + + const createMarker = (property, amap) => new google.maps.Marker({ + position: { lat: parseFloat(property.Latitude), lng: parseFloat(property.Longitude) }, + map: amap, + title: property.StreetName, + }); + + // Create markers for all properties + properties.forEach((property) => { + createMarker(property, gmap); + }); + + // Add markers for each property + /* properties.forEach((property) => { + new google.maps.Marker({ + position: { lat: parseFloat(property.Latitude), lng: parseFloat(property.Longitude) }, + map: gmap, + title: property.StreetName, // You can customize the title if needed + }); + }); */ +} + +export default async function decorate(block) { + const list = document.createElement('div'); + list.classList.add('property-list-cards', 'rows-1'); + viewToggle.append(cardView, mapView); + block.append(viewToggle, list, map); + /* firstProperty = result.listings.properties[0]; + centerlat = firstProperty.Latitude; + centerlong = firstProperty.Longitude; + renderCards(list, result.listings.properties); */ + + try { + const response = await fetch(`/bin/bhhs/agentPropertyListingsServlet.${agentId}.json`); + data = await response.json(); + if (data) { + const [firstProperty] = data.listings.properties; + const { Latitude: latitude, Longitude: longitude } = firstProperty; + // Parse the latitude and longitude as floats + centerlat = parseFloat(latitude); + centerlong = parseFloat(longitude); + renderCards(list, data.listings.properties); + } + } catch (error) { + // eslint-disable-next-line no-console + console.error('Error fetching agent properties', error); + } + + document.querySelector('.card-view').addEventListener('click', () => { + document.querySelector('.property-list-cards').style.display = 'grid'; + document.querySelector('.card-view').style.display = 'none'; + document.querySelector('.map-view').style.display = 'block'; + document.querySelector('.gmap-canvas').classList.remove('active'); + }); + + document.querySelector('.map-view').addEventListener('click', async () => { + document.querySelector('.gmap-canvas').classList.add('active'); + document.querySelector('.map-view').style.display = 'none'; + document.querySelector('.card-view').style.display = 'block'; + document.querySelector('.property-list-cards').style.display = 'none'; + loadMaps(); + await google.maps.importLibrary('core'); + await google.maps.importLibrary('maps'); + await google.maps.importLibrary('marker'); + await loadScript('https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js', { type: 'application/javascript' }); + await loadScript('https://unpkg.com/jsts/dist/jsts.min.js', { type: 'application/javascript' }); + initMap(block, data.listings.properties); + }); +} From 143b1be5ea8602ef0a1f599eb9270308eed28bb4 Mon Sep 17 00:00:00 2001 From: Ritwik Srivastava Date: Tue, 11 Jun 2024 11:59:41 +0530 Subject: [PATCH 2/4] Add Agent Properties --- blocks/agent-property/agent-property.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/agent-property/agent-property.js b/blocks/agent-property/agent-property.js index 447f8557..ce39c973 100644 --- a/blocks/agent-property/agent-property.js +++ b/blocks/agent-property/agent-property.js @@ -59,7 +59,7 @@ export default async function decorate(block) { renderCards(list, result.listings.properties); */ try { - const response = await fetch(`/bin/bhhs/agentPropertyListingsServlet.${agentId}.json`); + const response = await fetch('https://www.commonmoves.com/bin/bhhs/agentPropertyListingsServlet.${agentId}.json'); data = await response.json(); if (data) { const [firstProperty] = data.listings.properties; From 86c30ae2f2d27f6e33dfe0be6f43293dab050eaf Mon Sep 17 00:00:00 2001 From: Ritwik Srivastava Date: Mon, 17 Jun 2024 10:57:57 +0530 Subject: [PATCH 3/4] Add Agent Properties --- blocks/agent-property/agent-property.js | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) diff --git a/blocks/agent-property/agent-property.js b/blocks/agent-property/agent-property.js index ce39c973..5d14debc 100644 --- a/blocks/agent-property/agent-property.js +++ b/blocks/agent-property/agent-property.js @@ -16,7 +16,6 @@ let data; function initMap(block, properties) { const ele = block.querySelector('.gmap-canvas'); - const gmap = new google.maps.Map(ele, { zoom: 9, // Set an appropriate zoom level center: { lat: centerlat, lng: centerlong }, // Set a default center @@ -33,19 +32,9 @@ function initMap(block, properties) { title: property.StreetName, }); - // Create markers for all properties properties.forEach((property) => { createMarker(property, gmap); }); - - // Add markers for each property - /* properties.forEach((property) => { - new google.maps.Marker({ - position: { lat: parseFloat(property.Latitude), lng: parseFloat(property.Longitude) }, - map: gmap, - title: property.StreetName, // You can customize the title if needed - }); - }); */ } export default async function decorate(block) { @@ -53,18 +42,13 @@ export default async function decorate(block) { list.classList.add('property-list-cards', 'rows-1'); viewToggle.append(cardView, mapView); block.append(viewToggle, list, map); - /* firstProperty = result.listings.properties[0]; - centerlat = firstProperty.Latitude; - centerlong = firstProperty.Longitude; - renderCards(list, result.listings.properties); */ try { - const response = await fetch('https://www.commonmoves.com/bin/bhhs/agentPropertyListingsServlet.${agentId}.json'); + const response = await fetch(`https://www.commonmoves.com/bin/bhhs/agentPropertyListingsServlet.${agentId}.json`); data = await response.json(); if (data) { const [firstProperty] = data.listings.properties; const { Latitude: latitude, Longitude: longitude } = firstProperty; - // Parse the latitude and longitude as floats centerlat = parseFloat(latitude); centerlong = parseFloat(longitude); renderCards(list, data.listings.properties); From 9b943d2b6489f06c235602d2c7603da5b0eed660 Mon Sep 17 00:00:00 2001 From: RitwikSrivastava <45959816+RitwikSrivastava@users.noreply.github.com> Date: Mon, 17 Jun 2024 19:09:48 +0530 Subject: [PATCH 4/4] Update agent-property.js --- blocks/agent-property/agent-property.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/agent-property/agent-property.js b/blocks/agent-property/agent-property.js index 5d14debc..2b60823b 100644 --- a/blocks/agent-property/agent-property.js +++ b/blocks/agent-property/agent-property.js @@ -44,7 +44,7 @@ export default async function decorate(block) { block.append(viewToggle, list, map); try { - const response = await fetch(`https://www.commonmoves.com/bin/bhhs/agentPropertyListingsServlet.${agentId}.json`); + const response = await fetch(`/bin/bhhs/agentPropertyListingsServlet.${agentId}.json`); data = await response.json(); if (data) { const [firstProperty] = data.listings.properties;