move to component file
This commit is contained in:
parent
d836c67c58
commit
1bd4aa40e6
GPG key ID:
883EDBAA726BD96C
2 changed files with 240 additions and 237 deletions
239
src/front/components/CreateOfferModal.js
Normal file
239
src/front/components/CreateOfferModal.js
Normal 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;
|
||||
|
|
@ -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 CreateOfferModal = require('../components/CreateOfferModal');
|
||||
|
||||
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() {
|
||||
const offerCreatedPopup = new PopupNotification({
|
||||
parentElement: document.body,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue