diff --git a/src/front/components/PremiumSelector.js b/src/front/components/PremiumSelector.js index f098f89..d2defdd 100644 --- a/src/front/components/PremiumSelector.js +++ b/src/front/components/PremiumSelector.js @@ -1,8 +1,9 @@ class PremiumSelector { - constructor({ parentElement, id }) { + constructor({ parentElement, id, eventSink }) { this.element = null; this.parentElement = parentElement; this.id = id; + this.eventSink = eventSink; this.premiumValue = null; } @@ -56,10 +57,11 @@ class PremiumSelector { const newValue = `${numValue + delta}%`; this.premiumValue.innerText = newValue; + this.eventSink.dispatchEvent(new Event('premium-changed')); } getPremium() { - return parseInt(this.premiumValue.innerText.match(/-?\d+/)[0]) / 100; + return parseInt(this.premiumValue.textContent.match(/-?\d+/)[0]) / 100; } } diff --git a/src/front/pages/offers.js b/src/front/pages/offers.js index bb88c43..b8be295 100644 --- a/src/front/pages/offers.js +++ b/src/front/pages/offers.js @@ -4,12 +4,12 @@ const BuyOrSellButtonGroup = require('../components/BuyOrSellButtonGroup'); const PremiumSelector = require('../components/PremiumSelector'); class PriceDisplay { - constructor( - {parentElement, + constructor({ + parentElement, id, premiumProvidingCallback, - priceProvidingCallback} - ) { + priceProvidingCallback, + }) { this.element = null; this.parentElement = parentElement; this.id = id; @@ -18,31 +18,31 @@ class PriceDisplay { } render() { - const container = document.createElement("div"); - container.id = "premium-price-display-area"; - - const offerParagraph = document.createElement("p"); - offerParagraph.id = "offer-price-paragraph"; - offerParagraph.textContent = "Tu precio: "; - - const offerSpan = document.createElement("span"); - offerSpan.id = "offer-price"; - this.offerPriceSpan = offerSpan - + const container = document.createElement('div'); + container.id = 'premium-price-display-area'; + + const offerParagraph = document.createElement('p'); + offerParagraph.id = 'offer-price-paragraph'; + offerParagraph.textContent = 'Tu precio: '; + + const offerSpan = document.createElement('span'); + offerSpan.id = 'offer-price'; + this.offerPriceSpan = offerSpan; + offerParagraph.appendChild(offerSpan); - offerParagraph.append("€/BTC"); - - const marketParagraph = document.createElement("p"); - marketParagraph.id = "market-price-paragraph"; - marketParagraph.textContent = "(Precio mercado: "; - - const marketSpan = document.createElement("span"); - marketSpan.id = "market-price"; - this.marketPriceSpan = marketSpan - + offerParagraph.append('€/BTC'); + + const marketParagraph = document.createElement('p'); + marketParagraph.id = 'market-price-paragraph'; + marketParagraph.textContent = '(Precio mercado: '; + + const marketSpan = document.createElement('span'); + marketSpan.id = 'market-price'; + this.marketPriceSpan = marketSpan; + marketParagraph.appendChild(marketSpan); - marketParagraph.append("€/BTC)"); - + marketParagraph.append('€/BTC)'); + container.appendChild(offerParagraph); container.appendChild(marketParagraph); @@ -50,16 +50,13 @@ class PriceDisplay { this.element = container; this.parentElement.appendChild(this.element); - } updatePrices() { - const marketPrice = this.priceProvidingCallback() + const marketPrice = this.priceProvidingCallback(); const marketPriceString = formatNumberWithSpaces(marketPrice); const offerPriceString = formatNumberWithSpaces( - Math.round(marketPrice * ( - 1 + this.premiumProvidingCallback() - )) + Math.round(marketPrice * (1 + this.premiumProvidingCallback())) ); this.marketPriceSpan.innerText = marketPriceString; @@ -68,6 +65,8 @@ class PriceDisplay { } function offersPage() { + const createOfferEventBus = new EventTarget(); + const publishOfferButton = new PublishOfferButton({ parentElement: document.getElementById('submit-button-area'), id: 'button-submit-offer', @@ -88,18 +87,24 @@ function offersPage() { const premiumSelector = new PremiumSelector({ parentElement: document.getElementById('premium-content-area'), id: 'premium-selector-area', + eventSink: createOfferEventBus, }); premiumSelector.render(); - const priceDisplay = new PriceDisplay( - { - parentElement: document.getElementById('premium-content-area'), - id: 'premium-price-display-area', - premiumProvidingCallback: () => {return 0.02}, - priceProvidingCallback: () => {return Math.floor(Math.random() * (95000 - 70000 + 1) + 70000)} - } - ) + const priceDisplay = new PriceDisplay({ + parentElement: document.getElementById('premium-content-area'), + id: 'premium-price-display-area', + premiumProvidingCallback: () => { + return premiumSelector.getPremium(); + }, + priceProvidingCallback: () => { + return Math.floor(Math.random() * (95000 - 70000 + 1) + 70000); + }, + }); priceDisplay.render(); + createOfferEventBus.addEventListener('premium-changed', () => { + priceDisplay.updatePrices(); + }); // ----------- const navbuttonHome = document.getElementById('navbutton-home'); diff --git a/src/views/offers.ejs b/src/views/offers.ejs index 14d1ff9..aba756c 100644 --- a/src/views/offers.ejs +++ b/src/views/offers.ejs @@ -38,8 +38,7 @@

Premium

-
-
+

¿Cuánto?