bitcoin methods objectified

src/front/pages/offers.js

@@ -6,6 +6,83 @@ const AmountInput = require('../components/AmountInput');
 const PlaceInput = require('../components/PlaceInput');
 const TimeInput = require('../components/TimeInput');
 
+class BitcoinMethodCheckboxes {
+  constructor({ parentElement }) {
+    this.onchainContainer = null;
+    this.onchainCheckboxElement = null;
+    this.lightningContainer = null;
+    this.lightningCheckboxElement = null;
+    this.parentElement = parentElement;
+  }
+
+  render() {
+    this.onchainContainer = this.buildCheckbox({
+      id: 'onchain',
+      label: 'Onchain',
+    });
+    this.onchainCheckboxElement = this.onchainContainer.querySelector('input');
+
+    this.lightningContainer = this.buildCheckbox({
+      id: 'lightning',
+      label: 'Lightning',
+    });
+    this.lightningCheckboxElement =
+      this.lightningContainer.querySelector('input');
+
+    for (const btcMethodCheckbox of [
+      this.onchainCheckboxElement,
+      this.lightningCheckboxElement,
+    ]) {
+      btcMethodCheckbox.addEventListener('click', () => {
+        this.validateBitcoinMethodCheckboxes(btcMethodCheckbox);
+      });
+    }
+
+    this.parentElement.appendChild(this.onchainContainer);
+    this.parentElement.appendChild(this.lightningContainer);
+  }
+
+  buildCheckbox({ id, label }) {
+    const checkboxContainer = document.createElement('div');
+    checkboxContainer.className = 'checkbox-row';
+    checkboxContainer.id = `${id}-checkbox-area`;
+
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.name = id;
+    checkbox.id = `${id}-checkbox`;
+    checkbox.checked = true;
+
+    const labelElement = document.createElement('label');
+    labelElement.htmlFor = checkbox.id;
+    labelElement.textContent = label;
+
+    checkboxContainer.appendChild(checkbox);
+    checkboxContainer.appendChild(labelElement);
+
+    return checkboxContainer;
+  }
+
+  validateBitcoinMethodCheckboxes(clickedCheckbox) {
+    let checkedCount = [
+      this.onchainCheckboxElement,
+      this.lightningCheckboxElement,
+    ].filter((cb) => cb.checked).length;
+    console.log(checkedCount);
+    if (checkedCount === 0) {
+      clickedCheckbox.checked = true;
+    }
+  }
+
+  get isOnchainAccepted() {
+    return this.onchainCheckboxElement.checked;
+  }
+
+  get isLightningAccepted() {
+    return this.lightningCheckboxElement.checked;
+  }
+}
+
 function offersPage() {
   const createOfferEventBus = new EventTarget();
 
@@ -70,6 +147,12 @@ function offersPage() {
   });
 
   timeInput.render();
+
+  const btcMethodCheckboxes = new BitcoinMethodCheckboxes({
+    parentElement: document.getElementById('bitcoin-methods-checkboxes'),
+  });
+
+  btcMethodCheckboxes.render();
   // -----------
   const navbuttonHome = document.getElementById('navbutton-home');
   const navbuttonOffers = document.getElementById('navbutton-offers');
@@ -92,11 +175,6 @@ function offersPage() {
   );
   const viewMyOffersRoot = document.getElementById('view-my-offers-root');
 
-  const onchainCheckbox = document.getElementById('onchain-checkbox');
-  const lightningCheckbox = document.getElementById('lightning-checkbox');
-
-  const btcMethodCheckboxes = [onchainCheckbox, lightningCheckbox];
-
   const myTrustedCheckbox = document.getElementById('my-trusted-checkbox');
   const myTrustedTrustedCheckbox = document.getElementById(
     'my-trusted-trusted-checkbox'
@@ -125,13 +203,6 @@ function offersPage() {
       viewMyOffersRoot.style.display === 'block' ? 'none' : 'block';
   }
 
-  function validateBitcoinMethodCheckboxes(clickedCheckbox) {
-    let checkedCount = btcMethodCheckboxes.filter((cb) => cb.checked).length;
-    if (checkedCount === 0) {
-      clickedCheckbox.checked = true;
-    }
-  }
-
   function applyTrustCheckboxConstraints(pressedCheckbox) {
     if (pressedCheckbox === myTrustedTrustedCheckbox) {
       console.log('first case!');
@@ -155,8 +226,8 @@ function offersPage() {
     const trade_amount_eur = amountInput.intEurAmount;
     const location_details = placeInput.inputText;
     const time_availability_details = timeInput.inputText;
-    const is_onchain_accepted = onchainCheckbox.checked;
+    const is_onchain_accepted = btcMethodCheckboxes.isOnchainAccepted;
-    const is_lightning_accepted = lightningCheckbox.checked;
+    const is_lightning_accepted = btcMethodCheckboxes.isLightningAccepted;
     const show_offer_to_trusted = myTrustedCheckbox.checked;
     const show_offer_to_trusted_trusted = myTrustedTrustedCheckbox.checked;
     const show_offer_to_all_members = allMembersCheckbox.checked;
@@ -644,12 +715,6 @@ function offersPage() {
     toggleCreateOfferModal();
   });
 
-  for (const btcMethodCheckbox of btcMethodCheckboxes) {
-    btcMethodCheckbox.addEventListener('click', () => {
-      validateBitcoinMethodCheckboxes(btcMethodCheckbox);
-    });
-  }
-
   myTrustedTrustedCheckbox.addEventListener('click', () => {
     applyTrustCheckboxConstraints(myTrustedTrustedCheckbox);
   });

src/views/offers.ejs

@@ -50,22 +50,6 @@
           <div id="bitcoin-methods-area" class="create-offer-step">
             <h3>¿Cómo se mueve el Bitcoin?</h3>
             <div id="bitcoin-methods-checkboxes">
-              <div id="onchain-checkbox-area" class="checkbox-row">
-                <input
-                  type="checkbox"
-                  name="onchain"
-                  id="onchain-checkbox"
-                  checked
-                /><label for="onchain">Onchain</label>
-              </div>
-              <div id="lightning-checkbox-area" class="checkbox-row">
-                <input
-                  type="checkbox"
-                  name="lightning"
-                  id="lightning-checkbox"
-                  checked
-                /><label for="lightning">Lightning</label>
-              </div>
             </div>
           </div>
           <div id="trust-area" class="create-offer-step">