place input object

src/front/pages/offers.js

@@ -4,6 +4,31 @@ const PremiumSelector = require('../components/PremiumSelector');
 const PriceDisplay = require('../components/PriceDisplay');
 const AmountInput = require('../components/AmountInput');
 
+class PlaceInput {
+  constructor({ parentElement, id }) {
+    this.element = null;
+    this.parentElement = parentElement;
+    this.id = id;
+  }
+
+  render() {
+    const placeInput = document.createElement('textarea');
+    placeInput.id = 'place-input';
+    placeInput.className = 'place-and-time-box';
+    placeInput.autocomplete = 'on';
+    placeInput.maxLength = 140;
+    placeInput.placeholder =
+      "¿Dónde? Ej.'Eixample', 'La Maquinista', 'Cualquier lugar en BCN', 'Meetup BBO'";
+
+    this.element = placeInput;
+    this.parentElement.appendChild(this.element);
+  }
+
+  get inputText() {
+    return this.element.value;
+  }
+}
+
 function offersPage() {
   const createOfferEventBus = new EventTarget();
 
@@ -54,6 +79,12 @@ function offersPage() {
   });
 
   amountInput.render();
+
+  const placeInput = new PlaceInput({
+    parentElement: document.getElementById('place-and-time-boxes'),
+  });
+
+  placeInput.render();
   // -----------
   const navbuttonHome = document.getElementById('navbutton-home');
   const navbuttonOffers = document.getElementById('navbutton-offers');
@@ -76,7 +107,6 @@ function offersPage() {
   );
   const viewMyOffersRoot = document.getElementById('view-my-offers-root');
 
-  const placeInput = document.getElementById('place-input');
   const timeInput = document.getElementById('time-input');
 
   const onchainCheckbox = document.getElementById('onchain-checkbox');
@@ -140,7 +170,7 @@ function offersPage() {
 
     const premium = premiumSelector.getPremium();
     const trade_amount_eur = amountInput.intEurAmount;
-    const location_details = placeInput.value;
+    const location_details = placeInput.inputText;
     const time_availability_details = timeInput.value;
     const is_onchain_accepted = onchainCheckbox.checked;
     const is_lightning_accepted = lightningCheckbox.checked;

src/views/offers.ejs

@@ -46,13 +46,6 @@
           <div id="place-and-time-area" class="create-offer-step">
             <h3>¿Dónde y cuándo?</h3>
             <div id="place-and-time-boxes">
-              <textarea
-                id="place-input"
-                class="place-and-time-box"
-                autocomplete="on"
-                maxlength="140"
-                placeholder='¿Dónde? Ej."Eixample", "La Maquinista", "Cualquier lugar en BCN", "Meetup BBO"'
-              ></textarea>
                <textarea
                 id="time-input"
                 class="place-and-time-box"