move price display
This commit is contained in:
parent
a3643ee9d0
commit
865b974f38
2 changed files with 65 additions and 61 deletions
64
src/front/components/PriceDisplay.js
Normal file
64
src/front/components/PriceDisplay.js
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
const formatNumberWithSpaces = require('../utils/formatNumbersWithSpaces');
|
||||
|
||||
class PriceDisplay {
|
||||
constructor({
|
||||
parentElement,
|
||||
id,
|
||||
premiumProvidingCallback,
|
||||
priceProvidingCallback,
|
||||
}) {
|
||||
this.element = null;
|
||||
this.parentElement = parentElement;
|
||||
this.id = id;
|
||||
this.premiumProvidingCallback = premiumProvidingCallback;
|
||||
this.priceProvidingCallback = priceProvidingCallback;
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
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;
|
||||
|
||||
marketParagraph.appendChild(marketSpan);
|
||||
marketParagraph.append('€/BTC)');
|
||||
|
||||
container.appendChild(offerParagraph);
|
||||
container.appendChild(marketParagraph);
|
||||
|
||||
this.updatePrices();
|
||||
|
||||
this.element = container;
|
||||
this.parentElement.appendChild(this.element);
|
||||
}
|
||||
|
||||
updatePrices() {
|
||||
const marketPrice = this.priceProvidingCallback();
|
||||
const marketPriceString = formatNumberWithSpaces(marketPrice);
|
||||
const offerPriceString = formatNumberWithSpaces(
|
||||
Math.round(marketPrice * (1 + this.premiumProvidingCallback()))
|
||||
);
|
||||
|
||||
this.marketPriceSpan.innerText = marketPriceString;
|
||||
this.offerPriceSpan.innerText = offerPriceString;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = PriceDisplay;
|
||||
|
|
@ -2,67 +2,7 @@ const formatNumberWithSpaces = require('../utils/formatNumbersWithSpaces');
|
|||
const PublishOfferButton = require('../components/PublishOfferButton');
|
||||
const BuyOrSellButtonGroup = require('../components/BuyOrSellButtonGroup');
|
||||
const PremiumSelector = require('../components/PremiumSelector');
|
||||
|
||||
class PriceDisplay {
|
||||
constructor({
|
||||
parentElement,
|
||||
id,
|
||||
premiumProvidingCallback,
|
||||
priceProvidingCallback,
|
||||
}) {
|
||||
this.element = null;
|
||||
this.parentElement = parentElement;
|
||||
this.id = id;
|
||||
this.premiumProvidingCallback = premiumProvidingCallback;
|
||||
this.priceProvidingCallback = priceProvidingCallback;
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
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;
|
||||
|
||||
marketParagraph.appendChild(marketSpan);
|
||||
marketParagraph.append('€/BTC)');
|
||||
|
||||
container.appendChild(offerParagraph);
|
||||
container.appendChild(marketParagraph);
|
||||
|
||||
this.updatePrices();
|
||||
|
||||
this.element = container;
|
||||
this.parentElement.appendChild(this.element);
|
||||
}
|
||||
|
||||
updatePrices() {
|
||||
const marketPrice = this.priceProvidingCallback();
|
||||
const marketPriceString = formatNumberWithSpaces(marketPrice);
|
||||
const offerPriceString = formatNumberWithSpaces(
|
||||
Math.round(marketPrice * (1 + this.premiumProvidingCallback()))
|
||||
);
|
||||
|
||||
this.marketPriceSpan.innerText = marketPriceString;
|
||||
this.offerPriceSpan.innerText = offerPriceString;
|
||||
}
|
||||
}
|
||||
const PriceDisplay = require('../components/PriceDisplay');
|
||||
|
||||
function offersPage() {
|
||||
const createOfferEventBus = new EventTarget();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue