wip amountInput

src/front/pages/offers.js

@@ -4,9 +4,129 @@ const BuyOrSellButtonGroup = require('../components/BuyOrSellButtonGroup');
 const PremiumSelector = require('../components/PremiumSelector');
 const PriceDisplay = require('../components/PriceDisplay');
 
+function readIntFromEurAmountInput() {
+  const eurAmountFieldValue = eurAmountInput.value;
+  const regularExpression = /([\d\s]+)/;
+  const matchResult = eurAmountFieldValue.match(regularExpression);
+
+  if (!matchResult) {
+    return null;
+  }
+
+  const numberString = matchResult[1];
+  const cleanInputNumber = parseInt(numberString.replace(/\s/gi, ''));
+
+  return cleanInputNumber;
+}
+
+
+function validateAndFormatEurAmountInput() {
+  const cleanInputNumber = readIntFromEurAmountInput();
+  eurAmountInput.classList.remove('input-is-valid', 'input-is-invalid');
+  if (cleanInputNumber) {
+    eurAmountInput.value = formatNumberWithSpaces(cleanInputNumber);
+    eurAmountInput.classList.add('input-is-valid');
+    return;
+  }
+
+  eurAmountInput.classList.add('input-is-invalid');
+}
+
+function updateBtcInput() {
+  const eurToSatRate = 1021;
+  const cleanEurAmount = readIntFromEurAmountInput();
+
+  const satsAmount = cleanEurAmount * eurToSatRate;
+  const formattedSatsAmount = formatNumberWithSpaces(satsAmount);
+  btcAmountInput.value = formattedSatsAmount;
+}
+
+
+class AmountInput {
+  constructor({parentElement, id}) {
+    this.element = null;
+    this.parentElement = parentElement;
+    this.id = id;
+  }
+
+  render(){
+    const amountArea = document.createElement('div');
+    amountArea.id = this.id;
+    
+    const eurAmount = document.createElement('div');
+    eurAmount.id = 'eur-amount';
+    eurAmount.className = 'money-amount-input-area';
+    
+    const eurInput = document.createElement('input');
+    eurInput.id = 'input-eur-amount';
+    eurInput.type = 'text';
+    eurInput.className = 'money-input input-money-amount';
+    eurInput.value = '100';
+    eurInput.required = true;
+    
+    const eurSymbol = document.createElement('div');
+    eurSymbol.id = 'eur-symbol';
+    eurSymbol.className = 'curr-symbol';
+    
+    const eurCharacter = document.createElement('span');
+    eurCharacter.id = 'eur-character';
+    eurCharacter.className = 'curr-character';
+    eurCharacter.textContent = '€';
+    
+    eurSymbol.appendChild(eurCharacter);
+    eurAmount.appendChild(eurInput);
+    eurAmount.appendChild(eurSymbol);
+    
+    const btcAmount = document.createElement('div');
+    btcAmount.id = 'btc-amount';
+    btcAmount.className = 'money-amount-input-area';
+    
+    const btcInput = document.createElement('input');
+    btcInput.id = 'input-btc-amount';
+    btcInput.type = 'text';
+    btcInput.className = 'money-input input-money-amount';
+    btcInput.disabled = true;
+    
+    const satsSymbol = document.createElement('div');
+    satsSymbol.id = 'sats-symbol';
+    satsSymbol.className = 'curr-symbol';
+    
+    const satsCharacter = document.createElement('span');
+    satsCharacter.id = 'sats-character';
+    satsCharacter.className = 'curr-character';
+    satsCharacter.textContent = 'SAT';
+    
+    satsSymbol.appendChild(satsCharacter);
+    btcAmount.appendChild(btcInput);
+    btcAmount.appendChild(satsSymbol);
+    
+    amountArea.appendChild(eurAmount);
+    amountArea.appendChild(btcAmount);
+
+
+    
+    eurInput.addEventListener('blur', () => {
+      validateAndFormatEurAmountInput();
+      updateBtcInput();
+    });
+  
+    eurInput.addEventListener('input', () => {
+      eurAmountInput.value = eurAmountInput.value.replace(/[^0-9]/g, '');
+      updateBtcInput();
+    });
+
+    this.element = amountArea;
+    this.parentElement.appendChild(this.element);
+  }
+}
+
 function offersPage() {
   const createOfferEventBus = new EventTarget();
 
+  const mockPriceProvidingCallback = () => {
+    return Math.floor(Math.random() * (95000 - 70000 + 1) + 70000);
+  }
+
   const publishOfferButton = new PublishOfferButton({
     parentElement: document.getElementById('submit-button-area'),
     id: 'button-submit-offer',
@@ -37,15 +157,20 @@ function offersPage() {
     premiumProvidingCallback: () => {
       return premiumSelector.getPremium();
     },
-    priceProvidingCallback: () => {
-      return Math.floor(Math.random() * (95000 - 70000 + 1) + 70000);
-    },
+    priceProvidingCallback: mockPriceProvidingCallback,
   });
   priceDisplay.render();
   createOfferEventBus.addEventListener('premium-changed', () => {
     priceDisplay.updatePrices();
   });
 
+
+  const amountInput = new AmountInput({
+    parentElement: document.getElementById('amount-area'),
+    id: 'amount-area-content'
+  })
+
+  amountInput.render();
   // -----------
   const navbuttonHome = document.getElementById('navbutton-home');
   const navbuttonOffers = document.getElementById('navbutton-offers');
@@ -107,41 +232,8 @@ function offersPage() {
       viewMyOffersRoot.style.display === 'block' ? 'none' : 'block';
   }
 
-  function readIntFromEurAmountInput() {
-    const eurAmountFieldValue = eurAmountInput.value;
-    const regularExpression = /([\d\s]+)/;
-    const matchResult = eurAmountFieldValue.match(regularExpression);
 
-    if (!matchResult) {
-      return null;
-    }
 
-    const numberString = matchResult[1];
-    const cleanInputNumber = parseInt(numberString.replace(/\s/gi, ''));
-
-    return cleanInputNumber;
-  }
-
-  function validateAndFormatEurAmountInput() {
-    const cleanInputNumber = readIntFromEurAmountInput();
-    eurAmountInput.classList.remove('input-is-valid', 'input-is-invalid');
-    if (cleanInputNumber) {
-      eurAmountInput.value = formatNumberWithSpaces(cleanInputNumber);
-      eurAmountInput.classList.add('input-is-valid');
-      return;
-    }
-
-    eurAmountInput.classList.add('input-is-invalid');
-  }
-
-  function updateBtcInput() {
-    const eurToSatRate = 1021;
-    const cleanEurAmount = readIntFromEurAmountInput();
-
-    const satsAmount = cleanEurAmount * eurToSatRate;
-    const formattedSatsAmount = formatNumberWithSpaces(satsAmount);
-    btcAmountInput.value = formattedSatsAmount;
-  }
 
   function validateBitcoinMethodCheckboxes(clickedCheckbox) {
     let checkedCount = btcMethodCheckboxes.filter((cb) => cb.checked).length;
@@ -662,15 +754,7 @@ function offersPage() {
     toggleCreateOfferModal();
   });
 
-  eurAmountInput.addEventListener('blur', () => {
-    validateAndFormatEurAmountInput();
-    updateBtcInput();
-  });
 
-  eurAmountInput.addEventListener('input', () => {
-    eurAmountInput.value = eurAmountInput.value.replace(/[^0-9]/g, '');
-    updateBtcInput();
-  });
 
   for (const btcMethodCheckbox of btcMethodCheckboxes) {
     btcMethodCheckbox.addEventListener('click', () => {

src/views/offers.ejs

@@ -42,31 +42,6 @@
           </div>
           <div id="amount-area" class="create-offer-step">
             <h3>¿Cuánto?</h3>
-            <div id="amount-area-content">
-              <div id="eur-amount" class="money-amount-input-area">
-                <input
-                  id="input-eur-amount"
-                  type="text"
-                  class="money-input input-money-amount"
-                  value="100"
-                  required
-                />
-                <div id="eur-symbol" class="curr-symbol">
-                  <span id="eur-character" class="curr-character">€</span>
-                </div>
-              </div>
-              <div id="btc-amount" class="money-amount-input-area">
-                <input
-                  id="input-btc-amount"
-                  type="text"
-                  class="money-input input-money-amount"
-                  disabled
-                />
-                <div id="sats-symbol" class="curr-symbol">
-                  <span id="sats-character" class="curr-character">SAT</span>
-                </div>
-              </div>
-            </div>
           </div>
           <div id="place-and-time-area" class="create-offer-step">
             <h3>¿Dónde y cuándo?</h3>