premium and price connected

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;
   }
 }
 

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');

src/views/offers.ejs

@@ -38,8 +38,7 @@
           <div id="buy-or-sell-area" class="create-offer-step"></div>
           <div id="premium-area" class="create-offer-step">
             <h3>Premium</h3>
-            <div id="premium-content-area">
-            </div>
+            <div id="premium-content-area"></div>
           </div>
           <div id="amount-area" class="create-offer-step">
             <h3>¿Cuánto?</h3>