diff --git a/public/css/seca.css b/public/css/seca.css index 23b4802..1cc3034 100644 --- a/public/css/seca.css +++ b/public/css/seca.css @@ -117,7 +117,7 @@ h1 { } .full-screen-modal-background { - position: absolute; + position: fixed; width: 100%; height: 100%; top: 0; diff --git a/src/front/components/PremiumSelector.js b/src/front/components/PremiumSelector.js new file mode 100644 index 0000000..f098f89 --- /dev/null +++ b/src/front/components/PremiumSelector.js @@ -0,0 +1,66 @@ +class PremiumSelector { + constructor({ parentElement, id }) { + this.element = null; + this.parentElement = parentElement; + this.id = id; + + this.premiumValue = null; + } + + render() { + const premiumSelectorArea = document.createElement('div'); + premiumSelectorArea.id = this.id; + + const premiumValue = document.createElement('div'); + premiumValue.id = 'premium-value'; + premiumValue.textContent = '0%'; + this.premiumValue = premiumValue; + + const premiumButtonsContainer = document.createElement('div'); + premiumButtonsContainer.id = 'premium-buttons-container'; + + const increaseButton = document.createElement('button'); + increaseButton.classList.add('premium-button'); + increaseButton.id = 'button-increase-premium'; + increaseButton.textContent = '+'; + + const decreaseButton = document.createElement('button'); + decreaseButton.classList.add('premium-button'); + decreaseButton.id = 'button-decrease-premium'; + decreaseButton.textContent = '-'; + + premiumButtonsContainer.appendChild(increaseButton); + premiumButtonsContainer.appendChild(decreaseButton); + + premiumSelectorArea.appendChild(premiumValue); + premiumSelectorArea.appendChild(premiumButtonsContainer); + + increaseButton.addEventListener('click', () => { + this.modifyPremiumValue(1); + }); + + decreaseButton.addEventListener('click', () => { + this.modifyPremiumValue(-1); + }); + + this.element = premiumSelectorArea; + this.parentElement.appendChild(this.element); + } + + modifyPremiumValue(delta) { + const regexExpression = /-*\d+/; + const numValue = parseInt( + this.premiumValue.innerText.match(regexExpression)[0] + ); + + const newValue = `${numValue + delta}%`; + + this.premiumValue.innerText = newValue; + } + + getPremium() { + return parseInt(this.premiumValue.innerText.match(/-?\d+/)[0]) / 100; + } +} + +module.exports = PremiumSelector; diff --git a/src/front/pages/offers.js b/src/front/pages/offers.js index b6d4e2f..8fb4426 100644 --- a/src/front/pages/offers.js +++ b/src/front/pages/offers.js @@ -1,6 +1,7 @@ const formatNumberWithSpaces = require('../utils/formatNumbersWithSpaces'); const PublishOfferButton = require('../components/PublishOfferButton'); const BuyOrSellButtonGroup = require('../components/BuyOrSellButtonGroup'); +const PremiumSelector = require('../components/PremiumSelector'); function offersPage() { const publishOfferButton = new PublishOfferButton({ @@ -20,6 +21,12 @@ function offersPage() { }); buyOrSellButtonGroup.render(); + const premiumSelector = new PremiumSelector({ + parentElement: document.getElementById('premium-content-area'), + id: 'premium-selector-area', + }); + premiumSelector.render(); + // ----------- const navbuttonHome = document.getElementById('navbutton-home'); const navbuttonOffers = document.getElementById('navbutton-offers'); @@ -42,15 +49,6 @@ function offersPage() { ); const viewMyOffersRoot = document.getElementById('view-my-offers-root'); - const premiumValue = document.getElementById('premium-value'); - const buttonIncreasePremium = document.getElementById( - 'button-increase-premium' - ); - - const buttonDecreasePremium = document.getElementById( - 'button-decrease-premium' - ); - const eurAmountInput = document.getElementById('input-eur-amount'); const btcAmountInput = document.getElementById('input-btc-amount'); @@ -90,15 +88,6 @@ function offersPage() { viewMyOffersRoot.style.display === 'block' ? 'none' : 'block'; } - function modifyPremiumValue(delta) { - const regexExpression = /-*\d+/; - const numValue = parseInt(premiumValue.innerText.match(regexExpression)[0]); - - const newValue = `${numValue + delta}%`; - - premiumValue.innerText = newValue; - } - function readIntFromEurAmountInput() { const eurAmountFieldValue = eurAmountInput.value; const regularExpression = /([\d\s]+)/; @@ -161,7 +150,7 @@ function offersPage() { async function publishOffer() { const wants = buyOrSellButtonGroup.wants(); - const premium = parseInt(premiumValue.innerText.match(/\d+/)[0]) / 100; + const premium = premiumSelector.getPremium(); const trade_amount_eur = eurAmountInput.value; const location_details = placeInput.value; const time_availability_details = timeInput.value; @@ -654,14 +643,6 @@ function offersPage() { toggleCreateOfferModal(); }); - buttonIncreasePremium.addEventListener('click', () => { - modifyPremiumValue(1); - }); - - buttonDecreasePremium.addEventListener('click', () => { - modifyPremiumValue(-1); - }); - eurAmountInput.addEventListener('blur', () => { validateAndFormatEurAmountInput(); updateBtcInput(); diff --git a/src/views/offers.ejs b/src/views/offers.ejs index 81a1664..46d9e3c 100644 --- a/src/views/offers.ejs +++ b/src/views/offers.ejs @@ -40,16 +40,7 @@

Premium

-
-
0%
-
- -
-
+

Tu precio: 90 000€/BTC