move to component file

This commit is contained in:
counterweight 2025-04-10 08:58:51 +02:00
parent d836c67c58
commit 1bd4aa40e6
Signed by: counterweight
GPG key ID: 883EDBAA726BD96C
2 changed files with 240 additions and 237 deletions

View file

@ -0,0 +1,239 @@
const PublishOfferButton = require('./PublishOfferButton');
const BuyOrSellButtonGroup = require('./BuyOrSellButtonGroup');
const PremiumSelector = require('./PremiumSelector');
const PriceDisplay = require('./PriceDisplay');
const AmountInput = require('./AmountInput');
const PlaceInput = require('./PlaceInput');
const TimeInput = require('./TimeInput');
const BitcoinMethodCheckboxes = require('./BitcoinMethodCheckboxes');
const TrustCheckboxes = require('./TrustCheckboxes');
const BigNotesCheckbox = require('./BigNotesCheckbox');
const CloseModalButton = require('./CloseModalButton');
class CreateOfferModal {
constructor({ parentElement, onCreationCallback, offerService }) {
this.element = null;
this.parentElement = parentElement;
this.onCreationCallback = onCreationCallback;
this.offerService = offerService;
this.publishOfferButton = null;
this.buyOrSellButtonGroup = null;
this.premiumSelector = null;
this.amountInput = null;
this.placeInput = null;
this.timeInput = null;
this.btcMethodCheckboxes = null;
this.trustCheckboxes = null;
this.bigNotesCheckbox = null;
}
render() {
const modalRoot = document.createElement('div');
this.element = modalRoot;
modalRoot.className = 'full-screen-modal-background';
const modal = document.createElement('div');
modal.className = 'full-screen-modal';
const controls = document.createElement('div');
controls.className = 'create-offer-controls';
const title = document.createElement('h2');
title.textContent = 'Añade los detalles de tu oferta';
controls.appendChild(title);
const buyOrSellDiv = document.createElement('div');
buyOrSellDiv.className = 'create-offer-step';
this.buyOrSellButtonGroup = new BuyOrSellButtonGroup({
parentElement: buyOrSellDiv,
});
this.buyOrSellButtonGroup.render();
controls.appendChild(buyOrSellDiv);
const premiumDiv = document.createElement('div');
premiumDiv.classList = 'premium-area';
premiumDiv.className = 'create-offer-step';
const premiumHeading = document.createElement('h3');
premiumHeading.textContent = 'Premium';
premiumDiv.appendChild(premiumHeading);
const premiumContentDiv = document.createElement('div');
premiumContentDiv.classList = 'premium-content-area';
premiumDiv.appendChild(premiumContentDiv);
controls.appendChild(premiumDiv);
const createOfferEventBus = new EventTarget();
const mockPriceProvidingCallback = () => {
return Math.floor(Math.random() * (95000 - 70000 + 1) + 70000);
};
this.premiumSelector = new PremiumSelector({
parentElement: premiumContentDiv,
eventSink: createOfferEventBus,
});
this.premiumSelector.render();
const priceDisplay = new PriceDisplay({
parentElement: premiumContentDiv,
id: 'premium-price-display-area',
premiumProvidingCallback: () => {
return this.premiumSelector.getPremium();
},
priceProvidingCallback: mockPriceProvidingCallback,
});
priceDisplay.render();
createOfferEventBus.addEventListener('premium-changed', () => {
priceDisplay.updatePrices();
});
const amountDiv = document.createElement('div');
amountDiv.className = 'create-offer-step';
const amountHeading = document.createElement('h3');
amountHeading.textContent = '¿Cuánto?';
amountDiv.appendChild(amountHeading);
controls.appendChild(amountDiv);
this.amountInput = new AmountInput({
parentElement: amountDiv,
});
this.amountInput.render();
const placeTimeDiv = document.createElement('div');
placeTimeDiv.className = 'create-offer-step';
const placeTimeHeading = document.createElement('h3');
placeTimeHeading.textContent = '¿Dónde y cuándo?';
placeTimeDiv.appendChild(placeTimeHeading);
const placeTimeContentDiv = document.createElement('div');
placeTimeDiv.appendChild(placeTimeContentDiv);
controls.appendChild(placeTimeDiv);
this.placeInput = new PlaceInput({
parentElement: placeTimeContentDiv,
});
this.placeInput.render();
this.timeInput = new TimeInput({
parentElement: placeTimeContentDiv,
});
this.timeInput.render();
const bitcoinMethodsDiv = document.createElement('div');
bitcoinMethodsDiv.className = 'create-offer-step';
const bitcoinMethodsHeading = document.createElement('h3');
bitcoinMethodsHeading.textContent = '¿Cómo se mueve el Bitcoin?';
bitcoinMethodsDiv.appendChild(bitcoinMethodsHeading);
const bitcoinMethodsContentDiv = document.createElement('div');
bitcoinMethodsDiv.appendChild(bitcoinMethodsContentDiv);
controls.appendChild(bitcoinMethodsDiv);
this.btcMethodCheckboxes = new BitcoinMethodCheckboxes({
parentElement: bitcoinMethodsContentDiv,
});
this.btcMethodCheckboxes.render();
const trustDiv = document.createElement('div');
trustDiv.className = 'create-offer-step';
const trustHeading = document.createElement('h3');
trustHeading.textContent = '¿Quién puede ver la oferta?';
trustDiv.appendChild(trustHeading);
const trustContentDiv = document.createElement('div');
trustDiv.appendChild(trustContentDiv);
controls.appendChild(trustDiv);
this.trustCheckboxes = new TrustCheckboxes({
parentElement: trustContentDiv,
});
this.trustCheckboxes.render();
const otherDiv = document.createElement('div');
otherDiv.className = 'create-offer-step';
const otherHeading = document.createElement('h3');
otherHeading.textContent = 'Extras';
otherDiv.appendChild(otherHeading);
controls.appendChild(otherDiv);
this.bigNotesCheckbox = new BigNotesCheckbox({
parentElement: otherDiv,
});
this.bigNotesCheckbox.render();
//Continue moving components up here
const submitButtonArea = document.createElement('div');
submitButtonArea.classList.add('submit-button-area');
this.publishOfferButton = new PublishOfferButton({
parentElement: submitButtonArea,
id: 'button-submit-offer',
onClickCallback: async () => {
await this.createOffer();
await this.onCreationCallback();
this.toggle();
},
});
this.publishOfferButton.render();
const closeButtonArea = document.createElement('div');
closeButtonArea.className = 'close-offer-controls-area';
const closeButton = new CloseModalButton({
parentElement: closeButtonArea,
onClickCallback: () => {
this.toggle();
},
});
closeButton.render();
controls.appendChild(submitButtonArea);
controls.appendChild(closeButtonArea);
modal.appendChild(controls);
modalRoot.appendChild(modal);
this.parentElement.appendChild(this.element);
}
toggle() {
this.element.classList.toggle('shown');
}
async createOffer() {
const wants = this.buyOrSellButtonGroup.wants();
const premium = this.premiumSelector.getPremium();
const trade_amount_eur = this.amountInput.intEurAmount;
const location_details = this.placeInput.inputText;
const time_availability_details = this.timeInput.inputText;
const is_onchain_accepted = this.btcMethodCheckboxes.isOnchainAccepted;
const is_lightning_accepted = this.btcMethodCheckboxes.isLightningAccepted;
const show_offer_to_trusted = this.trustCheckboxes.showOfferToTrusted;
const show_offer_to_trusted_trusted =
this.trustCheckboxes.showOfferToTrustedTrusted;
const show_offer_to_all_members =
this.trustCheckboxes.showOfferToAllMembers;
const are_big_notes_accepted = this.bigNotesCheckbox.areBigNotesAccepted;
const offerDetails = {
wants,
premium,
trade_amount_eur,
location_details,
time_availability_details,
is_onchain_accepted,
is_lightning_accepted,
show_offer_to_trusted,
show_offer_to_trusted_trusted,
show_offer_to_all_members,
are_big_notes_accepted,
};
await this.offerService.createOffer(offerDetails);
}
}
module.exports = CreateOfferModal;

