wip

src/front/pages/offers.js

@@ -7,6 +7,108 @@ const PlaceInput = require('../components/PlaceInput');
 const TimeInput = require('../components/TimeInput');
 const BitcoinMethodCheckboxes = require('../components/BitcoinMethodCheckboxes');
 
+class TrustCheckboxes {
+  constructor({ parentElement }) {
+    this.myTrustedContainer = null;
+    this.myTrustedCheckboxElement = null;
+    this.myTrustedTrustedContainer = null;
+    this.myTrustedTrustedCheckboxElement = null;
+    this.allMembersContainer = null;
+    this.allMembersCheckboxElement = null;
+    this.parentElement = parentElement;
+  }
+
+  render() {
+    const labelsAndVars = [
+      {
+        id: 'my-trusted',
+        label: 'Mis confiados',
+        containerProperty: 'myTrustedContainer',
+        checkboxProperty: 'myTrustedCheckboxElement',
+      },
+      {
+        id: 'my-trusted-trusted',
+        label: 'Los confiados de mis confiados',
+        containerProperty: 'myTrustedTrustedContainer',
+        checkboxProperty: 'myTrustedTrustedCheckboxElement',
+      },
+      {
+        id: 'all-members',
+        label: 'Todos los miembros',
+        containerProperty: 'allMembersContainer',
+        checkboxProperty: 'allMembersCheckboxElement',
+      },
+    ];
+
+    for (const labelAndVar of labelsAndVars) {
+      this[labelAndVar.containerProperty] = this.buildCheckbox({
+        id: labelAndVar.id,
+        label: labelAndVar.label,
+      });
+
+      this[labelAndVar.checkboxProperty] =
+        this[labelAndVar.containerProperty].querySelector('input');
+
+      this[labelAndVar.checkboxProperty].addEventListener('click', () => {
+        this.applyTrustCheckboxConstraints(this[labelAndVar.checkboxProperty]);
+      });
+
+      this.parentElement.appendChild(this[labelAndVar.containerProperty]);
+    }
+  }
+
+  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;
+  }
+
+  applyTrustCheckboxConstraints(pressedCheckbox) {
+    if (pressedCheckbox === this.myTrustedTrustedCheckboxElement) {
+      console.log('first case!');
+      if (
+        !this.myTrustedTrustedCheckboxElement.checked &&
+        this.allMembersCheckboxElement.checked
+      ) {
+        this.allMembersCheckboxElement.checked = false;
+      }
+    }
+
+    if (pressedCheckbox === this.allMembersCheckboxElement) {
+      console.log('second case!');
+      if (
+        !this.myTrustedTrustedCheckboxElement.checked &&
+        this.allMembersCheckboxElement.checked
+      ) {
+        this.myTrustedTrustedCheckboxElement.checked = true;
+      }
+    }
+  }
+
+  get isOnchainAccepted() {
+    return this.onchainCheckboxElement.checked;
+  }
+
+  get isLightningAccepted() {
+    return this.lightningCheckboxElement.checked;
+  }
+}
+
 function offersPage() {
   const createOfferEventBus = new EventTarget();
 

src/views/offers.ejs

@@ -49,36 +49,37 @@
           </div>
           <div id="bitcoin-methods-area" class="create-offer-step">
             <h3>¿Cómo se mueve el Bitcoin?</h3>
-            <div id="bitcoin-methods-checkboxes">
+            <div id="bitcoin-methods-checkboxes"></div>
-            </div>
           </div>
           <div id="trust-area" class="create-offer-step">
             <h3>¿Quién puede ver la oferta?</h3>
-            <div id="my-trusted-area" class="checkbox-row">
+            <div id="trusted-checboxes-area">
-              <input
+              <div id="my-trusted-area" class="checkbox-row">
-                type="checkbox"
+                <input
-                name="my-trusted"
+                  type="checkbox"
-                id="my-trusted-checkbox"
+                  name="my-trusted"
-                checked
+                  id="my-trusted-checkbox"
-                disabled
+                  checked
-              /><label for="my-trusted">Mis confiados</label>
+                  disabled
-            </div>
+                /><label for="my-trusted">Mis confiados</label>
-            <div id="my-trusted-trusted-area" class="checkbox-row">
+              </div>
-              <input
+              <div id="my-trusted-trusted-area" class="checkbox-row">
-                type="checkbox"
+                <input
-                name="my-trusted-trusted"
+                  type="checkbox"
-                id="my-trusted-trusted-checkbox"
+                  name="my-trusted-trusted"
-                checked
+                  id="my-trusted-trusted-checkbox"
-              /><label for="my-trusted-trusted"
+                  checked
-                >Los confiados de mis confiados</label
+                /><label for="my-trusted-trusted"
-              >
+                  >Los confiados de mis confiados</label
-            </div>
+                >
-            <div id="all-members-area" class="checkbox-row">
+              </div>
-              <input
+              <div id="all-members-area" class="checkbox-row">
-                type="checkbox"
+                <input
-                name="all-members"
+                  type="checkbox"
-                id="all-members-checkbox"
+                  name="all-members"
-              /><label for="all-members">Todos los miembros</label>
+                  id="all-members-checkbox"
+                /><label for="all-members">Todos los miembros</label>
+              </div>
             </div>
           </div>
           <div id="other-area" class="create-offer-step">