createoffermodal is now one big ass object
This commit is contained in:
parent
a9779c207e
commit
95dd754992
GPG key ID:
883EDBAA726BD96C
2 changed files with 245 additions and 169 deletions
|
|
@ -9,42 +9,152 @@ const BitcoinMethodCheckboxes = require('../components/BitcoinMethodCheckboxes')
|
|||
const TrustCheckboxes = require('../components/TrustCheckboxes');
|
||||
const BigNotesCheckbox = require('../components/BigNotesCheckbox');
|
||||
|
||||
function offersPage() {
|
||||
function toggleOfferCreatedAlert() {
|
||||
offerCreatedPopup.classList.remove('max-size-zero');
|
||||
offerCreatedPopup.classList.add('revealed');
|
||||
setTimeout(() => {
|
||||
offerCreatedPopup.classList.remove('revealed');
|
||||
}, 3000);
|
||||
setTimeout(() => {
|
||||
offerCreatedPopup.classList.add('max-size-zero');
|
||||
}, 4000);
|
||||
}
|
||||
|
||||
class CreateOfferModal {
|
||||
constructor({ parentElement }) {
|
||||
this.element = null;
|
||||
this.parentElement = parentElement;
|
||||
|
||||
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.id = 'create-offer-modal-root';
|
||||
modalRoot.className = 'full-screen-modal-background';
|
||||
|
||||
const modal = document.createElement('div');
|
||||
modal.className = 'full-screen-modal';
|
||||
modal.id = 'create-offer-root';
|
||||
|
||||
const controls = document.createElement('div');
|
||||
controls.id = 'create-offer-controls';
|
||||
|
||||
const title = document.createElement('h2');
|
||||
title.textContent = 'Añade los detalles de tu oferta';
|
||||
|
||||
const sections = [
|
||||
{ id: 'buy-or-sell-area', class: 'create-offer-step', title: '' },
|
||||
{
|
||||
id: 'premium-area',
|
||||
class: 'create-offer-step',
|
||||
title: 'Premium',
|
||||
contentId: 'premium-content-area',
|
||||
},
|
||||
{ id: 'amount-area', class: 'create-offer-step', title: '¿Cuánto?' },
|
||||
{
|
||||
id: 'place-and-time-area',
|
||||
class: 'create-offer-step',
|
||||
title: '¿Dónde y cuándo?',
|
||||
contentId: 'place-and-time-boxes',
|
||||
},
|
||||
{
|
||||
id: 'bitcoin-methods-area',
|
||||
class: 'create-offer-step',
|
||||
title: '¿Cómo se mueve el Bitcoin?',
|
||||
contentId: 'bitcoin-methods-checkboxes',
|
||||
},
|
||||
{
|
||||
id: 'trust-area',
|
||||
class: 'create-offer-step',
|
||||
title: '¿Quién puede ver la oferta?',
|
||||
contentId: 'trusted-checkboxes-area',
|
||||
},
|
||||
{ id: 'other-area', class: 'create-offer-step', title: 'Extras' },
|
||||
];
|
||||
|
||||
controls.appendChild(title);
|
||||
|
||||
sections.forEach((section) => {
|
||||
const div = document.createElement('div');
|
||||
div.id = section.id;
|
||||
div.className = section.class;
|
||||
if (section.title) {
|
||||
const heading = document.createElement('h3');
|
||||
heading.textContent = section.title;
|
||||
div.appendChild(heading);
|
||||
}
|
||||
if (section.contentId) {
|
||||
const contentDiv = document.createElement('div');
|
||||
contentDiv.id = section.contentId;
|
||||
div.appendChild(contentDiv);
|
||||
}
|
||||
controls.appendChild(div);
|
||||
});
|
||||
|
||||
const submitButtonArea = document.createElement('div');
|
||||
submitButtonArea.id = 'submit-button-area';
|
||||
|
||||
const closeButtonArea = document.createElement('div');
|
||||
closeButtonArea.id = 'close-offer-controls-area';
|
||||
const closeButton = document.createElement('button');
|
||||
closeButton.id = 'close-offer';
|
||||
closeButton.className = 'button-secondary button-medium';
|
||||
closeButton.textContent = 'Volver';
|
||||
closeButtonArea.appendChild(closeButton);
|
||||
|
||||
controls.appendChild(submitButtonArea);
|
||||
controls.appendChild(closeButtonArea);
|
||||
|
||||
modal.appendChild(controls);
|
||||
modalRoot.appendChild(modal);
|
||||
|
||||
this.parentElement.appendChild(this.element);
|
||||
|
||||
const createOfferEventBus = new EventTarget();
|
||||
|
||||
const mockPriceProvidingCallback = () => {
|
||||
return Math.floor(Math.random() * (95000 - 70000 + 1) + 70000);
|
||||
};
|
||||
|
||||
const publishOfferButton = new PublishOfferButton({
|
||||
this.publishOfferButton = new PublishOfferButton({
|
||||
parentElement: document.getElementById('submit-button-area'),
|
||||
id: 'button-submit-offer',
|
||||
onClickCallback: async () => {
|
||||
await publishOffer();
|
||||
await myOffers.getOffersFromApi();
|
||||
await myOffers.render();
|
||||
await this.createOffer();
|
||||
//await myOffers.getOffersFromApi();
|
||||
//await myOffers.render();
|
||||
},
|
||||
});
|
||||
publishOfferButton.render();
|
||||
this.publishOfferButton.render();
|
||||
|
||||
const buyOrSellButtonGroup = new BuyOrSellButtonGroup({
|
||||
this.buyOrSellButtonGroup = new BuyOrSellButtonGroup({
|
||||
parentElement: document.getElementById('buy-or-sell-area'),
|
||||
id: 'button-group-buy-or-sell',
|
||||
});
|
||||
buyOrSellButtonGroup.render();
|
||||
this.buyOrSellButtonGroup.render();
|
||||
|
||||
const premiumSelector = new PremiumSelector({
|
||||
this.premiumSelector = new PremiumSelector({
|
||||
parentElement: document.getElementById('premium-content-area'),
|
||||
id: 'premium-selector-area',
|
||||
eventSink: createOfferEventBus,
|
||||
});
|
||||
premiumSelector.render();
|
||||
this.premiumSelector.render();
|
||||
|
||||
const priceDisplay = new PriceDisplay({
|
||||
parentElement: document.getElementById('premium-content-area'),
|
||||
id: 'premium-price-display-area',
|
||||
premiumProvidingCallback: () => {
|
||||
return premiumSelector.getPremium();
|
||||
return this.premiumSelector.getPremium();
|
||||
},
|
||||
priceProvidingCallback: mockPriceProvidingCallback,
|
||||
});
|
||||
|
|
@ -53,44 +163,99 @@ function offersPage() {
|
|||
priceDisplay.updatePrices();
|
||||
});
|
||||
|
||||
const amountInput = new AmountInput({
|
||||
this.amountInput = new AmountInput({
|
||||
parentElement: document.getElementById('amount-area'),
|
||||
id: 'amount-area-content',
|
||||
});
|
||||
|
||||
amountInput.render();
|
||||
this.amountInput.render();
|
||||
|
||||
const placeInput = new PlaceInput({
|
||||
this.placeInput = new PlaceInput({
|
||||
parentElement: document.getElementById('place-and-time-boxes'),
|
||||
id: 'place-input',
|
||||
});
|
||||
|
||||
placeInput.render();
|
||||
this.placeInput.render();
|
||||
|
||||
const timeInput = new TimeInput({
|
||||
this.timeInput = new TimeInput({
|
||||
parentElement: document.getElementById('place-and-time-boxes'),
|
||||
id: 'time-input',
|
||||
});
|
||||
|
||||
timeInput.render();
|
||||
this.timeInput.render();
|
||||
|
||||
const btcMethodCheckboxes = new BitcoinMethodCheckboxes({
|
||||
this.btcMethodCheckboxes = new BitcoinMethodCheckboxes({
|
||||
parentElement: document.getElementById('bitcoin-methods-checkboxes'),
|
||||
});
|
||||
|
||||
btcMethodCheckboxes.render();
|
||||
this.btcMethodCheckboxes.render();
|
||||
|
||||
const trustCheckboxes = new TrustCheckboxes({
|
||||
this.trustCheckboxes = new TrustCheckboxes({
|
||||
parentElement: document.getElementById('trusted-checkboxes-area'),
|
||||
});
|
||||
|
||||
trustCheckboxes.render();
|
||||
this.trustCheckboxes.render();
|
||||
|
||||
const bigNotesCheckbox = new BigNotesCheckbox({
|
||||
this.bigNotesCheckbox = new BigNotesCheckbox({
|
||||
parentElement: document.getElementById('other-area'),
|
||||
});
|
||||
|
||||
bigNotesCheckbox.render();
|
||||
this.bigNotesCheckbox.render();
|
||||
}
|
||||
|
||||
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 fetch('/api/offer', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ offerDetails }),
|
||||
});
|
||||
|
||||
toggleOfferCreatedAlert();
|
||||
|
||||
this.toggle();
|
||||
}
|
||||
}
|
||||
|
||||
function offersPage() {
|
||||
const createOfferModal = new CreateOfferModal({
|
||||
parentElement: document.body,
|
||||
});
|
||||
createOfferModal.render();
|
||||
// -----------
|
||||
const navbuttonHome = document.getElementById('navbutton-home');
|
||||
const navbuttonOffers = document.getElementById('navbutton-offers');
|
||||
|
|
@ -131,59 +296,6 @@ function offersPage() {
|
|||
viewMyOffersRoot.style.display === 'block' ? 'none' : 'block';
|
||||
}
|
||||
|
||||
async function publishOffer() {
|
||||
const wants = buyOrSellButtonGroup.wants();
|
||||
|
||||
const premium = premiumSelector.getPremium();
|
||||
const trade_amount_eur = amountInput.intEurAmount;
|
||||
const location_details = placeInput.inputText;
|
||||
const time_availability_details = timeInput.inputText;
|
||||
const is_onchain_accepted = btcMethodCheckboxes.isOnchainAccepted;
|
||||
const is_lightning_accepted = btcMethodCheckboxes.isLightningAccepted;
|
||||
const show_offer_to_trusted = trustCheckboxes.showOfferToTrusted;
|
||||
const show_offer_to_trusted_trusted =
|
||||
trustCheckboxes.showOfferToTrustedTrusted;
|
||||
const show_offer_to_all_members = trustCheckboxes.showOfferToAllMembers;
|
||||
const are_big_notes_accepted = 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 fetch('/api/offer', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ offerDetails }),
|
||||
});
|
||||
|
||||
toggleOfferCreatedAlert();
|
||||
|
||||
toggleCreateOfferModal();
|
||||
}
|
||||
|
||||
function toggleOfferCreatedAlert() {
|
||||
offerCreatedPopup.classList.remove('max-size-zero');
|
||||
offerCreatedPopup.classList.add('revealed');
|
||||
setTimeout(() => {
|
||||
offerCreatedPopup.classList.remove('revealed');
|
||||
}, 3000);
|
||||
setTimeout(() => {
|
||||
offerCreatedPopup.classList.add('max-size-zero');
|
||||
}, 4000);
|
||||
}
|
||||
|
||||
function toggleOfferDeletedAlert() {
|
||||
offerDeletedPopup.classList.remove('max-size-zero');
|
||||
offerDeletedPopup.classList.add('revealed');
|
||||
|
|
|
|||
|
|
@ -31,42 +31,6 @@
|
|||
<p>Vaya, no hay nada por aquí...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="create-offer-modal-root" class="full-screen-modal-background">
|
||||
<div class="full-screen-modal" id="create-offer-root">
|
||||
<div id="create-offer-controls">
|
||||
<h2>Añade los detalles de tu oferta</h2>
|
||||
<div id="buy-or-sell-area" class="create-offer-step"></div>
|
||||
<div id="premium-area" class="create-offer-step">
|
||||
<h3>Premium</h3>
|
||||
<div id="premium-content-area"></div>
|
||||
</div>
|
||||
<div id="amount-area" class="create-offer-step">
|
||||
<h3>¿Cuánto?</h3>
|
||||
</div>
|
||||
<div id="place-and-time-area" class="create-offer-step">
|
||||
<h3>¿Dónde y cuándo?</h3>
|
||||
<div id="place-and-time-boxes"></div>
|
||||
</div>
|
||||
<div id="bitcoin-methods-area" class="create-offer-step">
|
||||
<h3>¿Cómo se mueve el Bitcoin?</h3>
|
||||
<div id="bitcoin-methods-checkboxes"></div>
|
||||
</div>
|
||||
<div id="trust-area" class="create-offer-step">
|
||||
<h3>¿Quién puede ver la oferta?</h3>
|
||||
<div id="trusted-checkboxes-area"></div>
|
||||
</div>
|
||||
<div id="other-area" class="create-offer-step">
|
||||
<h3>Extras</h3>
|
||||
</div>
|
||||
<div id="submit-button-area"></div>
|
||||
<div id="close-offer-controls-area">
|
||||
<button id="close-offer" class="button-secondary button-medium">
|
||||
Volver
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="offer-created-confirmation"
|
||||
class="top-notification-good max-size-zero"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue