format
This commit is contained in:
parent
8a6fd5c7e5
commit
37b9722643
1 changed files with 17 additions and 27 deletions
|
|
@ -19,7 +19,6 @@ function readIntFromEurAmountInput() {
|
||||||
return cleanInputNumber;
|
return cleanInputNumber;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function validateAndFormatEurAmountInput() {
|
function validateAndFormatEurAmountInput() {
|
||||||
const cleanInputNumber = readIntFromEurAmountInput();
|
const cleanInputNumber = readIntFromEurAmountInput();
|
||||||
eurAmountInput.classList.remove('input-is-valid', 'input-is-invalid');
|
eurAmountInput.classList.remove('input-is-valid', 'input-is-invalid');
|
||||||
|
|
@ -41,75 +40,72 @@ function updateBtcInput() {
|
||||||
btcAmountInput.value = formattedSatsAmount;
|
btcAmountInput.value = formattedSatsAmount;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
class AmountInput {
|
class AmountInput {
|
||||||
constructor({parentElement, id}) {
|
constructor({ parentElement, id }) {
|
||||||
this.element = null;
|
this.element = null;
|
||||||
this.parentElement = parentElement;
|
this.parentElement = parentElement;
|
||||||
this.id = id;
|
this.id = id;
|
||||||
}
|
}
|
||||||
|
|
||||||
render(){
|
render() {
|
||||||
const amountArea = document.createElement('div');
|
const amountArea = document.createElement('div');
|
||||||
amountArea.id = this.id;
|
amountArea.id = this.id;
|
||||||
|
|
||||||
const eurAmount = document.createElement('div');
|
const eurAmount = document.createElement('div');
|
||||||
eurAmount.id = 'eur-amount';
|
eurAmount.id = 'eur-amount';
|
||||||
eurAmount.className = 'money-amount-input-area';
|
eurAmount.className = 'money-amount-input-area';
|
||||||
|
|
||||||
const eurInput = document.createElement('input');
|
const eurInput = document.createElement('input');
|
||||||
eurInput.id = 'input-eur-amount';
|
eurInput.id = 'input-eur-amount';
|
||||||
eurInput.type = 'text';
|
eurInput.type = 'text';
|
||||||
eurInput.className = 'money-input input-money-amount';
|
eurInput.className = 'money-input input-money-amount';
|
||||||
eurInput.value = '100';
|
eurInput.value = '100';
|
||||||
eurInput.required = true;
|
eurInput.required = true;
|
||||||
|
|
||||||
const eurSymbol = document.createElement('div');
|
const eurSymbol = document.createElement('div');
|
||||||
eurSymbol.id = 'eur-symbol';
|
eurSymbol.id = 'eur-symbol';
|
||||||
eurSymbol.className = 'curr-symbol';
|
eurSymbol.className = 'curr-symbol';
|
||||||
|
|
||||||
const eurCharacter = document.createElement('span');
|
const eurCharacter = document.createElement('span');
|
||||||
eurCharacter.id = 'eur-character';
|
eurCharacter.id = 'eur-character';
|
||||||
eurCharacter.className = 'curr-character';
|
eurCharacter.className = 'curr-character';
|
||||||
eurCharacter.textContent = '€';
|
eurCharacter.textContent = '€';
|
||||||
|
|
||||||
eurSymbol.appendChild(eurCharacter);
|
eurSymbol.appendChild(eurCharacter);
|
||||||
eurAmount.appendChild(eurInput);
|
eurAmount.appendChild(eurInput);
|
||||||
eurAmount.appendChild(eurSymbol);
|
eurAmount.appendChild(eurSymbol);
|
||||||
|
|
||||||
const btcAmount = document.createElement('div');
|
const btcAmount = document.createElement('div');
|
||||||
btcAmount.id = 'btc-amount';
|
btcAmount.id = 'btc-amount';
|
||||||
btcAmount.className = 'money-amount-input-area';
|
btcAmount.className = 'money-amount-input-area';
|
||||||
|
|
||||||
const btcInput = document.createElement('input');
|
const btcInput = document.createElement('input');
|
||||||
btcInput.id = 'input-btc-amount';
|
btcInput.id = 'input-btc-amount';
|
||||||
btcInput.type = 'text';
|
btcInput.type = 'text';
|
||||||
btcInput.className = 'money-input input-money-amount';
|
btcInput.className = 'money-input input-money-amount';
|
||||||
btcInput.disabled = true;
|
btcInput.disabled = true;
|
||||||
|
|
||||||
const satsSymbol = document.createElement('div');
|
const satsSymbol = document.createElement('div');
|
||||||
satsSymbol.id = 'sats-symbol';
|
satsSymbol.id = 'sats-symbol';
|
||||||
satsSymbol.className = 'curr-symbol';
|
satsSymbol.className = 'curr-symbol';
|
||||||
|
|
||||||
const satsCharacter = document.createElement('span');
|
const satsCharacter = document.createElement('span');
|
||||||
satsCharacter.id = 'sats-character';
|
satsCharacter.id = 'sats-character';
|
||||||
satsCharacter.className = 'curr-character';
|
satsCharacter.className = 'curr-character';
|
||||||
satsCharacter.textContent = 'SAT';
|
satsCharacter.textContent = 'SAT';
|
||||||
|
|
||||||
satsSymbol.appendChild(satsCharacter);
|
satsSymbol.appendChild(satsCharacter);
|
||||||
btcAmount.appendChild(btcInput);
|
btcAmount.appendChild(btcInput);
|
||||||
btcAmount.appendChild(satsSymbol);
|
btcAmount.appendChild(satsSymbol);
|
||||||
|
|
||||||
amountArea.appendChild(eurAmount);
|
amountArea.appendChild(eurAmount);
|
||||||
amountArea.appendChild(btcAmount);
|
amountArea.appendChild(btcAmount);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
eurInput.addEventListener('blur', () => {
|
eurInput.addEventListener('blur', () => {
|
||||||
validateAndFormatEurAmountInput();
|
validateAndFormatEurAmountInput();
|
||||||
updateBtcInput();
|
updateBtcInput();
|
||||||
});
|
});
|
||||||
|
|
||||||
eurInput.addEventListener('input', () => {
|
eurInput.addEventListener('input', () => {
|
||||||
eurAmountInput.value = eurAmountInput.value.replace(/[^0-9]/g, '');
|
eurAmountInput.value = eurAmountInput.value.replace(/[^0-9]/g, '');
|
||||||
updateBtcInput();
|
updateBtcInput();
|
||||||
|
|
@ -125,7 +121,7 @@ function offersPage() {
|
||||||
|
|
||||||
const mockPriceProvidingCallback = () => {
|
const mockPriceProvidingCallback = () => {
|
||||||
return Math.floor(Math.random() * (95000 - 70000 + 1) + 70000);
|
return Math.floor(Math.random() * (95000 - 70000 + 1) + 70000);
|
||||||
}
|
};
|
||||||
|
|
||||||
const publishOfferButton = new PublishOfferButton({
|
const publishOfferButton = new PublishOfferButton({
|
||||||
parentElement: document.getElementById('submit-button-area'),
|
parentElement: document.getElementById('submit-button-area'),
|
||||||
|
|
@ -164,11 +160,10 @@ function offersPage() {
|
||||||
priceDisplay.updatePrices();
|
priceDisplay.updatePrices();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
const amountInput = new AmountInput({
|
const amountInput = new AmountInput({
|
||||||
parentElement: document.getElementById('amount-area'),
|
parentElement: document.getElementById('amount-area'),
|
||||||
id: 'amount-area-content'
|
id: 'amount-area-content',
|
||||||
})
|
});
|
||||||
|
|
||||||
amountInput.render();
|
amountInput.render();
|
||||||
// -----------
|
// -----------
|
||||||
|
|
@ -232,9 +227,6 @@ function offersPage() {
|
||||||
viewMyOffersRoot.style.display === 'block' ? 'none' : 'block';
|
viewMyOffersRoot.style.display === 'block' ? 'none' : 'block';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function validateBitcoinMethodCheckboxes(clickedCheckbox) {
|
function validateBitcoinMethodCheckboxes(clickedCheckbox) {
|
||||||
let checkedCount = btcMethodCheckboxes.filter((cb) => cb.checked).length;
|
let checkedCount = btcMethodCheckboxes.filter((cb) => cb.checked).length;
|
||||||
if (checkedCount === 0) {
|
if (checkedCount === 0) {
|
||||||
|
|
@ -754,8 +746,6 @@ function offersPage() {
|
||||||
toggleCreateOfferModal();
|
toggleCreateOfferModal();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
for (const btcMethodCheckbox of btcMethodCheckboxes) {
|
for (const btcMethodCheckbox of btcMethodCheckboxes) {
|
||||||
btcMethodCheckbox.addEventListener('click', () => {
|
btcMethodCheckbox.addEventListener('click', () => {
|
||||||
validateBitcoinMethodCheckboxes(btcMethodCheckbox);
|
validateBitcoinMethodCheckboxes(btcMethodCheckbox);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue