From ee80c2f4a926a12a3733488efb1b94b461ae84ed Mon Sep 17 00:00:00 2001
From: counterweight <counterweightoperator@protonmail.com>
Date: Sat, 22 Mar 2025 17:24:25 +0100
Subject: [PATCH] place input object

---
 src/front/pages/offers.js | 34 ++++++++++++++++++++++++++++++++--
 src/views/offers.ejs      |  9 +--------
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/front/pages/offers.js b/src/front/pages/offers.js
index 88f3432..4fbf8a9 100644
--- a/src/front/pages/offers.js
+++ b/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;
diff --git a/src/views/offers.ejs b/src/views/offers.ejs
index 175422a..9d1fef7 100644
--- a/src/views/offers.ejs
+++ b/src/views/offers.ejs
@@ -46,14 +46,7 @@
           <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
+               <textarea
                 id="time-input"
                 class="place-and-time-box"
                 autocomplete="on"