diff --git a/src/front/components/BitcoinMethodCheckboxes.js b/src/front/components/BitcoinMethodCheckboxes.js new file mode 100644 index 0000000..01c0743 --- /dev/null +++ b/src/front/components/BitcoinMethodCheckboxes.js @@ -0,0 +1,78 @@ +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; + } +} + +module.exports = BitcoinMethodCheckboxes; diff --git a/src/front/pages/offers.js b/src/front/pages/offers.js index d69b12f..3a2bd0b 100644 --- a/src/front/pages/offers.js +++ b/src/front/pages/offers.js @@ -5,83 +5,7 @@ const PriceDisplay = require('../components/PriceDisplay'); 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; - } -} +const BitcoinMethodCheckboxes = require('../components/BitcoinMethodCheckboxes'); function offersPage() { const createOfferEventBus = new EventTarget();