counterweight/secajs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor into its own file

Browse source
This commit is contained in:
counterweight 2025-03-22 17:11:24 +01:00
parent b46087ea6c
commit ac614921a4
Signed by: counterweight
GPG key ID: 883EDBAA726BD96C
2 changed files with 121 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

120
src/front/components/AmountInput.js Normal file
View file

@ -0,0 +1,120 @@
const formatNumberWithSpaces = require('../utils/formatNumbersWithSpaces');
class AmountInput {
constructor({ parentElement, id }) {
this.element = null;
this.parentElement = parentElement;
this.id = id;
this.eurInput = null;
this.btcInput = null;
}
render() {
const amountArea = document.createElement('div');
amountArea.id = this.id;
const eurAmount = document.createElement('div');
eurAmount.id = 'eur-amount';
eurAmount.className = 'money-amount-input-area';
this.eurInput = document.createElement('input');
this.eurInput.id = 'input-eur-amount';
this.eurInput.type = 'text';
this.eurInput.className = 'money-input input-money-amount';
this.eurInput.value = '100';
this.eurInput.required = true;
const eurSymbol = document.createElement('div');
eurSymbol.id = 'eur-symbol';
eurSymbol.className = 'curr-symbol';
const eurCharacter = document.createElement('span');
eurCharacter.id = 'eur-character';
eurCharacter.className = 'curr-character';
eurCharacter.textContent = '€';
eurSymbol.appendChild(eurCharacter);
eurAmount.appendChild(this.eurInput);
eurAmount.appendChild(eurSymbol);
const btcAmount = document.createElement('div');
btcAmount.id = 'btc-amount';
btcAmount.className = 'money-amount-input-area';
this.btcInput = document.createElement('input');
this.btcInput.id = 'input-btc-amount';
this.btcInput.type = 'text';
this.btcInput.className = 'money-input input-money-amount';
this.btcInput.disabled = true;
const satsSymbol = document.createElement('div');
satsSymbol.id = 'sats-symbol';
satsSymbol.className = 'curr-symbol';
const satsCharacter = document.createElement('span');
satsCharacter.id = 'sats-character';
satsCharacter.className = 'curr-character';
satsCharacter.textContent = 'SAT';
satsSymbol.appendChild(satsCharacter);
btcAmount.appendChild(this.btcInput);
btcAmount.appendChild(satsSymbol);
amountArea.appendChild(eurAmount);
amountArea.appendChild(btcAmount);
this.eurInput.addEventListener('blur', () => {
this.validateAndFormatEurAmountInput();
this.updateBtcInput();
});
this.eurInput.addEventListener('input', () => {
this.eurInput.value = this.eurInput.value.replace(/[^0-9]/g, '');
this.updateBtcInput();
});
this.updateBtcInput();
this.element = amountArea;
this.parentElement.appendChild(this.element);
}
get intEurAmount() {
const eurAmountFieldValue = this.eurInput.value;
const regularExpression = /([\d\s]+)/;
const matchResult = eurAmountFieldValue.match(regularExpression);
if (!matchResult) {
return null;
}
const numberString = matchResult[1];
const cleanInputNumber = parseInt(numberString.replace(/\s/gi, ''));
return cleanInputNumber;
}
validateAndFormatEurAmountInput() {
const cleanInputNumber = this.intEurAmount;
this.eurInput.classList.remove('input-is-valid', 'input-is-invalid');
if (cleanInputNumber) {
this.eurInput.value = formatNumberWithSpaces(cleanInputNumber);
this.eurInput.classList.add('input-is-valid');
return;
}
this.eurInput.classList.add('input-is-invalid');
}
updateBtcInput() {
const eurToSatRate = 1021;
const cleanEurAmount = this.intEurAmount;
const satsAmount = cleanEurAmount * eurToSatRate;
const formattedSatsAmount = formatNumberWithSpaces(satsAmount);
this.btcInput.value = formattedSatsAmount;
}
}
module.exports = AmountInput;

119
src/front/pages/offers.js
View file