View file

@ -1,244 +1,8 @@
const PublishOfferButton = require('../components/PublishOfferButton');
const BuyOrSellButtonGroup = require('../components/BuyOrSellButtonGroup');
const PremiumSelector = require('../components/PremiumSelector');
const PriceDisplay = require('../components/PriceDisplay');
const AmountInput = require('../components/AmountInput');
const PlaceInput = require('../components/PlaceInput');
const TimeInput = require('../components/TimeInput');
const BitcoinMethodCheckboxes = require('../components/BitcoinMethodCheckboxes');
const TrustCheckboxes = require('../components/TrustCheckboxes');
const BigNotesCheckbox = require('../components/BigNotesCheckbox');
const CloseModalButton = require('../components/CloseModalButton');
const PopupNotification = require('../components/PopupNotification'); const PopupNotification = require('../components/PopupNotification');
const CreateOfferModal = require('../components/CreateOfferModal');
const offerService = require('../services/offerService'); const offerService = require('../services/offerService');
class CreateOfferModal {
constructor({ parentElement, onCreationCallback, offerService }) {
this.element = null;
this.parentElement = parentElement;
this.onCreationCallback = onCreationCallback;
this.offerService = offerService;
this.publishOfferButton = null;
this.buyOrSellButtonGroup = null;
this.premiumSelector = null;
this.amountInput = null;
this.placeInput = null;
this.timeInput = null;
this.btcMethodCheckboxes = null;
this.trustCheckboxes = null;
this.bigNotesCheckbox = null;
}
render() {
const modalRoot = document.createElement('div');
this.element = modalRoot;
modalRoot.className = 'full-screen-modal-background';
const modal = document.createElement('div');
modal.className = 'full-screen-modal';
const controls = document.createElement('div');
controls.className = 'create-offer-controls';
const title = document.createElement('h2');
title.textContent = 'Añade los detalles de tu oferta';
controls.appendChild(title);
const buyOrSellDiv = document.createElement('div');
buyOrSellDiv.className = 'create-offer-step';
this.buyOrSellButtonGroup = new BuyOrSellButtonGroup({
parentElement: buyOrSellDiv,
});
this.buyOrSellButtonGroup.render();
controls.appendChild(buyOrSellDiv);
const premiumDiv = document.createElement('div');
premiumDiv.classList = 'premium-area';
premiumDiv.className = 'create-offer-step';
const premiumHeading = document.createElement('h3');
premiumHeading.textContent = 'Premium';
premiumDiv.appendChild(premiumHeading);
const premiumContentDiv = document.createElement('div');
premiumContentDiv.classList = 'premium-content-area';
premiumDiv.appendChild(premiumContentDiv);
controls.appendChild(premiumDiv);
const createOfferEventBus = new EventTarget();
const mockPriceProvidingCallback = () => {
return Math.floor(Math.random() * (95000 - 70000 + 1) + 70000);
};
this.premiumSelector = new PremiumSelector({
parentElement: premiumContentDiv,
eventSink: createOfferEventBus,
});
this.premiumSelector.render();
const priceDisplay = new PriceDisplay({
parentElement: premiumContentDiv,
id: 'premium-price-display-area',
premiumProvidingCallback: () => {
return this.premiumSelector.getPremium();
},
priceProvidingCallback: mockPriceProvidingCallback,
});
priceDisplay.render();
createOfferEventBus.addEventListener('premium-changed', () => {
priceDisplay.updatePrices();
});
const amountDiv = document.createElement('div');
amountDiv.className = 'create-offer-step';
const amountHeading = document.createElement('h3');
amountHeading.textContent = '¿Cuánto?';
amountDiv.appendChild(amountHeading);
controls.appendChild(amountDiv);
this.amountInput = new AmountInput({
parentElement: amountDiv,
});
this.amountInput.render();
const placeTimeDiv = document.createElement('div');
placeTimeDiv.className = 'create-offer-step';
const placeTimeHeading = document.createElement('h3');
placeTimeHeading.textContent = '¿Dónde y cuándo?';
placeTimeDiv.appendChild(placeTimeHeading);
const placeTimeContentDiv = document.createElement('div');
placeTimeDiv.appendChild(placeTimeContentDiv);
controls.appendChild(placeTimeDiv);
this.placeInput = new PlaceInput({
parentElement: placeTimeContentDiv,
});
this.placeInput.render();
this.timeInput = new TimeInput({
parentElement: placeTimeContentDiv,
});
this.timeInput.render();
const bitcoinMethodsDiv = document.createElement('div');
bitcoinMethodsDiv.className = 'create-offer-step';
const bitcoinMethodsHeading = document.createElement('h3');
bitcoinMethodsHeading.textContent = '¿Cómo se mueve el Bitcoin?';
bitcoinMethodsDiv.appendChild(bitcoinMethodsHeading);
const bitcoinMethodsContentDiv = document.createElement('div');
bitcoinMethodsDiv.appendChild(bitcoinMethodsContentDiv);
controls.appendChild(bitcoinMethodsDiv);
this.btcMethodCheckboxes = new BitcoinMethodCheckboxes({
parentElement: bitcoinMethodsContentDiv,
});
this.btcMethodCheckboxes.render();
const trustDiv = document.createElement('div');
trustDiv.className = 'create-offer-step';
const trustHeading = document.createElement('h3');
trustHeading.textContent = '¿Quién puede ver la oferta?';
trustDiv.appendChild(trustHeading);
const trustContentDiv = document.createElement('div');
trustDiv.appendChild(trustContentDiv);
controls.appendChild(trustDiv);
this.trustCheckboxes = new TrustCheckboxes({
parentElement: trustContentDiv,
});
this.trustCheckboxes.render();
const otherDiv = document.createElement('div');
otherDiv.className = 'create-offer-step';
const otherHeading = document.createElement('h3');
otherHeading.textContent = 'Extras';
otherDiv.appendChild(otherHeading);
controls.appendChild(otherDiv);
this.bigNotesCheckbox = new BigNotesCheckbox({
parentElement: otherDiv,
});
this.bigNotesCheckbox.render();
//Continue moving components up here
const submitButtonArea = document.createElement('div');
submitButtonArea.classList.add('submit-button-area');
this.publishOfferButton = new PublishOfferButton({
parentElement: submitButtonArea,
id: 'button-submit-offer',
onClickCallback: async () => {
await this.createOffer();
await this.onCreationCallback();
this.toggle();
},
});
this.publishOfferButton.render();
const closeButtonArea = document.createElement('div');
closeButtonArea.className = 'close-offer-controls-area';
const closeButton = new CloseModalButton({
parentElement: closeButtonArea,
onClickCallback: () => {
this.toggle();
},
});
closeButton.render();
controls.appendChild(submitButtonArea);
controls.appendChild(closeButtonArea);
modal.appendChild(controls);
modalRoot.appendChild(modal);
this.parentElement.appendChild(this.element);
}
toggle() {
this.element.classList.toggle('shown');
}
async createOffer() {
const wants = this.buyOrSellButtonGroup.wants();
const premium = this.premiumSelector.getPremium();
const trade_amount_eur = this.amountInput.intEurAmount;
const location_details = this.placeInput.inputText;
const time_availability_details = this.timeInput.inputText;
const is_onchain_accepted = this.btcMethodCheckboxes.isOnchainAccepted;
const is_lightning_accepted = this.btcMethodCheckboxes.isLightningAccepted;
const show_offer_to_trusted = this.trustCheckboxes.showOfferToTrusted;
const show_offer_to_trusted_trusted =
this.trustCheckboxes.showOfferToTrustedTrusted;
const show_offer_to_all_members =
this.trustCheckboxes.showOfferToAllMembers;
const are_big_notes_accepted = this.bigNotesCheckbox.areBigNotesAccepted;
const offerDetails = {
wants,
premium,
trade_amount_eur,
location_details,
time_availability_details,
is_onchain_accepted,
is_lightning_accepted,
show_offer_to_trusted,
show_offer_to_trusted_trusted,
show_offer_to_all_members,
are_big_notes_accepted,
};
await this.offerService.createOffer(offerDetails);
}
}
function offersPage() { function offersPage() {
const offerCreatedPopup = new PopupNotification({ const offerCreatedPopup = new PopupNotification({
parentElement: document.body, parentElement: document.body,