move to separate file

This commit is contained in:
Pablo Martin 2025-03-25 16:14:18 +01:00
parent 9bdd2aa23d
commit 754c3cf02e
2 changed files with 119 additions and 117 deletions

View file

@ -0,0 +1,118 @@
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 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 checkboxDetails of checkboxesDetails) {
this[checkboxDetails.containerProperty] = this.buildCheckbox({
id: checkboxDetails.id,
label: checkboxDetails.label,
});
this[checkboxDetails.checkboxProperty] =
this[checkboxDetails.containerProperty].querySelector('input');
this[checkboxDetails.checkboxProperty].addEventListener('click', () => {
this.applyTrustCheckboxConstraints(
this[checkboxDetails.checkboxProperty]
);
});
this[checkboxDetails.checkboxProperty].checked =
checkboxDetails.defaultChecked;
this[checkboxDetails.checkboxProperty].disabled =
checkboxDetails.isDisabled;
this.parentElement.appendChild(this[checkboxDetails.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) {
if (
!this.myTrustedTrustedCheckboxElement.checked &&
this.allMembersCheckboxElement.checked
) {
this.allMembersCheckboxElement.checked = false;
}
}
if (pressedCheckbox === this.allMembersCheckboxElement) {
if (
!this.myTrustedTrustedCheckboxElement.checked &&
this.allMembersCheckboxElement.checked
) {
this.myTrustedTrustedCheckboxElement.checked = true;
}
}
}
get showOfferToTrusted() {
return this.myTrustedCheckboxElement.checked;
}
get showOfferToTrustedTrusted() {
return this.myTrustedTrustedCheckboxElement.checked;
}
get showOfferToAllMembers() {
return this.allMembersCheckboxElement.checked;
}
}
module.exports = TrustCheckboxes;

View file

@ -6,123 +6,7 @@ const AmountInput = require('../components/AmountInput');
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 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 checkboxDetails of checkboxesDetails) {
this[checkboxDetails.containerProperty] = this.buildCheckbox({
id: checkboxDetails.id,
label: checkboxDetails.label,
});
this[checkboxDetails.checkboxProperty] =
this[checkboxDetails.containerProperty].querySelector('input');
this[checkboxDetails.checkboxProperty].addEventListener('click', () => {
this.applyTrustCheckboxConstraints(
this[checkboxDetails.checkboxProperty]
);
});
this[checkboxDetails.checkboxProperty].checked =
checkboxDetails.defaultChecked;
this[checkboxDetails.checkboxProperty].disabled =
checkboxDetails.isDisabled;
this.parentElement.appendChild(this[checkboxDetails.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) {
if (
!this.myTrustedTrustedCheckboxElement.checked &&
this.allMembersCheckboxElement.checked
) {
this.allMembersCheckboxElement.checked = false;
}
}
if (pressedCheckbox === this.allMembersCheckboxElement) {
if (
!this.myTrustedTrustedCheckboxElement.checked &&
this.allMembersCheckboxElement.checked
) {
this.myTrustedTrustedCheckboxElement.checked = true;
}
}
}
get showOfferToTrusted() {
return this.myTrustedCheckboxElement.checked;
}
get showOfferToTrustedTrusted() {
return this.myTrustedTrustedCheckboxElement.checked;
}
get showOfferToAllMembers() {
return this.allMembersCheckboxElement.checked;
}
}
const TrustCheckboxes = require('../components/TrustCheckboxes');
function offersPage() {
const createOfferEventBus = new EventTarget();