premium selector

public/css/seca.css

@@ -117,7 +117,7 @@ h1 {
 }
 
 .full-screen-modal-background {
-  position: absolute;
+  position: fixed;
   width: 100%;
   height: 100%;
   top: 0;

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;

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

src/views/offers.ejs

@@ -40,16 +40,7 @@
           <div id="premium-area" class="create-offer-step">
             <h3>Premium</h3>
             <div id="premium-content-area">
-              <div id="premium-selector-area">
+              
-                <div id="premium-value">0%</div>
-                <div id="premium-buttons-container">
-                  <button class="premium-button" id="button-increase-premium">
-                    +</button
-                  ><button class="premium-button" id="button-decrease-premium">
-                    -
-                  </button>
-                </div>
-              </div>
               <div id="premium-price-display-area">
                 <p id="offer-price-paragraph">
                   Tu precio: <span id="offer-price">90 000</span>€/BTC