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();