@ -1,125 +1,8 @@
const formatNumberWithSpaces = require('../utils/formatNumbersWithSpaces');
const PublishOfferButton = require('../components/PublishOfferButton'); const PublishOfferButton = require('../components/PublishOfferButton');
const BuyOrSellButtonGroup = require('../components/BuyOrSellButtonGroup'); const BuyOrSellButtonGroup = require('../components/BuyOrSellButtonGroup');
const PremiumSelector = require('../components/PremiumSelector'); const PremiumSelector = require('../components/PremiumSelector');
const PriceDisplay = require('../components/PriceDisplay'); const PriceDisplay = require('../components/PriceDisplay');
const AmountInput = require('../components/AmountInput');
class AmountInput {
constructor({ parentElement, id }) {
this.element = null;
this.parentElement = parentElement;
this.id = id;
this.eurInput = null;
this.btcInput = null;
}
render() {
const amountArea = document.createElement('div');
amountArea.id = this.id;
const eurAmount = document.createElement('div');
eurAmount.id = 'eur-amount';
eurAmount.className = 'money-amount-input-area';
this.eurInput = document.createElement('input');
this.eurInput.id = 'input-eur-amount';
this.eurInput.type = 'text';
this.eurInput.className = 'money-input input-money-amount';
this.eurInput.value = '100';
this.eurInput.required = true;
const eurSymbol = document.createElement('div');
eurSymbol.id = 'eur-symbol';
eurSymbol.className = 'curr-symbol';
const eurCharacter = document.createElement('span');
eurCharacter.id = 'eur-character';
eurCharacter.className = 'curr-character';
eurCharacter.textContent = '€';
eurSymbol.appendChild(eurCharacter);
eurAmount.appendChild(this.eurInput);
eurAmount.appendChild(eurSymbol);
const btcAmount = document.createElement('div');
btcAmount.id = 'btc-amount';
btcAmount.className = 'money-amount-input-area';
this.btcInput = document.createElement('input');
this.btcInput.id = 'input-btc-amount';
this.btcInput.type = 'text';
this.btcInput.className = 'money-input input-money-amount';
this.btcInput.disabled = true;
const satsSymbol = document.createElement('div');
satsSymbol.id = 'sats-symbol';
satsSymbol.className = 'curr-symbol';
const satsCharacter = document.createElement('span');
satsCharacter.id = 'sats-character';
satsCharacter.className = 'curr-character';
satsCharacter.textContent = 'SAT';
satsSymbol.appendChild(satsCharacter);
btcAmount.appendChild(this.btcInput);
btcAmount.appendChild(satsSymbol);
amountArea.appendChild(eurAmount);
amountArea.appendChild(btcAmount);
this.eurInput.addEventListener('blur', () => {
this.validateAndFormatEurAmountInput();
this.updateBtcInput();
});
this.eurInput.addEventListener('input', () => {
this.eurInput.value = this.eurInput.value.replace(/[^0-9]/g, '');
this.updateBtcInput();
});
this.updateBtcInput();
this.element = amountArea;
this.parentElement.appendChild(this.element);
}
get intEurAmount() {
const eurAmountFieldValue = this.eurInput.value;
const regularExpression = /([\d\s]+)/;
const matchResult = eurAmountFieldValue.match(regularExpression);
if (!matchResult) {
return null;
}
const numberString = matchResult[1];
const cleanInputNumber = parseInt(numberString.replace(/\s/gi, ''));
return cleanInputNumber;
}
validateAndFormatEurAmountInput() {
const cleanInputNumber = this.intEurAmount;
this.eurInput.classList.remove('input-is-valid', 'input-is-invalid');
if (cleanInputNumber) {
this.eurInput.value = formatNumberWithSpaces(cleanInputNumber);
this.eurInput.classList.add('input-is-valid');
return;
}
this.eurInput.classList.add('input-is-invalid');
}
updateBtcInput() {
const eurToSatRate = 1021;
const cleanEurAmount = this.intEurAmount;
const satsAmount = cleanEurAmount * eurToSatRate;
const formattedSatsAmount = formatNumberWithSpaces(satsAmount);
this.btcInput.value = formattedSatsAmount;
}
}
function offersPage() { function offersPage() {
const createOfferEventBus = new EventTarget(); const createOfferEventBus = new EventTarget();