trust checkboxes now in object

src/front/pages/offers.js

@@ -19,41 +19,54 @@ class TrustCheckboxes {
   }
 
   render() {
-    const labelsAndVars = [
+    const checkboxesDetails = [
       {
         id: 'my-trusted',
         label: 'Mis confiados',
         containerProperty: 'myTrustedContainer',
         checkboxProperty: 'myTrustedCheckboxElement',
+        defaultChecked: true,
+        isDisabled: true,
       },
       {
         id: 'my-trusted-trusted',
         label: 'Los confiados de mis confiados',
         containerProperty: 'myTrustedTrustedContainer',
         checkboxProperty: 'myTrustedTrustedCheckboxElement',
+        defaultChecked: true,
+        isDisabled: false,
       },
       {
         id: 'all-members',
         label: 'Todos los miembros',
         containerProperty: 'allMembersContainer',
         checkboxProperty: 'allMembersCheckboxElement',
+        defaultChecked: false,
+        isDisabled: false,
       },
     ];
 
-    for (const labelAndVar of labelsAndVars) {
-      this[labelAndVar.containerProperty] = this.buildCheckbox({
-        id: labelAndVar.id,
-        label: labelAndVar.label,
+    for (const checkboxDetails of checkboxesDetails) {
+      this[checkboxDetails.containerProperty] = this.buildCheckbox({
+        id: checkboxDetails.id,
+        label: checkboxDetails.label,
       });
 
-      this[labelAndVar.checkboxProperty] =
-        this[labelAndVar.containerProperty].querySelector('input');
+      this[checkboxDetails.checkboxProperty] =
+        this[checkboxDetails.containerProperty].querySelector('input');
 
-      this[labelAndVar.checkboxProperty].addEventListener('click', () => {
-        this.applyTrustCheckboxConstraints(this[labelAndVar.checkboxProperty]);
+      this[checkboxDetails.checkboxProperty].addEventListener('click', () => {
+        this.applyTrustCheckboxConstraints(
+          this[checkboxDetails.checkboxProperty]
+        );
       });
 
-      this.parentElement.appendChild(this[labelAndVar.containerProperty]);
+      this[checkboxDetails.checkboxProperty].checked =
+        checkboxDetails.defaultChecked;
+      this[checkboxDetails.checkboxProperty].disabled =
+        checkboxDetails.isDisabled;
+
+      this.parentElement.appendChild(this[checkboxDetails.containerProperty]);
     }
   }
 
@@ -80,7 +93,6 @@ class TrustCheckboxes {
 
   applyTrustCheckboxConstraints(pressedCheckbox) {
     if (pressedCheckbox === this.myTrustedTrustedCheckboxElement) {
-      console.log('first case!');
       if (
         !this.myTrustedTrustedCheckboxElement.checked &&
         this.allMembersCheckboxElement.checked
@@ -90,7 +102,6 @@ class TrustCheckboxes {
     }
 
     if (pressedCheckbox === this.allMembersCheckboxElement) {
-      console.log('second case!');
       if (
         !this.myTrustedTrustedCheckboxElement.checked &&
         this.allMembersCheckboxElement.checked
@@ -100,12 +111,16 @@ class TrustCheckboxes {
     }
   }
 
-  get isOnchainAccepted() {
-    return this.onchainCheckboxElement.checked;
+  get showOfferToTrusted() {
+    return this.myTrustedCheckboxElement.checked;
   }
 
-  get isLightningAccepted() {
-    return this.lightningCheckboxElement.checked;
+  get showOfferToTrustedTrusted() {
+    return this.myTrustedTrustedCheckboxElement.checked;
+  }
+
+  get showOfferToAllMembers() {
+    return this.allMembersCheckboxElement.checked;
   }
 }
 
@@ -179,6 +194,13 @@ function offersPage() {
   });
 
   btcMethodCheckboxes.render();
+
+  const trustCheckboxes = new TrustCheckboxes({
+    parentElement: document.getElementById('trusted-checkboxes-area'),
+  });
+
+  trustCheckboxes.render();
+
   // -----------
   const navbuttonHome = document.getElementById('navbutton-home');
   const navbuttonOffers = document.getElementById('navbutton-offers');
@@ -201,12 +223,6 @@ function offersPage() {
   );
   const viewMyOffersRoot = document.getElementById('view-my-offers-root');
 
-  const myTrustedCheckbox = document.getElementById('my-trusted-checkbox');
-  const myTrustedTrustedCheckbox = document.getElementById(
-    'my-trusted-trusted-checkbox'
-  );
-  const allMembersCheckbox = document.getElementById('all-members-checkbox');
-
   const bigNotesAcceptedCheckbox = document.getElementById(
     'large-bills-checkbox'
   );
@@ -229,22 +245,6 @@ function offersPage() {
       viewMyOffersRoot.style.display === 'block' ? 'none' : 'block';
   }
 
-  function applyTrustCheckboxConstraints(pressedCheckbox) {
-    if (pressedCheckbox === myTrustedTrustedCheckbox) {
-      console.log('first case!');
-      if (!myTrustedTrustedCheckbox.checked && allMembersCheckbox.checked) {
-        allMembersCheckbox.checked = false;
-      }
-    }
-
-    if (pressedCheckbox === allMembersCheckbox) {
-      console.log('second case!');
-      if (!myTrustedTrustedCheckbox.checked && allMembersCheckbox.checked) {
-        myTrustedTrustedCheckbox.checked = true;
-      }
-    }
-  }
-
   async function publishOffer() {
     const wants = buyOrSellButtonGroup.wants();
 
@@ -254,9 +254,10 @@ function offersPage() {
     const time_availability_details = timeInput.inputText;
     const is_onchain_accepted = btcMethodCheckboxes.isOnchainAccepted;
     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;
+    const show_offer_to_trusted = trustCheckboxes.showOfferToTrusted;
+    const show_offer_to_trusted_trusted =
+      trustCheckboxes.showOfferToTrustedTrusted;
+    const show_offer_to_all_members = trustCheckboxes.showOfferToAllMembers;
     const are_big_notes_accepted = bigNotesAcceptedCheckbox.checked;
 
     const offerDetails = {
@@ -741,14 +742,6 @@ function offersPage() {
     toggleCreateOfferModal();
   });
 
-  myTrustedTrustedCheckbox.addEventListener('click', () => {
-    applyTrustCheckboxConstraints(myTrustedTrustedCheckbox);
-  });
-
-  allMembersCheckbox.addEventListener('click', () => {
-    applyTrustCheckboxConstraints(allMembersCheckbox);
-  });
-
   const myOffers = new MyOffers(ownOffersContainer);
 }
 

src/views/offers.ejs

@@ -53,34 +53,7 @@
           </div>
           <div id="trust-area" class="create-offer-step">
             <h3>¿Quién puede ver la oferta?</h3>
-            <div id="trusted-checboxes-area">
-              <div id="my-trusted-area" class="checkbox-row">
-                <input
-                  type="checkbox"
-                  name="my-trusted"
-                  id="my-trusted-checkbox"
-                  checked
-                  disabled
-                /><label for="my-trusted">Mis confiados</label>
-              </div>
-              <div id="my-trusted-trusted-area" class="checkbox-row">
-                <input
-                  type="checkbox"
-                  name="my-trusted-trusted"
-                  id="my-trusted-trusted-checkbox"
-                  checked
-                /><label for="my-trusted-trusted"
-                  >Los confiados de mis confiados</label
-                >
-              </div>
-              <div id="all-members-area" class="checkbox-row">
-                <input
-                  type="checkbox"
-                  name="all-members"
-                  id="all-members-checkbox"
-                /><label for="all-members">Todos los miembros</label>
-              </div>
-            </div>
+            <div id="trusted-checkboxes-area"></div>
           </div>
           <div id="other-area" class="create-offer-step">
             <h3>Extras</h3>