time input

src/front/components/PlaceInput.js

@@ -7,7 +7,7 @@ class PlaceInput {
 
   render() {
     const placeInput = document.createElement('textarea');
-    placeInput.id = 'place-input';
+    placeInput.id = this.id;
     placeInput.className = 'place-and-time-box';
     placeInput.autocomplete = 'on';
     placeInput.maxLength = 140;

src/front/components/TimeInput.js

@@ -0,0 +1,26 @@
+class TimeInput {
+  constructor({ parentElement, id }) {
+    this.element = null;
+    this.parentElement = parentElement;
+    this.id = id;
+  }
+
+  render() {
+    const timeInput = document.createElement('textarea');
+    timeInput.id = this.id;
+    timeInput.className = 'place-and-time-box';
+    timeInput.autocomplete = 'on';
+    timeInput.maxLength = 140;
+    timeInput.placeholder =
+      '¿Cuándo? Ej."Cualquier hora", "19:00-21:00", "Finde"';
+
+    this.element = timeInput;
+    this.parentElement.appendChild(this.element);
+  }
+
+  get inputText() {
+    return this.element.value;
+  }
+}
+
+module.exports = TimeInput;

src/front/pages/offers.js

@@ -3,31 +3,8 @@ const BuyOrSellButtonGroup = require('../components/BuyOrSellButtonGroup');
 const PremiumSelector = require('../components/PremiumSelector');
 const PriceDisplay = require('../components/PriceDisplay');
 const AmountInput = require('../components/AmountInput');
-
+const PlaceInput = require('../components/PlaceInput');
-class PlaceInput {
+const TimeInput = require('../components/TimeInput');
-  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();
@@ -86,6 +63,13 @@ function offersPage() {
   });
 
   placeInput.render();
+
+  const timeInput = new TimeInput({
+    parentElement: document.getElementById('place-and-time-boxes'),
+    id: 'time-input',
+  });
+
+  timeInput.render();
   // -----------
   const navbuttonHome = document.getElementById('navbutton-home');
   const navbuttonOffers = document.getElementById('navbutton-offers');
@@ -108,8 +92,6 @@ function offersPage() {
   );
   const viewMyOffersRoot = document.getElementById('view-my-offers-root');
 
-  const timeInput = document.getElementById('time-input');
-
   const onchainCheckbox = document.getElementById('onchain-checkbox');
   const lightningCheckbox = document.getElementById('lightning-checkbox');
 
@@ -172,7 +154,7 @@ function offersPage() {
     const premium = premiumSelector.getPremium();
     const trade_amount_eur = amountInput.intEurAmount;
     const location_details = placeInput.inputText;
-    const time_availability_details = timeInput.value;
+    const time_availability_details = timeInput.inputText;
     const is_onchain_accepted = onchainCheckbox.checked;
     const is_lightning_accepted = lightningCheckbox.checked;
     const show_offer_to_trusted = myTrustedCheckbox.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="time-input"
-                class="place-and-time-box"
-                autocomplete="on"
-                maxlength="140"
-                placeholder='¿Cuándo? Ej."Cualquier hora", "19:00-21:00", "Finde"'
-              ></textarea>
             </div>
           </div>
           <div id="bitcoin-methods-area" class="create-offer-step">