Skip to content

Commit

Permalink
open houses and market
Browse files Browse the repository at this point in the history
  • Loading branch information
@rrusher
rrusher committed Jul 12, 2024
1 parent f43aa71 commit 8cbb9a4
Show file tree
Hide file tree
Showing 10 changed files with 265 additions and 58 deletions.
6 changes: 3 additions & 3 deletions blocks/carousel-slider/carousel-slider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,9 +193,9 @@ function buildSlide(item, index) {
*/
export default async function decorate(block) {
// TODO: remove this test propId
if (!window.propertyData) {
if (!window.envelope) {
const propId = '358207023'; // commercial '368554873'; // '375215759'; // luxury '358207023';
window.propertyData = await getPropertyByPropId(propId);
window.envelope = await getPropertyByPropId(propId);
}
block.innerHTML = '';

Expand Down Expand Up @@ -257,7 +257,7 @@ export default async function decorate(block) {
});

// process each slide
const slides = [...window.propertyData.propertyDetails.smallPhotos];
const slides = [...window.envelope.propertyDetails.smallPhotos];
maxSlide = slides.length - 1;
slides.forEach((slide, index) => {
carousel.appendChild(buildSlide(slide, index));
Expand Down
13 changes: 2 additions & 11 deletions blocks/economic-data/economic-data.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { getDetails, getEconomicDetails } from '../../scripts/apis/creg/creg.js';
import { div, span } from '../../scripts/dom-helpers.js';
import { decorateIcons } from '../../scripts/aem.js';
import { toggleAccordion } from '../../scripts/util.js';

const keys = [
'ListPriceUS',
Expand All @@ -24,11 +25,6 @@ function pick(obj, ...args) {
return args.reduce((res, key) => ({ ...res, [key]: obj[key] }), { });
}

function toggleAccordion(event) {
const content = event.target;
content.classList.toggle('active');
}

/**
* Retrieves the property ID from the current URL path.
* @returns {string|null} The property ID if found in the URL path, or null if not found.
Expand All @@ -42,11 +38,6 @@ function getPropIdFromPath() {
return null;
}

async function getPropertyByPropId(propId) {
const resp = await getDetails(propId);
return resp[0];
}

async function getSocioEconomicData(latitude, longitude) {
const resp = await getEconomicDetails(latitude, longitude);
return resp[0];
Expand Down Expand Up @@ -157,7 +148,7 @@ export default async function decorate(block) {
// TODO: remove this test propId
if (!propId) propId = '370882966';

const propertyData = await getPropertyByPropId(propId);
const propertyData = await getDetails(propId);
if (propertyData) {
property = pick(propertyData, ...keys);
if (property.Latitude && property.Longitude) {
Expand Down
2 changes: 2 additions & 0 deletions blocks/property-attributes/property-attributes.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,8 @@
}

div.idxDisclaimer {
max-width: var(--normal-page-width);
margin: 0 auto 3.5em;
font-size: var(--body-font-size-xxs);
line-height: var(--line-height-s);
color: var(--dark-grey);
Expand Down
33 changes: 14 additions & 19 deletions blocks/property-attributes/property-attributes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@ import {
div, domEl, span,
} from '../../scripts/dom-helpers.js';
import {
formatNumber, phoneFormat, formatCurrency,
formatNumber, phoneFormat, formatCurrency, toggleAccordion,
} from '../../scripts/util.js';
import { decorateIcons } from '../../scripts/aem.js';

function toggleAccordion(event) {
const content = event.target;
content.classList.toggle('active');
}
import {
decorateIcons,
} from '../../scripts/aem.js';

export function formatListToHTML(str) {
if (!str) {
return '';
}
const strParts = str.split(',').map((part) => part.trim());

const strElements = [];
Expand All @@ -28,10 +28,10 @@ export function formatListToHTML(str) {
export default async function decorate(block) {
block.innerHTML = '';

if (!window.propertyData) {
if (!window.envelope) {
block.innerHTML = 'Property not found';
} else {
const property = window.propertyData.propertyDetails;
const property = window.envelope.propertyDetails;
const lotSF = property.lotSizeSquareFeet ? `${formatNumber(property.lotSizeSquareFeet)} ${property.interiorFeatures.livingAreaUnits}` : '';

const title = div({ class: 'title' }, 'Property Details');
Expand Down Expand Up @@ -99,7 +99,7 @@ export default async function decorate(block) {
div({ class: 'accordion-content' },
div({ class: 'table' },
div({ class: 'label' }, 'Lot/Land Description'),
div({ class: 'td' }, property.interiorFeatures.description || 0),
div({ class: 'td' }, formatListToHTML(property.interiorFeatures.description)),
div({ class: 'label' }, 'Foundation'),
div({ class: 'td' }, property.interiorFeatures.foundation),
div({ class: 'label' }, 'Parking Spaces'),
Expand Down Expand Up @@ -128,27 +128,22 @@ export default async function decorate(block) {
div({ class: 'label' }, 'Price Per Sq Ft'),
div({ class: 'td' }, formatCurrency(property.utilityAndBuilding.pricePerSqFt)),
div({ class: 'label' }, 'Architectural Style'),
div({ class: 'td' }, property.utilityAndBuilding.architecturalStyle),
div({ class: 'td' }, formatListToHTML(property.utilityAndBuilding.architecturalStyle)),
),
),
),
);

// disclaimer
const disclaimer = div({ class: 'idxDisclaimer' },
domEl('hr'),
property.idxDisclaimer,
);

block.append(title, details, features);
block.parentNode.parentNode.insertAdjacentElement('afterEnd', disclaimer);
const section = document.querySelector('.property-attributes-container');
section.insertAdjacentElement('afterend', disclaimer);
}

decorateIcons(block);
// disclaimer
// market trends
// calculator
// schools
// Occupancy
// housing trends
// load economic data block
}
Empty file added blocks/property-data/property-data.css
View file
Empty file.
103 changes: 103 additions & 0 deletions blocks/property-data/property-data.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
import { getMarketTrends } from '../../scripts/apis/creg/creg.js';
import { div } from '../../scripts/dom-helpers.js';
import {
formatCurrency,
} from '../../scripts/util.js';

function daysOnMarket(listingContractDate) {
const listingDate = new Date(listingContractDate);
const currentDate = new Date();
const timeDifference = currentDate - listingDate;
const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
return daysDifference;
}

export default async function decorate(block) {
block.innerHTML = '';
let property;
let marketdata;

if (window.envelope.propertyDetails) {
property = window.envelope.propertyDetails;
const data = await getMarketTrends(
property.PropId,
property.Latitude,
property.Longitude,
property.PostalCode,
);
if (data) {
[marketdata] = data;
}
}

const trends = div({ class: 'accordions' },
div({ class: 'accordion' },
div({ class: 'accordion-header', onclick: (e) => toggleAccordion(e) }, 'Market Trends'),

Check failure on line 35 in blocks/property-data/property-data.js

View workflow job for this annotation

GitHub Actions / build 

'toggleAccordion' is not defined
div({ class: 'accordion-content' },
div({ class: 'row' },
div({ class: 'address' }, property.unstructuredAddress),
div({ class: 'zip' }, `ZIP Code: ${property.postalCode}`),
),
div({ class: 'row' },
div({ class: 'td' },
div({ class: 'label' }, 'List Price'),
div({ class: 'value' }, formatCurrency(property.listPrice)),
),
div({ class: 'td' },
div({ class: 'label' }, 'Median List Price'),
div({ class: 'value' }, marketdata.total.medianListPrice.split(' ')[0]),
div({ class: 'chart' }),
),
),
div({ class: 'row' },
div({ class: 'td' },
div({ class: 'label' }, 'Sale Price'),
div({ class: 'value' }, property.closePrice || '-'),
),
div({ class: 'td' },
div({ class: 'label' }, 'Median Sold Price'),
div({ class: 'value' }, marketdata.total.medianSalesPrice.split(' ')[0]),
div({ class: 'chart' }),
),
),
div({ class: 'row' },
div({ class: 'td' },
div({ class: 'label' }, 'Price/SQFT'),
div({ class: 'value' }, formatCurrency(property.utilityAndBuilding.pricePerSqFt)),
),
div({ class: 'td' },
div({ class: 'label' }, 'AVG Price/SQFT'),
div({ class: 'value' }, marketdata.total.avgPriceArea.split(' ')[0]),
div({ class: 'chart' }),
),
),
div({ class: 'row' },
div({ class: 'td' },
div({ class: 'label' }, 'Days on Market'),
div({ class: 'value' }, property.closePrice ? 0 : daysOnMarket(property.listingContractDate)),
),
div({ class: 'td' },
div({ class: 'label' }, 'AVG Days on Market'),
div({ class: 'value' }, marketdata.total.avgDaysOnMarket),
div({ class: 'chart' }),
),
),
div({ class: 'row' },
div({ class: 'label' }, 'Homes for Sale'),
div({ class: 'label' }, 'Homes Sold'),
),
div({ class: 'row' },
div({ class: 'td' },
div({ class: 'value' }, marketdata.total.homesForSale),
div({ class: 'chart' }),
),
div({ class: 'td' },
div({ class: 'value' }, marketdata.total.homesSold),
div({ class: 'chart' }),
),
),
),
),
);
block.append(trends);
}
79 changes: 79 additions & 0 deletions blocks/property/property.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,67 @@
color: var(--dark-grey);
}

.property.block .property-details .open-house {
display: flex;
flex-wrap: wrap;
margin: 1rem -15px 0;
padding: 0 15px;
font-family: var(--font-family-primary);
}

.property.block .property-details .row {
flex: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
font-size: var(--body-font-size-xxs);
color: #2a2223;
font-weight: 700;
line-height: 30px;
}

.property.block .property-details .icon-wrapper,
.property.block .property-details .meta-wrapper {
display: flex;
flex-direction: column;
margin: 0;
}

.property.block .property-details .icon-wrapper {
position: relative;
padding: 0 8px 0 32px;
border: 1px solid #2a2223;
line-height: 30px;
width: 115px;
height: 32px;
}

.property.block .property-details .icon-wrapper span {
position: absolute;
top: 2px;
left: 4px;
width: 24px;
height: 24px;
}

.property.block .property-details .icon-wrapper .label {
text-transform: capitalize;
font-weight: 400;
}

.property.block .property-details .datetime {
display: flex;
}

.property.block .property-details .datetime .date,
.property.block .property-details .datetime .time {
font-weight: 700;
}

.property.block .property-details .datetime .time {
padding-left: 8px;
}

.property.block .property-details > .property-price {
order: 3;
font-family: var(--font-family-primary);
Expand Down Expand Up @@ -265,6 +326,24 @@
max-width: 47%;
}

.property.block .property-details .row {
flex-direction: row;
}

.property.block .property-details .meta-wrapper {
flex-direction: row;
}

.property.block .property-details .datetime {
margin-top: 0;
padding: 0 4px;
}

.property.block .property-details .datetime .date,
.property.block .property-details .datetime .time {
display: inline;
}

.property.block .row {
display: flex;
flex-wrap: wrap;
Expand Down
Loading

0 comments on commit 8cbb9a4

Please sign in to comment.