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 PublishOfferButton = require('../components/PublishOfferButton');
|
||||||
const BuyOrSellButtonGroup = require('../components/BuyOrSellButtonGroup');
|
const BuyOrSellButtonGroup = require('../components/BuyOrSellButtonGroup');
|
||||||
const PremiumSelector = require('../components/PremiumSelector');
|
const PremiumSelector = require('../components/PremiumSelector');
|
||||||
|
const PriceDisplay = require('../components/PriceDisplay');
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function offersPage() {
|
function offersPage() {
|
||||||
const createOfferEventBus = new EventTarget();
|
const createOfferEventBus = new EventTarget();
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue